tokens.md

raw	true
title	Tokens
description	Every public Yeti custom property, grouped, with its default and what it is for.
nav_group	Reference
nav_order	1

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".
--yeti-height-half	50dvh	Block size at data-height="half": half the viewport, dynamic so it tracks the browser chrome on phones.

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-heading-space-before	var(--yeti-space-xl)	Space above a section heading (h2, h3) in flow, from what comes before it. Read by base flow and by breakout.
--yeti-heading-space-after	var(--yeti-space-sm)	Space between any heading in flow and what it opens. Read by base flow and by breakout.
--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.
--yeti-tracking-heading	normal	letter-spacing of every heading level and the billboard. Set in em so a large heading tightens more than a small one; a page may set it on one level.

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.
--yeti-stretch-text	normal	font-stretch of the body: the width axis of a variable font, as a keyword or a percentage.
--yeti-stretch-heading	normal	font-stretch of the headings, set apart from the text so a theme can pair narrow text with a wide title in one family.
--yeti-stretch-small	var(--yeti-stretch-text)	font-stretch of small lettering: captions, small print, a nav's links, a badge. The text width unless a theme narrows it.

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-scrim	the surface at 85%	A wash over content so something on top of it can be read: a caption over a picture, a veil over a form. Thinned surface, so it dims with the theme rather than tinting.
--yeti-color-focus	var(--yeti-color-primary)	Focus ring color.
--yeti-link-color	var(--yeti-color-primary) (override only)	Text color of a link at rest. Read with a fallback, so a section's own primary still colors its links. A theme whose primary is too light to read as text points this at the hue's text step, --yeti-color-primary-text.
--yeti-link-color-hover	var(--yeti-color-primary-strong) (override only)	Text color of a link under the pointer. Read with a fallback, so a section's own primary still colors its links.
--yeti-white	oklch(1 0 0)	White, in both schemes and under every theme. One of the three colors that never move.
--yeti-black	oklch(0 0 0)	Black, in both schemes and under every theme.
--yeti-grey	oklch(0.565 0 0)	18% reflectance, the photographic middle grey, in both schemes and under every theme.
--yeti-grey-0	0% from surface to text	The page surface, as the first step of the greyscale.
--yeti-grey-10	10% from surface to text	10% of the way from the page surface to its text. Near the page in both schemes when the number is low.
--yeti-grey-20	20% from surface to text	20% of the way from the page surface to its text. Near the page in both schemes when the number is low.
--yeti-grey-30	30% from surface to text	30% of the way from the page surface to its text. Near the page in both schemes when the number is low.
--yeti-grey-40	40% from surface to text	40% of the way from the page surface to its text. Near the page in both schemes when the number is low.
--yeti-grey-50	50% from surface to text	50% of the way from the page surface to its text. Near the text in both schemes when the number is high.
--yeti-grey-60	60% from surface to text	60% of the way from the page surface to its text. Near the text in both schemes when the number is high.
--yeti-grey-70	70% from surface to text	70% of the way from the page surface to its text. Near the text in both schemes when the number is high.
--yeti-grey-80	80% from surface to text	80% of the way from the page surface to its text. Near the text in both schemes when the number is high.
--yeti-grey-90	90% from surface to text	90% of the way from the page surface to its text. Near the text in both schemes when the number is high.
--yeti-grey-100	100% from surface to text	The page text color, as the last step of the greyscale.
--yeti-color-primary-0	grey-0 at the primary hue	The primary hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-primary-10	grey-10 at the primary hue	The primary hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-primary-20	grey-20 at the primary hue	The primary hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-primary-30	grey-30 at the primary hue	The primary hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-primary-40	grey-40 at the primary hue	The primary hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-primary-50	grey-50 at the primary hue	The primary hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-primary-60	grey-60 at the primary hue	The primary hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-primary-70	grey-70 at the primary hue	The primary hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-primary-80	grey-80 at the primary hue	The primary hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-primary-90	grey-90 at the primary hue	The primary hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-primary-100	grey-100 at the primary hue	The primary hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.
--yeti-color-secondary-0	grey-0 at the secondary hue	The secondary hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-secondary-10	grey-10 at the secondary hue	The secondary hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-secondary-20	grey-20 at the secondary hue	The secondary hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-secondary-30	grey-30 at the secondary hue	The secondary hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-secondary-40	grey-40 at the secondary hue	The secondary hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-secondary-50	grey-50 at the secondary hue	The secondary hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-secondary-60	grey-60 at the secondary hue	The secondary hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-secondary-70	grey-70 at the secondary hue	The secondary hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-secondary-80	grey-80 at the secondary hue	The secondary hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-secondary-90	grey-90 at the secondary hue	The secondary hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-secondary-100	grey-100 at the secondary hue	The secondary hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.
--yeti-color-success-0	grey-0 at the success hue	The success hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-success-10	grey-10 at the success hue	The success hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-success-20	grey-20 at the success hue	The success hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-success-30	grey-30 at the success hue	The success hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-success-40	grey-40 at the success hue	The success hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-success-50	grey-50 at the success hue	The success hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-success-60	grey-60 at the success hue	The success hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-success-70	grey-70 at the success hue	The success hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-success-80	grey-80 at the success hue	The success hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-success-90	grey-90 at the success hue	The success hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-success-100	grey-100 at the success hue	The success hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.
--yeti-color-warning-0	grey-0 at the warning hue	The warning hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-warning-10	grey-10 at the warning hue	The warning hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-warning-20	grey-20 at the warning hue	The warning hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-warning-30	grey-30 at the warning hue	The warning hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-warning-40	grey-40 at the warning hue	The warning hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-warning-50	grey-50 at the warning hue	The warning hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-warning-60	grey-60 at the warning hue	The warning hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-warning-70	grey-70 at the warning hue	The warning hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-warning-80	grey-80 at the warning hue	The warning hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-warning-90	grey-90 at the warning hue	The warning hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-warning-100	grey-100 at the warning hue	The warning hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.
--yeti-color-alert-0	grey-0 at the alert hue	The alert hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-alert-10	grey-10 at the alert hue	The alert hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-alert-20	grey-20 at the alert hue	The alert hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-alert-30	grey-30 at the alert hue	The alert hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-alert-40	grey-40 at the alert hue	The alert hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-alert-50	grey-50 at the alert hue	The alert hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-alert-60	grey-60 at the alert hue	The alert hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-alert-70	grey-70 at the alert hue	The alert hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-alert-80	grey-80 at the alert hue	The alert hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-alert-90	grey-90 at the alert hue	The alert hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-alert-100	grey-100 at the alert hue	The alert hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.
--yeti-color-neutral-0	grey-0 at the neutral hue	The neutral hue at the lightness of --yeti-grey-0; flips with the scheme as the grey does.
--yeti-color-neutral-10	grey-10 at the neutral hue	The neutral hue at the lightness of --yeti-grey-10; flips with the scheme as the grey does.
--yeti-color-neutral-20	grey-20 at the neutral hue	The neutral hue at the lightness of --yeti-grey-20; flips with the scheme as the grey does.
--yeti-color-neutral-30	grey-30 at the neutral hue	The neutral hue at the lightness of --yeti-grey-30; flips with the scheme as the grey does.
--yeti-color-neutral-40	grey-40 at the neutral hue	The neutral hue at the lightness of --yeti-grey-40; flips with the scheme as the grey does.
--yeti-color-neutral-50	grey-50 at the neutral hue	The neutral hue at the lightness of --yeti-grey-50; flips with the scheme as the grey does.
--yeti-color-neutral-60	grey-60 at the neutral hue	The neutral hue at the lightness of --yeti-grey-60; flips with the scheme as the grey does.
--yeti-color-neutral-70	grey-70 at the neutral hue	The neutral hue at the lightness of --yeti-grey-70; flips with the scheme as the grey does.
--yeti-color-neutral-80	grey-80 at the neutral hue	The neutral hue at the lightness of --yeti-grey-80; flips with the scheme as the grey does.
--yeti-color-neutral-90	grey-90 at the neutral hue	The neutral hue at the lightness of --yeti-grey-90; flips with the scheme as the grey does.
--yeti-color-neutral-100	grey-100 at the neutral hue	The neutral hue at the lightness of --yeti-grey-100; flips with the scheme as the grey does.

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.
--yeti-sticky-offset	var(--yeti-space-md)	How far from the leading edge of the scrollport a child carrying data-sticky stops. Set it to a sticky bar's height on whatever holds the things that stick below it.
--yeti-scroll-padding	var(--yeti-sticky-offset)	Where a scroll-into-view stops below the top edge: a fragment jump, scrollIntoView, a focused control. The sticky offset by default; set it alone for more room above a jumped-to heading than the things that stick need. Root-level: it is read by the root's scroll padding.

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 color 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 color)	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.
--yeti-button-padding-block	0.25	Block padding as a multiple of the size's space step. The control height still sets the minimum, so this shows on a wrapped label, and a theme raises it for roomier buttons.

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-switch-track	var(--yeti-control-border)	Fill and border of an off switch's track. Keep it 3:1 against the page surface.
--yeti-switch-thumb	var(--yeti-control-surface)	The thumb of an off switch.
--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.
--yeti-nav-brand-weight	var(--yeti-weight-strong)	Weight of the nav's brand.
--yeti-nav-brand-size	1em	Size of the nav's brand; 1em is the bar's own size.
--yeti-nav-link	currentColor	Color of a plain link in the bar; the bar's own color unless set. The current link and a hovered link keep the variant's tints, and the open panel resets it to its own text color.

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.

