Reference

Every token for all 26 components, generated from the JSON sources so it can never drift from the shipped CSS.

Every table below is generated at build time from dist/tokens.json, which Style Dictionary produces from the same JSON sources as the CSS. Nothing here is written by hand, so a token cannot appear in the reference without existing in the package, or change value without the page changing with it.

Values are shown as they ship. A token that references a semantic token shows var(--the-semantic-token) rather than a resolved color or length, because that reference is what makes an override of the semantic layer propagate. See Style Dictionary for why the build keeps it that way.

Reading this offline, from the repository or from node_modules? The tables below are rendered by the documentation site. The same data, in machine-readable form, sits in dist/tokens.json, and the final CSS is in dist/css/components/.

alert

Inline notification banner. 9 tokens.

	Token	Value
	`--alert-align`	`start`
	`--alert-border-radius`	`var(--radius-none)`
	`--alert-border-style`	`var(--border-style-normal)`
	`--alert-border-width`	`var(--border-width-sm)`
Aa	`--alert-font-size`	`var(--font-size-small)`
	`--alert-gap`	`var(--spacing-sm)`
	`--alert-margin`	`0`
	`--alert-padding-block`	`var(--spacing-sm)`
	`--alert-padding-inline`	`var(--spacing-sm)`

badge

Badge, pill and tag. 12 tokens.

	Token	Value
	`--badge-border-radius`	`var(--radius-pill)`
	`--badge-border-style`	`solid`
	`--badge-border-width`	`0`
	`--badge-color-background`	`var(--color-background-muted)`
	`--badge-color-background-hover`	`var(--color-background-muted-hover)`
	`--badge-color-border`	`transparent`
Aa	`--badge-font-size`	`var(--font-size-2xs)`
Aa	`--badge-font-weight`	`var(--font-weight-control)`
Aa	`--badge-line-height`	`var(--line-height-snug)`
	`--badge-padding-inline`	`var(--spacing-xs)`
	`--badge-padding-block`	`var(--spacing-2xs)`
	`--badge-text-transform`	`none`

Breadcrumb navigation. 10 tokens.

	Token	Value
	`--breadcrumb-border-style`	`var(--border-style-normal)`
	`--breadcrumb-border-width`	`var(--border-width-sm)`
	`--breadcrumb-color-border`	`var(--color-border)`
	`--breadcrumb-color-separator`	`var(--color-text-muted)`
	`--breadcrumb-color-text`	`var(--color-text-muted)`
	`--breadcrumb-color-text-active`	`var(--color-text)`
Aa	`--breadcrumb-font-size`	`var(--font-size-xs)`
	`--breadcrumb-gap`	`var(--spacing-xs)`
	`--breadcrumb-padding-block`	`var(--spacing-xs)`
	`--breadcrumb-separator`	`"/"`

button

Button, all variants and sizes. 28 tokens.

	Token	Value
	`--btn-border-radius`	`var(--radius-control)`
	`--btn-border-style`	`var(--border-style-normal)`
	`--btn-border-width`	`var(--border-width-sm)`
	`--btn-color-background`	`var(--color-brand)`
	`--btn-color-background-hover`	`var(--color-brand-hover)`
	`--btn-color-border`	`var(--color-brand)`
	`--btn-color-border-hover`	`var(--color-brand-hover)`
	`--btn-color-text`	`var(--color-text-on-brand)`
	`--btn-color-text-hover`	`var(--btn-color-text)`
	`--btn-color-text-decoration`	`transparent`
	`--btn-color-text-decoration-hover`	`transparent`
	`--btn-control-color-background`	`var(--color-background-muted)`
	`--btn-control-color-background-hover`	`var(--color-background-muted-hover)`
	`--btn-control-color-border`	`transparent`
	`--btn-control-color-border-hover`	`transparent`
	`--btn-control-color-text`	`var(--color-text)`
	`--btn-control-color-text-hover`	`var(--color-text)`
Aa	`--btn-font-size`	`var(--font-size-fluid-sm)`
Aa	`--btn-font-weight`	`var(--font-weight-control)`
	`--btn-gap`	`var(--spacing-xs)`
Aa	`--btn-line-height`	`var(--line-height-snug)`
	`--btn-padding-inline`	`var(--spacing-control)`
	`--btn-padding-block`	`var(--spacing-control)`
	`--btn-shadow`	`var(--shadow-control)`
	`--btn-shadow-hover`	`var(--shadow-control-hover)`
	`--btn-text-decoration-line`	`underline`
	`--btn-text-transform`	`none`
	`--btn-transition`	`var(--transition-color)`

