# Theme Contract Parts

The rest of the theme contract in `@elements/ui/style/ui-tokens.css`: sizes
and colors particular templates read, then the slots that carry the contract
into style/base. Starts on [ui-tokens](ui-tokens).

**Default** is the value ui-tokens.css declares. **Themes** names the
shipped themes (`@elements/ui/themes/<name>`) whose light-mode value differs
from it; "all but" counts all 12 themes.

<!-- GENERATED by tools/styledocs. Do not hand-edit. -->

## Parts: sizes and colors particular templates read

| Token | Default | Note | Themes |
| --- | --- | --- | --- |
| `--check-size` | `1rem` | checkbox and radio box; the switch derives from it | all but dashboard, default, editorial, luxury |
| `--control-outline` | `color-mix(in oklab, var(--ink-faint), var(--ink) 30%)` | unchecked check, radio, switch edge: 3:1 on --bg | brutalist, civic, commerce, dashboard, luxury |
| `--switch-thumb` | `var(--white)` | switch knob, off | brutalist, civic, luxury |
| `--switch-thumb-checked` | `var(--accent-ink)` | switch knob, on | dashboard |
| `--indicator-width` | `2px` | active tab line | all but calm, coder, commerce, default, elements |
| `--link-underline-offset` | `0.2em` | gap between link text and its underline | all but coder, dashboard, default, elements |
| `--avatar-size` | `var(--control-height)` | avatar diameter | none |
| `--avatar-size-sm` | `var(--control-height-sm)` | small avatar diameter | none |
| `--avatar-size-lg` | `var(--control-height-lg)` | large avatar diameter | none |
| `--progress-height` | `var(--space-2)` | progress bar thickness | all but default |
| `--progress-height-sm` | `var(--space-1)` | thin progress bar | all but coder, commerce, default, elements |
| `--progress-height-lg` | `var(--space-3)` | thick progress bar | all but default |
| `--slider-thumb` | `1rem` | slider knob diameter | all but default, editorial |
| `--slider-thickness` | `0.375rem` | slider track thickness | all but calm, default |
| `--table-row-padding-y` | `var(--space-2)` | table body cells | all but dashboard, default |
| `--measure-narrow` | `24rem` | centered short copy (Empty) | all but coder, default, playful |
| `--toast-width` | `var(--container-sm)` | toast width | civic, coder, commerce |
| `--scrollbar-size` | `var(--space-2-5)` | ScrollArea bar | all but default, marketing, playful |
| `--carousel-gap` | `var(--space-4)` | space between carousel slides | all but brutalist, civic, default, elements |
| `--drawer-canvas` | `var(--bg-canvas)` | around a page a Drawer scales back | none |
| `--drawer-handle-width` | `var(--space-24)` | drag handle width | commerce, dashboard, elements, luxury, playful |
| `--drawer-handle-height` | `var(--space-1-5)` | drag handle thickness | brutalist, civic, dashboard, elements, luxury, playful |
| `--drawer-wrapper-inset` | `var(--space-3)` | side inset of the page a Drawer scales back | calm, dashboard, luxury, marketing, playful |
| `--sidebar-bg` | `var(--bg-soft)` | sidebar fill | brutalist |
| `--sidebar-ink` | `var(--ink)` | sidebar text | none |
| `--sidebar-accent` | `var(--item-highlight)` | hovered or active sidebar item | civic, dashboard, marketing, playful |
| `--sidebar-accent-ink` | `var(--item-highlight-ink)` | text on that item | civic, dashboard, marketing, playful |
| `--sidebar-border` | `var(--rule)` | sidebar edge color | brutalist |

## Code: syntax colors for CodeEditor and MessageResponse

| Token | Default | Note | Themes |
| --- | --- | --- | --- |
| `--syntax-keyword` | `var(--danger-ink)` | keywords | all but civic, commerce, default |
| `--syntax-string` | `var(--info-ink)` | strings | all but civic, coder, commerce, default, editorial |
| `--syntax-number` | `var(--warning-ink)` | numbers | brutalist, elements |
| `--syntax-function` | `var(--success-ink)` | function names | all but civic, coder, commerce, default, editorial |
| `--syntax-type` | `var(--success-ink)` | type names | brutalist, dashboard, elements, luxury, marketing, playful |
| `--syntax-property` | `var(--link)` | properties and keys | brutalist, dashboard, elements, luxury, marketing, playful |
| `--syntax-comment` | `var(--ink-dim)` | comments | elements |
| `--syntax-variable` | `var(--ink)` | variables | elements |
| `--syntax-punctuation` | `var(--ink-soft)` | punctuation and operators | luxury |
| `--code-selection` | `color-mix(in oklab, var(--accent) 22%, transparent)` | selected text in code | brutalist, civic, dashboard, elements, luxury |
| `--code-font-size` | `calc(var(--text-ui) * 0.9375)` | code text size | dashboard, elements, marketing |

