Theme Token Table

Every Theme token the official Component catalog reads, grouped by the chapter that defines it. The entry behind each name gives the token's role, fallback and consuming Components.

Component Styles and Themes

Token	Purpose
`:ui-fg`	The default foreground for catalog content.
`:ui-bg`	The default background of application surfaces.
`:ui-border`	The default border and divider color.
`:ui-muted-fg`	The subdued foreground for secondary text.
`:ui-accent`	The accent color for emphasis and selection.
`:ui-accent-fg`	The foreground paired with `:ui-accent`.
`:ui-accent-soft-bg`	The soft accent tint.
`:ui-disabled-fg`	The foreground of a disabled control.
`:ui-disabled-bg`	The background of a disabled control.
`:ui-disabled-border`	The border color of a disabled control.
`:ui-danger-fg`	The foreground of the danger status.
`:ui-danger-bg`	The background of the danger status.
`:ui-danger-border`	The border of the danger status.
`:ui-warning-fg`	The foreground of the warning status.
`:ui-warning-bg`	The background of the warning status.
`:ui-warning-border`	The border of the warning status.
`:ui-info-fg`	The foreground of the informational status.
`:ui-info-bg`	The background of the informational status.
`:ui-info-border`	The border of the informational status.
`:ui-success-fg`	The foreground of the success status.
`:ui-success-bg`	The background of the success status.
`:ui-success-border`	The border of the success status.

Containers

Token	Purpose
`:ui-panel-fg`	The foreground of a catalog surface.
`:ui-panel-bg`	The background of a catalog surface.
`:ui-panel-border`	The border of a catalog surface.

Feedback and Status

Token	Purpose
`:ui-progress-track`	The background of a progress track and of a placeholder block.

Buttons and Choice Controls

Token	Purpose
`:ui-button-primary-fg`	The foreground of a primary button.
`:ui-button-primary-bg`	The fill of a primary button.
`:ui-button-primary-hover-bg`	The hover fill of a primary button.
`:ui-button-secondary-fg`	The foreground of a secondary button and of a selected choice.
`:ui-button-secondary-bg`	The tint of a secondary button and of a selected choice.
`:ui-button-secondary-hover-bg`	The hover tint of a secondary button.
`:ui-button-ghost-fg`	The foreground of a ghost button.
`:ui-button-ghost-hover-bg`	The hover surface of a ghost button.
`:ui-checkbox-enabled-fg`	The label color of an enabled checkbox.
`:ui-checkbox-disabled-fg`	The label color of a disabled checkbox.
`:ui-range-fill`	The accent fill of a range bar.
`:ui-range-track`	The unfilled track of a range bar.

Text Input Controls

Token	Purpose
`:ui-search-bg`	The fill of a search field's pill.
`:ui-search-fg`	The text foreground inside a search field.

Token	Purpose
`:ui-pagination-muted-fg`	The color of the pagination summary line.

Data Display

Token	Purpose
`:ui-table-border`	The hairline under a table header and every table row.
`:ui-table-selected-fg`	The foreground of a selected table row.
`:ui-table-selected-bg`	The background of a selected table row.
`:ui-data-grid-error-fg`	The text color of a data grid failure or cancellation.

Panels and Windows

Token	Purpose
`:ui-window-fg`	The foreground of window content.
`:ui-window-bg`	The background of a window or panel surface.
`:ui-window-border`	The frame around a window or panel.
`:ui-window-title-bg`	The background of a window's title bar.
`:ui-window-title-fg`	The title color of an inactive window.
`:ui-window-title-active-fg`	The title color of the active window.

Token	Purpose
`:ui-shell-bg`	The background of the desktop bars.
`:ui-shell-fg`	The foreground of the desktop bars.
`:ui-shell-muted-fg`	Muted text on the desktop bars, such as an empty taskbar's message and the status region.
`:ui-shell-item-fg`	The caption color of an ordinary window or workspace item.
`:ui-shell-item-minimized-fg`	The caption color of a minimized window item.
`:ui-picker-item-bg`	The background of a launcher or switcher row.
`:ui-picker-item-fg`	The caption color of a picker row.
`:ui-picker-item-muted-fg`	The description color of a picker row.
`:ui-divider-bg`	The divider color of a splitter or pane resizer.

Grids and Character Surfaces

Token	Purpose
`:ui-playing-card-bg`	The face background of an ordinary card.
`:ui-playing-card-black`	The ink of a spades or clubs card.
`:ui-playing-card-red`	The ink of a hearts or diamonds card.
`:ui-playing-card-back-bg`	The background of a face-down card.
`:ui-playing-card-back-fg`	The front color of a face-down card.
`:ui-playing-card-empty-bg`	The background of an empty pile placeholder.
`:ui-playing-card-empty-fg`	The glyph color of an empty pile placeholder.
`:ui-playing-card-selected-bg`	The background of a selected card.
`:ui-playing-card-hover-bg`	The hover tint of an interactive card.