card

Card, an alias layer over item. 36 tokens.

	Token	Value
	`--card-border-radius`	`var(--item-border-radius)`
	`--card-border-style`	`var(--item-border-style)`
	`--card-border-width`	`var(--item-border-width)`
	`--card-color-background`	`var(--item-color-background)`
	`--card-color-border`	`var(--item-color-border)`
	`--card-color-text`	`var(--item-color-text)`
	`--card-gap`	`var(--item-gap)`
	`--card-media-border-radius`	`var(--item-media-border-radius)`
	`--card-media-border-style`	`var(--item-media-border-style)`
	`--card-media-border-width`	`var(--item-media-border-width)`
	`--card-media-color-background`	`var(--item-media-color-background)`
	`--card-media-icon-align`	`var(--item-media-icon-align)`
	`--card-media-icon-border-radius`	`var(--item-media-icon-border-radius)`
	`--card-media-icon-border-style`	`var(--item-media-icon-border-style)`
	`--card-media-icon-border-width`	`var(--item-media-icon-border-width)`
	`--card-media-icon-color`	`var(--item-media-icon-color)`
	`--card-media-icon-color-background`	`var(--item-media-icon-color-background)`
	`--card-media-icon-margin-inline`	`var(--item-media-icon-margin-inline)`
	`--card-media-icon-margin-block`	`var(--item-media-icon-margin-block)`
	`--card-media-icon-ratio`	`var(--item-media-icon-ratio)`
	`--card-media-icon-size`	`var(--item-media-icon-size)`
	`--card-media-icon-width`	`var(--item-media-icon-width)`
	`--card-media-order`	`var(--item-media-order)`
	`--card-media-ratio`	`var(--item-media-ratio)`
	`--card-order`	`var(--item-order)`
	`--card-padding-inline`	`var(--item-padding-inline)`
	`--card-padding-block`	`var(--item-padding-block)`
	`--card-shadow`	`var(--item-shadow)`
	`--card-shadow-hover`	`var(--item-shadow-hover)`
	`--card-surtitle-margin-block-end`	`calc(var(--card-gap) * -1)`
	`--card-title-color`	`var(--item-title-color)`
Aa	`--card-title-font-family`	`var(--item-title-font-family)`
Aa	`--card-title-font-size`	`var(--item-title-font-size)`
Aa	`--card-title-font-weight`	`var(--item-title-font-weight)`
	`--card-title-line-height`	`var(--item-title-line-height)`
	`--card-transition`	`var(--transition-box-shadow)`

carousel

Carousel, arrows and pagination. 28 tokens.

	Token	Value
	`--carousel-arrow-border-width`	`var(--border-width-sm)`
	`--carousel-arrow-border-radius`	`var(--radius-pill)`
	`--carousel-arrow-color`	`var(--color-link)`
	`--carousel-arrow-color-background`	`transparent`
	`--carousel-arrow-color-background-hover`	`var(--color-link)`
	`--carousel-arrow-color-border`	`var(--color-link)`
	`--carousel-arrow-color-border-hover`	`var(--color-link-hover)`
	`--carousel-arrow-color-hover`	`var(--color-background)`
	`--carousel-arrow-gap`	`var(--spacing-xs)`
	`--carousel-arrow-icon`	`var(--icon-arrow)`
	`--carousel-arrow-icon-size`	`var(--icon-size)`
	`--carousel-arrow-margin-block`	`var(--spacing-sm)`
	`--carousel-arrow-margin-inline`	`var(--spacing-xs)`
	`--carousel-arrow-opacity-disabled`	`var(--opacity-disabled)`
	`--carousel-arrow-size`	`var(--spacing-lg)`
	`--carousel-pagination-border-style`	`var(--border-style-normal)`
	`--carousel-pagination-border-width`	`var(--border-width-sm)`
	`--carousel-pagination-border-radius`	`var(--radius-pill)`
	`--carousel-pagination-color`	`var(--color-neutral)`
	`--carousel-pagination-color-active`	`var(--color-active)`
	`--carousel-pagination-color-border`	`transparent`
	`--carousel-pagination-color-border-active`	`transparent`
	`--carousel-pagination-color-border-hover`	`transparent`
	`--carousel-pagination-color-hover`	`var(--color-neutral-hover)`
	`--carousel-pagination-gap`	`var(--spacing-2xs)`
	`--carousel-pagination-height`	`var(--spacing-xs)`
	`--carousel-pagination-margin-block`	`var(--spacing-sm)`
	`--carousel-pagination-width`	`var(--spacing-xs)`

