mirror of
https://github.com/explosion/spaCy.git
synced 2024-12-25 17:36:30 +03:00
WEB-28 Increase contrast of grey text (#12178)
* Use transparent colors to increase contrast on darker backgrounds * Increase color contrast of grey text
This commit is contained in:
parent
3062fae2ca
commit
0298b1a863
|
@ -12,17 +12,17 @@ const spacyTheme = createTheme({
|
||||||
theme: 'dark',
|
theme: 'dark',
|
||||||
settings: {
|
settings: {
|
||||||
background: 'var(--color-front)',
|
background: 'var(--color-front)',
|
||||||
foreground: 'var(--color-subtle)',
|
foreground: 'var(--color-subtle-on-dark)',
|
||||||
caret: 'var(--color-theme-dark)',
|
caret: 'var(--color-theme-dark)',
|
||||||
selection: 'var(--color-theme-dark)',
|
selection: 'var(--color-theme-dark)',
|
||||||
selectionMatch: 'var(--color-theme-dark)',
|
selectionMatch: 'var(--color-theme-dark)',
|
||||||
gutterBackground: 'var(--color-front)',
|
gutterBackground: 'var(--color-front)',
|
||||||
gutterForeground: 'var(--color-subtle)',
|
gutterForeground: 'var(--color-subtle-on-dark)',
|
||||||
fontFamily: 'var(--font-code)',
|
fontFamily: 'var(--font-code)',
|
||||||
},
|
},
|
||||||
styles: [
|
styles: [
|
||||||
{ tag: t.comment, color: 'var(--syntax-comment)' },
|
{ tag: t.comment, color: 'var(--syntax-comment)' },
|
||||||
{ tag: t.variableName, color: 'var(--color-subtle)' },
|
{ tag: t.variableName, color: 'var(--color-subtle-on-dark)' },
|
||||||
{ tag: [t.string, t.special(t.brace)], color: '#fff' },
|
{ tag: [t.string, t.special(t.brace)], color: '#fff' },
|
||||||
{ tag: t.number, color: 'var(--syntax-number)' },
|
{ tag: t.number, color: 'var(--syntax-number)' },
|
||||||
{ tag: t.string, color: 'var(--syntax-selector)' },
|
{ tag: t.string, color: 'var(--syntax-selector)' },
|
||||||
|
|
|
@ -65,9 +65,10 @@
|
||||||
--color-dark: hsl(214, 15%, 32%)
|
--color-dark: hsl(214, 15%, 32%)
|
||||||
--color-dark-secondary: hsl(214, 14%, 22%)
|
--color-dark-secondary: hsl(214, 14%, 22%)
|
||||||
--color-subtle-opaque: hsla(0, 0%, 96%, 0.56)
|
--color-subtle-opaque: hsla(0, 0%, 96%, 0.56)
|
||||||
--color-subtle: hsl(0, 0%, 87%)
|
--color-subtle: hsla(0, 0%, 0%, 0.13)
|
||||||
--color-subtle-light: hsl(0, 0%, 96%)
|
--color-subtle-light: hsla(0, 0%, 0%, 0.04)
|
||||||
--color-subtle-dark: hsl(162, 5%, 60%)
|
--color-subtle-dark: hsla(162, 5%, 0%, 0.55)
|
||||||
|
--color-subtle-on-dark: hsla(0, 0%, 100%, 0.87)
|
||||||
|
|
||||||
--color-green-medium: hsl(108, 66%, 63%)
|
--color-green-medium: hsl(108, 66%, 63%)
|
||||||
--color-green-transparent: hsla(108, 66%, 63%, 0.12)
|
--color-green-transparent: hsla(108, 66%, 63%, 0.12)
|
||||||
|
@ -387,7 +388,7 @@ body [id]:target
|
||||||
|
|
||||||
[class*="language-bash"] .token
|
[class*="language-bash"] .token
|
||||||
&.function
|
&.function
|
||||||
color: var(--color-subtle)
|
color: var(--color-subtle-on-dark)
|
||||||
|
|
||||||
&.operator, &.variable
|
&.operator, &.variable
|
||||||
color: var(--syntax-comment)
|
color: var(--syntax-comment)
|
||||||
|
@ -397,7 +398,7 @@ body [id]:target
|
||||||
color: var(--syntax-comment)
|
color: var(--syntax-comment)
|
||||||
|
|
||||||
.token
|
.token
|
||||||
color: var(--color-subtle)
|
color: var(--color-subtle-on-dark)
|
||||||
|
|
||||||
.gatsby-highlight-code-line
|
.gatsby-highlight-code-line
|
||||||
background-color: var(--color-dark-secondary)
|
background-color: var(--color-dark-secondary)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user