docs: reimagine light theme with an ocean-blue accent and solid block colours#1419
Merged
Conversation
…and ink header Rework the documentation website's theme into a modern, consistent design system with a contrasting indigo/violet accent, layered on top of the v8-branch docs (preserving its additions: menu colour, richer tables, code-comment contrast fixes, enterprise badge, hero stats and CTA section). - Contrasting indigo/violet accent applied consistently to links, buttons, active sidebar items, section labels, focus rings, code keywords, the announcement bar and the newsletter widget. - Shared design-token layer (radii, elevation, border tokens, accent-soft tints and an accent gradient) defined for both light and dark themes. - Tightened type scale: larger tracked headings, a lighter secondary lead paragraph, more generous and consistent section spacing. - Dark "ink" header for the light theme, scoped to the desktop bar (.navbar__inner) so the mobile slide-out menu stays light; dark theme keeps its own dark navbar. - Component polish: gradient primary button, feature cards with tinted icon tiles and hover lift, framework cards with hover states, rounded active sidebar pills, bordered inline-code chips, underlined h2s, softer admonitions and code blocks, and a soft accent glow behind the hero. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UsXiFK46kQJqAv5HtdYGiB
Flatten the theme to solid colour fields per design preference: - Primary button now a solid accent fill with a solid darker hover, instead of the accent gradient and coloured glow shadow. - Accent-soft background tints (feature icon tiles, active sidebar item, hover states, announcement bar) are solid block colours rather than semi-transparent rgba, in both light and dark themes. - Section-label marker is a solid accent bar instead of a gradient. - Removed the faded radial glow behind the hero. - Ink-header search field uses a solid block instead of translucent white. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UsXiFK46kQJqAv5HtdYGiB
Change the theme accent to ocean blue (aligned with the blue brand mark) across both light and dark themes: primary palette, solid block tints, coloured ink header, code-keyword token, code-line highlight and hover overlay. Class-name syntax tokens remain their conventional purple. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UsXiFK46kQJqAv5HtdYGiB
|
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
2 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.
Description
Reworks the documentation website's theme into a modern, consistent design system, layered on top of the current
v8-branchdocs (all of its additions are preserved — menu colour, richer tables, code-comment contrast fixes, the enterprise badge, hero stats and the CTA section).Highlights:
#2563eb), aligned with the blue brand mark, applied consistently across links, buttons, active sidebar items, section labels, focus rings, code keywords, the announcement bar and the newsletter widget — in both light and dark themes..navbar__inner) so the mobile slide-out menu stays light; the dark theme keeps its own dark navbar.h2s, and softer admonitions and code blocks.Only two files change:
packages/docs/src/css/custom.scssandpackages/docs/src/pages/index.scss.Type of change
Affected packages
docsHow to test
cd packages/docs && yarn start/docs/overview/introduction) and toggle light/dark.Checklist
yarn lint:fixpassesyarn formatpassesnpm run genhas been run and generated files are up to dateyarn testpassesThis is a CSS-only docs change;
gen/testare not applicable and there are no behavioural or breaking changes. Runyarn lint:fix/yarn formatbefore merge if the repo's style checks cover SCSS.🤖 Generated with Claude Code
Generated by Claude Code