# 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.