Change any value. Everything on the right follows.

Shape and motion

Palette

--canvas

--canvas-raised

--canvas-overlay

--surface-subtle

--fill

--fill-strong

--ink

--ink-soft

--ink-muted

--ink-subtle

--ink-disabled

--brand

--brand-foreground

--brand-strong

--brand-ink

--brand-surface

--line

--line-strong

Status colors

--success

--success-foreground

--success-surface

--success-surface-foreground

--success-border

--warning

--warning-foreground

--warning-surface

--warning-surface-foreground

--warning-border

--destructive

--destructive-foreground

--destructive-strong

--destructive-surface

--destructive-surface-foreground

--destructive-border

--info

--info-foreground

--info-surface

--info-surface-foreground

--info-border

Paste after the token import

/* Change a value to see the CSS to paste after the token import. */
PaidDue soon
Glass

Hover a token to see where it lands.