Component tokens

Between the raw scales and the components sit per-component token slots. A component reads from its slot, and the slot points at the scale or theme underneath. Retune a component's whole look (its height, radius, or borders) by repointing its slot in one place instead of editing the component CSS. These live in themes/default.css inside @layer tokens.

Radius roles

The radius scale is mapped onto semantic roles so a rounder or squarer look is a one-line change:

Slot	Default	Used by
--radius	4px	The base radius everything else defaults to
--radius-control	--radius	Buttons, inputs, selects, tabs
--radius-surface	--radius	Cards, panels, <pre>
--radius-overlay	--radius-md (6px)	Popovers, dropdowns, toasts
--radius-dialog	--radius-lg (8px)	Modals, sheets
--radius-tag	--radius-xs (2px)	Tags, chips, badges
--radius-pill	--radius-full	Pills, status dots, avatars

Input slots

The form controls read from these:

Slot	Default
--input-height	2.5rem (40px)
--input-height-sm	2rem (32px)
--input-height-lg	3rem (48px)
--input-padding-x	0.875rem
--input-padding-y	0.5rem
--input-radius	--radius-control
--input-font-size	--text-sm
--input-bg	--bg
--input-border	--rule
--input-border-hover	--rule-strong
--input-border-focus	--accent
--input-placeholder	--ink-faint

Button slots

Slot	Default
--button-height	2.5rem (40px)
--button-height-sm	2rem (32px)
--button-height-lg	3rem (48px)
--button-height-hero	3.5rem (56px)
--button-padding-x	1rem
--button-padding-x-sm	0.75rem
--button-padding-x-lg	1.25rem
--button-radius	--radius-control
--button-font-size	--text-sm
--button-font-size-lg	--text-base
--button-font-weight	--weight-medium

Terminal slots

The terminal component sits on a fixed dark surface in both light and dark mode (unlike bare <pre>, which uses --bg-inverse and flips with the theme):

Slot	Default
--terminal-bg	--neutral-900
--terminal-ink	--neutral-100
--terminal-dim	--neutral-500

Control glyph slots

Two controls draw their glyph from an inline SVG data URI. Data URIs can't reference CSS variables, so the theme ships a literal-color glyph per mode:

• --checkbox-check: the checkmark stroke; tracks --accent-ink.
• --select-caret: the select dropdown caret; tracks --ink-dim.

A theme that changes --accent-ink or --ink-dim should repoint these too (copy the URL and change the stroke='%23…' hex). The Elements brand theme and the customer-example recipe both show this.

Avatar slots (reserved)

The theme defines avatar sizing tokens:

Slot	Default
--avatar-size	2rem
--avatar-size-xs	1.25rem
--avatar-size-sm	1.5rem
--avatar-size-lg	2.5rem
--avatar-size-xl	3.5rem
--avatar-radius	--radius-pill

These are reserved token slots only. v1 ships no avatar component and no .avatar class. The tokens exist so an app (or a future component) can build an avatar on the system's sizing without inventing its own scale.