feat(design): DESIGN.md-driven theming — dark variant, motion, CI gate#3
Merged
Conversation
Mirrors the api/agent.ts change so `bun run playground:full` agents see the design guide in dev, not just on Vercel.
- DESIGN.md: add variants.dark palette (namespaced extension to the spec)
- Generator: emit each variant as `.sui-theme-<name>`; `dark` also wires
`@media (prefers-color-scheme: dark) { :root:not(.sui-theme-light) }`
so OS preference is honored unless explicitly overridden
- Playground: 4-way switcher (System / Light / Dark / Heritage) with
localStorage persistence. Heritage demonstrates runtime token overrides
layered on top of class-based variants — proof that the same agent
output reskins across three palettes with zero component changes.
Every themable component in styles.css now reads a token (with rgba fallback) instead of hardcoded rgb. Uses color-mix(in srgb, ..., transparent) for tint/alpha so the same hex can drive both the border and a softened background without duplicating tokens. Effect: switching the theme switcher now retouches alerts (info/success/ warning/error), badges, input focus ring, progress bar fill, and input- error states — not just buttons and links.
…ac-73d913 # Conflicts: # playground/index.html
…/link/progress
- DESIGN.md: new `motion:` section (duration.fast/base/slow + easing.standard/
emphasized) and matching prose on when to use each duration. Framework is
agent-cadence so transitions lean short and precise — no bounce, no overshoot.
- Generator: add `motion` to TOKEN_GROUPS so the recursive emitter walks it.
- styles.css: button hover/focus color tweens at duration.fast; link color at
duration.fast; progress fill at duration.base, all via easing.standard (with
hardcoded fallbacks so consumers who skip the generator still look right).
Result: buttons and links have a distinct hover tween instead of hard-flipping,
progress bars ease into new values. Agents can now reference
`{motion.duration.fast}` in custom component tokens alongside colors/spacing.
- package.json: `lint:design` runs upstream `@google/design.md lint DESIGN.md` (WCAG contrast + cross-reference checks). `diff:design` reports token-level changes between two DESIGN.md files — useful for PR reviews. - vitest.config.ts: pick up scripts/**/*.test.ts so generator tests run. - scripts/design-to-css.test.ts: pins the contract between DESIGN.md and the downstream CSS. Runs the generator in-process and asserts :root has every semantic token styles.css consumes, motion tokens exist, token references resolve to var(), dark variant emits both class + media query, and hex is lowercased (biome CSS rule). First lint:design run already surfaced real findings — contrast warnings on button-primary (3.43:1) and button-danger (3.71:1) vs white text (AA needs 4.5:1). Left as-is intentionally; darkening the palette is a design call.
Fix contrast (light palette):
- primary #508cdc → #1f6fc7 (3.43 → 5.11 on white, passes WCAG AA)
- error #dc5a5a → #c43d3d (3.71 → 4.75, passes AA)
- link #6496ff → #2f6fc7 (aligned with primary, readable on light/dark)
- neutral darkened slightly for consistency with the shifted palette
Dark palette unchanged — lighter tones already clear AA on dark ink.
Reference every color in components: (drops all "unreferenced" warnings):
- alert-{info,success,warning,error}.backgroundColor → {colors.*}
- badge-default.backgroundColor → {colors.neutral}
- link / link-hover.textColor → {colors.link[-hover]}
CI gate:
- scripts/lint-design.ts: runs @google/design.md lint --format=json, prints a
readable summary, exits non-zero on structural errors. Warnings are logged
but do not block merges yet (raise the bar when the warning surface is
clean beyond what's left).
- package.json lint:design points at the new script.
- .github/workflows/ci.yml runs lint:design after build.
Linter now reports 0 errors / 0 warnings.
|
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.
Summary
Builds on PR #2 (adopting the DESIGN.md spec) with the full theming pipeline, a generator extension for variants + motion, and a CI gate using the upstream
@google/design.mdlinter.variants.darkin DESIGN.md drives@media (prefers-color-scheme: dark)+.sui-theme-darkopt-in class. Switcher lives in the Settings popover alongside Model / Layout / Account.motion.duration.{fast,base,slow}+motion.easing.{standard,emphasized}. Wired through button / link / progress transitions.color-mix(in srgb, var(--sui-colors-*) N%, transparent)so the same hex drives saturated borders and softened backgrounds.primary#508cdc→#1f6fc7(3.43 → 5.11),error#dc5a5a→#c43d3d(3.71 → 4.75). Dark palette untouched.components:so every color token is referenced. Drops the "unused token" warnings.scripts/lint-design.tsruns@google/design.md lint, fails onerrors > 0, surfaces warnings in the log. Wired into.github/workflows/ci.yml.scripts/design-to-css.test.tspins the generator contract (5 new tests).Linter now reports 0 errors, 0 warnings.
Test plan
bun run lint:design→ 0/0/1bun run lint·typecheck·test(97/97) ·buildall greenrgb(31, 111, 199)with white text (AA pass)lint:designgate