Every name lives on :root in light-tokens.css; dark-tokens.css repeats the 68 that change in the dark. The Tailwind column is what tailwind.css / styles.css add: a colour listed as bg-x is also text-x, border-x, ring-x, fill-x and takes opacity modifiers (bg-x/10); a text-* size carries its line height; --spacing is the unit every spacing utility multiplies. A token marked deprecated stays in the contract but no component reads it, and zui theme check warns (inert-override) when a theme sets it. Sections follow the groups of tokens.json.
Sections
Contract version
the token contract this file implements. A theme may set the same name to its own version; zui theme diff prints both
| Token | Light | Dark | Description | Tailwind |
|---|
--zui-theme-version | "2.0.0" | | Version of the token contract (semver, quoted); a theme file may set its own. | |
Core primitives
| Token | Light | Dark | Description | Tailwind |
|---|
--background | #ffffff | #0a0a0a | The page surface. | bg-background |
--foreground | #0a0a0a | #fafafa | Body text on --background. | text-foreground |
| Token | Light | Dark | Description | Tailwind |
|---|
--border | #e4e4e7 | #a1a1aa | Default border and divider colour. | bg-border |
--input | #e4e4e7 | #27272a | Border of form controls. | bg-input |
--input-unsaved | #fffbeb | #1a1808 | Background of a field with unsaved changes. | bg-input-unsaved |
--ring | #27272a | #d4d4d8 | Keyboard focus ring. | bg-ring |
Primary
--<hue>-text is the hue as small text on --background (and on the hue's 10% tint), AA-safe where the surface colour itself is not.
| Token | Light | Dark | Description | Tailwind |
|---|
--primary | #2563eb | | Brand surface: primary buttons, active states, links. | bg-primary |
--primary-foreground | #ffffff | | Text on --primary. | text-primary-foreground |
--primary-text | #1d4ed8 | #60a5fa | Primary-coloured text on --background. | text-primary-text |
--primary-border | #bed0f9 | #12254e | Border of a primary-tinted callout or outline: ~30% --primary over --background. | bg-primary-border |
--primary-glow | rgba(37, 99, 235, 0.3) | rgba(37, 99, 235, 0.4) | Translucent primary halo (AI button, glow effects). | bg-primary-glow |
Secondary
| Token | Light | Dark | Description | Tailwind |
|---|
--secondary | #f4f4f5 | #27272a | Secondary button surface. | bg-secondary |
--secondary-foreground | #18181b | #fafafa | Text on --secondary. | text-secondary-foreground |
Danger
| Token | Light | Dark | Description | Tailwind |
|---|
--danger | #dc2626 | | Danger surface: danger buttons, error borders. | bg-danger |
--danger-foreground | #ffffff | | Text on --danger. | text-danger-foreground |
--danger-text | #b91c1c | #f87171 | Danger-coloured text on --background (error messages). | text-danger-text |
--danger-border | #f5bebe | #491212 | Border of a danger-tinted callout or outline: ~30% --danger over --background. | bg-danger-border |
Muted
| Token | Light | Dark | Description | Tailwind |
|---|
--muted | #f4f4f5 | #27272a | Quiet surface: table headers, skeletons, disabled fills. | bg-muted |
--muted-foreground | #65656d | #a1a1aa | Secondary text: descriptions, placeholders, captions. | text-muted-foreground |
Accent
| Token | Light | Dark | Description | Tailwind |
|---|
--accent | #f4f4f5 | #27272a | Hover / active row and option surface. | bg-accent |
--accent-foreground | #18181b | #fafafa | Text on --accent. | text-accent-foreground |
--accent-glow | rgba(244, 244, 245, 0.5) | rgba(39, 39, 42, 0.7) | Translucent accent halo. | bg-accent-glow |
Popover
| Token | Light | Dark | Description | Tailwind |
|---|
--popover | #ffffff | #18181b | Floating surface: menus, listbox options, tooltips. | bg-popover |
--popover-foreground | #0a0a0a | #fafafa | Text on --popover. | text-popover-foreground |
Card
| Token | Light | Dark | Description | Tailwind |
|---|
--card | #ffffff | #18181b | Raised content surface. | bg-card |
--card-foreground | #0a0a0a | #fafafa | Text on --card. | text-card-foreground |
Success
| Token | Light | Dark | Description | Tailwind |
|---|
--success | #15803d | | Success surface: badges, toasts, progress. | bg-success |
--success-foreground | #ffffff | | Text on --success. | text-success-foreground |
--success-text | #166534 | #4ade80 | Success-coloured text on --background. | text-success-text |
--success-border | #b9d9c5 | #0d2d19 | Border of a success-tinted callout or outline: ~30% --success over --background. | bg-success-border |
Warning
--warning-foreground sits on a warning surface, --warning-text is warning-coloured text on --background
| Token | Light | Dark | Description | Tailwind |
|---|
--warning | #b45309 | | Warning surface. | bg-warning |
--warning-foreground | #ffffff | | Text on --warning. | text-warning-foreground |
--warning-text | #92400e | #fbbf24 | Warning-coloured text on --background (required markers, hints). | text-warning-text |
--warning-border | #e9cbb5 | #3d200a | Border of a warning-tinted callout or outline: ~30% --warning over --background. | bg-warning-border |
Info
| Token | Light | Dark | Description | Tailwind |
|---|
--info | #f9fafb | #1f2937 | Informational callout surface. | bg-info |
--info-foreground | #0a0a0a | #fafafa | Text on --info. | text-info-foreground |
--info-text | var(--info-foreground) | | Info-coloured text on --background; --info is a near-neutral surface, so this follows --info-foreground. | text-info-text |
--info-border | #e4e4e7 | #27272a | Border of an informational callout. | bg-info-border |
Categorical data-visualization palette for @zuilib/charts
Slots are assigned to series in fixed declaration order and never cycled — the order is CVD-validated (adjacent-pair ΔE ≥ 8 in both modes). Marks are non-text graphics held to WCAG 1.4.11 (3:1), not 4.5:1; light slots 3–5 sit below 3:1 by design and rely on tooltips, the interactive legend and a paired table view. Scatter/bubble charts use at most slots 1–3 together (the all-pairs-validated subset). A theme overriding any slot must re-validate the full order.
| Token | Light | Dark | Description | Tailwind |
|---|
--chart-1 | #2563eb | #3b82f6 | Series slot 1 — the brand blue; harmonizes with --primary. | bg-chart-1 |
--chart-2 | #eb6834 | #d95926 | Series slot 2 — orange. | bg-chart-2 |
--chart-3 | #1baf7a | #199e70 | Series slot 3 — aqua. | bg-chart-3 |
--chart-4 | #eda100 | #c98500 | Series slot 4 — yellow. | bg-chart-4 |
--chart-5 | #e87ba4 | #d55181 | Series slot 5 — magenta. | bg-chart-5 |
--chart-6 | #008300 | #3fa33f | Series slot 6 — green. | bg-chart-6 |
--chart-7 | #4a3aa7 | #9085e9 | Series slot 7 — violet. | bg-chart-7 |
--chart-8 | #e34948 | #e66767 | Series slot 8 — red. | bg-chart-8 |
| Token | Light | Dark | Description | Tailwind |
|---|
--sidebar | #f4f4f5 | #18181b | Sidebar surface. Deprecated: No component reads the sidebar tokens; kept for compatibility. | bg-sidebar |
--sidebar-foreground | #18181b | #fafafa | Text on --sidebar. Deprecated: No component reads the sidebar tokens; kept for compatibility. | text-sidebar-foreground |
--sidebar-primary | #2563eb | | Sidebar primary surface. Deprecated: No component reads the sidebar tokens; kept for compatibility. | bg-sidebar-primary |
--sidebar-primary-foreground | #ffffff | | Text on --sidebar-primary. Deprecated: No component reads the sidebar tokens; kept for compatibility. | text-sidebar-primary-foreground |
--sidebar-accent | #e4e4e7 | #27272a | Sidebar hover / active item surface. Deprecated: No component reads the sidebar tokens; kept for compatibility. | bg-sidebar-accent |
--sidebar-accent-foreground | #18181b | #fafafa | Text on --sidebar-accent. Deprecated: No component reads the sidebar tokens; kept for compatibility. | text-sidebar-accent-foreground |
--sidebar-border | #e4e4e7 | #27272a | Sidebar border. Deprecated: No component reads the sidebar tokens; kept for compatibility. | bg-sidebar-border |
--sidebar-ring | #2563eb | | Sidebar focus ring. Deprecated: No component reads the sidebar tokens; kept for compatibility. | bg-sidebar-ring |
Gradients
| Token | Light | Dark | Description | Tailwind |
|---|
--gradient-primary | linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) | | Primary sweep. Deprecated: No component reads the gradient tokens; kept for compatibility. | bg-gradient-primary |
--gradient-subtle | linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%) | linear-gradient(180deg, #0a0a0a 0%, #18181b 100%) | Background to muted fade. Deprecated: No component reads the gradient tokens; kept for compatibility. | bg-gradient-subtle |
--gradient-card | linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%) | linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%) | Faint primary tint for cards. Deprecated: No component reads the gradient tokens; kept for compatibility. | bg-gradient-card |
--gradient-hero | linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%) | | Blue to violet to pink hero sweep. Deprecated: No component reads the gradient tokens; kept for compatibility. | bg-gradient-hero |
Shadows
the --shadow-1 … --shadow-4 scale from barely-there to overlay, plus the semantic aliases
| Token | Light | Dark | Description | Tailwind |
|---|
--shadow-1 | 0 1px 2px 0 rgba(0, 0, 0, 0.05) | 0 1px 2px 0 rgba(0, 0, 0, 0.3) | Barely-there lift. | shadow-1 |
--shadow-2 | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) | 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) | Switch thumb, small floating parts. | shadow-2 |
--shadow-3 | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) | 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) | Popovers: Select and Combobox options. | shadow-3 |
--shadow-4 | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) | 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.4) | Dialogs and drawers. | shadow-4 |
--shadow-card | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) | 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3) | Card resting shadow: between --shadow-1 and --shadow-2, its own value. | shadow-card |
--shadow-glow | 0 0 20px rgba(59, 130, 246, 0.4) | 0 0 20px rgba(59, 130, 246, 0.5) | Primary halo. Deprecated: No component reads --shadow-glow; kept for compatibility. | shadow-glow |
Shape
--radius is the one knob: every step below derives from it, and the Tailwind utilities (rounded-sm, rounded-md, rounded-lg, ...) carry the same derivation inside the utility (.rounded-lg { border-radius: calc(var(--radius) + 4px) }, see theme.css), resolved at the element, so --radius on :root or on any subtree (.panel { --radius: 0 }) reshapes everything inside it. The --radius-* steps are for plain CSS; the utilities do not read them, so overriding one step on :root changes plain-CSS uses only.
| Token | Light | Dark | Description | Tailwind |
|---|
--radius | 0.5rem | | The one shape knob: 0 squares everything, 999px makes pills. | rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl |
--radius-sm | calc(var(--radius) - 2px) | | Checkbox, small chips. | |
--radius-md | var(--radius) | | Controls: Button, Input, Select. | |
--radius-lg | calc(var(--radius) + 4px) | | Cards, popovers. | |
--radius-xl | calc(var(--radius) + 8px) | | Dialogs, drawers. | |
--radius-2xl | calc(var(--radius) + 16px) | | | |
--radius-3xl | calc(var(--radius) + 24px) | | | |
--radius-full | 9999px | | True circles (avatars, radio dots, switch tracks) and pill-shaped controls (Badge shape="pill", chips). Never themed. | |
--radius-button | var(--radius) | | Button corners. Follows the --radius knob by default; 9999px gives pill buttons and 0 sharp ones without reshaping cards or inputs. | rounded-button |
Type
| Token | Light | Dark | Description | Tailwind |
|---|
--font-sans | ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | | Body and UI face; also font-sans and the preflight body font. | font-sans |
--font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | | Code face; font-mono. | font-mono |
Type scale
size and line height per text-* step
| Token | Light | Dark | Description | Tailwind |
|---|
--text-xs | 0.75rem | | text-xs size. | text-xs |
--text-xs-line-height | calc(1 / 0.75) | | text-xs line height. | |
--text-sm | 0.875rem | | text-sm size: control text, labels. | text-sm |
--text-sm-line-height | calc(1.25 / 0.875) | | text-sm line height. | |
--text-base | 1rem | | text-base size: body. | text-base |
--text-base-line-height | 1.5 | | text-base line height. | |
--text-lg | 1.125rem | | text-lg size. | text-lg |
--text-lg-line-height | calc(1.75 / 1.125) | | text-lg line height. | |
--text-xl | 1.25rem | | text-xl size. | text-xl |
--text-xl-line-height | calc(1.75 / 1.25) | | text-xl line height. | |
--text-2xl | 1.5rem | | text-2xl size: Heading h2. | text-2xl |
--text-2xl-line-height | calc(2 / 1.5) | | text-2xl line height. | |
--text-3xl | 1.875rem | | text-3xl size: Heading h1. | text-3xl |
--text-3xl-line-height | calc(2.25 / 1.875) | | text-3xl line height. | |
Font weights
| Token | Light | Dark | Description | Tailwind |
|---|
--font-weight-normal | 400 | | font-normal. | font-normal |
--font-weight-medium | 500 | | font-medium: labels, buttons. | font-medium |
--font-weight-semibold | 600 | | font-semibold: headings. | font-semibold |
--font-weight-bold | 700 | | font-bold. | font-bold |
Spacing
the unit Tailwind's scale multiplies (p-4 = 4 × this). Padding, gaps and margins inside the components all derive from it.
| Token | Light | Dark | Description | Tailwind |
|---|
--spacing | 0.25rem | | The spacing unit; every p-* / gap-* / m-* utility is a multiple of it. | p-4, gap-2, … (multiples) |
Control density
the box every sized control (Button, Input, NativeSelect, Select, Combobox, Textarea) is built on. Fields share the heights with Button; Button has its own, wider, horizontal padding.
| Token | Light | Dark | Description | Tailwind |
|---|
--control-height-sm | 2rem | | Height of a size="sm" control. | |
--control-height-md | 2.5rem | | Height of a size="md" control (the default). | |
--control-height-lg | 3rem | | Height of a size="lg" control. | |
--control-padding-x-sm | 0.75rem | | Horizontal padding of a sm field. | |
--control-padding-x-md | 1rem | | Horizontal padding of a md field. | |
--control-padding-x-lg | 1rem | | Horizontal padding of a lg field. | |
its own, wider, horizontal padding on the shared control heights (its corner shape is --radius-button)
| Token | Light | Dark | Description | Tailwind |
|---|
--button-padding-x-sm | 0.75rem | | Horizontal padding of a sm Button. | |
--button-padding-x-md | 1rem | | Horizontal padding of a md Button. | |
--button-padding-x-lg | 1.5rem | | Horizontal padding of a lg Button. | |
Card padding
multiples of --spacing
| Token | Light | Dark | Description | Tailwind |
|---|
--card-padding-sm | calc(var(--spacing) * 4) | | Card padding="sm". | |
--card-padding-md | calc(var(--spacing) * 6) | | Card padding="md" (the default). | |
--card-padding-lg | calc(var(--spacing) * 8) | | Card padding="lg". | |
Table cell padding
multiples of --spacing
| Token | Light | Dark | Description | Tailwind |
|---|
--table-cell-padding-x-sm | calc(var(--spacing) * 2) | | Table size="sm" cell horizontal padding. | |
--table-cell-padding-y-sm | calc(var(--spacing) * 1.5) | | Table size="sm" cell vertical padding. | |
--table-cell-padding-x-md | calc(var(--spacing) * 3) | | Table size="md" cell horizontal padding. | |
--table-cell-padding-y-md | calc(var(--spacing) * 2.5) | | Table size="md" cell vertical padding. | |
Drawer panel extent
width for side="start" / "end", height for top / bottom. Deliberately --drawer-size-*, not --drawer-width-*: which axis is measured depends on side
| Token | Light | Dark | Description | Tailwind |
|---|
--drawer-size-sm | 20rem | | Drawer size="sm" panel extent. | |
--drawer-size-md | 28rem | | Drawer size="md" panel extent. | |
--drawer-size-lg | 40rem | | Drawer size="lg" panel extent. | |
Container width caps and gutter
| Token | Light | Dark | Description | Tailwind |
|---|
--container-width-sm | 40rem | | Container size="sm" max-width. | |
--container-width-md | 48rem | | Container size="md" max-width. | |
--container-width-lg | 64rem | | Container size="lg" max-width. | |
--container-width-xl | 80rem | | Container size="xl" max-width. | |
--container-width-2xl | 96rem | | Container size="2xl" max-width. | |
--container-padding | calc(var(--spacing) * 4) | | Container horizontal gutter. | |
Dialog panel width caps and padding
| Token | Light | Dark | Description | Tailwind |
|---|
--dialog-width-sm | 24rem | | Dialog size="sm" max-width. | |
--dialog-width-md | 32rem | | Dialog size="md" max-width (the default). | |
--dialog-width-lg | 42rem | | Dialog size="lg" max-width. | |
--dialog-width-xl | 56rem | | Dialog size="xl" max-width. | |
--dialog-padding | calc(var(--spacing) * 6) | | Dialog panel padding (header, body and footer). | |
Anchored panels
(Select, Combobox)
| Token | Light | Dark | Description | Tailwind |
|---|
--anchor-max-height | calc(var(--spacing) * 60) | | Max height of an anchored Select / Combobox panel before it scrolls. | |
Slider
the track and thumb parts of the native range input. The colours follow --primary / --muted / --ring; the component sets the sizes per size
| Token | Light | Dark | Description | Tailwind |
|---|
--slider-thumb-size | 1rem | | Slider thumb diameter when no size sets it. | |
--slider-track-height | 0.375rem | | Slider track height when no size sets it. | |
--slider-fill | var(--primary) | | Filled portion of the Slider track. | |
--slider-track | var(--muted) | | Empty portion of the Slider track. | |
--slider-thumb | var(--primary) | | Slider thumb. | |
--slider-thumb-ring | var(--ring) | | Keyboard focus ring around the Slider thumb. | |
| Token | Light | Dark | Description | Tailwind |
|---|
--tooltip | var(--foreground) | | Tooltip bubble and arrow colour (inverted: --foreground, with --background text). | |
Avatar
| Token | Light | Dark | Description | Tailwind |
|---|
--avatar-ring | var(--background) | | Colour that separates an Avatar from what it overlaps (group ring, status cut-out); set it to the surface the avatar sits on. | |
Motion
--ease-standard is the default for every transition, --ease-decelerate is what the .animate-* enter/exit classes use
| Token | Light | Dark | Description | Tailwind |
|---|
--duration-fast | 150ms | | Colour transitions; the default transition-* duration. | transition-* (default duration) |
--duration-normal | 200ms | | Movement; the .animate-* enter / exit classes. | |
--duration-slow | 300ms | | Large panels (Drawer, Dialog). | |
Easing curves
| Token | Light | Dark | Description | Tailwind |
|---|
--ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | | Default timing function of every transition. | ease-standard, transition-* (default easing) |
--ease-decelerate | cubic-bezier(0, 0, 0.2, 1) | | Decelerate: entrances and exits. | ease-decelerate |
Animations
the animation shorthand behind each .animate-* class (animations.css) and, with Tailwind, the animate-* utility of the same name. Keyframes are in keyframes.css.
| Token | Light | Dark | Description | Tailwind |
|---|
--animate-fade-in | fade-in var(--duration-normal) var(--ease-decelerate) | | | animate-fade-in |
--animate-fade-out | fade-out var(--duration-normal) var(--ease-decelerate) | | | animate-fade-out |
--animate-slide-in-from-top | slide-in-from-top var(--duration-normal) var(--ease-decelerate) | | | animate-slide-in-from-top |
--animate-slide-in-from-bottom | slide-in-from-bottom var(--duration-normal) var(--ease-decelerate) | | | animate-slide-in-from-bottom |
--animate-slide-in-from-start | slide-in-from-start var(--duration-normal) var(--ease-decelerate) | | | animate-slide-in-from-start |
--animate-slide-in-from-end | slide-in-from-end var(--duration-normal) var(--ease-decelerate) | | | animate-slide-in-from-end |
--animate-scale-in | scale-in var(--duration-normal) var(--ease-decelerate) | | | animate-scale-in |
--animate-scale-out | scale-out var(--duration-normal) var(--ease-decelerate) | | | animate-scale-out |
--animate-spin | zui-spin 1s linear infinite | | Loops; keyframes are zui- prefixed so Tailwind's own spin is never emitted alongside. | animate-spin |
--animate-pulse | zui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite | | | animate-pulse |
--animate-bounce | zui-bounce 1s ease-in-out infinite | | | animate-bounce |
--animate-shake | shake 0.5s ease-in-out | | | animate-shake |
--animate-skeleton-wave | skeleton-wave 1.6s linear infinite | | The Skeleton wave sheen. | animate-skeleton-wave |
--animate-progress-indeterminate | progress-indeterminate 1.5s var(--ease-standard) infinite | | The Progress bar without a value. | animate-progress-indeterminate |
Text editor code blocks
(@zuilib/text-editor .zui-code): one colour per syntax role, light and dark. --zui-code-operator and --zui-code-punctuation are currentColor so they follow the block's text colour.
| Token | Light | Dark | Description | Tailwind |
|---|
--zui-code-comment | #6e7781 | #8b949e | | |
--zui-code-string | #0a3069 | #a5d6ff | | |
--zui-code-number | #0550ae | #79c0ff | | |
--zui-code-keyword | #cf222e | #ff7b72 | | |
--zui-code-builtin | #6639ba | #d2a8ff | | |
--zui-code-type | #953800 | #ffa657 | | |
--zui-code-function | #8250df | #d2a8ff | | |
--zui-code-property | #0550ae | #79c0ff | | |
--zui-code-variable | #953800 | #ffa657 | | |
--zui-code-constant | #0550ae | #79c0ff | | |
--zui-code-operator | currentColor | | | |
--zui-code-punctuation | currentColor | | | |
--zui-code-tag | #116329 | #7ee787 | | |
--zui-code-attr | #0550ae | #79c0ff | | |
--zui-code-regex | #0a3069 | #a5d6ff | | |
--zui-code-meta | #6639ba | #d2a8ff | | |
--zui-code-inserted | #116329 | #7ee787 | Diff: added line text. | |
--zui-code-inserted-background | #dafbe1 | rgba(63, 185, 80, 0.15) | Diff: added line background. | |
--zui-code-deleted | #82071e | #ffa198 | Diff: removed line text. | |
--zui-code-deleted-background | #ffebe9 | rgba(248, 81, 73, 0.15) | Diff: removed line background. | |
Text editor table rails
(@zuilib/text-editor .zui-table-rail): the row / column handles beside a table.
| Token | Light | Dark | Description | Tailwind |
|---|
--zui-table-rail-accent | var(--primary) | | Hovered handle and insert marker. | |
--zui-table-rail-accent-foreground | var(--primary-foreground) | | Icon on --zui-table-rail-accent. | |
--zui-table-rail-danger | var(--danger) | | Remove handle. | |
--zui-table-rail-danger-foreground | var(--danger-foreground) | | Icon on --zui-table-rail-danger. | |