Define semantic color tokens for a card and support a dark theme without repeating component declarations.
Requirements
Name tokens by meaning, not hue
Override tokens in one dark selector
Keep component rules token-based
Show a hint
Write down the input contract and the failure cases before coding.
local runtime
RUNTIME OUTPUT
Use your CSS runtime locally, then compare with solution.css.
Use your local runtime, then review the reference solution
LEARN FROM THE SOLUTION
Why the solution works.
Semantic tokens separate what a color means from its light or dark value. Components continue to reference surface, text, and border, so a theme switch only changes the token definitions rather than every component selector.
What this exercise teaches
Custom properties
Semantic tokens
Dark mode
A PRACTICAL PLAN
Work through Design a theme token system with intent.
Translate the contract.Turn the requirements into a short checklist before editing your-solution.css.
Use the example as evidence.Predict the result for the supplied input, then add one boundary case such as an empty value, a limit, or unexpected input.
Review the implementation.Compare your choices against solution.css only after a real attempt.
EXERCISE FAQ
Before you move on.
What does “Design a theme token system” teach?
This advanced CSS exercise focuses on Custom properties, Semantic tokens, Dark mode. Its requirements define the exact behavior to implement before you write code.
How should I validate this CSS solution?
Apply the CSS to a small HTML fixture in your browser, check narrow and keyboard states, then compare the design decisions in solution.css.
When should I open the reference solution?
Attempt Design a theme token system first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
