Tokens
Public tokens are the theming API: set them in your own stylesheet and everything that reads them follows. Names are --yeti-<group>-<name>. Sizes use xs sm md lg xl 2xl 3xl, where md is the base step.
Scale
| Token | Default | Description |
|---|---|---|
--yeti-base |
unset (override only) | Set to pin the body size at one value for every viewport; overrides both --yeti-base-min and --yeti-base-max. |
--yeti-ratio |
unset (override only) | Set to pin the scale ratio at one value for every viewport; overrides both --yeti-ratio-min and --yeti-ratio-max. |
--yeti-base-min |
1rem |
Body text size at the narrow viewport. |
--yeti-base-max |
1.125rem |
Body text size at the wide viewport. |
--yeti-ratio-min |
1.2 |
Scale ratio at the narrow viewport (minor third). |
--yeti-ratio-max |
1.333 |
Scale ratio at the wide viewport (perfect fourth). |
--yeti-viewport-min |
320px |
Viewport width at which the narrow values apply. |
--yeti-viewport-max |
1280px |
Viewport width at which the wide values apply. |
Space
| Token | Default | Description |
|---|---|---|
--yeti-space-none |
0 |
No space; the value behind data-gap="none". |
--yeti-space-xs |
step -2 |
Hairline gap. |
--yeti-space-sm |
step -1 |
Tight gap. |
--yeti-space-md |
step 0 |
Default gap; equals the body text size. |
--yeti-space-lg |
step 1 |
Comfortable gap. |
--yeti-space-xl |
step 2 |
Section gap. |
--yeti-space-2xl |
step 3 |
Page-level gap. |
--yeti-space-3xl |
step 4 |
Hero-level gap. |
--yeti-space-xs-static |
step -2, narrow viewport value |
Non-fluid xs, for a gap that must not scale. |
--yeti-space-sm-static |
step -1, narrow viewport value |
Non-fluid sm. |
--yeti-space-md-static |
step 0, narrow viewport value |
Non-fluid md. |
--yeti-space-lg-static |
step 1, narrow viewport value |
Non-fluid lg. |
--yeti-space-xl-static |
step 2, narrow viewport value |
Non-fluid xl. |
--yeti-space-2xl-static |
step 3, narrow viewport value |
Non-fluid 2xl. |
--yeti-space-3xl-static |
step 4, narrow viewport value |
Non-fluid 3xl. |
Radius
| Token | Default | Description |
|---|---|---|
--yeti-radius-sm |
0.25 × base |
Small corner radius; inputs, code, badges. |
--yeti-radius-md |
0.5 × base |
Medium corner radius; cards, dialogs. |
--yeti-radius-lg |
1 × base |
Large corner radius; hero panels. |
--yeti-radius-full |
9999px |
Pill or circle. |
Width
| Token | Default | Description |
|---|---|---|
--yeti-width-2xs |
12rem |
The narrowest named width: three of them fit a reading column, which sixteen rem does not. |
--yeti-width-xs |
16rem |
Smallest container measure; the grid's default minimum column width. |
--yeti-width-sm |
24rem |
The sidebar's default width. |
--yeti-width-md |
32rem |
The columns layout's default threshold. |
--yeti-width-lg |
48rem |
A narrow page column. |
--yeti-width-xl |
64rem |
The center layout's default maximum. |
--yeti-width-2xl |
80rem |
A wide page column. |
Height
| Token | Default | Description |
|---|---|---|
--yeti-height-sm |
12rem |
Block size at data-height="sm"; the demo's preview box is the first taker. |
--yeti-height-md |
20rem |
Block size at data-height="md", and with no attribute. |
--yeti-height-lg |
32rem |
Block size at data-height="lg". |
--yeti-height-xl |
48rem |
Block size at data-height="xl". |
Text
| Token | Default | Description |
|---|---|---|
--yeti-text-xs |
step -2 |
Captions and fine print. |
--yeti-text-sm |
step -1 |
Small text; h6. |
--yeti-text-md |
step 0 |
Body text; h5 in bold. |
--yeti-text-lg |
step 1 |
Lead paragraphs; h4. |
--yeti-text-xl |
step 2 |
h3. |
--yeti-text-2xl |
step 3 |
h2. |
--yeti-text-3xl |
step 4 |
h1. |
--yeti-text-display |
step 5 |
Display type, larger than any heading. |
--yeti-leading-md |
1em + 0.5 × base |
Body line height; about 1.5 at body size, tightening as type grows. |
--yeti-leading-sm |
1.5 |
Line height for text set below the body size, such as a code block; a ratio, so it shrinks with the type. |
--yeti-leading-tight |
1.15 |
Heading line height. |
--yeti-measure |
70ch |
Maximum line length for prose. |
--yeti-list-gap |
0.25rem |
Space between one item of a prose list and the next. |
--yeti-lede-size |
var(--yeti-text-lg) |
How large a lede reads. |
--yeti-lede-measure |
50ch |
A lede's line length. Moves with --yeti-lede-size, since ch is a unit of the font. |
Font
| Token | Default | Description |
|---|---|---|
--yeti-font-sans |
system-ui, sans-serif |
Default text face. Yeti ships no web fonts; override this to use yours. |
--yeti-font-mono |
ui-monospace, monospace |
Code face. |
Hue
| Token | Default | Description |
|---|---|---|
--yeti-hue-primary |
250 |
Brand hue in oklch degrees; 250 is blue. Every primary color derives from it. |
--yeti-hue-secondary |
300 |
Secondary hue; 300 is violet. |
--yeti-hue-success |
145 |
Success hue; 145 is green. |
--yeti-hue-warning |
80 |
Warning hue; 80 is amber. |
--yeti-hue-alert |
25 |
Alert hue; 25 is red. |
--yeti-hue-neutral |
var(--yeti-hue-primary) |
Hue that faintly tints surfaces, text, and borders. Follows the primary hue unless set. |
--yeti-chroma |
0.15 |
Accent saturation. Lower for a calmer palette; 0.2 and above may clip on very saturated hues. |
Color
| Token | Default | Description |
|---|---|---|
--yeti-color-primary |
ladder base of the primary hue |
The brand color: buttons, links, focus. |
--yeti-color-primary-subtle |
ladder subtle |
Tinted background; hover on surfaces, selection. |
--yeti-color-primary-soft |
ladder soft |
Borders and dividers in the primary hue. |
--yeti-color-primary-strong |
ladder strong |
Hover and active state of the primary color. |
--yeti-color-primary-text |
ladder text |
Primary-hued text on plain surfaces. |
--yeti-on-primary |
near-white in light, near-black in dark |
Text placed on --yeti-color-primary. |
--yeti-color-secondary |
ladder base of the secondary hue |
Secondary accent. |
--yeti-color-secondary-subtle |
ladder subtle |
Tinted background in the secondary hue. |
--yeti-color-secondary-soft |
ladder soft |
Borders in the secondary hue. |
--yeti-color-secondary-strong |
ladder strong |
Hover and active state of the secondary color. |
--yeti-color-secondary-text |
ladder text |
Secondary-hued text on plain surfaces. |
--yeti-on-secondary |
near-white in light, near-black in dark |
Text placed on --yeti-color-secondary. |
--yeti-color-success |
ladder base of the success hue |
Positive state. |
--yeti-color-success-subtle |
ladder subtle |
Tinted background for success messages. |
--yeti-color-success-soft |
ladder soft |
Borders for success messages. |
--yeti-color-success-strong |
ladder strong |
Hover and active state of the success color. |
--yeti-color-success-text |
ladder text |
Success-hued text on plain surfaces. |
--yeti-on-success |
near-white in light, near-black in dark |
Text placed on --yeti-color-success. |
--yeti-color-warning |
ladder base of the warning hue |
Caution state. |
--yeti-color-warning-subtle |
ladder subtle |
Tinted background for warnings. |
--yeti-color-warning-soft |
ladder soft |
Borders for warnings. |
--yeti-color-warning-strong |
ladder strong |
Hover and active state of the warning color. |
--yeti-color-warning-text |
ladder text |
Warning-hued text on plain surfaces. |
--yeti-on-warning |
near-white in light, near-black in dark |
Text placed on --yeti-color-warning. |
--yeti-color-alert |
ladder base of the alert hue |
Error and danger state. |
--yeti-color-alert-subtle |
ladder subtle |
Tinted background for errors. |
--yeti-color-alert-soft |
ladder soft |
Borders for errors. |
--yeti-color-alert-strong |
ladder strong |
Hover and active state of the alert color. |
--yeti-color-alert-text |
ladder text |
Alert-hued text on plain surfaces. |
--yeti-on-alert |
near-white in light, near-black in dark |
Text placed on --yeti-color-alert. |
--yeti-color-neutral-subtle |
ladder subtle |
Neutral tint for badges and quiet fills. |
--yeti-color-neutral-soft |
ladder soft |
Neutral fill for hover states. |
--yeti-color-neutral |
ladder base |
Neutral accent: buttons and badges with data-variant="neutral". |
--yeti-color-neutral-strong |
ladder strong |
Neutral accent, one step darker: hover and pressed. |
--yeti-color-neutral-text |
ladder text |
Neutral-hued text on plain surfaces. |
--yeti-on-neutral |
near-white in light, near-black in dark |
Text placed on --yeti-color-neutral. |
--yeti-color-surface |
L 0.99 light, 0.13 dark |
Page background. |
--yeti-color-surface-raised |
L 0.97 light, 0.17 dark |
Cards, code blocks, anything sitting on the page. |
--yeti-color-surface-sunken |
L 0.94 light, 0.10 dark |
Wells and inset areas. |
--yeti-color-text |
L 0.15 light, 0.93 dark |
Body text. |
--yeti-color-text-muted |
L 0.45 light, 0.70 dark |
Secondary text: captions, help, metadata. |
--yeti-color-border |
L 0.88 light, 0.30 dark |
Default border and divider. |
--yeti-color-border-strong |
L 0.75 light, 0.40 dark |
Emphasised border: focused inputs, blockquote rule. |
--yeti-color-focus |
var(--yeti-color-primary) |
Focus ring color. |
Motion
| Token | Default | Description |
|---|---|---|
--yeti-duration-fast |
150ms |
Quick transitions; hover and focus. Collapses to 0.01ms under prefers-reduced-motion. |
--yeti-duration-base |
250ms |
Standard transitions; open and close. Collapses under prefers-reduced-motion. |
--yeti-ease |
cubic-bezier(0.2, 0, 0, 1) |
Default easing; fast out, gentle in. |
--yeti-motion-iterations |
infinite |
Iteration count for animations that run forever, such as the spinner. Collapses to 1 under prefers-reduced-motion, because a component's own infinite would outrank the reset and keep running at a random phase every frame. |
--yeti-page-duration |
200ms |
How long the crossfade between two pages takes, for a site that has turned cross-document view transitions on. Collapses to 0.01ms under prefers-reduced-motion, which is the only thing that stills a page transition. |
--yeti-page-ease |
ease |
The curve that crossfade runs on. Symmetric, unlike --yeti-ease, because neither end of a page change leads. |
Layout
| Token | Default | Description |
|---|---|---|
--yeti-cover-height |
100dvh |
Minimum block size of a cover layout or a filled stack. Set to auto for one that is only as tall as its content. |
Border
| Token | Default | Description |
|---|---|---|
--yeti-border-width |
1px |
Width of every border a component draws. |
Weight
| Token | Default | Description |
|---|---|---|
--yeti-weight-normal |
400 |
Body weight. |
--yeti-weight-bold |
700 |
Headings, th, strong and b. Separate from --yeti-weight-strong so display text and control labels can be tuned apart. |
--yeti-weight-strong |
600 |
Labels, headers, buttons. |
Shadow
| Token | Default | Description |
|---|---|---|
--yeti-shadow-color |
black at 14% in light, 55% in dark |
The colour every shadow is drawn in; a theme changes offsets without losing the scheme flip. |
--yeti-shadow-sm |
0 1px 2px (black at 14% light, 55% dark) |
Raised cards. |
--yeti-shadow-md |
0 4px 12px (the same colour) |
Floating surfaces; phase 4's menus and dialogs. |
Control
| Token | Default | Description |
|---|---|---|
--yeti-control-size |
2.5rem |
Minimum block size of a button or input at data-size="md". |
--yeti-control-radius |
var(--yeti-radius-sm) |
Corner of inputs. |
--yeti-control-border |
var(--yeti-color-border) |
Border of inputs at rest. |
--yeti-control-surface |
var(--yeti-color-surface) |
Background of inputs. |
--yeti-control-chevron |
a mid-grey chevron |
The select's chevron image; a theme may supply its own, for example a lighter one for a dark control surface. |
--yeti-opacity-muted |
0.6 |
Opacity of a disabled or busy control. |
Button
| Token | Default | Description |
|---|---|---|
--yeti-button-radius |
var(--yeti-radius-md) |
Corner of buttons. |
--yeti-button-weight |
var(--yeti-weight-strong) |
Weight of button text. |
--yeti-button-padding |
2 |
Inline padding as a multiple of the size's space step. |
Badge
| Token | Default | Description |
|---|---|---|
--yeti-badge-radius |
var(--yeti-radius-full) |
Corner of badges; full makes a pill. |
--yeti-badge-weight |
var(--yeti-weight-strong) |
Weight of badge text. |
Card
| Token | Default | Description |
|---|---|---|
--yeti-card-radius |
var(--yeti-radius-md) |
Corner of cards. |
--yeti-card-padding |
var(--yeti-space-md) |
Padding inside a card. |
--yeti-card-gap |
var(--yeti-space-sm) |
Space between a card's parts. |
--yeti-card-border |
var(--yeti-color-border) |
Border of cards; transparent when raised. |
--yeti-card-surface |
var(--yeti-color-surface-raised) |
Background of cards. |
Field
| Token | Default | Description |
|---|---|---|
--yeti-field-gap |
var(--yeti-space-xs) |
Space between a field's label, control, and hint. |
--yeti-range-value |
0% |
The filled share of a range's track. Set it on the input, inline or from your own script, since CSS cannot read the value. Not a theme value. |
Table
| Token | Default | Description |
|---|---|---|
--yeti-table-stripe |
var(--yeti-color-surface-sunken) |
Fill of even rows with data-striped. |
--yeti-table-border |
var(--yeti-color-border) |
Row and cell borders. |
Seam
| Token | Default | Description |
|---|---|---|
--yeti-seam-size |
twice the size's space step (override only) | Depth of the cut; set it to fix the depth for every size. |
Nav
| Token | Default | Description |
|---|---|---|
--yeti-nav-padding |
var(--yeti-space-sm) var(--yeti-space-md) |
Padding of the bar and of the open panel. |
--yeti-nav-radius |
var(--yeti-radius-sm) |
Corner of the links and the toggle. |
--yeti-nav-border |
var(--yeti-color-border) |
The bar's bottom edge, and the sheet's. |
--yeti-nav-surface |
var(--yeti-color-surface) |
Background of the bar. |
--yeti-nav-panel |
var(--yeti-color-surface-raised) |
Background of the open panel. |
Breadcrumbs
| Token | Default | Description |
|---|---|---|
--yeti-breadcrumbs-separator |
"/" |
The string between crumbs; a theme may prefer "›". |
Pagination
| Token | Default | Description |
|---|---|---|
--yeti-pagination-radius |
var(--yeti-radius-md) |
Corner of each page target. |
Alert
| Token | Default | Description |
|---|---|---|
--yeti-alert-radius |
var(--yeti-radius-md) |
Corner of an alert. |
--yeti-alert-padding |
var(--yeti-space-md) |
Padding inside an alert. |
Progress
| Token | Default | Description |
|---|---|---|
--yeti-progress-radius |
var(--yeti-radius-full) |
Corner of the bar and of its value. |
Spinner
| Token | Default | Description |
|---|---|---|
--yeti-spinner-duration |
0.8s |
One turn of the ring; reduced motion stops it. |
--yeti-spinner-width |
0.15em |
Thickness of the ring. |
Accordion
| Token | Default | Description |
|---|---|---|
--yeti-accordion-border |
var(--yeti-color-border) |
The line between one panel and the next, and around the set. |
--yeti-accordion-padding |
var(--yeti-space-md) |
Padding of a summary and of its panel. |
--yeti-accordion-surface |
var(--yeti-color-surface) |
Background of the set, and so of an open panel. |
--yeti-accordion-summary |
color-mix(in oklch, var(--yeti-accordion-surface) 88%, var(--yeti-color-text)) |
Background of a summary row, set apart from the panel below it. Mixed toward the text colour, so it darkens the row in light and lifts it in dark. |
--yeti-accordion-summary-hover |
color-mix(in oklch, var(--yeti-accordion-surface) 80%, var(--yeti-color-text)) |
Background of a summary under the pointer, one step further from the panel than at rest. |
Tabs
| Token | Default | Description |
|---|---|---|
--yeti-tabs-border |
var(--yeti-color-border) |
The line under the tab list. |
--yeti-tabs-padding |
var(--yeti-space-sm) var(--yeti-space-md) |
Padding of one tab. |
Dropdown
| Token | Default | Description |
|---|---|---|
--yeti-dropdown-surface |
var(--yeti-color-surface-raised) |
Background of the open panel. |
--yeti-dropdown-radius |
var(--yeti-radius-md) |
Corner of the panel. |
--yeti-dropdown-padding |
var(--yeti-space-xs) |
Padding around the items. |
--yeti-dropdown-min |
12rem |
Least width of the panel. |
--yeti-dropdown-open-delay |
100ms |
How long the pointer must rest on a data-trigger="hover" dropdown before its panel opens. Read by hover.js, so it has no effect without that module. |
--yeti-dropdown-close-delay |
200ms |
How long a hover-triggered panel waits after the pointer leaves before it closes, so the gap between trigger and panel is forgiving. Read by hover.js. |
Dialog
| Token | Default | Description |
|---|---|---|
--yeti-dialog-surface |
var(--yeti-color-surface-raised) |
Background of the dialog. |
--yeti-dialog-radius |
var(--yeti-radius-lg) |
Corner of the dialog. |
--yeti-dialog-padding |
var(--yeti-space-lg) |
Padding inside the dialog. |
--yeti-dialog-backdrop |
a translucent wash of the text colour |
The backdrop behind an open dialog. |
Tooltip
| Token | Default | Description |
|---|---|---|
--yeti-tooltip-surface |
var(--yeti-color-text) |
Background of the bubble, inverted so it reads over anything. |
--yeti-tooltip-text |
var(--yeti-color-surface) |
Text of the bubble. |
--yeti-tooltip-radius |
var(--yeti-radius-sm) |
Corner of the bubble. |
Carousel
| Token | Default | Description |
|---|---|---|
--yeti-carousel-dot |
var(--yeti-color-border-strong) |
Colour of a slide dot. |
--yeti-carousel-dot-size |
0.75rem |
Diameter of a slide dot. |
--yeti-carousel-scroll |
smooth, and auto under reduced motion |
How the track scrolls when a dot is followed. A components-layer declaration outranks the reset, so the preference reaches the track through this token. |
Demo
| Token | Default | Description |
|---|---|---|
--yeti-demo-border |
var(--yeti-color-border) |
The preview box's edge. |
--yeti-demo-radius |
var(--yeti-radius-md) |
The preview box's corner, the summary's, and the stop label's. |
--yeti-demo-label |
var(--yeti-color-surface-sunken) |
Surface of the stop label naming the current width, and of the summary. |
Enter
| Token | Default | Description |
|---|---|---|
--yeti-enter-duration |
600ms |
How long one arrival takes. Collapses to 0.01ms under prefers-reduced-motion, which leaves the element present and still. |
--yeti-enter-distance |
2rem |
How far below its place a rising element starts. |
--yeti-enter-scale |
0.94 |
How small a scaling element starts. |
--yeti-enter-stagger |
200ms |
The wait between one staggered child and the next; every child's delay is a multiple of it. Collapses to 0s under prefers-reduced-motion. |
--yeti-enter-delay |
0s |
How long a staggered run waits before its first child moves. |
--yeti-enter-ease |
var(--yeti-ease) |
The curve a staggered entrance runs on. |
Lift
| Token | Default | Description |
|---|---|---|
--yeti-lift-distance |
0.25rem |
How far the element rises under the pointer. Collapses to 0 under prefers-reduced-motion, so the hover keeps its deeper shadow and loses only the movement. |
--yeti-lift-shadow |
var(--yeti-shadow-md) |
The shadow the element casts once lifted. |
--yeti-lift-duration |
var(--yeti-duration-fast) |
How long the lift takes; a consumer tinting the same hover matches it to this. |
--yeti-lift-ease |
var(--yeti-ease) |
The curve a lift runs on. |
Attention
| Token | Default | Description |
|---|---|---|
--yeti-attention-duration |
600ms |
How long the one pulse or shake takes. Collapses to 0.01ms under prefers-reduced-motion. |
--yeti-attention-distance |
0.35rem |
How far a shake throws the element to each side. |
--yeti-attention-scale |
1.06 |
How large a pulse swells the element at its peak. |
Yeti also defines 47 internal --_yeti-* tokens. They derive from the public ones and may change between minor versions; override the public token instead.