# Component Token Index

Every component API token, collected from the `/* @tui-tokens */` header
each component's `styles.scss` maintains.

These follow the **Read-Only Component API** pattern: TUI never defines
them, only reads them through fallback chains — so *you* set them to theme a
component per context, from any ancestor:

```css
.my-quiz .tui-button {
  --tui-button-radius: var(--tui-radius-full);
}
```

Because they're never defined by the library, they won't appear in the
[Primitive Token Index](https://storybook-tangible-ui.pages.dev/docs/reference-primitive-tokens.md) — absence
from the emitted CSS is what makes them safely overridable.

From each component's \`/\* @tui-tokens \*/\` header. Snapshot of the compiled stylesheet of @tangible/ui 0.2.29, generated at build time.

| Token | Component |
| - | - |
| `--tui-accordion-bg` | Accordion |
| `--tui-accordion-bg-open` | Accordion |
| `--tui-accordion-fg` | Accordion |
| `--tui-accordion-border` | Accordion |
| `--tui-accordion-divider` | Accordion |
| `--tui-accordion-radius` | Accordion |
| `--tui-accordion-padding` | Accordion |
| `--tui-accordion-trigger-padding` | Accordion |
| `--tui-accordion-trigger-bg` | Accordion |
| `--tui-accordion-trigger-hover` | Accordion |
| `--tui-accordion-panel-padding` | Accordion |
| `--tui-accordion-panel-bg` | Accordion |
| `--tui-accordion-panel-spacing` | Accordion |
| `--tui-accordion-gap` | Accordion |
| `--tui-accordion-indicator` | Accordion |
| `--tui-avatar-size` | Avatar |
| `--tui-avatar-radius` | Avatar |
| `--tui-avatar-bg` | Avatar |
| `--tui-avatar-fg` | Avatar |
| `--tui-avatar-border` | Avatar |
| `--tui-avatar-indicator-bg` | Avatar |
| `--tui-avatar-indicator-fg` | Avatar |
| `--tui-avatar-overflow-bg` | Avatar |
| `--tui-avatar-overflow-fg` | Avatar |
| `--tui-avatar-group-overlap` | Avatar |
| `--tui-avatar-group-gap` | Avatar |
| `--tui-avatar-group-border-width` | Avatar |
| `--tui-avatar-group-border-color` | Avatar |
| `--tui-button-bg` | Button |
| `--tui-button-fg` | Button |
| `--tui-button-border` | Button |
| `--tui-button-radius` | Button |
| `--tui-button-bg-interact` | Button |
| `--tui-button-fg-interact` | Button |
| `--tui-button-border-interact` | Button |
| `--tui-button-icon-scale` | Button |
| `--tui-control-height-xs` | Button |
| `--tui-control-height-sm` | Button |
| `--tui-control-height-md` | Button |
| `--tui-control-height-lg` | Button |
| `--tui-card-bg` | Card |
| `--tui-card-fg` | Card |
| `--tui-card-bg-interact` | Card |
| `--tui-card-border` | Card |
| `--tui-card-border-width` | Card |
| `--tui-card-border-interact` | Card |
| `--tui-card-border-active` | Card |
| `--tui-card-radius` | Card |
| `--tui-card-shadow` | Card |
| `--tui-card-shadow-interact` | Card |
| `--tui-card-gap` | Card |
| `--tui-card-padding` | Card |
| `--tui-card-foot-basis` | Card |
| `--tui-checkbox-accent` | Checkbox |
| `--tui-checkbox-border` | Checkbox |
| `--tui-checkbox-border-hover` | Checkbox |
| `--tui-checkbox-border-invalid` | Checkbox |
| `--tui-checkbox-radius` | Checkbox |
| `--tui-checkbox-bg` | Checkbox |
| `--tui-checkbox-size` | Checkbox |
| `--tui-checkbox-gap` | Checkbox |
| `--tui-checkbox-label-color` | Checkbox |
| `--tui-chip-bg` | Chip |
| `--tui-chip-fg` | Chip |
| `--tui-chip-border` | Chip |
| `--tui-chip-icon` | Chip |
| `--tui-chip-icon-scale` | Chip |
| `--tui-chip-radius` | Chip |
| `--tui-chip-selected-ring` | Chip |
| `--tui-chip-icon-slot-bg` | Chip |
| `--tui-chip-icon-slot-fg` | Chip |
| `--tui-chip-group-gap` | ChipGroup |
| `--tui-color-area-radius` | ColorPicker |
| `--tui-color-area-min-height` | ColorPicker |
| `--tui-color-area-thumb-size` | ColorPicker |
| `--tui-color-slider-radius` | ColorPicker |
| `--tui-color-slider-height` | ColorPicker |
| `--tui-color-slider-thumb-size` | ColorPicker |
| `--tui-color-field-swatch-border` | ColorPicker |
| `--tui-combobox-min-width` | Combobox |
| `--tui-combobox-input-bg` | Combobox |
| `--tui-combobox-input-fg` | Combobox |
| `--tui-combobox-input-border` | Combobox |
| `--tui-combobox-input-border-hover` | Combobox |
| `--tui-combobox-input-border-focus` | Combobox |
| `--tui-combobox-input-radius` | Combobox |
| `--tui-combobox-content-bg` | Combobox |
| `--tui-combobox-content-fg` | Combobox |
| `--tui-combobox-content-border` | Combobox |
| `--tui-combobox-content-shadow` | Combobox |
| `--tui-combobox-content-radius` | Combobox |
| `--tui-combobox-option-radius` | Combobox |
| `--tui-combobox-option-bg-hover` | Combobox |
| `--tui-combobox-option-bg-selected` | Combobox |
| `--tui-combobox-option-fg-hover` | Combobox |
| `--tui-combobox-option-fg-selected` | Combobox |
| `--tui-combobox-option-bg-selected-hover` | Combobox |
| `--tui-combobox-option-check` | Combobox |
| `--tui-combobox-option-gap` | Combobox |
| `--tui-content-indicator-bg` | ContentIndicator |
| `--tui-content-indicator-border` | ContentIndicator |
| `--tui-content-indicator-fg` | ContentIndicator |
| `--tui-calendar-cell-size` | DatePicker |
| `--tui-calendar-cell-radius` | DatePicker |
| `--tui-calendar-selected-bg` | DatePicker |
| `--tui-calendar-selected-fg` | DatePicker |
| `--tui-calendar-range-bg` | DatePicker |
| `--tui-calendar-today-bg` | DatePicker |
| `--tui-calendar-caption-color` | DatePicker |
| `--tui-date-picker-width` | DatePicker |
| `--tui-dropdown-bg` | Dropdown |
| `--tui-dropdown-fg` | Dropdown |
| `--tui-dropdown-radius` | Dropdown |
| `--tui-dropdown-shadow` | Dropdown |
| `--tui-dropdown-border` | Dropdown |
| `--tui-dropdown-z` | Dropdown |
| `--tui-dropdown-min-width` | Dropdown |
| `--tui-dropdown-item-bg-hover` | Dropdown |
| `--tui-dropdown-item-bg-active` | Dropdown |
| `--tui-dropdown-item-fg` | Dropdown |
| `--tui-dropdown-item-fg-hover` | Dropdown |
| `--tui-dropdown-item-fg-active` | Dropdown |
| `--tui-field-gap` | Field |
| `--tui-field-label-fg` | Field |
| `--tui-field-helper-fg` | Field |
| `--tui-field-error-fg` | Field |
| `--tui-gradient-bar-height` | GradientPicker |
| `--tui-gradient-bar-radius` | GradientPicker |
| `--tui-gradient-bar-thumb-size` | GradientPicker |
| `--tui-angle-dial-size` | GradientPicker |
| `--tui-icon-size-xs` | Icon |
| `--tui-icon-size-sm` | Icon |
| `--tui-icon-size-md` | Icon |
| `--tui-icon-size-lg` | Icon |
| `--tui-icon-size-xl` | Icon |
| `--tui-icon-size-xxl` | Icon |
| `--tui-icon-button-bg` | IconButton |
| `--tui-icon-button-fg` | IconButton |
| `--tui-icon-button-border` | IconButton |
| `--tui-icon-button-radius` | IconButton |
| `--tui-icon-button-bg-interact` | IconButton |
| `--tui-icon-button-fg-interact` | IconButton |
| `--tui-icon-button-bg-pressed` | IconButton |
| `--tui-icon-button-fg-pressed` | IconButton |
| `--tui-modal-z` | Modal |
| `--tui-modal-max` | Modal |
| `--tui-modal-spacing` | Modal |
| `--tui-modal-offset-top` | Modal |
| `--tui-modal-offset-bottom` | Modal |
| `--tui-modal-offset-start` | Modal |
| `--tui-modal-offset-end` | Modal |
| `--tui-modal-backdrop` | Modal |
| `--tui-modal-bg` | Modal |
| `--tui-modal-border` | Modal |
| `--tui-modal-radius` | Modal |
| `--tui-modal-padding` | Modal |
| `--tui-modal-shadow` | Modal |
| `--tui-modal-foot-gap` | Modal |
| `--tui-move-handle-size` | MoveHandle |
| `--tui-move-handle-icon-size` | MoveHandle |
| `--tui-move-handle-fg` | MoveHandle |
| `--tui-move-handle-bg` | MoveHandle |
| `--tui-move-handle-fg-interact` | MoveHandle |
| `--tui-move-handle-bg-interact` | MoveHandle |
| `--tui-multicombobox-min-width` | MultiCombobox |
| `--tui-multicombobox-control-bg` | MultiCombobox |
| `--tui-multicombobox-control-fg` | MultiCombobox |
| `--tui-multicombobox-control-border` | MultiCombobox |
| `--tui-multicombobox-control-border-hover` | MultiCombobox |
| `--tui-multicombobox-control-border-focus` | MultiCombobox |
| `--tui-multicombobox-control-radius` | MultiCombobox |
| `--tui-multicombobox-content-bg` | MultiCombobox |
| `--tui-multicombobox-content-fg` | MultiCombobox |
| `--tui-multicombobox-content-border` | MultiCombobox |
| `--tui-multicombobox-content-shadow` | MultiCombobox |
| `--tui-multicombobox-content-radius` | MultiCombobox |
| `--tui-multicombobox-option-radius` | MultiCombobox |
| `--tui-multicombobox-option-bg-hover` | MultiCombobox |
| `--tui-multicombobox-option-bg-selected` | MultiCombobox |
| `--tui-multicombobox-option-fg-hover` | MultiCombobox |
| `--tui-multicombobox-option-fg-selected` | MultiCombobox |
| `--tui-multicombobox-option-bg-selected-hover` | MultiCombobox |
| `--tui-multicombobox-option-check` | MultiCombobox |
| `--tui-multicombobox-option-gap` | MultiCombobox |
| `--tui-multiselect-min-width` | MultiSelect |
| `--tui-multiselect-trigger-bg` | MultiSelect |
| `--tui-multiselect-trigger-fg` | MultiSelect |
| `--tui-multiselect-trigger-border` | MultiSelect |
| `--tui-multiselect-trigger-border-hover` | MultiSelect |
| `--tui-multiselect-trigger-border-focus` | MultiSelect |
| `--tui-multiselect-trigger-radius` | MultiSelect |
| `--tui-multiselect-content-bg` | MultiSelect |
| `--tui-multiselect-content-fg` | MultiSelect |
| `--tui-multiselect-content-border` | MultiSelect |
| `--tui-multiselect-content-shadow` | MultiSelect |
| `--tui-multiselect-content-radius` | MultiSelect |
| `--tui-multiselect-option-radius` | MultiSelect |
| `--tui-multiselect-option-bg-hover` | MultiSelect |
| `--tui-multiselect-option-bg-selected` | MultiSelect |
| `--tui-multiselect-option-fg-hover` | MultiSelect |
| `--tui-multiselect-option-fg-selected` | MultiSelect |
| `--tui-multiselect-option-bg-selected-hover` | MultiSelect |
| `--tui-multiselect-option-gap` | MultiSelect |
| `--tui-multiselect-chip-bg` | MultiSelect |
| `--tui-multiselect-chip-fg` | MultiSelect |
| `--tui-nav-menu-group-gap` | NavMenu |
| `--tui-nav-menu-item-gap` | NavMenu |
| `--tui-nav-menu-item-height` | NavMenu |
| `--tui-nav-menu-item-padding-inline` | NavMenu |
| `--tui-nav-menu-item-radius` | NavMenu |
| `--tui-nav-menu-item-font-size` | NavMenu |
| `--tui-nav-menu-item-bg` | NavMenu |
| `--tui-nav-menu-item-fg` | NavMenu |
| `--tui-nav-menu-item-weight` | NavMenu |
| `--tui-nav-menu-item-bg-hover` | NavMenu |
| `--tui-nav-menu-item-fg-hover` | NavMenu |
| `--tui-nav-menu-item-bg-active` | NavMenu |
| `--tui-nav-menu-item-fg-active` | NavMenu |
| `--tui-nav-menu-item-bg-current` | NavMenu |
| `--tui-nav-menu-item-fg-current` | NavMenu |
| `--tui-nav-menu-item-weight-current` | NavMenu |
| `--tui-nav-menu-item-bg-ancestor` | NavMenu |
| `--tui-nav-menu-item-fg-ancestor` | NavMenu |
| `--tui-nav-menu-item-weight-ancestor` | NavMenu |
| `--tui-nav-menu-item-fg-disabled` | NavMenu |
| `--tui-nav-menu-icon-size` | NavMenu |
| `--tui-nav-menu-indicator-width` | NavMenu |
| `--tui-nav-menu-indicator-color` | NavMenu |
| `--tui-nav-menu-sub-indent` | NavMenu |
| `--tui-nav-menu-sub-border` | NavMenu |
| `--tui-nav-menu-bar-gap` | NavMenu |
| `--tui-nav-menu-flyout-bg` | NavMenu |
| `--tui-nav-menu-flyout-fg` | NavMenu |
| `--tui-nav-menu-flyout-border` | NavMenu |
| `--tui-nav-menu-flyout-radius` | NavMenu |
| `--tui-nav-menu-flyout-shadow` | NavMenu |
| `--tui-nav-menu-flyout-min-width` | NavMenu |
| `--tui-nav-menu-sub-item-bg` | NavMenu |
| `--tui-nav-menu-sub-item-fg` | NavMenu |
| `--tui-nav-menu-sub-item-weight` | NavMenu |
| `--tui-nav-menu-sub-item-bg-hover` | NavMenu |
| `--tui-nav-menu-sub-item-fg-hover` | NavMenu |
| `--tui-nav-menu-sub-item-bg-active` | NavMenu |
| `--tui-nav-menu-sub-item-fg-active` | NavMenu |
| `--tui-nav-menu-sub-item-bg-current` | NavMenu |
| `--tui-nav-menu-sub-item-fg-current` | NavMenu |
| `--tui-nav-menu-sub-item-weight-current` | NavMenu |
| `--tui-nav-menu-sub-item-bg-ancestor` | NavMenu |
| `--tui-nav-menu-sub-item-fg-ancestor` | NavMenu |
| `--tui-nav-menu-sub-item-weight-ancestor` | NavMenu |
| `--tui-nav-menu-sub-item-fg-disabled` | NavMenu |
| `--tui-nav-menu-bar-item-bg` | NavMenu |
| `--tui-nav-menu-bar-item-fg` | NavMenu |
| `--tui-nav-menu-bar-item-weight` | NavMenu |
| `--tui-nav-menu-bar-item-bg-hover` | NavMenu |
| `--tui-nav-menu-bar-item-fg-hover` | NavMenu |
| `--tui-nav-menu-bar-item-bg-active` | NavMenu |
| `--tui-nav-menu-bar-item-fg-active` | NavMenu |
| `--tui-nav-menu-bar-item-bg-current` | NavMenu |
| `--tui-nav-menu-bar-item-fg-current` | NavMenu |
| `--tui-nav-menu-bar-item-weight-current` | NavMenu |
| `--tui-nav-menu-bar-item-bg-ancestor` | NavMenu |
| `--tui-nav-menu-bar-item-fg-ancestor` | NavMenu |
| `--tui-nav-menu-bar-item-weight-ancestor` | NavMenu |
| `--tui-nav-menu-bar-item-fg-disabled` | NavMenu |
| `--tui-nav-menu-flyout-item-bg` | NavMenu |
| `--tui-nav-menu-flyout-item-fg` | NavMenu |
| `--tui-nav-menu-flyout-item-weight` | NavMenu |
| `--tui-nav-menu-flyout-item-bg-hover` | NavMenu |
| `--tui-nav-menu-flyout-item-fg-hover` | NavMenu |
| `--tui-nav-menu-flyout-item-bg-active` | NavMenu |
| `--tui-nav-menu-flyout-item-fg-active` | NavMenu |
| `--tui-nav-menu-flyout-item-bg-current` | NavMenu |
| `--tui-nav-menu-flyout-item-fg-current` | NavMenu |
| `--tui-nav-menu-flyout-item-weight-current` | NavMenu |
| `--tui-nav-menu-flyout-item-bg-ancestor` | NavMenu |
| `--tui-nav-menu-flyout-item-fg-ancestor` | NavMenu |
| `--tui-nav-menu-flyout-item-weight-ancestor` | NavMenu |
| `--tui-nav-menu-flyout-item-fg-disabled` | NavMenu |
| `--tui-notice-bg` | Notice |
| `--tui-notice-border` | Notice |
| `--tui-notice-border-width` | Notice |
| `--tui-notice-stripe` | Notice |
| `--tui-notice-stripe-width` | Notice |
| `--tui-notice-fg` | Notice |
| `--tui-notice-radius` | Notice |
| `--tui-notice-padding` | Notice |
| `--tui-notice-gap` | Notice |
| `--tui-notice-para-gap` | Notice |
| `--tui-notice-icon` | Notice |
| `--tui-notice-title-size` | Notice |
| `--tui-notice-foot-basis` | Notice |
| `--tui-notice-dismiss-bg-interact` | Notice |
| `--tui-notice-dismiss-bg-pressed` | Notice |
| `--tui-overlap-stack-overlap` | OverlapStack |
| `--tui-overlap-stack-overflow-bg` | OverlapStack |
| `--tui-overlap-stack-overflow-fg` | OverlapStack |
| `--tui-overlap-stack-item-radius` | OverlapStack |
| `--tui-overlap-stack-border-width` | OverlapStack |
| `--tui-overlap-stack-border-color` | OverlapStack |
| `--tui-pager-gap` | Pager |
| `--tui-pager-nav-gap` | Pager |
| `--tui-pager-item-border` | Pager |
| `--tui-pager-item-radius` | Pager |
| `--tui-pager-jump-width` | Pager |
| `--tui-popover-bg` | Popover |
| `--tui-popover-fg` | Popover |
| `--tui-popover-radius` | Popover |
| `--tui-popover-shadow` | Popover |
| `--tui-popover-border` | Popover |
| `--tui-popover-z` | Popover |
| `--tui-popover-min-width` | Popover |
| `--tui-popover-max-width` | Popover |
| `--tui-popover-padding` | Popover |
| `--tui-progress-track` | Progress |
| `--tui-progress-fill` | Progress |
| `--tui-progress-label` | Progress |
| `--tui-progress-radius` | Progress |
| `--tui-progress-block-size` | Progress |
| `--tui-progress-z1-fill` | Progress |
| `--tui-progress-z2-fill` | Progress |
| `--tui-progress-z3-fill` | Progress |
| `--tui-progress-z4-fill` | Progress |
| `--tui-progress-z5-fill` | Progress |
| `--tui-progress-z1-label` | Progress |
| `--tui-progress-z2-label` | Progress |
| `--tui-progress-z3-label` | Progress |
| `--tui-progress-z4-label` | Progress |
| `--tui-progress-z5-label` | Progress |
| `--tui-radio-accent` | Radio |
| `--tui-radio-size` | Radio |
| `--tui-radio-border` | Radio |
| `--tui-radio-border-hover` | Radio |
| `--tui-radio-border-invalid` | Radio |
| `--tui-radio-bg` | Radio |
| `--tui-radio-gap` | Radio |
| `--tui-radio-font-size` | Radio |
| `--tui-radio-label-color` | Radio |
| `--tui-radio-description-color` | Radio |
| `--tui-radio-group-gap` | Radio |
| `--tui-rating-active` | Rating |
| `--tui-rating-inactive` | Rating |
| `--tui-rating-scale` | Rating |
| `--tui-search-input-button-radius` | SearchInput |
| `--tui-search-select-trigger-bg` | SearchSelect |
| `--tui-search-select-trigger-fg` | SearchSelect |
| `--tui-search-select-trigger-border` | SearchSelect |
| `--tui-search-select-trigger-border-hover` | SearchSelect |
| `--tui-search-select-trigger-border-focus` | SearchSelect |
| `--tui-search-select-trigger-radius` | SearchSelect |
| `--tui-search-select-panel-bg` | SearchSelect |
| `--tui-search-select-panel-fg` | SearchSelect |
| `--tui-search-select-panel-border` | SearchSelect |
| `--tui-search-select-panel-shadow` | SearchSelect |
| `--tui-search-select-panel-radius` | SearchSelect |
| `--tui-search-select-panel-width` | SearchSelect |
| `--tui-search-select-option-bg-hover` | SearchSelect |
| `--tui-search-select-option-bg-selected` | SearchSelect |
| `--tui-search-select-option-fg-hover` | SearchSelect |
| `--tui-search-select-option-fg-selected` | SearchSelect |
| `--tui-search-select-option-bg-selected-hover` | SearchSelect |
| `--tui-search-select-option-check` | SearchSelect |
| `--tui-secret-input-set-fg` | SecretInput |
| `--tui-secret-input-button-radius` | SecretInput |
| `--tui-secret-input-bg-locked` | SecretInput |
| `--tui-segmented-gap` | SegmentedControl |
| `--tui-segmented-padding` | SegmentedControl |
| `--tui-segmented-radius` | SegmentedControl |
| `--tui-segmented-bg` | SegmentedControl |
| `--tui-segmented-fg` | SegmentedControl |
| `--tui-segmented-border` | SegmentedControl |
| `--tui-segmented-item-padding` | SegmentedControl |
| `--tui-segmented-item-radius` | SegmentedControl |
| `--tui-segmented-item-fg` | SegmentedControl |
| `--tui-segmented-item-bg-active` | SegmentedControl |
| `--tui-segmented-item-fg-active` | SegmentedControl |
| `--tui-segmented-item-border-active` | SegmentedControl |
| `--tui-segmented-indicator` | SegmentedControl |
| `--tui-segmented-indicator-size` | SegmentedControl |
| `--tui-select-min-width` | Select |
| `--tui-select-trigger-bg` | Select |
| `--tui-select-trigger-fg` | Select |
| `--tui-select-trigger-border` | Select |
| `--tui-select-trigger-border-hover` | Select |
| `--tui-select-trigger-border-focus` | Select |
| `--tui-select-trigger-radius` | Select |
| `--tui-select-content-bg` | Select |
| `--tui-select-content-fg` | Select |
| `--tui-select-content-border` | Select |
| `--tui-select-content-shadow` | Select |
| `--tui-select-content-radius` | Select |
| `--tui-select-option-radius` | Select |
| `--tui-select-option-bg-hover` | Select |
| `--tui-select-option-bg-selected` | Select |
| `--tui-select-option-fg-hover` | Select |
| `--tui-select-option-fg-selected` | Select |
| `--tui-select-option-bg-selected-hover` | Select |
| `--tui-select-option-check` | Select |
| `--tui-select-option-gap` | Select |
| `--tui-sidebar-width` | Sidebar |
| `--tui-sidebar-collapsed-width` | Sidebar |
| `--tui-sidebar-bg` | Sidebar |
| `--tui-sidebar-fg` | Sidebar |
| `--tui-sidebar-border` | Sidebar |
| `--tui-sidebar-divider` | Sidebar |
| `--tui-sidebar-padding` | Sidebar |
| `--tui-sidebar-z` | Sidebar |
| `--tui-slider-track-height` | Slider |
| `--tui-slider-track-bg` | Slider |
| `--tui-slider-fill` | Slider |
| `--tui-slider-gap` | Slider |
| `--tui-slider-segment-radius` | Slider |
| `--tui-slider-thumb-size` | Slider |
| `--tui-slider-thumb-bg` | Slider |
| `--tui-slider-label-fg` | Slider |
| `--tui-progress-track` | StepIndicator |
| `--tui-progress-fill` | StepIndicator |
| `--tui-steplist-gap` | StepList |
| `--tui-steplist-padding` | StepList |
| `--tui-steplist-radius` | StepList |
| `--tui-steplist-current-bg` | StepList |
| `--tui-steplist-current-border` | StepList |
| `--tui-steplist-hover-bg` | StepList |
| `--tui-switch-accent` | Switch |
| `--tui-switch-bg` | Switch |
| `--tui-switch-border` | Switch |
| `--tui-switch-border-width` | Switch |
| `--tui-switch-thumb-bg` | Switch |
| `--tui-switch-thumb-size` | Switch |
| `--tui-switch-track-height` | Switch |
| `--tui-switch-track-width` | Switch |
| `--tui-switch-size` | Switch |
| `--tui-switch-label-color` | Switch |
| `--tui-switch-font-size` | Switch |
| `--tui-switch-gap` | Switch |
| `--tui-table-border` | Table |
| `--tui-table-bg` | Table |
| `--tui-table-bg-head` | Table |
| `--tui-table-fg` | Table |
| `--tui-table-padding` | Table |
| `--tui-table-selected-bg` | Table |
| `--tui-table-selected-fg` | Table |
| `--tui-tabs-gap` | Tabs |
| `--tui-tabs-list-bg` | Tabs |
| `--tui-tabs-list-fg` | Tabs |
| `--tui-tabs-list-padding` | Tabs |
| `--tui-tabs-list-radius` | Tabs |
| `--tui-tabs-tab-padding` | Tabs |
| `--tui-tabs-tab-radius` | Tabs |
| `--tui-tabs-tab-bg` | Tabs |
| `--tui-tabs-tab-fg` | Tabs |
| `--tui-tabs-tab-bg-active` | Tabs |
| `--tui-tabs-tab-fg-active` | Tabs |
| `--tui-tabs-tab-bg-hover` | Tabs |
| `--tui-tabs-tab-border` | Tabs |
| `--tui-tabs-indicator` | Tabs |
| `--tui-tabs-indicator-size` | Tabs |
| `--tui-input-group-gap` | TextInput |
| `--tui-input-` | Textarea |
| `--tui-toast-width` | Toast |
| `--tui-toast-fg` | Toast |
| `--tui-toast-gap` | Toast |
| `--tui-toast-inset` | Toast |
| `--tui-toast-shadow` | Toast |
| `--tui-toast-z` | Toast |
| `--tui-toolbar-gap` | Toolbar |
| `--tui-toolbar-padding` | Toolbar |
| `--tui-tooltip-bg` | Tooltip |
| `--tui-tooltip-fg` | Tooltip |
| `--tui-tooltip-radius` | Tooltip |
| `--tui-tooltip-z` | Tooltip |

## In practice

`SearchInput` reads `--tui-search-input-button-radius` for its in-field clear
and submit buttons (default: `--tui-radius-full`). Set it from any ancestor to
reshape them per context — no override of the component's own CSS, just the
token:

```css
.my-search .tui-search-input__clear,
.my-search .tui-search-input__submit {
  --tui-search-input-button-radius: var(--tui-radius-xs);
}
```

```jsx
<div
  className="tui-interface"
  style={{ "--tui-search-input-button-radius": "var(--tui-radius-xs)", maxWidth: "22rem" }}
>
  <SearchInput defaultValue="Foundations" onSearch={() => {}} aria-label="Search courses" />
</div>
```

Live example: [interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/reference-component-tokens--docs).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/reference-component-tokens--docs