Increase contrast of text and theme color (#12165)

This commit is contained in:
Marcus Blättermann 2023-01-24 13:55:20 +01:00 committed by GitHub
parent a7d6a62f7c
commit c9beb47ab7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 48 additions and 45 deletions

View File

@ -14,8 +14,8 @@ const spacyTheme = createTheme({
background: 'var(--color-front)',
foreground: 'var(--color-subtle)',
caret: 'var(--color-theme-dark)',
selection: 'var(--color-theme)',
selectionMatch: 'var(--color-theme)',
selection: 'var(--color-theme-dark)',
selectionMatch: 'var(--color-theme-dark)',
gutterBackground: 'var(--color-front)',
gutterForeground: 'var(--color-subtle)',
fontFamily: 'var(--font-code)',

View File

@ -31,7 +31,7 @@
width: $width
height: $width
flex: 0 0 $width
background: var(--color-theme)
background: var(--color-theme-dark)
color: var(--color-back)
border-radius: 50%
padding: 0.35rem

View File

@ -10,7 +10,7 @@
padding: 1rem
box-shadow: var(--box-shadow)
border-top: 2px solid
color: var(--color-theme)
color: var(--color-theme-dark)
.warning
--alert-bg: var(--color-yellow-light)

View File

@ -2,7 +2,7 @@
display: inline-block
padding: 0.65rem 1.1rem 0.825rem
margin-bottom: 1px
border: 2px solid var(--color-theme)
border: 2px solid var(--color-theme-dark)
border-radius: 2em
text-align: center
transition: background-color, color 0.25s ease
@ -18,7 +18,7 @@
padding: 0.8em 1.1em 1em
.primary
background: var(--color-theme)
background: var(--color-theme-dark)
color: var(--color-back)
&:hover
@ -27,7 +27,7 @@
.secondary
background: var(--color-back)
color: var(--color-theme)
color: var(--color-theme-dark)
&:hover
color: var(--color-theme-dark)

View File

@ -152,7 +152,7 @@
.juniper-button
transition: background-color 0.15s ease
background: var(--color-theme)
background: var(--color-theme-dark)
margin: 0.5rem 0 1rem 2rem
&:hover
@ -182,8 +182,8 @@
color: inherit !important
.cli-arg-highlight
background: var(--color-theme)
border-color: var(--color-theme)
background: var(--color-theme-dark)
border-color: var(--color-theme-dark)
color: var(--color-back) !important
.cli-arg-subtle

View File

@ -32,7 +32,7 @@
.copy
border-top: 1px dotted var(--color-subtle)
font-size: var(--font-size-xs)
color: var(--color-subtle-dark)
color: var(--color-front-dark)
text-align: center
width: 100%
@ -42,4 +42,4 @@
vertical-align: middle
&:hover
color: var(--color-theme)
color: var(--color-theme-dark)

View File

@ -31,7 +31,7 @@
.title
font-weight: bold
color: var(--color-theme)
color: var(--color-theme-dark)
display: block
margin-bottom: var(--spacing-xs)
font-size: var(--font-size-md)
@ -41,7 +41,7 @@
color: inherit
.icon
color: var(--color-theme)
color: var(--color-theme-dark)
vertical-align: baseline
position: relative
bottom: -2px

View File

@ -41,7 +41,7 @@
border-radius: 1em
padding: 0 1rem 0.15rem
background: var(--color-back)
color: var(--color-theme)
color: var(--color-theme-dark)
.subtitle
margin-top: 1rem

View File

@ -301,13 +301,13 @@ p
margin-bottom: 0
a:focus
outline: 1px dotted var(--color-theme)
outline: 1px dotted var(--color-theme-dark)
body [id]:target
padding-top: calc(var(--height-nav) * 1.25) !important
::selection
background: var(--color-theme)
background: var(--color-theme-dark)
color: var(--color-back)
text-shadow: none
@ -524,7 +524,7 @@ body [id]:target
display: block
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
color: var(--color-theme)
color: var(--color-theme-dark)
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column
color: var(--color-dark)

View File

@ -1,11 +1,11 @@
.root
color: var(--color-theme)
color: var(--color-theme-dark)
border-bottom: 1px solid
transition: color 0.2s ease
cursor: pointer
&:hover
color: var(--color-theme-dark)
color: var(--color-front)
.hidden
border: none

View File

@ -16,12 +16,15 @@
z-index: 30
width: 100%
box-shadow: var(--box-shadow)
--docsearch-muted-color: var(--color-subtle-dark)
--docsearch-text-color: var(--docsearch-muted-color)
--docsearch-searchbox-background: var(--color-subtle-light)
.logo
min-width: 95px
width: 95px
height: 30px
color: var(--color-theme) !important
color: var(--color-theme-dark) !important
vertical-align: middle
.title
@ -42,7 +45,7 @@
font-family: var(--font-secondary)
font-size: 1.6rem
font-weight: bold
color: var(--color-theme)
color: var(--color-theme-dark)
&:not(:first-child)
margin-left: 2em
@ -77,11 +80,11 @@
min-width: 100px
.dropdown
--dropdown-text-color: var(--color-theme)
--dropdown-text-color: var(--color-theme-dark)
font-family: var(--font-secondary)
font-size: 1.6rem
font-weight: bold
color: var(--color-theme)
color: var(--color-theme-dark)
text-transform: uppercase
margin-right: 0.5rem
border: 2px solid var(--color-back)

View File

@ -18,5 +18,5 @@
.button
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
color: var(--color-theme)
color: var(--color-theme-dark)
white-space: nowrap

View File

@ -47,7 +47,7 @@
background: var(--color-subtle-light)
.input:focus
border: 1px solid var(--color-theme)
border: 1px solid var(--color-theme-dark)
outline: none
.radio + &
@ -70,8 +70,8 @@
.radio:checked + &
color: var(--color-back)
border-color: var(--color-theme)
background: var(--color-theme)
border-color: var(--color-theme-dark)
background: var(--color-theme-dark)
.checkbox + &:before
$size: 18px
@ -90,9 +90,9 @@
.checkbox:checked + &:before
// Embed "check" icon here for simplicity
background: var(--color-theme) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
background: var(--color-theme-dark) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
background-size: contain
border-color: var(--color-theme)
border-color: var(--color-theme-dark)
.field-extra:not(:empty):not(:first-child)
margin-left: 1rem
@ -167,7 +167,7 @@
content: initial !important
.prompt:before
color: var(--color-theme)
color: var(--color-theme-dark)
margin-right: 1em
.bash:before

View File

@ -18,4 +18,4 @@
margin-left: 3rem
&:hover
color: var(--color-theme)
color: var(--color-theme-dark)

View File

@ -1,7 +1,7 @@
@import base
.DocSearch-Modal
--docsearch-primary-color: var(--color-theme)
--docsearch-primary-color: var(--color-theme-dark)
--docsearch-searchbox-background: var(--color-back)
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color)
--docsearch-highlight-color: var(--docsearch-primary-color)

View File

@ -32,10 +32,10 @@ $crumb-bar: 2px
text-transform: uppercase
.item
color: var(--color-theme)
color: var(--color-theme-dark)
&:hover
color: var(--color-theme-dark)
color: var(--color-front)
.link
border: none
@ -62,11 +62,11 @@ $crumb-bar: 2px
margin-bottom: math.div($crumb-bullet, 2)
position: relative
padding-left: 2rem
color: var(--color-theme)
color: var(--color-theme-dark)
font-size: 1.2rem
&:hover
color: var(--color-theme-dark)
color: var(--color-front)
&:after
width: $crumb-bullet

View File

@ -22,11 +22,11 @@ figure > .root
.footer
--color-inline-code-bg: var(--color-theme-opaque)
background: var(--color-theme-light) !important
border-top: 2px solid var(--color-theme)
border-top: 2px solid var(--color-theme-dark)
& > td:first-child
font-family: var(--font-secondary)
color: var(--color-theme)
color: var(--color-theme-dark)
& > td:nth-child(2) a
border: 0
@ -52,9 +52,9 @@ figure > .root
.th
font: bold var(--font-size-md)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
color: var(--color-theme)
color: var(--color-theme-dark)
padding: 1rem 0.5rem
border-bottom: 2px solid var(--color-theme)
border-bottom: 2px solid var(--color-theme-dark)
vertical-align: bottom
.th-rotated
@ -90,7 +90,7 @@ figure > .root
top: -5px
left: 10px
display: inline-block
background: var(--color-theme)
background: var(--color-theme-dark)
color: var(--color-back)
padding: 0 5px 1px
font-size: 0.85rem

View File

@ -1,7 +1,7 @@
.root
display: inline-block
font: bold var(--font-size-xs)/#{1} var(--font-secondary)
background: var(--color-theme)
background: var(--color-theme-dark)
color: var(--color-back)
padding: 2px 6px 4px
border-radius: 1em

View File

@ -21,7 +21,7 @@
content: "\00b6"
font-size: 0.9em
font-weight: normal
color: var(--color-subtle)
color: var(--color-subtle-dark)
position: absolute
top: 0.15em
left: -2.85rem
@ -32,7 +32,7 @@
opacity: 1
&:active:before
color: var(--color-theme)
color: var(--color-theme-dark)
&:target
display: inline-block