From 158810e41d1d31e1a6e482599619c3d9d70f3791 Mon Sep 17 00:00:00 2001 From: William Laugesen Date: Tue, 28 Jul 2026 17:51:21 +1200 Subject: [PATCH 1/3] Map the colour palette onto the design system's scales The raw palette in vars.css duplicated hex literals that already exist in @octopusdeploy/design-system-tokens. Eighteen entries now reference the matching --colorScales* token instead. Scale tokens are theme-invariant and every value was verified identical before the swap, so this is a no-op. Only palette entries are touched - semantic variables (--color-text, --body-link-color and the rest) still resolve through this layer unchanged, and the html[data-theme='dark'] block is untouched, including its --navy-200 override. Verified by snapshotting all 886 computed custom properties plus the rendered colour, background, border and font of seven elements, in both themes, before and after: identical. 93 values changed hex casing or dropped a redundant ff alpha (#2e475dff -> #2E475D), which is the same colour. Left alone: --blue-qqq, --green, --light-green, --grey, --grey-light and the --blue-midnight/--blue-grey families have no scale equivalent. Co-Authored-By: Claude Opus 5 (1M context) --- public/docs/css/vars.css | 49 +++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css index 15b001edd3..a32b9856d2 100644 --- a/public/docs/css/vars.css +++ b/public/docs/css/vars.css @@ -26,32 +26,38 @@ :root { --page-inline-margin: 2rem; - /* Theme colors */ - --black: #000000ff; - --white: #ffffffff; - - --navy-700: #2e475dff; - --navy-600: #3e607dff; - --navy-400: #7c98b4ff; - --navy-300: #a9bbcbff; - --navy-200: #dae2e9ff; - --navy-100: #f4f6f8ff; - - --blue-500: #1a77ca; - --blue-200: #cde4f7; - --blue-100: #f2f8fd; + /* Theme colors + The palette entries below map 1:1 onto the design system's colour scales + from @octopusdeploy/design-system-tokens. Scales are theme-invariant, so + these values are the same in light and dark; the semantic variables + further down are what differ between themes. */ + --black: var(--colorScalesBlack); + --white: var(--colorScalesWhite); + + --navy-700: var(--colorScalesNavy700); + --navy-600: var(--colorScalesNavy600); + --navy-400: var(--colorScalesNavy400); + --navy-300: var(--colorScalesNavy300); + --navy-200: var(--colorScalesNavy200); + --navy-100: var(--colorScalesNavy100); + + --blue-500: var(--colorScalesBlue500); + --blue-200: var(--colorScalesBlue200); + --blue-100: var(--colorScalesBlue100); + /* No scale equivalent */ --blue-qqq: #fafdff; /* TODO: remove green-400 as it's being used in one place only */ - --green-400: #00ab62; - --green-500: #00874d; + --green-400: var(--colorScalesGreen400); + --green-500: var(--colorScalesGreen500); + /* Brand greens, no scale equivalent */ --green: #00e693ff; --light-green: #00ffa3ff; - --red-500: #d63d3d; + --red-500: var(--colorScalesRed500); - --orange-400: #ea7325; - --orange-500: #c45317; + --orange-400: var(--colorScalesOrange400); + --orange-500: var(--colorScalesOrange500); --blue-midnight-dark: #070e14ff; --blue-midnight-darker: #0a202fff; @@ -63,11 +69,12 @@ --blue-grey-medium: #113049ff; --blue-grey: var(--navy-700); --blue-grey-light: #274b66ff; - --blue-grey-lighter: #557999ff; + /* This is navy 500 in the design system's scale */ + --blue-grey-lighter: var(--colorScalesNavy500); --blue-grey-smoke: #c5e6ff66; --grey: #555555ff; /* #777777 is low contrast (WCAG) */ - --grey-500: #757575; /* #777777 is low contrast (WCAG) */ + --grey-500: var(--colorScalesGrey500); /* #777777 is low contrast (WCAG) */ --grey-light: #eef0f2ff; --grey-lighter: var(--navy-100); From b98e388b62b40830c69e3a50c8265ac8c508c7d4 Mon Sep 17 00:00:00 2001 From: William Laugesen Date: Tue, 28 Jul 2026 17:57:38 +1200 Subject: [PATCH 2/3] Remove the redundant dark --scrollbar-color override :root sets --scrollbar-color to #a9bbcb and the dark block set it to var(--navy-300), which is the same colour, so the override never changed anything. Pre-existing dead code, found while mapping the palette. Verified with the same snapshot harness: 886 computed properties and seven rendered elements identical in both themes, both against the post-palette state and against the original baseline. Co-Authored-By: Claude Opus 5 (1M context) --- public/docs/css/vars.css | 1 - 1 file changed, 1 deletion(-) diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css index a32b9856d2..19f7e3d83f 100644 --- a/public/docs/css/vars.css +++ b/public/docs/css/vars.css @@ -309,5 +309,4 @@ html[data-theme='dark'] { --icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu); --separator-color: var(--navy-700); --code-background: #0c1a24; - --scrollbar-color: var(--navy-300); } From 6581e9824d27f8f3ccb6705e6e5262fb85e43a07 Mon Sep 17 00:00:00 2001 From: William Laugesen Date: Tue, 28 Jul 2026 18:22:34 +1200 Subject: [PATCH 3/3] Use US spelling in comment to satisfy cspell Co-Authored-By: Claude Opus 5 (1M context) --- public/docs/css/vars.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css index 19f7e3d83f..2ce70aa32e 100644 --- a/public/docs/css/vars.css +++ b/public/docs/css/vars.css @@ -27,7 +27,7 @@ --page-inline-margin: 2rem; /* Theme colors - The palette entries below map 1:1 onto the design system's colour scales + The palette entries below map 1:1 onto the design system's color scales from @octopusdeploy/design-system-tokens. Scales are theme-invariant, so these values are the same in light and dark; the semantic variables further down are what differ between themes. */