Toc

Token	Default	Description
--yeti-toc-scroll	smooth, and auto under reduced motion	How the page scrolls when a link in a toc, or an in-page link in a nav, is followed. A components-layer declaration outranks the reset, so the preference reaches the page through this token. The name keeps the toc it started with.
--yeti-toc-padding	var(--yeti-space-xs)	The rows' block padding: a control's density by default, a book's contents page sets it smaller.
--yeti-toc-hover	var(--_yeti-variant-subtle) (override only)	Background of a toc link under the pointer. Read with a fallback to the variant's subtle tint; set transparent for an underline-only list.

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.
--yeti-alert-edge	four times the local border width (override only)	Width of an alert's start edge, at every emphasis. Read with a fallback to four times --yeti-border-width, evaluated locally, so a section with its own border width still gets four of its own; set this directly to fix the width regardless of the local border.

Progress

Token	Default	Description
--yeti-progress-radius	var(--yeti-radius-full)	Corner of the bar and of its value.
--yeti-progress-size	half the size's space step (override only)	Thickness of the bar, a length. Read with a fallback to half the size's space step; a hairline reading bar sets 2px.

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 color, 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	black at 60%	The backdrop behind an open dialog. Black rather than a theme color, because a backdrop dims what is behind it in every theme.

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)	Color 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 an element waits before it arrives, or a staggered run before its first child moves. Set it on one element to time that element alone.
--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-scale	1.02	How much the element grows at data-lift="scale"; reduced motion takes it to one.
--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.

Fit

Token	Default	Description
--yeti-fit-width	var(--yeti-width-md)	The container width at which a line carrying billboard reaches the top of its pair; below it the size is in proportion, above it the clamp holds.

Yeti also defines 47 internal --_yeti-* tokens. They derive from the public ones and may change between minor versions; override the public token instead.