container

Layout container, max-widths and bleed. 17 tokens.

	Token	Value
	`--container-bleed-mobile`	`var(--gutter)`
	`--container-bleed-tablet`	`var(--gutter)`
	`--container-bleed-tablet-wide`	`var(--gutter)`
	`--container-bleed-laptop`	`var(--gutter)`
	`--container-bleed-desktop`	`0px`
	`--container-max-width-mobile`	`100%`
	`--container-max-width-tablet`	`100%`
	`--container-max-width-tablet-wide`	`100%`
	`--container-max-width-laptop`	`100%`
	`--container-max-width-desktop`	`var(--size-desktop)`
	`--grid-column`	`var(--grid-column-mobile)`
	`--grid-column-desktop`	`var(--span-quarter)`
	`--grid-column-laptop`	`var(--span-quarter)`
	`--grid-column-mobile`	`var(--span-full)`
	`--grid-column-tablet`	`var(--span-half)`
	`--grid-column-tablet-wide`	`var(--span-third)`
	`--gutter`	`var(--spacing-fluid-md)`

details

Native details and accordion. 25 tokens.

	Token	Value
	`--details-border-radius`	`var(--radius-surface)`
	`--details-border-style`	`var(--border-style-normal)`
	`--details-border-width`	`var(--border-width-sm)`
	`--details-box-shadow`	`var(--shadow-sm)`
	`--details-box-shadow-hover`	`var(--shadow-md)`
	`--details-color-background`	`var(--color-background)`
	`--details-color-border`	`var(--color-border)`
	`--details-color-border-open`	`var(--color-border-hover)`
	`--details-color-text`	`var(--color-text)`
	`--details-icon`	`var(--icon-chevron)`
	`--details-icon-open`	`var(--details-icon)`
	`--details-icon-rotate-open`	`180deg`
	`--details-icon-size`	`var(--icon-size)`
	`--details-icon-transition`	`rotate var(--duration-normal) var(--easing)`
	`--details-margin`	`var(--spacing-sm)`
	`--details-content-align`	`start`
Aa	`--details-content-font-size`	`var(--font-size-text)`
	`--details-content-padding-inline`	`var(--spacing-sm)`
	`--details-content-padding-block`	`var(--spacing-sm)`
Aa	`--details-summary-font-family`	`var(--font-family-heading)`
Aa	`--details-summary-font-size`	`var(--font-size-md)`
Aa	`--details-summary-font-weight`	`var(--font-weight-heading)`
	`--details-summary-padding-inline`	`var(--spacing-sm)`
	`--details-summary-padding-block`	`var(--spacing-sm)`
	`--details-transition`	`var(--transition-normal)`

drawer

Off-canvas panel. 22 tokens.

Token	Value	Description
`--drawer-backdrop-blur`	`var(--blur-backdrop)`
`--drawer-backdrop-color`	`var(--color-backdrop)`
`--drawer-border-style`	`var(--border-style-normal)`
`--drawer-border-width`	`var(--border-width-sm)`
`--drawer-bottom`	`0`
`--drawer-color-background`	`var(--color-background-surface)`
`--drawer-color-border`	`var(--color-border)`
`--drawer-color-text`	`var(--color-text-on-surface)`
`--drawer-color-text-active`	`var(--color-text-on-surface)`	Links inside the panel keep the panel text colour unless this is overridden.
`--drawer-color-text-hover`	`var(--color-text-on-surface)`	Links inside the panel keep the panel text colour unless this is overridden.
`--drawer-end`	`0`
`--drawer-height`	`50vh`
`--drawer-padding-block`	`var(--spacing-surface)`
`--drawer-padding-inline`	`var(--spacing-surface)`
`--drawer-shadow`	`var(--shadow-surface)`
`--drawer-start`	`auto`
`--drawer-top`	`0`
`--drawer-transition-duration`	`var(--duration-slow)`
`--drawer-transition-easing`	`var(--easing-out-expo)`
`--drawer-translate`	`translateX(100%)`
`--drawer-width`	`320px`
`--drawer-z-index`	`var(--z-index-drawer)`

