Theme Contract Parts
elements man style/reference/ui-partsThe 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 (opens in a new tab).
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 |