Light mode: split accent (brand-pink wordmark + AA labels) + fix green checks#9
Merged
Conversation
- Add --display-accent (brand pink #E0589A, both schemes) and use it for the large display wordmark (.btv-pink). Large text only needs 3:1, so it stays fully on-brand pink in light. - Light --text-accent -> #D6246F (vivid raspberry, ~4.6:1 AA) for the small labels/links (eyebrows, tags, package names, docs links) so they're readable on white while staying punchy. - Feature-list check marks now stroke var(--text-green) instead of a hardcoded bright green, so they darken to #15683A (AA) on light and stay #46B86C on dark. Verified light: wordmark rgb(224,88,154), eyebrow rgb(214,36,111), check rgb(21,104,58); build green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Updates the light-mode visual system to keep the brand pink for large “display” wordmarks while improving readability/contrast for small accent text and iconography in the website landing page.
Changes:
- Added
--display-accenttoken for using the full brand pink in large display text across both schemes. - Updated light-scheme
--text-accentto#D6246F(AA-friendly for small labels/links) and adjusted the landing wordmark styling to use the display accent. - Fixed landing feature-list checkmarks to stroke
var(--text-green)so they darken appropriately in light mode.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/theme/src/tokens.css | Introduces --display-accent and adjusts light-mode --text-accent for AA-friendly small text. |
| apps/website/.vitepress/theme/Landing.vue | Uses --display-accent for the wordmark and switches checkmark stroke to --text-green for better light-mode contrast. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- .btv-pink reverts to --text-accent (AA) for general highlights incl. the small copy toast; --display-accent (brand pink) is now scoped to the large wordmarks only (.btv-title/.btv-word). Fixes the toast falling below AA in light. [Copilot] - tokens.css comment: 'colour' -> 'color' for consistency. [Copilot] Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
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.
From the live review. Supersedes #8.
Accent split
#E0589A(new--display-accent, both schemes) — large display text only needs 3:1, so it stays vibrant.--text-accent→#D6246F— a vivid raspberry that still passes WCAG-AA (~4.6:1) on white, so the tiny mono text stays readable.Green checks
The feature-list check marks were hardcoded to the bright
--green #46B86C, which washed out on white (~2.3:1). They now strokevar(--text-green), so they darken to#15683Aon light (AA) and stay bright on dark.Verified (light)
wordmark
rgb(224,88,154)· eyebrow/tagsrgb(214,36,111)· checksrgb(21,104,58); build green; no overflow/errors.