[borland]

🤖 Claude Code wrote this:

Several parts of the site styled themselves with fixed blue colours, or with blue values from the design system's colour scales, rather than theme tokens. This moves them onto tokens that already exist in the published @octopusdeploy/design-system-tokens package.

Changes

• Side nav and top nav highlights: hover and current-page backgrounds were Octopus blue at 6–24% opacity, or navy scales in dark mode. Following design feedback, hover and current-page rows now share colorNavListBackgroundActive. The current-page row is set apart by textBodyBoldMedium instead of a different background. Its text uses colorTextPrimary, which gives contrast of 12.5:1 in light and 11.0:1 in dark.
• Search highlights: search results need hover and the keyboard-selected row to look different, so they use colorMenuListBackgroundHover / colorMenuListBackgroundActive directly rather than the nav variables.
• The duplicate nav variables in main.css (--navBackground*) are merged into the --colorNav* ones in vars.css.
• Tag chips: colorChipBackgroundPrimary / colorChipTextPrimary replace a translucent light blue.
• Default link colour (--body-link-alt): colorTextPrimary replaces blue-grey in light and white in dark.
• Search box and results: colorTextField* tokens for the border, placeholder and icons; colorBorderPrimary for result borders; colorTextTertiary for result paths; colorOverlayPrimary for the overlay.
• Other: the author info divider uses colorBorderPrimary, the Link component uses colorTextLinkDefault / colorTextLinkHover, and the blue status icons use colorIconInfo.
• Variables nothing uses any more have been removed.

Visible changes on the current theme

• Nav highlights go from a pale blue tint to neutral grey in light mode, and to blue-grey in dark mode. Hovering a nav row now gives the same background as the current page, and the current page is shown in bold rather than blue.
• Default links and tag chips lose their blue tint.
• The search overlay in dark mode goes from 80% to the token's 56%, so it's lighter.

The search result hover keeps its existing blue tint for now. Its matching token (colorSearchBackgroundResultHover) isn't present in the shipped version of the tokens package, it will come later

Testing

pnpm build passes (3,136 pages) and spellcheck passes on the changed files. The build hasn't been re-run since the nav follow-up commit, which only changes CSS.

On the dev server, bolding the highlighted endpoint in the API nav doesn't make any label wrap onto an extra line, and the nav doesn't shift while scrolling (checked on /docs/api/accounts at 1440px and wider).

[team-marketing-branch-protections]

Pull request environment is available at https://stoctodocspr3552.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]

🤖 Claude Code wrote this:

I compared the preview site with octopus.com/docs on kubernetes/live-object-status, in light and dark. The code is clean: no leftover references to removed variables, and every new token resolves in both themes. Three visual changes need a decision.

1. Light search backdrop is darker

The overlay goes from 30% to 56% (#0c1a244d → #111a238f). The description only mentions the dark-mode change.

main	PR

2. Dark search modal blends into the page

The overlay goes from 80% to 56%. The modal and the page share a background, so the modal edge is harder to see.

main	PR

3. Dark nav hover is close to the current-page row

Hover (#2e475d) and current (#3e607d) differ by 1.46:1. In the PR screenshot, "Installation" is hovered and "Overview" is the current page.

main	PR

4. API nav endpoint highlight

The endpoint in view in the API nav on api/accounts changes in the same way as the current-page row. Light goes from blue text on a 6% blue tint to #282f38 on grey #dee1e6. Dark goes from #449be1 on a 24% blue tint to #f4f6f8 on #3e607d.

	main	PR
Light
Dark

The expanded section row ("Accounts") and the highlighted endpoint now share one background. On main they also share one, so this is unchanged.

5. Default link colour

--body-link-alt only reaches the logo text and the skip links on the pages I checked. The logo goes from #274b66 to #282f38 in light and from #fff to #f4f6f8 in dark. Side by side, the two are indistinguishable. Skip links only show on focus, and focused links use --body-link-color, so they look the same on both sites.

Small things

• The description says the search result hover keeps its blue tint. On the preview, the search rows use the grey menu tokens (#dee1e6 light, #3e607d dark).
• --navy-200 in vars.css is now unused.
• The blue status icons are lighter in dark mode now (#449be1). That's an improvement.

[borland]

@enf0rc3 good callout on the claude review for all those other things that changed.

My initial take was that these changes were intentional (from our design team)

By one example, the left-nav active items have changed from a light blue to a lot more of a gray.
The actual CSS has changed from rgb(from var(--colorScalesBlue500) r g b / 0.06) to --colorMenuListBackgroundActive because there isn't a "nav background" thing in the design tokens. At least, not that claude could find.

I wonder though if it is. I'll ping Ellen for her thoughts.

[enf0rc3]

Thanks for this, in some places its a big improvement in visibility.

I am happy with the change so approving, check the screenshots and if your happy, feel free to merge at your leisure (if you wanted to confirm with design etc)