Dropdown menu. 21 tokens.

	Token	Value
	`--dropdown-border-radius`	`var(--radius-surface)`
	`--dropdown-border-style`	`var(--border-style-normal)`
	`--dropdown-border-width`	`var(--border-width-sm)`
	`--dropdown-color-background`	`var(--color-background-surface)`
	`--dropdown-color-border`	`var(--color-border)`
	`--dropdown-color-text`	`var(--color-text-on-surface)`
	`--dropdown-icon`	`var(--icon-chevron)`
	`--dropdown-icon-size`	`var(--icon-size)`
	`--dropdown-item-border-radius`	`var(--radius-xs)`
	`--dropdown-item-color-background`	`var(--color-background)`
	`--dropdown-item-color-background-hover`	`var(--color-background-muted)`
Aa	`--dropdown-item-font-size`	`var(--font-size-xs)`
	`--dropdown-item-padding-inline`	`var(--spacing-xs)`
	`--dropdown-item-padding-block`	`var(--spacing-xs)`
	`--dropdown-min-width`	`12rem`
	`--dropdown-padding`	`var(--size-4)`
	`--dropdown-shadow`	`var(--shadow-sm)`
	`--dropdown-transition-duration`	`var(--duration-fast)`
	`--dropdown-transition-easing`	`var(--easing-out)`
	`--dropdown-translate-y`	`-4px`
	`--dropdown-z-index`	`var(--z-index-dropdown)`

embed

Video and iframe wrapper. 7 tokens.

	Token	Value
	`--embed-border-radius`	`var(--radius-none)`
	`--embed-border-style`	`var(--border-style-normal)`
	`--embed-border-width`	`var(--border-width-sm)`
	`--embed-box-shadow`	`none`
	`--embed-color-border`	`var(--color-border)`
	`--embed-max-width`	`100%`
	`--embed-ratio`	`var(--ratio-video)`

figure

Figure and figcaption. 4 tokens.

	Token	Value
Aa	`--figure-figcaption-font-size`	`var(--font-size-sm)`
	`--figure-figcaption-gap`	`var(--spacing-xs)`
	`--figure-gap`	`var(--spacing-xs)`
	`--figure-margin-block`	`var(--spacing-md)`

heading

Heading typography scale. 3 tokens.

	Token	Value
	`--heading-gap`	`var(--spacing-xs)`
	`--heading-margin-block-end`	`var(--spacing-fluid-md)`
	`--heading-surtitle-margin-block-end`	`calc(var(--heading-gap) * -1)`

hero

Hero and banner section. 17 tokens.

	Token	Value
	`--hero-color-background`	`var(--color-background)`
	`--hero-color-link`	`var(--color-text)`
	`--hero-color-text`	`var(--color-text)`
	`--hero-gap`	`var(--spacing-sm)`
	`--hero-gradient-color-from`	`var(--gradient-darken-color-from)`
	`--hero-gradient-color-to`	`var(--gradient-darken-color-to)`
	`--hero-gradient-stop`	`var(--gradient-darken-stop)`
	`--hero-gradient-stop-tablet`	`var(--gradient-darken-stop-tablet)`
	`--hero-gradient-stop-desktop`	`var(--gradient-darken-stop-desktop)`
	`--hero-height`	`clamp(25rem, 23.2394rem + 7.5117vw, 30rem)`
	`--hero-home-height`	`clamp(30rem, 26.4789rem + 15.0235vw, 40rem)`
	`--hero-media-brightness`	`0.5`
	`--hero-max-height`	`calc(100vh - var(--header-height))`
	`--hero-padding-block`	`var(--spacing-md)`
	`--hero-padding-inline`	`0px`
	`--hero-title-color`	`var(--color-text)`
Aa	`--hero-title-font-size`	`var(--font-size-heading-01)`

item