## Charts: the categorical series palette and mark radius

| Token | Default | Note | Themes |
| --- | --- | --- | --- |
| `--chart-1` | `light-dark( oklch(from var(--info-500) calc(l - 0.045) calc(c - 0.037) calc(h + 0.5)), oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.039) calc(h + 0.1)))` | The dataviz reference palette (blue, orange, aqua, yellow, magenta, green, violet, red), validated for adjacent-pair color vision separation in both modes, written relative to --info-500 so a theme that moves its blue moves the palette. | calm, luxury, marketing |
| `--chart-2` | `light-dark( oklch(from var(--info-500) calc(l + 0.051) calc(c - 0.025) calc(h + 145.6)), oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.027) calc(h + 145.1)))` | series 2: orange | calm, luxury |
| `--chart-3` | `light-dark( oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.059) calc(h + 267.1)), oklch(from var(--info-500) calc(l + 0.001) calc(c - 0.072) calc(h + 268.1)))` | series 3: aqua | calm, luxury |
| `--chart-4` | `light-dark( oklch(from var(--info-500) calc(l + 0.144) calc(c - 0.039) calc(h + 180.1)), oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.057) calc(h + 178.2)))` | series 4: yellow | calm, luxury |
| `--chart-5` | `light-dark( oklch(from var(--info-500) calc(l + 0.096) calc(c - 0.059) calc(h + 102.4)), oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.029) calc(h + 105.8)))` | series 5: magenta | calm, luxury |
| `--chart-6` | `light-dark( oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)), oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)))` | series 6: green | calm, luxury |
| `--chart-7` | `light-dark( oklch(from var(--info-500) calc(l - 0.093) calc(c - 0.003) calc(h + 28.4)), oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.055) calc(h + 31.8)))` | series 7: violet | calm, luxury, marketing |
| `--chart-8` | `light-dark( oklch(from var(--info-500) calc(l + 0.003) calc(c - 0.009) calc(h + 129.9)), oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.041) calc(h + 127.3)))` | series 8: red | calm, luxury |
| `--chart-radius` | `var(--radius-item)` | corner radius of bars and marks | all but coder, default, editorial, luxury |

## Bridges

style/base's own component slots follow the contract, so bare `<button>`, `<input>`, .card and the rest re-theme with it.

| Token | Default | Note | Themes |
| --- | --- | --- | --- |
| `--button-height` | `var(--control-height)` | button height | none |
| `--button-height-sm` | `var(--control-height-sm)` | small button height | none |
| `--button-height-lg` | `var(--control-height-lg)` | large button height | none |
| `--button-padding-x` | `var(--control-padding-x)` | button inline padding | none |
| `--button-padding-x-sm` | `var(--control-padding-x-sm)` | small button inline padding | none |
| `--button-padding-x-lg` | `var(--control-padding-x-lg)` | large button inline padding | none |
| `--button-font-size` | `var(--text-ui)` | button text size | none |
| `--button-font-size-lg` | `var(--text-ui-lg)` | large button text size | none |
| `--button-font-weight` | `var(--weight-ui)` | button text weight | none |
| `--input-height` | `var(--control-height)` | input height | none |
| `--input-height-sm` | `var(--control-height-sm)` | small input height | none |
| `--input-height-lg` | `var(--control-height-lg)` | large input height | none |
| `--input-font-size` | `var(--text-ui)` | input text size | none |
| `--input-bg` | `var(--control-bg)` | input fill | none |
| `--input-border` | `var(--control-border)` | input edge color | none |

## Derived

--focus-ring is rebuilt from the width, offset, inner layer and ring color, so a theme sets those four and never --focus-ring: a token one theme sets outside the contract leaks into every other look when the catalog loads them all.

| Token | Default | Note | Themes |
| --- | --- | --- | --- |
| `--focus-ring` | `0 0 0 var(--focus-ring-offset) var(--focus-ring-inner), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)` | the focus box-shadow every focusable reads | none |
| `--focus-ring-danger` | `0 0 0 var(--focus-ring-offset) var(--focus-ring-inner), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--danger)` | the same ring in the danger color, on an invalid field | none |