TaskBuild a tokenized card. :root has color-scheme light dark + tokens: --bg, --surface, --text, --text-muted, --border, --primary (oklch 0.55 0.18 252), --primary-fg (white), --radius (12px), --shadow-sm, --shadow-md. @media dark overrides --bg, --surface, --text, --text-muted, --border. body uses --bg + --text. .card padding 20px, background var(--surface), border 1px solid var(--border), border-radius var(--radius), box-shadow var(--shadow-sm), transition 'box-shadow 0.15s'. .card:hover gets var(--shadow-md). .card h3 color var(--text). .card p color var(--text-muted). .card .cta background var(--primary), color var(--primary-fg), padding 8px 14px, border none, border-radius var(--radius), font-size 14px. .card .cta:hover background color-mix(in oklch, var(--primary), white 15%).
Module capstone: tokenized themed component
200 XP14 min
Theory
Putting B5 together
Build a card component that uses EVERY B5 concept:
- B5-01: OKLCH colors (not hex).
- B5-02: Light/dark mode color ramps.
- B5-03: color-mix for hover state.
- B5-04: 10 design tokens at :root.
- B5-05: prefers-color-scheme media override.
- B5-09: double-shadow elevation on hover.
- B5-10: color-scheme: light dark for native widgets.
Result: a card that looks polished in BOTH light and dark mode without conditional component code. The trick is that the COMPONENT only references var(--*) β the theme switches by remapping the variables.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.