Item, the canonical card-like unit. 55 tokens.

	Token	Value
	`--item-border-radius`	`var(--radius-surface)`
	`--item-border-style`	`var(--border-style-normal)`
	`--item-border-width`	`var(--border-width-sm)`
	`--item-btn-border-width`	`0`
	`--item-btn-color-background`	`transparent`
	`--item-btn-color-text`	`var(--color-brand)`
	`--item-btn-padding`	`0`
	`--item-btn-text-decoration`	`none`
	`--item-btn-text-decoration-hover`	`underline`
	`--item-color-background`	`var(--color-background)`
	`--item-color-border`	`var(--color-border)`
	`--item-color-text`	`var(--color-text-muted)`
	`--item-gap`	`var(--spacing-sm)`
	`--item-media-border-radius`	`var(--radius-none)`
	`--item-media-border-style`	`var(--item-border-style)`
	`--item-media-border-width`	`var(--item-border-width)`
	`--item-media-color-background`	`var(--media-color-background)`
	`--item-media-icon-align`	`start`
	`--item-media-icon-border-radius`	`var(--item-media-border-radius)`
	`--item-media-icon-border-style`	`var(--item-media-border-style)`
	`--item-media-icon-border-width`	`var(--item-media-border-width)`
	`--item-media-icon-color`	`var(--item-title-color)`
	`--item-media-icon-color-background`	`transparent`
	`--item-media-icon-color-border`	`transparent`
	`--item-media-icon-margin-inline`	`var(--item-padding-inline)`
	`--item-media-icon-margin-block`	`var(--item-padding-block)`
	`--item-media-icon-ratio`	`var(--ratio-square)`
	`--item-media-icon-size`	`var(--font-size-fluid-md)`
	`--item-media-icon-width`	`auto`
	`--item-media-order`	`-2`
	`--item-media-ratio`	`var(--ratio-video)`
	`--item-metas-border-end`	`0`
	`--item-metas-border-start`	`0`
	`--item-metas-color-background`	`var(--item-color-background)`
	`--item-metas-color-text`	`var(--color-text-muted)`
Aa	`--item-metas-font-size`	`var(--font-size-2xs)`
	`--item-metas-order`	`-1`
	`--item-metas-padding-inline`	`var(--spacing-card)`
	`--item-metas-padding-block`	`var(--spacing-card)`
	`--item-metas-padding-block-start`	`var(--spacing-card)`
	`--item-metas-padding-block-end`	`0`
	`--item-order`	`none`
	`--item-padding-inline`	`var(--spacing-card)`
	`--item-padding-block`	`var(--spacing-card)`
	`--item-padding-block-start`	`var(--spacing-card)`
	`--item-padding-block-end`	`var(--spacing-card)`
	`--item-shadow`	`var(--shadow-sm)`
	`--item-shadow-hover`	`var(--shadow-md)`
	`--item-surtitle-margin-block-end`	`calc(var(--item-gap) * -1)`
	`--item-title-color`	`var(--color-text)`
Aa	`--item-title-font-family`	`var(--font-family-heading)`
Aa	`--item-title-font-size`	`var(--font-size-fluid-md)`
Aa	`--item-title-font-weight`	`var(--font-weight-heading)`
	`--item-title-line-height`	`var(--line-height-heading)`
	`--item-transition`	`var(--transition-box-shadow)`

items

Items grid and list wrapper. 3 tokens.

	Token	Value
	`--items-cols`	`auto-fill`
	`--items-gap`	`var(--gap)`
	`--items-min-width`	`30ch`

link

Inline link. 4 tokens.

	Token	Value
	`--link-color-text-decoration`	`initial`
	`--link-color-text-decoration-hover`	`transparent`
	`--link-text-decoration-line`	`underline`
	`--link-transition`	`var(--transition-color)`

list

Styled list. 6 tokens.

	Token	Value
Aa	`--list-item-font-size`	`var(--font-size-sm)`
	`--list-item-gap`	`var(--spacing-2xs)`
	`--list-item-marker`	`'-'`
	`--list-item-marker-gap`	`var(--spacing-2xs)`
Aa	`--list-label-font-weight`	`var(--font-weight-bold)`
	`--list-label-margin-block`	`var(--spacing-2xs)`

logo

Logotype. 7 tokens.

	Token	Value
	`--logo-color`	`var(--color-text)`
Aa	`--logo-font-family`	`var(--font-family-heading)`
Aa	`--logo-font-size`	`var(--font-size-md)`
Aa	`--logo-font-weight`	`var(--font-weight-heading)`
	`--logo-height`	`var(--size-24)`
	`--logo-height-tablet`	`var(--size-32)`
Aa	`--logo-letter-spacing`	`0`

map

Embedded map. 5 tokens.

	Token	Value
	`--map-border-radius`	`var(--radius-none)`
	`--map-color-background`	`var(--color-background-muted)`
	`--map-margin-block`	`var(--spacing-md)`
	`--map-ratio`	`var(--ratio-cinema)`
	`--map-ratio-mobile`	`var(--ratio-square)`

media

Media object, image plus text. 4 tokens.

	Token	Value
	`--media-color-background`	`var(--color-background-media)`
	`--media-logo-max-height`	`70%`
	`--media-logo-max-width`	`60%`
	`--media-ratio`	`var(--ratio-video)`

Centered dialog. 21 tokens.

