Skip to content

Adopt the design system tokens in the docs theme #3264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
enf0rc3 wants to merge 9 commits into
base: main
Choose a base branch
from
+52 −80
Open

Adopt the design system tokens in the docs theme #3264

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a4c1b04
Point the site color variables at the design system generic tokens
enf0rc3 Jul 28, 2026
2950265
Remove palette variables this change orphaned
enf0rc3 Jul 28, 2026
44039ad
Use brand tokens for the three literals that match them exactly
enf0rc3 Jul 28, 2026
73c5efb
Map callouts, tabs and icons onto generic tokens
enf0rc3 Jul 28, 2026
dabde75
Restore the original green-400 TODO wording
enf0rc3 Jul 28, 2026
70127d3
Keep the dark side navigation hand-themed
enf0rc3 Jul 28, 2026
5b844d9
Rebuild the dark surface ramp from tokens
enf0rc3 Jul 29, 2026
671364d
Use the callout token family for callouts
enf0rc3 Jul 29, 2026
d7d5ec6
Drop three dark overrides that repeat their own root value
enf0rc3 Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 52 additions & 80 deletions public/docs/css/vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,12 @@
--white: var(--colorScalesWhite);

--navy-700: var(--colorScalesNavy700);
--navy-600: var(--colorScalesNavy600);

@enf0rc3 enf0rc3 Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was only used below for --colorTextSecondary

--color-subtitle: var(--navy-600);
// Is now: 
--color-subtitle: var(--colorTextSecondary);

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);
--blue-200: var(--colorScalesBlue200);

@enf0rc3 enf0rc3 Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was used for borders, so can be removed:

https://www.octopus.design/latest/foundations/color/overview-g9Vo6fLw#section-border-5b

--blue-100: var(--colorScalesBlue100);

@enf0rc3 enf0rc3 Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

/* No scale equivalent */
--blue-qqq: #fafdff;

@enf0rc3 enf0rc3 Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

used for light mode --bg-color-menu This now uses color.background.secondary and has changed the color:

Image


/* TODO: remove green-400 as it's being used in one place only */
--green-400: var(--colorScalesGreen400);
Expand All @@ -61,12 +56,11 @@

--blue-midnight-dark: #070e14ff;
--blue-midnight-darker: #0a202fff;
--blue-midnight: #10212fff;
--blue-midnight-lighter: #22425cff;

--blue-grey-dark: #152b3dff;
--blue-gray-darker: #1f2f3cff;
--blue-grey-medium: #113049ff;
--blue-grey-medium: var(--brandGrey);
--blue-grey: var(--navy-700);
--blue-grey-light: #274b66ff;
/* This is navy 500 in the design system's scale */
Expand All @@ -85,70 +79,70 @@
--font-size-medium: 1rem;
--font-size-small: 0.875rem;

--color-base-primary: var(--white);
--color-base-primary: var(--colorBackgroundPrimaryDefault);

--color-text: var(--blue-midnight);
--color-heading: var(--blue-grey-dark);
--color-text-secondary: var(--navy-700);
--color-text: var(--colorTextPrimary);
--color-heading: var(--colorTextPrimary);
--color-text-secondary: var(--colorTextSecondary);

--color-subtitle: var(--navy-600);
--color-subtitle: var(--colorTextSecondary);
--font-size-subtitle: var(--font-size-large);
--font-size-title: var(--font-size-xxlarge);

--border-color-header: var(--navy-200);
--border-color-header: var(--colorBorderPrimary);

--color-menu-link: var(--navy-600);
--color-menu-link-active: var(--navy-700);
--color-menu-link-alt: var(--blue-500);
--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(--blue-qqq);
--bg-color-menu: var(--colorBackgroundSecondaryDefault);
--bg-color-menu-open: rgba(13, 128, 216, 0.1);
--border-color-menu-open: var(--navy-200);
--border-color-menu-open: var(--colorBorderPrimary);
--gap-menu: 0.6em;

--navigation-width: 21.25rem;

--bg-color-tab: var(--navy-200);
--border-color-tab: var(--navy-200);
--border-color-tab-active: var(--navy-400);
--bg-color-tab: var(--colorBackgroundTertiary);
--border-color-tab: var(--colorBorderPrimary);
--border-color-tab-active: var(--colorBorderTertiary);

--color-hint: #124164;
--bg-color-hint: var(--lightest-blue);
--border-color-hint: var(--blue-500);
--color-hint: var(--colorCalloutTextInfo);
--bg-color-hint: var(--colorCalloutBackgroundInfoDefault);
--border-color-hint: var(--colorCalloutBorderInfo);

--color-info: #124164;
--bg-color-info: var(--lightest-blue);
--border-color-info: var(--blue-500);
--color-info: var(--colorCalloutTextInfo);
--bg-color-info: var(--colorCalloutBackgroundInfoDefault);
--border-color-info: var(--colorCalloutBorderInfo);

--color-success: #04502f;
--bg-color-success: #e8ffeb;
--border-color-success: #00b065;
--color-success: var(--colorCalloutTextSuccess);
--bg-color-success: var(--colorCalloutBackgroundSuccessDefault);
--border-color-success: var(--colorCalloutBorderSuccess);

--color-warning: #a23623;
--bg-color-warning: #fefae9;
--border-color-warning: #fc8431;
--color-warning: var(--colorCalloutTextWarning);
--bg-color-warning: var(--colorCalloutBackgroundWarningDefault);
--border-color-warning: var(--colorCalloutBorderWarning);

