This page ships a Markdown twin for AI tools.
# Component tokens Source: https://texuli.com/tokens/components/ # Component tokens 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](/tokens/). Token contract v2 shipped in 0.9.0. ## `texuli` ### Alert (7) `--tx-alert-*` · `texuli/alert` · [Component page (Alert)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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)](/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](/tokens/).Component tokens
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. Token contract v2 shipped in 0.9.0.
texuli
Alert (7)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| Key | Fallback | Meaning |
|---|---|---|
| thickness | var(--tx-border-width-thin) | Line thickness. |
Aspect ratio (1)
| Key | Fallback | Meaning |
|---|---|---|
| radius | var(--tx-shape-radius-lg) | Corner radius. |
Sheet, drawer and detail panel (11)
| 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)
| 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)
| 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)
| 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)
| Key | Fallback | Meaning |
|---|---|---|
| radius | var(--tx-shape-radius-full) | Corner radius. |
Stat and KPI (11)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| 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)
| Key | Fallback | Meaning |
|---|---|---|
| title-font-size | var(--tx-type-body-size) | Chart title font size. |
@texuli/chat
Chat message bubble (4)
| 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)
| 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)
| 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)
| 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)
| 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)
| Key | Fallback | Meaning |
|---|---|---|
| gap | var(--tx-space-5) | Gap between fields, sections and steps. |
Back to Design tokens.