Map the color palette onto the design system's scales - #3262
Merged
Conversation
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) <noreply@anthropic.com>
: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) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
enf0rc3
force-pushed
the
wl/design-tokens-palette
branch
from
July 28, 2026 20:26
b46c8bc to
6581e98
Compare
enf0rc3
changed the title
|
Pull request environment is available at https://stoctodocspr3262.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
enf0rc3
commented
Jul 28, 2026
| --page-inline-margin: 2rem; | ||
|
|
||
| /* Theme colors */ | ||
| --black: #000000ff; |
Contributor
Author
There was a problem hiding this comment.
These changes map to the globals css you can view here:
(they have the added ending FF) though
Contributor
There was a problem hiding this comment.
FF represents the alpha channel, it just means the colour is completely solid
borland
approved these changes
Jul 28, 2026
borland
left a comment
borland
left a comment
Contributor
There was a problem hiding this comment.
Staging site looks good, approved
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Background
We want to update the docs website to use the new design system tokens
This pr follows #3261, which added the token stylesheets.
There will be many PR's each addressing different aspects, to limit the amount of change, this first pr aims to just include the non-functional changes, (mapping existing colours to the same in the design system tokens that are 1 for 1).
Whereas the docs dark theme was hand-rolled from a different palette so we will do that separately that we would want to check is correct.
Results
The raw palette in
vars.cssduplicated hex literals that already exist in@octopusdeploy/design-system-tokens. Eighteen entries now reference the matching--colorScales*token.--black,--white,--navy-100…700,--blue-100/200/500,--green-400/500,--red-500,--orange-400/500,--grey-500, and--blue-grey-lighter(which is navy 500 in the design system's scale).Also removes one dead line: the dark block set
--scrollbar-color: var(--navy-300), which is#a9bbcb— the same value:rootalready resolves to. Pre-existing dead code, found while mapping the palette.Why only the palette
Scale tokens are theme-invariant, so this layer can move with zero visual risk.
The semantic variables above it (
--color-text,--body-link-color,--code-background) resolve through this layer unchanged.Testing
AI generated test:
Every value was verified identical to its token before the swap — 18 exact, 0 mismatched.
Then snapshotted all 886 computed custom properties plus the rendered
color,background-color,border-colorandfontof seven elements (body, paragraph, body link, heading, nav link, code, footer), in both themes, before and after:The
--scrollbar-colorremoval was verified separately against both the post-palette state and the original baseline. Production build clean: 2,697 pages.Left as literals
--blue-qqq,--green,--light-green,--grey,--grey-light, and the--blue-midnight/--blue-greyfamilies have no scale equivalent. Nothing else became unused —--blue-qqqand--octo-blue-lighterare both still referenced.🤖 Generated with Claude Code