Tokens
Semantic tokens (--paper, --fill, --ink, --stroke, --accent) name the role; the value resolves through whichever scope the element is in. Components don't reach for raw colors — they reach for the named token.
Token reference
The action-message component below uses each of these tokens. Inspect it in DevTools to see how each role resolves.
| Element | Token |
|---|---|
| Card background | --fill-secondary |
| Card border | --stroke-primary |
| Heading | --ink-primary |
| Body text | --ink-secondary |
| Meta text | --ink-auxiliary |
| Divider | --stroke-secondary |
| Badge background | --fill-auxiliary |
| Links, buttons, badge dot | --accent |
Default (no scope modifiers)
Tone variations
Tone overrides --accent. Same component, different accent color.
data-tone="success"
data-tone="warning"
data-tone="danger"
data-tone="info"
Emphasis variations
Emphasis changes --fill-* and --ink-*. Same component, different background and text.
data-emphasis="alternate"
data-emphasis="focused"
data-emphasis="immersive"
Combined: emphasis + tone
Independent dimensions combine. Emphasis sets fill/ink; tone sets accent.
data-emphasis="focused" + data-tone="success"
data-emphasis="immersive" + data-tone="danger"