diff --git a/website/src/components/juniper.js b/website/src/components/juniper.js index 569b12d5c..0c5253819 100644 --- a/website/src/components/juniper.js +++ b/website/src/components/juniper.js @@ -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)', diff --git a/website/src/styles/accordion.module.sass b/website/src/styles/accordion.module.sass index 8e67bfc29..6db35e0d4 100644 --- a/website/src/styles/accordion.module.sass +++ b/website/src/styles/accordion.module.sass @@ -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 diff --git a/website/src/styles/alert.module.sass b/website/src/styles/alert.module.sass index a578b21a6..0e6ac1bd9 100644 --- a/website/src/styles/alert.module.sass +++ b/website/src/styles/alert.module.sass @@ -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) diff --git a/website/src/styles/button.module.sass b/website/src/styles/button.module.sass index 35afe68ac..c91fd8c03 100644 --- a/website/src/styles/button.module.sass +++ b/website/src/styles/button.module.sass @@ -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) diff --git a/website/src/styles/code.module.sass b/website/src/styles/code.module.sass index 142b9fbd4..59e4b4c94 100644 --- a/website/src/styles/code.module.sass +++ b/website/src/styles/code.module.sass @@ -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 diff --git a/website/src/styles/footer.module.sass b/website/src/styles/footer.module.sass index 40d84e3ad..4c0492308 100644 --- a/website/src/styles/footer.module.sass +++ b/website/src/styles/footer.module.sass @@ -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) diff --git a/website/src/styles/infobox.module.sass b/website/src/styles/infobox.module.sass index 8d6071f18..abbb24322 100644 --- a/website/src/styles/infobox.module.sass +++ b/website/src/styles/infobox.module.sass @@ -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 diff --git a/website/src/styles/landing.module.sass b/website/src/styles/landing.module.sass index 5c2a0754b..2651424df 100644 --- a/website/src/styles/landing.module.sass +++ b/website/src/styles/landing.module.sass @@ -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 diff --git a/website/src/styles/layout.sass b/website/src/styles/layout.sass index aae4185d7..9b44a7dfe 100644 --- a/website/src/styles/layout.sass +++ b/website/src/styles/layout.sass @@ -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) diff --git a/website/src/styles/link.module.sass b/website/src/styles/link.module.sass index 15ad6adb9..41781538b 100644 --- a/website/src/styles/link.module.sass +++ b/website/src/styles/link.module.sass @@ -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 diff --git a/website/src/styles/navigation.module.sass b/website/src/styles/navigation.module.sass index 5ea87de85..da5c18b6f 100644 --- a/website/src/styles/navigation.module.sass +++ b/website/src/styles/navigation.module.sass @@ -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) diff --git a/website/src/styles/newsletter.module.sass b/website/src/styles/newsletter.module.sass index 6dc4f22e6..42a93383b 100644 --- a/website/src/styles/newsletter.module.sass +++ b/website/src/styles/newsletter.module.sass @@ -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 diff --git a/website/src/styles/quickstart.module.sass b/website/src/styles/quickstart.module.sass index fb9f0b17b..bb756d536 100644 --- a/website/src/styles/quickstart.module.sass +++ b/website/src/styles/quickstart.module.sass @@ -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 diff --git a/website/src/styles/readnext.module.sass b/website/src/styles/readnext.module.sass index aef91c09e..076317e92 100644 --- a/website/src/styles/readnext.module.sass +++ b/website/src/styles/readnext.module.sass @@ -18,4 +18,4 @@ margin-left: 3rem &:hover - color: var(--color-theme) + color: var(--color-theme-dark) diff --git a/website/src/styles/search.sass b/website/src/styles/search.sass index 5e81bd963..e3261ea6f 100644 --- a/website/src/styles/search.sass +++ b/website/src/styles/search.sass @@ -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) diff --git a/website/src/styles/sidebar.module.sass b/website/src/styles/sidebar.module.sass index 36809dfbe..48232445c 100644 --- a/website/src/styles/sidebar.module.sass +++ b/website/src/styles/sidebar.module.sass @@ -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 diff --git a/website/src/styles/table.module.sass b/website/src/styles/table.module.sass index c0dd1a5dc..2bc7acf6e 100644 --- a/website/src/styles/table.module.sass +++ b/website/src/styles/table.module.sass @@ -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 diff --git a/website/src/styles/tag.module.sass b/website/src/styles/tag.module.sass index fc6b426f4..c3c8ddfc2 100644 --- a/website/src/styles/tag.module.sass +++ b/website/src/styles/tag.module.sass @@ -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 diff --git a/website/src/styles/typography.module.sass b/website/src/styles/typography.module.sass index f5b32f695..f6131c84f 100644 --- a/website/src/styles/typography.module.sass +++ b/website/src/styles/typography.module.sass @@ -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