Token Names - Elements Manual

Every token to use in app CSS, on one page: the semantic theme tokens, then the scale. Names only; theme (opens in a new tab) and scale (opens in a new tab) give the values.

Left out: the raw ramp steps (--neutral-500, --danger-600, ...). Use the semantic token that points at one, so the color follows the theme and dark mode.

white

--white

black

--black

bg

--bg, --bg-soft, --bg-muted, --bg-panel, --bg-elevated, --bg-canvas, --bg-inverse

ink

--ink, --ink-soft, --ink-dim, --ink-faint, --ink-inverse, --ink-soft-flow

rule

--rule, --rule-soft, --rule-strong

accent

--accent, --accent-deep, --accent-soft, --accent-ink, --accent-edge

success

--success, --success-fill, --success-soft, --success-ink, --success-edge

warning

--warning, --warning-soft, --warning-ink, --warning-edge

danger

--danger, --danger-fill, --danger-soft, --danger-ink, --danger-edge

info

--info, --info-fill, --info-soft, --info-ink, --info-edge

focus

--focus, --focus-ring, --focus-ring-danger

opacity

--opacity-disabled, --opacity-muted, --opacity-overlay

transition

--transition-colors, --transition-shadow, --transition-transform, --transition-opacity

radius

--radius, --radius-control, --radius-surface, --radius-overlay, --radius-dialog, --radius-tag, --radius-pill

checkbox

--checkbox-check

select

--select-caret

input

--input-height, --input-height-sm, --input-height-lg, --input-padding-x, --input-padding-y, --input-radius, --input-font-size, --input-bg, --input-border, --input-border-hover, --input-border-focus, --input-placeholder

button

--button-height, --button-height-sm, --button-height-lg, --button-height-hero, --button-padding-x, --button-padding-x-sm, --button-padding-x-lg, --button-radius, --button-font-size, --button-font-size-lg, --button-font-weight

avatar

--avatar-size, --avatar-size-xs, --avatar-size-sm, --avatar-size-lg, --avatar-size-xl, --avatar-radius

terminal

--terminal-bg, --terminal-ink, --terminal-dim

text

--text-2xs, --text-xs, --text-sm, --text-base, --text-md, --text-lg, --text-xl, --text-2xl, --text-3xl, --text-4xl, --text-5xl, --text-6xl, --text-7xl, --text-8xl

weight

--weight-thin, --weight-light, --weight-regular, --weight-medium, --weight-semibold, --weight-bold, --weight-black

leading

--leading-none, --leading-tight, --leading-snug, --leading-body, --leading-relaxed, --leading-loose

tracking

--tracking-tighter, --tracking-tight, --tracking-snug, --tracking-normal, --tracking-wide, --tracking-wider, --tracking-widest

font

--font-sans, --font-serif, --font-mono

space

--space-0, --space-px, --space-0-5, --space-1, --space-1-5, --space-2, --space-2-5, --space-3, --space-3-5, --space-4, --space-5, --space-6, --space-7, --space-8, --space-9, --space-10, --space-11, --space-12, --space-14, --space-16, --space-20, --space-24, --space-28, --space-32, --space-40, --space-48, --space-56, --space-64

radius

--radius-none, --radius-xs, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-2xl, --radius-3xl, --radius-4xl, --radius-full

shadow

--shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl, --shadow-inner

duration

--duration-instant, --duration-fast, --duration-normal, --duration-slow, --duration-slower

ease

--ease-linear, --ease-out, --ease-in, --ease-in-out, --ease-spring

z

--z-base, --z-raised, --z-sticky, --z-fixed, --z-overlay, --z-modal, --z-popover, --z-dropdown, --z-tooltip, --z-toast, --z-top

bp

--bp-sm, --bp-md, --bp-lg, --bp-xl, --bp-2xl

container

--container-xs, --container-sm, --container-md, --container-lg, --container-xl, --container-2xl, --container-3xl, --container-4xl, --container-5xl, --container-6xl, --container-7xl, --container-prose, --container-shell, --container-wide, --container-padding

measure

--measure