CSS variables generator — turn a token list into custom properties

How to use the CSS variables generator

1. In Tokens, write one name: value per line, for example brand: #4f46e5 or radius: 12px.
2. Add an optional Prefix, such as ds, to group your variables.
3. Change the Selector if the values belong to a theme or component instead of :root.
4. Tick Add a spacing scale and set the Spacing base unit and Spacing steps if you want spacing tokens too.
5. Copy the CSS or download it as tokens.css, and read any warning below it.

What it does and when to use it

CSS custom properties, often called CSS variables, store a value once and reuse it with var(). Changing --brand in one place then recolours every button, link and border that uses it. The generator is for the moment when you have values in a spreadsheet, a design file or a style guide and want them as tidy, consistently named CSS.

For colour sets built from one base colour, the CSS colour palette generator writes numbered variables for you, and the type scale generator does the same for font sizes. If you want colour, spacing, type and radius tokens all built from scales, try the scale-based variables generator.

How it works

Each line is split at the first colon or equals sign. The name is cleaned, the prefix is added, and the value is copied as written, minus characters that could break the rule, such as braces and semicolons. The block ends with a usage hint that references your first variable:

/* Usage */
.example {
  color: var(--brand);
}

If the same name appears twice, both lines are kept, because in CSS the last one wins, and the tool lists the duplicate in a warning. MDN lists custom properties and var() as Baseline widely available since April 2017.

Worked examples

The default token list produces six variables, ending with --font-sans: system-ui, sans-serif;. Values with commas stay intact.

Messy names with a prefix. Tokens Primary Color = #ff0000, fontBody: 16px and bad line, prefix ds:

:root {
  --ds-primary-color: #ff0000;
  --ds-font-body: 16px;
}

plus the warning “Skipped line 3: use name: value.”

A dark theme override with a mistake. Selector [data-theme="dark"] with brand defined twice gives the warning “Defined more than once (the last one wins): –brand.”

Limits and tips

• Values are not checked. brand: #zzz is copied as written; the browser will ignore it later. Check colours with the colour converter.
• Variables are case-sensitive in CSS, which is one reason the tool lower-cases every name.
• Keep names about purpose, not looks. --text-muted survives a redesign; --grey-500 may not.