Implement the btravstack Design System token model#6
Merged
Conversation
Align packages/theme + the landing with the canonical design system (claude.ai/design btravstack Design System), which formalizes the tokens: - tokens.css: split brand FILL (--accent) from accent-as-TEXT (--text-accent / --text-green); add --glass, accent washes, --code-bg, --green-rgb, and a full type scale (--fs-*/--tracking-*/--lh-*). Move the light scheme into the tokens (:root:not(.dark) + .light/[data-theme]) so surfaces/text/accent flip globally — warm near-whites with the brand darkened to deep beetroot (#A52260 ~5.6:1) for WCAG-AA links on white. - style.css: collapse the VitePress mapping to one scheme-aware :root:root block (brand-1 = --text-accent), add tip/warning admonition tints. - Landing.vue: use --text-accent for colored text, --accent for fills, --glass header, accent washes; drop the now-redundant ad-hoc light block. Bump @btravstack/theme 1.0.0 -> 1.1.0 (also carries the earlier flourishes). Verified light + dark on the landing and on VitePress chrome: fills stay pink, text/links darken to #A52260, no console errors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Implements the formal btravstack Design System token model in the shared theme package, making light/dark scheme switching primarily token-driven (rather than per-consumer overrides) and updating the website landing + VitePress variable mapping to use the new semantic tokens.
Changes:
- Expanded
tokens.csswith a formal semantic token model (including fill-vs-text accents, glass/washes, code inset, and a type scale) and added light-scheme overrides. - Simplified VitePress theme variable mapping to be scheme-aware via semantic tokens (including new admonition tints).
- Updated the website landing styles to use
--text-accentfor colored text and shared tokens for glass/washes; bumped@btravstack/themeto 1.1.0.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/theme/src/tokens.css | Introduces the canonical token model and light-scheme overrides, including split fill vs text accents and new semantic tokens. |
| packages/theme/src/style.css | Remaps semantic tokens to VitePress --vp-* variables in a single scheme-aware block; adds admonition tint variables. |
| packages/theme/package.json | Bumps @btravstack/theme version to 1.1.0 and reformats arrays. |
| apps/website/.vitepress/theme/Landing.vue | Refactors landing styles to rely on shared tokens (text accent vs fill accent, glass, washes) and removes bespoke light overrides. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- style.css: inline code (--vp-code-color) now uses --text-accent so it stays readable on the scheme-aware code inset (was --bt-pink-soft, which was low-contrast on the light code wash). [Copilot, PR #6] - Landing.vue: add aria-pressed to the appearance toggle so assistive tech announces the current state. [Copilot, PR #5] 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.
Implements the canonical btravstack Design System (claude.ai/design) into the production code. The design system was reverse-engineered from this monorepo, so most of it was already built — this adopts its formalized token model, the real value-add.
Tokens (
packages/theme/src/tokens.css)--accent/--greenfor FILLS; add--text-accent/--text-greenfor COLORED TEXT. Light mode darkens text to deep beetroot (#A52260≈ 5.6:1,#15683A≈ 5.2:1) so links/labels pass WCAG-AA on white, while fills stay vibrant pink.--glass,--accent-wash/-2/-line,--code-bg,--green-rgb, and a full type scale (--fs-*,--tracking-*,--lh-*).:root:not(.dark)+.light/[data-theme="light"]) so surfaces/text/accent flip globally for both the website and the docs.Docs theme (
style.css):root:rootmapping (--vp-c-brand-1 = --text-accent), added tip/warning admonition tints. Flourishes (glow, float, lift) retained.Landing (
Landing.vue)--text-accent, fills →--accent, header →--glass, chips/tiles → accent washes. Dropped the ad-hoc per-component light overrides (tokens handle it now).Verified
Light + dark on the landing and on standard VitePress chrome —
--text-accentresolves#E0589A(dark) /#A52260(light), fills stay pink, no console errors.Notes
@btravstack/theme→ 1.1.0 (also carries the earlier flourishes). Needs an npm publish (blocked on your 2FA OTP) before the docs sites can adopt it.🤖 Generated with Claude Code