Component mapping

Route: Library → Properties → Tokens → Component mapping

Bind each component CSS variable to one of your tokens. Light + dark separately. These bindings drive the live component previews in the Components surface.

This is the top tier of the three-token model. component ships ~30 CSS variables (--primary, --background, --ring, etc.); Tostada makes each of them editable, with side-by-side light and dark.

Layout

Variables are grouped in this order:

1. Surface — --background, --card, --popover, …
2. Action — --primary, --secondary, --accent, …
3. Neutral — --muted, --muted-foreground
4. Status — --destructive, …
5. Form — --input, --ring
6. Chart — --chart-1 … --chart-5
7. Sidebar — --sidebar-* family
8. Geometry — --radius

Each row has five columns:

The two swatches show the resolved color following the reference chain — useful for spotting a misbinding before you open a component preview.

Editing

• Light binding — pick any token (primitive or semantic).
• Dark binding — same, applied in dark mode. Leave blank to inherit from the light binding.

A change here propagates through the postMessage handshake to every component preview in the Components surface. Open Components → Button in another tab while you edit — you'll see every variant restyle.

Picking a semantic vs a primitive

Both work. Prefer a semantic when one exists:

• --primary → bg-accent (semantic) → resolves to color-blue-500 (primitive)

If you later swap the accent color, only the primitive moves; --primary and bg-accent follow automatically. Binding --primary directly to color-blue-500 works today and breaks the day you want a different accent without touching the palette.

There's an escape hatch: bind a component var directly to a primitive when no semantic captures the role yet. Promote it to a semantic later if it's reused.

Why three tiers and not two

If you skip the semantic tier, every brand change is a find-and-replace across component variables. With the semantic tier, you change one binding (bg-accent) and every component variable bound to it updates. See three-tier tokens.

Diagnostic

The preview-host shows a small token status badge in the bottom-right of every component detail page:

• ● tokens (green) — the parent broadcast arrived; the page is rendering with your tokens.
• ○ placeholder (amber) — no tokens received yet; the page is rendering with component's stock defaults.

If you see amber, the postMessage handshake hasn't completed — usually fixed by reloading the iframe.