fix(tokens): add overlay/media tokens — design-system token-compliance 60→100#443
Merged
fix(tokens): add overlay/media tokens — design-system token-compliance 60→100#443
Conversation
…through --la-*
- new tokens in src/styles/globals.css: --la-overlay-scrim-{faint,light,soft,*,medium,strong,deep,deeper,near}, --la-surface-on-media{*}, --la-media-canvas, --la-text-on-media{,-muted}, --la-border-on-media
- VideoPlayer/Lightbox/ImageComparison/ImageGallery/CookiePreferencesDialog and AlertDialog/Banner/Command/CookieConsent/CookieConsentBanner/Dialog/Sheet/TagInput rewritten to use bg-[var(--la-...)] arbitrary value classes
- switch thumbs converted from bg-white to bg-background (semantic, dark-mode aware)
- Banner/TagInput/SettingsLayoutBlock dual-mode hovers converted to bg-foreground/N
- design-system token-compliance score 60 -> 100 (verdict pass), unblocks the kill-criterion gate
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Why
Token compliance kill criterion tripped: design-system scored 60/100 (threshold 70), with 54 hardcoded Tailwind color violations concentrated in overlay/modal/media components (VideoPlayer, Lightbox, ImageComparison, ImageGallery, CookiePreferencesDialog, AlertDialog, Banner, Command, CookieConsent, Dialog, Sheet, TagInput).
Per AGENT_PRINCIPLES §1, kill criteria block all other ship-target work — and this design-system regression propagates to every template that consumes these components, so fixing it here is the highest-leverage move.
What
New media-overlay token family in
src/styles/globals.css— intentionally constant across light/dark, since these tokens sit ON user-controlled visual content (videos, photos, lightbox images, dialog scrims) where a fixed dark scrim and white chrome is the universal pattern:--la-overlay-scrim-{faint,light,soft,medium,strong,deep,deeper,near}(rgba black at 0.1–0.95)--la-surface-on-media{,-soft,-strong,-stronger,-translucent,-deep,-near}--la-media-canvas,--la-text-on-media,--la-text-on-media-muted,--la-border-on-mediaComponent rewrites — converted hardcoded Tailwind classes to arbitrary-value semantic forms:
bg-black/50→bg-[var(--la-overlay-scrim)]bg-white/20→bg-[var(--la-surface-on-media)]text-white→text-[var(--la-text-on-media)]bg-gradient-to-t from-black/80→from-[var(--la-overlay-scrim-deep)]Switch thumbs (
CookieConsent,CookiePreferencesDialog,CookieConsentBanner,FeatureComparison):bg-white→bg-background(semantic, dark-mode aware — matches shadcn defaults).Dual-mode hovers (
Banner,TagInput,SettingsLayoutBlock):hover:bg-black/10 dark:hover:bg-white/10→hover:bg-foreground/10(single semantic form replaces light/dark pair).Verification
pnpm build— tsup ESM/CJS/DTS all succeedpnpm test— 283/283 vitest tests passpnpm lint— only pre-existing warnings (no new errors)scripts/scan-token-compliance.sh design-systemagainst this branch — score 100/100, verdict pass, 0 violations (was 60/100, 54 violations)Notes
--la-*undefined references introduced.ring-offset-black(not flagged by scanner but still hardcoded) opportunistically converted toring-offset-[var(--la-media-canvas)]for consistency.