Rooba
/
spaCy
mirror of https://github.com/explosion/spaCy.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Marcus Blättermann 2023-01-25 11:46:43 +01:00 committed by GitHub
parent 3062fae2ca
commit 0298b1a863
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/components/juniper.js
View File

@ -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)' },

11
website/src/styles/layout.sass
View File

@ -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)