#860

Status tokens

Three lead-status pills colored by preset domain tokens, plus a canvas bar per status colored with tokenRgba.

0 px

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Status tokens" pattern (@codeatlasdev/ui demo #860, layout/domain-tokens) in my app.

Call get_demo({ ids: ["#860"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Status, tier or channel colors that must follow the preset and the light or dark scheme: declare them once under tokens in the theme, read them as CSS vars or as [r, g, b, a].

Keep these library parts, with the props and tokens the demo uses:
- colorScheme, tokenRgba from "@codeatlasdev/ui"

Behaviour to keep:
- `import { colorScheme, tokenRgba } from '@codeatlasdev/ui'`
- Three `<li class="st__pill st__pill--{s.name}">` pills for `new`, `won` and `lost`, each with `background: var(--ca-token-status-new-subtle)` and `color: var(--ca-token-status-new)` (same pair for `won` and `lost`)
- A `<canvas` of `width="300" height="80"` whose `$effect` reads `colorScheme.resolved` and `colorScheme.preset`, then fills one bar per status with ``tokenRgba(`status.${s.name}`)``
- The pills sit in a wrapping flex row with `gap: var(--ca-space-2)` and `border-radius: var(--ca-radius-pill)`

Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.

Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours.

Status tokens

Library parts

How it is built

Related