feat(cockpit): wire the dark design tokens into the example apps - #868
Merged
Conversation
…apps The wiring half of the tokens follow-up. Each app's styles.css imports the generated tokens-dark.css, so var(--ds-*) finally resolves: - 216 uses whose fallbacks were byte-copies of darkOverrides: unchanged. - 32 uses had NO fallback and were silently invalid - client-tools' weather and confirm cards rendered transparent with unset text on the dark canvas. They now get their intended dark surfaces and text. - The drifted fallbacks (accentBorder .25 vs .2, three white-alpha surfaceTinted values, one 18px radius-xl) adopt the tokens: micro-shifts. Two deliberate divergences, verified before choosing them: - The six 0.3-alpha shadows stay as literals with a comment: the --ds-shadow tokens are light-tuned (0.06-0.10 alpha) and vanish on dark surfaces. - fontMono gains ui-monospace before the generic keyword in typography.ts itself - consumers without JetBrains Mono (all 14 of these apps) get the platform mono instead of Courier. The website is unaffected: it loads JetBrains Mono via next/font, so the first entry always wins; its 40 verbatim CSS literals keep the old two-entry stack with zero rendering difference. Verified: all 14 apps build; the built element-rendering app renders its dark design pixel-for-pixel with tokens live (--ds-canvas rgb(17,17,17), body dark, SF Mono); client-tools' bundle carries the tokens; 6 affected projects' unit tests green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
blove
enabled auto-merge (squash)
August 30, 2026 14:25
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
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
1 participant
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.
What
The wiring half of the last arc follow-up (#867 built the file): the 14 dark-designed cockpit example apps import
tokens-dark.css, so theirvar(--ds-*)references finally resolve to real tokens.--ds-shadowtokens are light-tuned and vanish on dark surfaces (commented at each site)One token improvement riding along
fontMonobecomes"JetBrains Mono", ui-monospace, monospaceintypography.ts. Without it, wiring would have regressed these apps' mono text from SF Mono to Courier (none load JetBrains Mono). The website is unaffected — it loads JetBrains Mono via next/font so the first entry always wins; its 40 verbatim CSS literals keep the old stack with zero rendering difference.Verified
All 14 apps build with the import resolving; the built
element-renderingapp renders its dark design pixel-for-pixel with tokens live (--ds-canvas rgb(17,17,17), SF Mono via the new chain); client-tools' bundle carries the tokens; 6 affected projects' unit tests green; design-tokens suite green (regenerated files under the byte-drift guard).This closes the last follow-up from the docs-review arc.
🤖 Generated with Claude Code