css/design-tokens

Why

A brand colour typed as #0a58ca in forty rules cannot be changed, themed or put into dark mode in one place, and a near-miss (#0a58cb) slips in unnoticed. When the project already has a token for the value, the literal also hides the link between the design and the code.

Fix

Use the token the project defines: var(--color-brand), $color-brand or @color-brand. When a colour repeats and no token exists yet, add one on :root (or in the Sass tokens file) with a name that says its role, not its hue, and replace the literals. Spacing that equals a step of the spacing scale uses that step.

Examples

/* bad: the project defines --color-brand: #0a58ca and --space-4: 1rem */
.card { padding: 1rem; border: 1px solid #0a58ca; }
/* good */
.card { padding: var(--space-4); border: 1px solid var(--color-brand); }

Sources

• MDN, Using CSS custom properties (variables)
• Sass documentation, Variables

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/design-tokens