# Component tokens

> Every Texuli component token: 365 tokens for 57 components, each with the fallback its read carries, generated from @texuli/tokens/components.

Language: en
Canonical: https://texuli.com/tokens/components/
Markdown: https://texuli.com/tokens/components.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

365 tokens for 57 components. None is declared: each read carries one fallback, the registry default, so a token exists on a page only when a theme, design system or host sets it on its scope.

A component's tokens are `--tx-<component>-<key>`, and every read has the form `var(<token>, <fallback>)`, for example `var(--tx-button-radius, var(--tx-shape-radius-lg))`. The tables list each key with its fallback; the fallbacks reference system tokens. The scope model, hooks and defaults are on [Design tokens](https://texuli.com/tokens/). Token contract v2 shipped in 0.9.0.

## `texuli`

### Alert (7)

`--tx-alert-*` · `texuli/alert` · [Component page (Alert)](https://texuli.com/component-pages/alert/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| padding-block | var(--tx-space-3) | Block padding. |
| padding-inline | calc(var(--tx-space-unit) * 3.5) | Inline padding. |
| gap | var(--tx-space-2) | Gap between icon and content. |
| font-size | var(--tx-type-label-size) | Body font size. |
| icon-size | var(--tx-size-icon-md) | Status icon size. |

### Avatar (6)

`--tx-avatar-*` · `texuli/avatar` · [Component page (Avatar)](https://texuli.com/component-pages/avatar/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| size-xs | var(--tx-size-icon-md) | Extra small avatar size. |
| size-sm | var(--tx-size-control-xs) | Small avatar size. |
| size-md | var(--tx-size-control-md) | Default avatar size. |
| size-lg | var(--tx-space-12) | Large avatar size. |
| radius | var(--tx-shape-radius-full) | Corner radius. |
| font-weight | var(--tx-type-heading-weight) | Initials font weight. |

### Badge, tag and chip (8)

`--tx-badge-*` · `texuli/badge` · [Component page (Badge, tag and chip)](https://texuli.com/component-pages/badge/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-full) | Corner radius. |
| padding-block | calc(var(--tx-space-unit) * 0.5) | Block padding. |
| padding-inline | var(--tx-space-2) | Inline padding. |
| gap | var(--tx-space-1) | Gap between icon and text. |
| font-size | var(--tx-type-caption-size) | Font size. |
| font-weight | var(--tx-type-label-weight) | Font weight. |
| line-height | var(--tx-type-label-line) | Line height. |
| border-width | var(--tx-border-width-thin) | Border width. |

### Button (18)

`--tx-button-*` · `texuli/button` · [Component page (Button)](https://texuli.com/component-pages/button/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| height-sm | var(--tx-size-control-sm) | Small size height. |
| height-md | var(--tx-size-control-md) | Default size height. |
| height-lg | var(--tx-size-control-lg) | Large size height. |
| height-touch | var(--tx-size-target-touch) | Height of sm, md and icon buttons below 640 px. |
| padding-inline-sm | var(--tx-space-3) | Small size inline padding. |
| padding-inline-md | var(--tx-space-4) | Default size inline padding. |
| padding-inline-lg | var(--tx-space-6) | Large size inline padding. |
| gap | var(--tx-space-2) | Gap between icon and label. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| font-size | var(--tx-type-label-size) | Default size font size. |
| font-size-sm | var(--tx-type-caption-size) | Small size font size. |
| font-size-lg | var(--tx-type-body-size) | Large size font size. |
| font-weight | var(--tx-type-label-weight) | Font weight. |
| line-height | var(--tx-type-label-line) | Line height. |
| icon-size | var(--tx-size-icon-sm) | Icon size inside the button. |
| border-width | var(--tx-border-width-thin) | Outline variant border width. |
| elevation | var(--tx-elevation-1) | Shadow of the default, outline and destructive variants. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity when disabled. |

### Card (11)

`--tx-card-*` · `texuli/card` · [Component page (Card)](https://texuli.com/component-pages/card/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-xl) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-1) | Shadow. |
| padding-inline | var(--tx-space-5) | Header, content and footer inline padding. |
| padding-block | var(--tx-space-5) | Block padding at the card edges (header top, last section bottom). |
| background | var(--tx-surface) | Surface fill (the glass hook mixes it with transparency). |
| title-font-size | var(--tx-font-size-base) | Title font size. |
| title-font-weight | var(--tx-type-heading-weight) | Title font weight. |
| title-line-height | var(--tx-type-label-line) | Title line height. |
| description-font-size | var(--tx-type-label-size) | Description font size. |
| font-size | var(--tx-type-label-size) | Content font size (`.tx-card__content`). |

### Carousel (2)

`--tx-carousel-*` · `texuli/carousel` · [Component page (Carousel)](https://texuli.com/component-pages/carousel/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius of the carousel and viewport. |
| fallback-padding | var(--tx-space-4) | Padding of the no-slides fallback. |

### Checkbox, radio and switch (6)

`--tx-choice-*` · `texuli/choice`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | calc(var(--tx-space-unit) * 2.5) | Gap between control and copy. |
| switch-gap | var(--tx-space-4) | Gap between switch and copy. |
| label-font-size | var(--tx-type-label-size) | Label font size. |
| label-font-weight | var(--tx-type-label-weight) | Label font weight. |
| description-font-size | var(--tx-type-caption-size) | Description font size. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity of a disabled control. |

### Combobox (8)

`--tx-combobox-*` · `texuli/combobox` · [Component page (Combobox)](https://texuli.com/component-pages/combobox/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| height-sm | var(--tx-size-control-sm) | Small size height. |
| height-md | var(--tx-size-control-md) | Default size height. |
| height-lg | var(--tx-size-control-lg) | Large size height. |
| radius | var(--tx-shape-radius-lg) | Field corner radius. |
| border-width | var(--tx-border-width-thin) | Field border width. |
| font-size-sm | var(--tx-type-caption-size) | Small size font size. |
| font-size-md | var(--tx-type-label-size) | Default size font size. |
| font-size-lg | var(--tx-type-body-size) | Large size font size. |

### Command palette (7)

`--tx-command-*` · `texuli/command`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-xl) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| font-size-sm | var(--tx-type-caption-size) | Small size font size. |
| font-size-md | var(--tx-type-label-size) | Default size font size. |
| font-size-lg | var(--tx-type-body-size) | Large size font size. |
| input-gap | var(--tx-space-3) | Gap inside the input row. |
| input-padding-inline | var(--tx-space-4) | Inline padding of the input row. |

### Date field and picker (9)

`--tx-date-*` · `texuli/date`

| Key | Fallback | Meaning |
| --- | --- | --- |
| font-size | var(--tx-type-label-size) | Font size. |
| label-font-weight | var(--tx-type-label-weight) | Label font weight. |
| control-radius | var(--tx-shape-radius-lg) | Control corner radius. |
| control-border-width | var(--tx-border-width-thin) | Control border width. |
| panel-z-index | var(--tx-z-popover) | Calendar panel stacking. |
| panel-padding | var(--tx-space-3) | Calendar panel padding. |
| panel-radius | var(--tx-shape-radius-xl) | Calendar panel corner radius. |
| panel-elevation | var(--tx-elevation-3) | Calendar panel shadow. |
| description-font-size | var(--tx-type-caption-size) | Description and error font size. |

### Dialog and alert dialog (11)

`--tx-dialog-*` · `texuli/dialog` · [Component page (Dialog and alert dialog)](https://texuli.com/component-pages/dialog/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-modal) | Stacking. |
| radius | var(--tx-shape-radius-xl) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-4) | Shadow. |
| font-size | var(--tx-font-size-sm) | Body font size. |
| line-height | var(--tx-type-body-line) | Body line height. |
| title-font-size | var(--tx-type-heading-size) | Title font size. |
| title-font-weight | var(--tx-type-heading-weight) | Title font weight. |
| title-line-height | var(--tx-type-heading-line) | Title line height. |
| alert-padding | var(--tx-space-5) | Alert dialog padding. |
| scrim-opacity | var(--tx-opacity-scrim) | Opacity of the overlay --tx-scrim. |

### Empty state (6)

`--tx-empty-*` · `texuli/empty`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-3) | Default size gap. |
| padding-inline | var(--tx-space-6) | Default size inline padding. |
| padding-block | calc(var(--tx-space-unit) * 14) | Default size block padding. |
| title-font-size | var(--tx-font-size-base) | Title font size. |
| title-font-weight | var(--tx-type-heading-weight) | Title font weight. |
| description-font-size | var(--tx-type-label-size) | Description font size. |

### Field label and description (6)

`--tx-field-*` · `texuli/field` · [Component page (Field label and description)](https://texuli.com/component-pages/field/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | calc(var(--tx-space-unit) * 1.5) | Gap between label, control and description. |
| label-font-size | var(--tx-type-label-size) | Label font size. |
| label-font-weight | var(--tx-type-label-weight) | Label font weight. |
| label-line-height | var(--tx-type-label-line) | Label line height. |
| description-font-size | var(--tx-type-caption-size) | Description font size. |
| description-line-height | var(--tx-type-caption-line) | Description line height. |

### File upload (6)

`--tx-file-upload-*` · `texuli/file-upload` · [Component page (File upload)](https://texuli.com/component-pages/file-upload/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-3) | Gap between the zone and the list. |
| zone-padding-block | var(--tx-space-6) | Drop zone block padding. |
| zone-padding-inline | var(--tx-space-4) | Drop zone inline padding. |
| zone-border-width | var(--tx-border-width-thick) | Drop zone dashed border width. |
| zone-radius | var(--tx-shape-radius-lg) | Drop zone corner radius. |
| browse-height | var(--tx-size-control-md) | Browse button height. |

### Icon (5)

`--tx-icon-*` · `texuli/icons` · [Component page (Icon)](https://texuli.com/component-pages/icon/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| size-xs | var(--tx-size-icon-xs) | Size xs. |
| size-sm | var(--tx-size-icon-sm) | Size sm. |
| size-md | var(--tx-size-icon-md) | Size md (the default). |
| size-lg | var(--tx-size-icon-lg) | Size lg. |
| stroke-width | var(--tx-icon-stroke) | Stroke width. |

### Input and textarea (12)

`--tx-input-*` · `texuli/input` · [Component page (Input and textarea)](https://texuli.com/component-pages/input/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| height | var(--tx-size-control-md) | Input height from 640 px. |
| height-touch | var(--tx-size-control-lg) | Input minimum height below 640 px. |
| padding-block | var(--tx-space-1) | Input block padding. |
| padding-inline | var(--tx-space-3) | Inline padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-1) | Shadow. |
| font-size | var(--tx-font-size-sm) | Font size from 640 px. |
| font-size-touch | var(--tx-font-size-base) | Font size below 640 px (avoids zoom on focus). |
| font-weight | var(--tx-type-body-weight) | Font weight. |
| textarea-padding-block | var(--tx-space-2) | Textarea block padding. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity when disabled. |

### Keyboard key (5)

`--tx-kbd-*` · `texuli/kbd-code` · [Component page (Keyboard key)](https://texuli.com/component-pages/kbd/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| min-size | var(--tx-size-icon-md) | Minimum inline and block size. |
| padding-block | calc(var(--tx-space-unit) * 0.5) | Block padding. |
| radius | calc(var(--tx-shape-radius-lg) * 0.4) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| font-weight | var(--tx-type-label-weight) | Font weight. |

### Code (7)

`--tx-code-*` · `texuli/kbd-code` · [Component page (Code)](https://texuli.com/component-pages/code/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| font-size | var(--tx-type-code-size) | Font size relative to the surrounding text. |
| font-weight | var(--tx-type-code-weight) | Font weight. |
| block-padding-block | var(--tx-space-3) | Code block block padding. |
| block-padding-inline | var(--tx-space-4) | Code block inline padding. |
| block-radius | var(--tx-shape-radius-lg) | Code block corner radius. |
| block-line-height | var(--tx-type-code-line) | Code block line height. |
| block-border-width | var(--tx-border-width-thin) | Code block border width. |

### Menus (12)

`--tx-menu-*` · `texuli/menus`

| Key | Fallback | Meaning |
| --- | --- | --- |
| trigger-height-sm | var(--tx-size-control-sm) | Small size height. |
| trigger-height-md | var(--tx-size-control-md) | Default size height. |
| trigger-height-lg | var(--tx-size-control-lg) | Large size height. |
| trigger-radius | var(--tx-shape-radius-lg) | Trigger corner radius. |
| trigger-border-width | var(--tx-border-width-thin) | Trigger border width. |
| trigger-font-size | var(--tx-type-label-size) | Trigger font size. |
| trigger-font-weight | var(--tx-type-label-weight) | Trigger font weight. |
| content-z-index | var(--tx-z-popover) | Menu stacking. |
| content-padding-block | var(--tx-space-1) | Menu block padding. |
| content-radius | var(--tx-shape-radius-lg) | Menu corner radius. |
| content-elevation | var(--tx-elevation-3) | Menu shadow. |
| content-font-size | var(--tx-type-label-size) | Menu font size. |

### Navigation menu (5)

`--tx-navigation-*` · `texuli/navigation`

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-sticky) | Stacking. |
| font-size | var(--tx-type-label-size) | Default size font size. |
| list-gap | var(--tx-space-1) | Gap between items. |
| trigger-radius | var(--tx-shape-radius-md) | Trigger and link corner radius. |
| chevron-opacity | var(--tx-opacity-muted) | Trigger chevron opacity. |

### Number field (5)

`--tx-number-field-*` · `texuli/number-pin` · [Component page (Number field)](https://texuli.com/component-pages/number-field/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| padding-block | var(--tx-space-2) | Input block padding. |
| padding-inline | var(--tx-space-3) | Input inline padding. |
| stepper-size | var(--tx-size-control-md) | Stepper button minimum inline size. |

### PIN input (5)

`--tx-pin-input-*` · `texuli/number-pin` · [Component page (PIN input)](https://texuli.com/component-pages/pin-input/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-2) | Gap between cells. |
| cell-inline-size | var(--tx-size-control-lg) | Cell inline size. |
| cell-block-size | var(--tx-space-12) | Cell block size. |
| cell-radius | var(--tx-shape-radius-lg) | Cell corner radius. |
| cell-font-size | var(--tx-type-heading-size) | Cell font size. |

### Popover and hover card (10)

`--tx-popover-*` · `texuli/popover` · [Component page (Popover and hover card)](https://texuli.com/component-pages/popover/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-popover) | Stacking. |
| padding-block | var(--tx-space-3) | Default size block padding. |
| padding-inline | calc(var(--tx-space-unit) * 3.5) | Default size inline padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-3) | Shadow. |
| font-size | var(--tx-type-label-size) | Font size. |
| title-font-size | var(--tx-font-size-base) | Title font size. |
| title-font-weight | var(--tx-type-heading-weight) | Title font weight. |
| title-line-height | var(--tx-type-heading-line) | Title line height. |

### Progress (6)

`--tx-progress-*` · `texuli/feedback` · [Component page (Progress)](https://texuli.com/component-pages/progress/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | calc(var(--tx-space-unit) * 1.5) | Gap between header and track. |
| font-size | var(--tx-type-label-size) | Header font size. |
| radius | var(--tx-shape-radius-full) | Track corner radius. |
| track-height-sm | calc(var(--tx-space-unit) * 1.5) | Small track height. |
| track-height-md | calc(var(--tx-space-unit) * 2.5) | Default track height. |
| track-height-lg | calc(var(--tx-space-unit) * 3.5) | Large track height. |

### Rating (4)

`--tx-rating-*` · `texuli/rating` · [Component page (Rating)](https://texuli.com/component-pages/rating/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| stars-gap | calc(var(--tx-space-unit) * 0.5) | Gap between stars. |
| label-font-size | var(--tx-type-label-size) | Label font size. |
| label-font-weight | var(--tx-type-label-weight) | Label font weight. |
| star-radius | var(--tx-shape-radius-lg) | Star focus box corner radius. |

### Resizable panels (2)

`--tx-resizable-*` · `texuli/resizable`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-xl) | Bordered group corner radius. |
| border-width | var(--tx-border-width-thin) | Bordered group border width. |

### Scroll area (6)

`--tx-scroll-area-*` · `texuli/scroll-area`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| padding | var(--tx-space-3) | Viewport padding. |
| scrollbar-size | calc(var(--tx-space-unit) * 2.5) | Scrollbar thickness. |
| scrollbar-radius | var(--tx-shape-radius-full) | Scrollbar corner radius. |
| thumb-min-size | var(--tx-space-4) | Minimum thumb length. |

### Select (15)

`--tx-select-*` · `texuli/select` · [Component page (Select)](https://texuli.com/component-pages/select/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| height-sm | var(--tx-size-control-sm) | Small size height. |
| height-md | var(--tx-size-control-md) | Default size height. |
| height-lg | var(--tx-size-control-lg) | Large size height. |
| padding-inline-sm | var(--tx-space-2) | Small size inline padding. |
| padding-inline-md | var(--tx-space-3) | Default size inline padding. |
| padding-inline-lg | calc(var(--tx-space-unit) * 3.5) | Large size inline padding. |
| gap | var(--tx-space-2) | Gap between value and chevron. |
| radius | var(--tx-shape-radius-lg) | Trigger corner radius. |
| border-width | var(--tx-border-width-thin) | Trigger border width. |
| font-size-sm | var(--tx-type-caption-size) | Small size font size. |
| font-size-md | var(--tx-type-label-size) | Default size font size. |
| font-size-lg | var(--tx-type-body-size) | Large size font size. |
| font-weight | var(--tx-type-body-weight) | Trigger font weight. |
| chevron-size | var(--tx-size-icon-sm) | Chevron size. |
| chevron-opacity | var(--tx-opacity-muted) | Chevron opacity. |

### Separator (1)

`--tx-separator-*` · `texuli/separator-aspect` · [Component page (Separator)](https://texuli.com/component-pages/separator/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| thickness | var(--tx-border-width-thin) | Line thickness. |

### Aspect ratio (1)

`--tx-aspect-ratio-*` · `texuli/separator-aspect`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius. |

### Sheet, drawer and detail panel (11)

`--tx-sheet-*` · `texuli/sheet` · [Component page (Sheet, drawer and detail panel)](https://texuli.com/component-pages/sheet/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-overlay) | Stacking. |
| gap | var(--tx-space-4) | Gap between header, body and footer. |
| padding | var(--tx-space-5) | Padding. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-4) | Shadow. |
| font-size | var(--tx-font-size-sm) | Body font size. |
| line-height | var(--tx-type-body-line) | Body line height. |
| title-font-size | var(--tx-type-heading-size) | Title font size. |
| title-font-weight | var(--tx-type-heading-weight) | Title font weight. |
| title-line-height | var(--tx-type-heading-line) | Title line height. |
| scrim-opacity | var(--tx-opacity-scrim) | Opacity of the overlay --tx-scrim. |

### Sidebar (7)

`--tx-sidebar-*` · `texuli/sidebar` · [Component page (Sidebar)](https://texuli.com/component-pages/sidebar/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| font-size | var(--tx-font-size-sm) | Font size. |
| inset-radius | var(--tx-shape-radius-lg) | Inset variant corner radius. |
| header-padding-inline | var(--tx-space-3) | Header inline padding. |
| header-gap | var(--tx-space-2) | Header gap. |
| body-gap | var(--tx-space-4) | Gap between sections. |
| body-padding-block | var(--tx-space-3) | Body block padding. |
| body-padding-inline | var(--tx-space-2) | Body inline padding. |

### Skeleton (5)

`--tx-skeleton-*` · `texuli/feedback` · [Component page (Skeleton)](https://texuli.com/component-pages/skeleton/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-md) | Corner radius. |
| height-sm | var(--tx-space-3) | Small line height. |
| height-md | var(--tx-space-4) | Default line height. |
| height-lg | var(--tx-space-6) | Large line height. |
| circle-size | var(--tx-space-10) | Circle size. |

### Slider (3)

`--tx-slider-*` · `texuli/slider`

| Key | Fallback | Meaning |
| --- | --- | --- |
| thumb-border-width | var(--tx-border-width-thick) | Thumb border width. |
| thumb-elevation | var(--tx-elevation-2) | Thumb shadow. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity when disabled. |

### Spinner (1)

`--tx-spinner-*` · `texuli/feedback` · [Component page (Spinner)](https://texuli.com/component-pages/spinner/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-full) | Corner radius. |

### Stat and KPI (11)

`--tx-stat-*` · `texuli/stat` · [Component page (Stat and KPI)](https://texuli.com/component-pages/stat/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-2) | Gap between rows. |
| padding | var(--tx-space-5) | Padding. |
| radius | var(--tx-shape-radius-xl) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-1) | Shadow. |
| label-font-size | var(--tx-type-label-size) | Label font size. |
| label-font-weight | var(--tx-type-label-weight) | Label font weight. |
| value-font-size | var(--tx-type-title-size) | Value font size. |
| value-font-weight | var(--tx-type-heading-weight) | Value font weight. |
| icon-size | var(--tx-size-control-sm) | Icon box size. |
| icon-radius | var(--tx-shape-radius-md) | Icon box corner radius. |

### Stepper (8)

`--tx-stepper-*` · `texuli/stepper` · [Component page (Stepper)](https://texuli.com/component-pages/stepper/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-3) | Gap between marker and body. |
| trigger-radius | var(--tx-shape-radius-md) | Trigger corner radius. |
| marker-size | var(--tx-size-control-sm) | Marker size. |
| marker-radius | var(--tx-shape-radius-full) | Marker corner radius. |
| marker-border-width | var(--tx-border-width-thin) | Marker border width. |
| marker-font-size | var(--tx-type-caption-size) | Marker font size. |
| marker-font-weight | var(--tx-type-heading-weight) | Marker font weight. |
| check-size | var(--tx-size-icon-sm) | Completed check icon size. |

### Table (5)

`--tx-table-*` · `texuli/table` · [Component page (Table)](https://texuli.com/component-pages/table/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-xl) | Wrapper corner radius. |
| border-width | var(--tx-border-width-thin) | Wrapper border width. |
| font-size | var(--tx-font-size-sm) | Font size. |
| head-font-size | var(--tx-type-caption-size) | Header cell font size. |
| head-font-weight | var(--tx-type-label-weight) | Header cell font weight. |

### Tabs (8)

`--tx-tabs-*` · `texuli/tabs-accordion` · [Component page (Tabs)](https://texuli.com/component-pages/tabs/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-3) | Gap between list and panel. |
| list-gap | var(--tx-space-1) | Gap between triggers. |
| list-radius | var(--tx-shape-radius-lg) | Pills and enclosed list corner radius. |
| trigger-gap | var(--tx-space-2) | Gap inside a trigger. |
| trigger-height-touch | var(--tx-size-control-lg) | Trigger minimum height below 640 px. |
| trigger-font-size | var(--tx-type-label-size) | Trigger font size. |
| trigger-font-weight | var(--tx-type-label-weight) | Trigger font weight. |
| disabled-opacity | var(--tx-opacity-disabled) | Disabled trigger opacity. |

### Accordion and collapsible (5)

`--tx-accordion-*` · `texuli/tabs-accordion` · [Component page (Accordion and collapsible)](https://texuli.com/component-pages/accordion/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| trigger-gap | var(--tx-space-4) | Gap inside a trigger. |
| trigger-padding-block | var(--tx-space-3) | Trigger block padding. |
| trigger-font-size | var(--tx-type-label-size) | Trigger font size. |
| trigger-font-weight | var(--tx-type-label-weight) | Trigger font weight. |
| disabled-opacity | var(--tx-opacity-disabled) | Disabled trigger opacity. |

### Tags input (10)

`--tx-tags-input-*` · `texuli/tags-color` · [Component page (Tags input)](https://texuli.com/component-pages/tags-input/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| height | var(--tx-size-control-md) | Minimum height from 640 px. |
| height-touch | var(--tx-size-control-lg) | Minimum height below 640 px. |
| gap | calc(var(--tx-space-unit) * 1.5) | Gap between tags. |
| padding-inline | var(--tx-space-2) | Inline padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-1) | Shadow. |
| tag-radius | var(--tx-shape-radius-full) | Tag corner radius. |
| tag-font-size | var(--tx-type-label-size) | Tag font size. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity when disabled. |

### Color picker (3)

`--tx-color-picker-*` · `texuli/tags-color`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-3) | Gap between parts. |
| swatch-size | var(--tx-size-icon-lg) | Preset swatch size. |
| swatch-radius | var(--tx-shape-radius-sm) | Preset swatch corner radius. |

### Timeline (4)

`--tx-timeline-*` · `texuli/timeline` · [Component page (Timeline)](https://texuli.com/component-pages/timeline/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| marker-size | var(--tx-size-icon-sm) | Marker size. |
| marker-radius | var(--tx-shape-radius-full) | Marker corner radius. |
| time-font-size | var(--tx-type-caption-size) | Time font size. |
| time-font-weight | var(--tx-type-label-weight) | Time font weight. |

### Toast (9)

`--tx-toast-*` · `texuli/toast`

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-toast) | Viewport stacking. |
| gap | var(--tx-space-3) | Gap between icon, body and actions. |
| padding-block | var(--tx-space-3) | Block padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Border width. |
| elevation | var(--tx-elevation-5) | Shadow. |
| icon-size | var(--tx-size-icon-md) | Status icon size. |
| title-font-size | var(--tx-type-label-size) | Title font size. |
| title-font-weight | var(--tx-type-label-weight) | Title font weight. |

### Toggle and toggle group (13)

`--tx-toggle-*` · `texuli/toggle`

| Key | Fallback | Meaning |
| --- | --- | --- |
| height-sm | var(--tx-size-control-sm) | Small size height. |
| height-md | var(--tx-size-control-md) | Default size height. |
| height-lg | var(--tx-size-control-lg) | Large size height. |
| padding-inline-sm | var(--tx-space-2) | Small size inline padding. |
| padding-inline-md | var(--tx-space-3) | Default size inline padding. |
| padding-inline-lg | var(--tx-space-4) | Large size inline padding. |
| gap | calc(var(--tx-space-unit) * 1.5) | Gap between icon and label. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Outline variant border width. |
| font-size | var(--tx-type-label-size) | Font size. |
| font-weight | var(--tx-type-label-weight) | Font weight. |
| line-height | var(--tx-type-label-line) | Line height. |
| disabled-opacity | var(--tx-opacity-disabled) | Opacity when disabled. |

### Toolbar (8)

`--tx-toolbar-*` · `texuli/toolbar`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-1) | Gap between items. |
| padding | var(--tx-space-1) | Padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| border-width | var(--tx-border-width-thin) | Outline variant border width. |
| item-height-sm | var(--tx-size-control-xs) | Small item height. |
| item-font-size | var(--tx-type-label-size) | Item font size. |
| item-font-weight | var(--tx-type-label-weight) | Item font weight. |
| disabled-opacity | var(--tx-opacity-disabled) | Disabled item opacity. |

### Tooltip (6)

`--tx-tooltip-*` · `texuli/tooltip` · [Component page (Tooltip)](https://texuli.com/component-pages/tooltip/)

| Key | Fallback | Meaning |
| --- | --- | --- |
| z-index | var(--tx-z-tooltip) | Stacking. |
| radius | calc(var(--tx-shape-radius-lg) * 0.55) | Corner radius. |
| font-size | var(--tx-type-caption-size) | Font size. |
| font-weight | var(--tx-type-label-weight) | Font weight. |
| line-height | var(--tx-type-caption-line) | Line height. |
| elevation | var(--tx-elevation-3) | Shadow. |

### Tree (7)

`--tx-tree-*` · `texuli/tree`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | calc(var(--tx-space-unit) * 0.5) | Gap between rows. |
| padding | var(--tx-space-1) | Padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| row-gap | var(--tx-space-2) | Gap inside a row. |
| row-padding-block | var(--tx-space-1) | Row block padding. |
| checkbox-size | var(--tx-size-icon-sm) | Checkbox size. |
| checkbox-radius | var(--tx-shape-radius-xs) | Checkbox corner radius. |

## `@texuli/data`

### Data grid (3)

`--tx-data-grid-*` · `@texuli/data/grid-core`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-2) | Gap between the toolbar, table and pager, and inside them. |
| radius | var(--tx-shape-radius-lg) | Corner radius of the bulk bar and pager buttons. |
| pager-font-size | var(--tx-type-label-size) | Pager font size. |

### Board (5)

`--tx-board-*` · `@texuli/data/board`

| Key | Fallback | Meaning |
| --- | --- | --- |
| column-gap | var(--tx-space-4) | Gap between columns. |
| column-radius | var(--tx-shape-radius-xl) | Column corner radius. |
| column-padding | var(--tx-space-3) | Column header padding. |
| card-radius | var(--tx-shape-radius-lg) | Card corner radius. |
| card-elevation | var(--tx-elevation-1) | Card shadow. |

## `@texuli/charts`

### Chart frame (1)

`--tx-chart-frame-*` · `@texuli/charts/cartesian`

| Key | Fallback | Meaning |
| --- | --- | --- |
| title-font-size | var(--tx-type-body-size) | Chart title font size. |

## `@texuli/chat`

### Chat message bubble (4)

`--tx-chat-bubble-*` · `@texuli/chat`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | calc(var(--tx-shape-radius-lg) * 2) | Bubble corner radius. |
| tail-radius | var(--tx-shape-radius-sm) | Radius of the corner on the author side (the tail). |
| padding-block | var(--tx-space-2) | Block padding. |
| padding-inline | calc(var(--tx-space-unit) * 3.5) | Inline padding. |

### Chat composer (3)

`--tx-chat-composer-*` · `@texuli/chat`

| Key | Fallback | Meaning |
| --- | --- | --- |
| radius | var(--tx-shape-radius-lg) | Corner radius of the composer and its field. |
| padding | var(--tx-space-3) | Composer padding. |
| gap | var(--tx-space-2) | Gap between the field and the actions. |

## `@texuli/canvas`

### Canvas toolbar (4)

`--tx-canvas-toolbar-*` · `@texuli/canvas/editor`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-1) | Gap between tools. |
| padding | calc(var(--tx-space-unit) * 1.5) | Toolbar padding. |
| button-radius | var(--tx-shape-radius-md) | Tool button corner radius. |
| button-font-size | var(--tx-type-body-size) | Tool button font size. |

## `@texuli/workflows`

### Workflow node (4)

`--tx-workflow-node-*` · `@texuli/workflows/editor`

| Key | Fallback | Meaning |
| --- | --- | --- |
| padding-block | var(--tx-space-2) | Block padding. |
| padding-inline | var(--tx-space-3) | Inline padding. |
| radius | var(--tx-shape-radius-lg) | Corner radius. |
| elevation | var(--tx-elevation-1) | Shadow. |

## `@texuli/sheets`

### Sheet view (4)

`--tx-spreadsheet-*` · `@texuli/sheets/view`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-2) | Gap between the tabs, formula bar and grid. |
| tab-radius | var(--tx-shape-radius-lg) | Sheet tab corner radius. |
| tab-padding-inline | var(--tx-space-3) | Sheet tab inline padding. |
| bar-radius | calc(var(--tx-shape-radius-lg) * 0.75) | Formula bar corner radius. |

## `@texuli/forms`

### Schema form (1)

`--tx-forms-*` · `@texuli/forms`

| Key | Fallback | Meaning |
| --- | --- | --- |
| gap | var(--tx-space-5) | Gap between fields, sections and steps. |

Back to [Design tokens](https://texuli.com/tokens/).