Token	Value	Description
`--modal-backdrop-blur`	`var(--blur-backdrop)`
`--modal-backdrop-color`	`var(--color-backdrop)`
`--modal-border-style`	`var(--border-style-normal)`
`--modal-border-width`	`var(--border-width-sm)`
`--modal-color-background`	`var(--color-background-surface)`
`--modal-color-border`	`var(--color-border)`
`--modal-color-text`	`var(--color-text-on-surface)`
`--modal-color-text-active`	`var(--color-text-on-surface)`	Links inside the panel keep the panel text colour unless this is overridden.
`--modal-color-text-hover`	`var(--color-text-on-surface)`	Links inside the panel keep the panel text colour unless this is overridden.
`--modal-margin`	`var(--spacing-sm)`
`--modal-max-height`	`100dvh`
`--modal-max-width`	`30rem`
`--modal-min-height`	`0`	Floor for the panel height; it otherwise shrinks to its content.
`--modal-padding-block`	`var(--spacing-surface)`
`--modal-padding-inline`	`var(--spacing-surface)`
`--modal-radius`	`var(--radius-surface)`
`--modal-shadow`	`var(--shadow-surface)`
`--modal-transition-duration`	`var(--duration-slow)`
`--modal-transition-easing`	`var(--easing-out-expo)`
`--modal-translate`	`translateY(1rem)`
`--modal-z-index`	`var(--z-index-modal)`

nav

Navigation bar. 15 tokens.

	Token	Value
	`--nav-color-text`	`var(--color-link)`
	`--nav-color-text-active`	`var(--color-link-active)`
	`--nav-color-text-hover`	`var(--color-link-hover)`
	`--nav-color-text-muted`	`var(--color-text-muted)`
Aa	`--nav-font-size`	`var(--font-size-text)`
	`--nav-gap`	`0`
Aa	`--nav-line-height`	`var(--line-height-snug)`
	`--nav-margin-inline`	`0`
	`--nav-margin-block`	`0`
	`--nav-link-padding-inline`	`var(--spacing-xs)`
	`--nav-link-padding-block`	`var(--spacing-xs)`
Aa	`--nav-title-font-size`	`var(--font-size-md)`
Aa	`--nav-title-font-weight`	`var(--font-weight-heading)`
	`--nav-title-padding-inline`	`var(--nav-link-padding-inline)`
	`--nav-title-padding-block`	`var(--nav-link-padding-block)`

pagination

Pagination control. 17 tokens.

	Token	Value
	`--pagination-disabled-opacity`	`var(--opacity-disabled)`
	`--pagination-gap`	`var(--spacing-2xs)`
	`--pagination-icon-first`	`var(--icon-arrow-skip)`
	`--pagination-icon-last`	`var(--icon-arrow-skip)`
	`--pagination-icon-next`	`var(--icon-arrow)`
	`--pagination-icon-previous`	`var(--icon-arrow)`
	`--pagination-icon-size`	`var(--icon-size)`
	`--pagination-item-border-radius`	`var(--radius-sm)`
	`--pagination-item-color-background`	`transparent`
	`--pagination-item-color-background-active`	`var(--color-brand)`
	`--pagination-item-color-background-hover`	`var(--color-background-muted)`
	`--pagination-item-color-text`	`var(--color-text)`
	`--pagination-item-color-text-active`	`var(--color-text-on-brand)`
	`--pagination-item-color-text-hover`	`var(--color-text)`
Aa	`--pagination-item-font-size`	`var(--font-size-sm)`
Aa	`--pagination-item-font-weight`	`var(--font-weight-normal)`
	`--pagination-item-size`	`2.25rem`

surtitle

Small label above a heading. 8 tokens.

	Token	Value
	`--surtitle-color-text`	`var(--color-text-muted)`
Aa	`--surtitle-font-size`	`var(--font-size-xs)`
Aa	`--surtitle-font-weight`	`var(--font-weight-bold)`
Aa	`--surtitle-letter-spacing`	`var(--letter-spacing-md)`
	`--surtitle-line-height`	`var(--line-height-normal)`
	`--surtitle-margin-block-end`	`var(--spacing-2xs)`
	`--surtitle-margin-block-start`	`0`
	`--surtitle-text-transform`	`uppercase`

table

Data table. 6 tokens.

	Token	Value
	`--table-cell-padding-inline`	`var(--spacing-sm)`
	`--table-cell-padding-block`	`var(--spacing-xs)`
	`--table-color-background-header`	`var(--color-background-muted)`
	`--table-color-background-striped`	`var(--color-background-muted)`
	`--table-color-border`	`var(--color-border)`
Aa	`--table-font-size`	`var(--font-size-sm)`