--color-problem: #931919;
--bg-color-problem: #fff2ee;
--border-color-problem: #ff4848;
--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(--blue-100);
--code-background: var(--colorBackgroundSecondaryDefault);

/* Backgrounds TODO - update with design system */
--background-light: var(--blue-100);
--background-default: var(--white);
/* Backgrounds */
--background-light: var(--colorBackgroundSecondaryDefault);
--background-default: var(--colorBackgroundPrimaryDefault);

/* Borders TODO - update with design system */
--border-default-color: var(--blue-200);
/* Borders */
--border-default-color: var(--colorBorderPrimary);

/* Separator */
--separator-color: #dae2e9;
--separator-color: var(--colorBorderPrimary);

/* Scrollbar */
--scrollbar-color: #a9bbcb;
--scrollbar-color: var(--navy-300);

/* Icon Tile */
--icon-tile-border: var(--border-default-color);
Expand All @@ -158,7 +152,7 @@
--icon-tile-shadow: 0px 4px 10px 0px rgba(13, 128, 216, 0.2);

/* Article header */
--header-separator-color: var(--navy-200);
--header-separator-color: var(--colorBorderPrimary);
--header-icon-border: var(--border-default-color);
--header-icon-background: var(--background-light);

Expand Down Expand Up @@ -187,10 +181,10 @@
--hamburger-translate-y: calc(
var(--hamburger-line-height) + var(--hamburger-line-margin)
);
--hamburger-lines-color: var(--blue-grey-light);
--hamburger-lines-color: var(--colorIconPrimary);

/* Theme Switcher */
--theme-switcher-border: var(--navy-200);
--theme-switcher-border: var(--colorBorderPrimary);

/* Badge */
--badge-background: rgba(162, 209, 244, 0.2);
Expand All @@ -204,8 +198,7 @@

/* To be checked and cleaned */

--octo-blue: var(--blue-500);
--lightest-blue: #e5f4ffff;
--octo-blue: var(--colorTextLinkDefault);
--octo-blue-lighter: #2f95e3ff;
--octo-blue-lightest: #1fc0ffff;

Expand All @@ -218,13 +211,10 @@
--bold-font: var(--font-family);
--code-font: Consolas, monaco, monospace;

--header-bg: var(--white);
--header-icon-stroke: var(--blue-grey-light);
--header-bg: var(--colorBackgroundPrimaryDefault);
--header-link-color: var(--octo-blue);
--header-link-alt: var(--blue-gray-darker);
--header-link-alt-bg: var(--blue-grey-smoke);

--image-bg: var(--blue-grey-smoke);
--content-bg: var(--white);

--body-link-color: var(--octo-blue);
Expand All @@ -233,7 +223,7 @@
--footer-link-color: var(--navy-200);

--icon-stroke: var(--white);
--icon-fill: var(--blue-grey-light);
--icon-fill: var(--colorIconSecondary);

--octopus-logo-text-color: #0f2535;

Expand Down Expand Up @@ -263,50 +253,32 @@
}

html[data-theme='dark'] {
--color-base-primary: #10202e;
--color-menu-link: var(--navy-300);
--color-menu-link-active: var(--navy-100);
--bg-color-menu: #0c1a24;
/* The navigation matches the page in dark, unlike light */
--bg-color-menu: var(--colorBackgroundPrimaryDefault);
--bg-color-menu-open: var(--blue-grey-dark);
--border-color-menu-open: var(--navy-700);
--header-bg: var(--blue-grey-dark);
--color-text: #dae2e9ff;
--color-heading: var(--white);
--color-subtitle: #f5f6f8;
--body-link-alt: var(--white);
--search-placeholder-color: var(--navy-400);
--search-remove-icon-color: var(--white);
--grey-lighter: var(--blue-grey-dark);
/* TODO: update this */
/* TODO: --navy-200 is still hand-themed because main.css uses it directly for
borders and one background (lines 112, 216, 262, 920, 2539). Point those at
--border-default-color / --bg-color-tab and this override can go. */
--navy-200: #314c62;
--octo-blue: var(--octo-blue-lightest);
--border-color-header: var(--navy-700);
/* TODO: update this */
/* TODO: --blue-grey is hand-themed for .card__description (main.css:1016).
That is secondary text, so --color-text-secondary already covers it. */
--blue-grey: #dae2e9ff;
--header-link-alt: var(--color-text);
--grey-light: var(--navy-700);
--color-menu-link-alt: var(--octo-blue-lightest);
--body-link-color: var(--octo-blue-lightest);
--octopus-logo-text-color: var(--white);
--theme-switcher-border: var(--navy-700);
--color-hint: var(--color-text);
--bg-color-hint: rgba(13, 128, 216, 0.1);
--color-info: var(--color-text);
--bg-color-info: var(--blue-grey-light);
--hamburger-lines-color: var(--white);
--footer-link-color: var(--color-menu-link);
--search-overlay: rgba(12, 26, 36, 0.8);
--header-separator-color: var(--navy-700);
--header-icon-border: transparent;
--header-icon-background: var(--blue-grey-dark);
--badge-background: rgba(31, 192, 255, 0.1);
--badge-color: var(--octo-blue-lightest);
--color-text-secondary: #dae2e9;
--icon-tile-background: #132838;
--icon-tile-background: var(--colorBackgroundTertiary);
--icon-tile-background-hover: #223950;
--icon-tile-border: #1c3f59;
--icon-tile-border-hover: var(--octo-blue-lightest);
--icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu);
--separator-color: var(--navy-700);
--code-background: #0c1a24;
}