Adopt the design system tokens in the docs theme #3264
+55
−88
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,17 +35,12 @@ | |
| --white: var(--colorScalesWhite); | ||
|
|
||
| --navy-700: var(--colorScalesNavy700); | ||
|
Contributor
Author
There was a problem hiding this comment. was only used below for See color.text.secondary https://www.octopus.design/latest/foundations/color/overview-g9Vo6fLw#section-text-f6 It has slate being "light mode" as 600 so colorTextSecondary is correct here, it will also mean the dark mode will be navy.300 |
||
| --navy-400: var(--colorScalesNavy400); | ||
| --navy-300: var(--colorScalesNavy300); | ||
| --navy-200: var(--colorScalesNavy200); | ||
| --navy-100: var(--colorScalesNavy100); | ||
|
|
||
| --blue-500: var(--colorScalesBlue500); | ||
|
Contributor
Author
There was a problem hiding this comment. It was used for borders, so can be removed: https://www.octopus.design/latest/foundations/color/overview-g9Vo6fLw#section-border-5b |
||
|
Contributor
Author
There was a problem hiding this comment. It was used for background below, so can be removed, we use the theme color now https://www.octopus.design/latest/foundations/color/overview-g9Vo6fLw#section-background-04 color.background.secondary |
||
|
Contributor
Author
There was a problem hiding this comment. used for light mode 
|
||
|
|
||
| /* TODO: remove green-400 as it's being used in one place only */ | ||
| --green-400: var(--colorScalesGreen400); | ||
|
|
@@ -61,12 +56,11 @@ | |
|
|
||
| --blue-midnight-dark: #070e14ff; | ||
| --blue-midnight-darker: #0a202fff; | ||
| --blue-midnight-lighter: #22425cff; | ||
|
|
||
| --blue-grey-dark: #152b3dff; | ||
| --blue-gray-darker: #1f2f3cff; | ||
| --blue-grey-medium: var(--brandGrey); | ||
| --blue-grey: var(--navy-700); | ||
| --blue-grey-light: #274b66ff; | ||
| /* This is navy 500 in the design system's scale */ | ||
|
|
@@ -85,80 +79,79 @@ | |
| --font-size-medium: 1rem; | ||
| --font-size-small: 0.875rem; | ||
|
|
||
| --color-base-primary: var(--colorBackgroundPrimaryDefault); | ||
|
|
||
| --color-text: var(--colorTextPrimary); | ||
| --color-heading: var(--colorTextPrimary); | ||
| --color-text-secondary: var(--colorTextSecondary); | ||
|
|
||
| --color-subtitle: var(--colorTextSecondary); | ||
| --font-size-subtitle: var(--font-size-large); | ||
| --font-size-title: var(--font-size-xxlarge); | ||
|
|
||
| --border-color-header: var(--colorBorderPrimary); | ||
|
|
||
| --color-menu-link: var(--colorTextSecondary); | ||
| --color-menu-link-active: var(--colorTextPrimary); | ||
| --color-menu-link-alt: var(--colorTextLinkDefault); | ||
| --color-menu-marker: var(--navy-300); | ||
| --bg-color-menu: var(--colorBackgroundSecondaryDefault); | ||
| --bg-color-menu-open: rgba(13, 128, 216, 0.1); | ||
| --border-color-menu-open: var(--colorBorderPrimary); | ||
| --gap-menu: 0.6em; | ||
|
|
||
| --navigation-width: 21.25rem; | ||
|
|
||
| --bg-color-tab: var(--colorBackgroundTertiary); | ||
| --border-color-tab: var(--colorBorderPrimary); | ||
| --border-color-tab-active: var(--colorBorderSelected); | ||
|
|
||
| --color-hint: var(--colorCalloutTextInfo); | ||
| --bg-color-hint: var(--colorCalloutBackgroundInfoDefault); | ||
| --border-color-hint: var(--colorCalloutBorderInfo); | ||
|
|
||
| --color-info: var(--colorCalloutTextInfo); | ||
| --bg-color-info: var(--colorCalloutBackgroundInfoDefault); | ||
| --border-color-info: var(--colorCalloutBorderInfo); | ||
|
|
||
| --color-success: var(--colorCalloutTextSuccess); | ||
| --bg-color-success: var(--colorCalloutBackgroundSuccessDefault); | ||
| --border-color-success: var(--colorCalloutBorderSuccess); | ||
|
|
||
| --color-warning: var(--colorCalloutTextWarning); | ||
| --bg-color-warning: var(--colorCalloutBackgroundWarningDefault); | ||
| --border-color-warning: var(--colorCalloutBorderWarning); | ||
|
|
||
| --color-problem: var(--colorCalloutTextDanger); | ||
| --bg-color-problem: var(--colorCalloutBackgroundDangerDefault); | ||
| --border-color-problem: var(--colorCalloutBorderDanger); | ||
|
|
||
| --duration-default: 300ms; | ||
|
|
||
| --code-color: var(--color-text); | ||
| --code-background: var(--colorBackgroundSecondaryDefault); | ||
|
|
||
| /* Backgrounds */ | ||
| --background-light: var(--colorBackgroundSecondaryDefault); | ||
| --background-default: var(--colorBackgroundPrimaryDefault); | ||
|
|
||
| /* Borders */ | ||
| --border-default-color: var(--colorBorderPrimary); | ||
|
|
||
| /* Separator */ | ||
| --separator-color: var(--colorBorderPrimary); | ||
|
|
||
| /* Scrollbar */ | ||
| --scrollbar-color: var(--colorScrollbarHandle); | ||
|
|
||
| /* Icon Tile */ | ||
| --icon-tile-border: var(--border-default-color); | ||
| --icon-tile-border-hover: var(--colorBorderSelected); | ||
| --icon-tile-background: var(--background-light); | ||
| --icon-tile-background-hover: var(--background-default); | ||
|
|
||
| /* Article header */ | ||
| --header-separator-color: var(--colorBorderPrimary); | ||
| --header-icon-border: var(--border-default-color); | ||
| --header-icon-background: var(--background-light); | ||
|
|
||
|
|
@@ -187,10 +180,10 @@ | |
| --hamburger-translate-y: calc( | ||
| var(--hamburger-line-height) + var(--hamburger-line-margin) | ||
| ); | ||
| --hamburger-lines-color: var(--colorIconPrimary); | ||
|
|
||
| /* Theme Switcher */ | ||
| --theme-switcher-border: var(--colorBorderPrimary); | ||
|
|
||
| /* Badge */ | ||
| --badge-background: rgba(162, 209, 244, 0.2); | ||
|
|
@@ -204,8 +197,7 @@ | |
|
|
||
| /* To be checked and cleaned */ | ||
|
|
||
| --octo-blue: var(--colorTextLinkDefault); | ||
| --octo-blue-lighter: #2f95e3ff; | ||
| --octo-blue-lightest: #1fc0ffff; | ||
|
|
||
|
|
@@ -218,13 +210,10 @@ | |
| --bold-font: var(--font-family); | ||
| --code-font: Consolas, monaco, monospace; | ||
|
|
||
| --header-bg: var(--colorBackgroundPrimaryDefault); | ||
| --header-link-color: var(--octo-blue); | ||
| --header-link-alt: var(--blue-gray-darker); | ||
|
|
||
| --content-bg: var(--white); | ||
|
|
||
| --body-link-color: var(--octo-blue); | ||
|
|
@@ -233,7 +222,7 @@ | |
| --footer-link-color: var(--navy-200); | ||
|
|
||
| --icon-stroke: var(--white); | ||
| --icon-fill: var(--colorIconSecondary); | ||
|
|
||
| --octopus-logo-text-color: #0f2535; | ||
|
|
||
|
|
@@ -263,50 +252,28 @@ | |
| } | ||
|
|
||
| html[data-theme='dark'] { | ||
| /* The navigation matches the page in dark, unlike light */ | ||
| --bg-color-menu: var(--colorBackgroundPrimaryDefault); | ||
| --bg-color-menu-open: var(--blue-grey-dark); | ||
| --body-link-alt: var(--white); | ||
| --search-placeholder-color: var(--navy-400); | ||
| --search-remove-icon-color: var(--white); | ||
| --grey-lighter: var(--blue-grey-dark); | ||
| /* TODO: --navy-200 is still hand-themed because main.css uses it directly on | ||
| code, .image, figure:has(p > img) p, .card and .site-search-results__item. | ||
| Point those at --border-default-color / --bg-color-tab and this can go. */ | ||
| --navy-200: #314c62; | ||
| /* TODO: --blue-grey is hand-themed for .card__description, which is | ||
| secondary text, so --color-text-secondary already covers it. */ | ||
| --blue-grey: #dae2e9ff; | ||
| --header-link-alt: var(--color-text); | ||
| --grey-light: var(--navy-700); | ||
| --octopus-logo-text-color: var(--white); | ||
| --footer-link-color: var(--color-menu-link); | ||
| --search-overlay: rgba(12, 26, 36, 0.8); | ||
| --header-icon-border: transparent; | ||
| --badge-background: rgba(31, 192, 255, 0.1); | ||
| --badge-color: var(--octo-blue-lightest); | ||
| /* Tiles sit one step above the page so hover has somewhere lighter to go */ | ||
| --icon-tile-background-hover: var(--colorBackgroundTertiary); | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--aftwas never defined, so this fell back totransparentand only lookedright by accident.
--color-base-primaryis what the selected tab already uses.This change snuck in thanks to "claude" good fix though.