Primitive Token Index
Every --tui-* custom property the system emits, read live from the loaded
stylesheet — host overrides and new tokens show up here without doc edits.
Values shown are light-mode defaults.
These are the theme contract: consuming them directly
(var(--tui-spacing-md), var(--tui-theme-primary-base)) keeps your DOM
free of utility classes and your styles responsive to host theming. Names
follow the --tui-{category}-{axis}-{step} grammar — see
Naming.
For per-category guidance, see the Tokens section: Colors, Spacing, Typography.
191 tokens. Dark values are listed only where dark mode remaps the token; empty means the light value applies. Snapshot of the compiled stylesheet of @tangible/ui 0.2.29, generated at build time.
| Token | Light | Dark | Category |
|---|---|---|---|
--tui-border-width |
1px |
border | |
--tui-border-width-bold |
2px |
border | |
--tui-color-bg |
#fff |
#0c121f |
color |
--tui-color-bg-elevated |
#fff |
#111928 |
color |
--tui-color-bg-inverted |
#111928 |
#F9FAFB |
color |
--tui-color-bg-muted |
#F3F4F6 |
#111928 |
color |
--tui-color-bg-overlay |
rgba(0, 0, 0, var(--tui-opacity-backdrop)) |
rgba(0, 0, 0, 0.7) |
color |
--tui-color-bg-surface |
#fafafa |
#080d17 |
color |
--tui-color-border |
#D1D5DB |
#2b3443 |
color |
--tui-color-border-control |
#838a97 |
#6B7280 |
color |
--tui-color-divider |
#E5E7EB |
#202836 |
color |
--tui-color-fg |
#111928 |
#F9FAFB |
color |
--tui-color-fg-inverted |
#fafafa |
#111928 |
color |
--tui-color-fg-muted |
#6B7280 |
#9CA3AF |
color |
--tui-color-fg-on-accent |
#fff |
#fff |
color |
--tui-color-fg-secondary |
#4B5563 |
#D1D5DB |
color |
--tui-color-fill |
#E5E7EB |
#2b3443 |
color |
--tui-color-fill-strong |
#9CA3AF |
#4B5563 |
color |
--tui-color-fill-subtle |
#F3F4F6 |
#202836 |
color |
--tui-color-focus-ring |
var(--tui-focus-ring-color) |
color | |
--tui-focus-ring-color |
#2563eb |
#3858e9 |
focus-ring |
--tui-focus-ring-offset |
2px |
focus-ring | |
--tui-focus-ring-width |
2px |
focus-ring | |
--tui-generative-amber |
oklch(0.78 0.14 88) |
generative | |
--tui-generative-amber-fg |
#111928 |
generative | |
--tui-generative-amber-interact |
oklch(0.73 0.14 88) |
generative | |
--tui-generative-amber-strong |
oklch(0.4 0.11 88) |
oklch(0.82 0.1 88) |
generative |
--tui-generative-amber-subtle |
oklch(0.94 0.045 88) |
oklch(0.3 0.055 88) |
generative |
--tui-generative-amber-subtle-interact |
oklch(0.9 0.06 88) |
oklch(0.34 0.065 88) |
generative |
--tui-generative-blue |
oklch(0.52 0.13 262) |
generative | |
--tui-generative-blue-fg |
#fff |
generative | |
--tui-generative-blue-interact |
oklch(0.47 0.13 262) |
generative | |
--tui-generative-blue-strong |
oklch(0.4 0.11 262) |
oklch(0.82 0.1 262) |
generative |
--tui-generative-blue-subtle |
oklch(0.94 0.045 262) |
oklch(0.3 0.055 262) |
generative |
--tui-generative-blue-subtle-interact |
oklch(0.9 0.06 262) |
oklch(0.34 0.065 262) |
generative |
--tui-generative-coral |
oklch(0.52 0.13 25) |
generative | |
--tui-generative-coral-fg |
#fff |
generative | |
--tui-generative-coral-interact |
oklch(0.47 0.13 25) |
generative | |
--tui-generative-coral-strong |
oklch(0.4 0.11 25) |
oklch(0.82 0.1 25) |
generative |
--tui-generative-coral-subtle |
oklch(0.94 0.045 25) |
oklch(0.3 0.055 25) |
generative |
--tui-generative-coral-subtle-interact |
oklch(0.9 0.06 25) |
oklch(0.34 0.065 25) |
generative |
--tui-generative-cyan |
oklch(0.78 0.14 218) |
generative | |
--tui-generative-cyan-fg |
#111928 |
generative | |
--tui-generative-cyan-interact |
oklch(0.73 0.14 218) |
generative | |
--tui-generative-cyan-strong |
oklch(0.4 0.11 218) |
oklch(0.82 0.1 218) |
generative |
--tui-generative-cyan-subtle |
oklch(0.94 0.045 218) |
oklch(0.3 0.055 218) |
generative |
--tui-generative-cyan-subtle-interact |
oklch(0.9 0.06 218) |
oklch(0.34 0.065 218) |
generative |
--tui-generative-emerald |
oklch(0.52 0.13 162) |
generative | |
--tui-generative-emerald-fg |
#fff |
generative | |
--tui-generative-emerald-interact |
oklch(0.47 0.13 162) |
generative | |
--tui-generative-emerald-strong |
oklch(0.4 0.11 162) |
oklch(0.82 0.1 162) |
generative |
--tui-generative-emerald-subtle |
oklch(0.94 0.045 162) |
oklch(0.3 0.055 162) |
generative |
--tui-generative-emerald-subtle-interact |
oklch(0.9 0.06 162) |
oklch(0.34 0.065 162) |
generative |
--tui-generative-lime |
oklch(0.78 0.14 125) |
generative | |
--tui-generative-lime-fg |
#111928 |
generative | |
--tui-generative-lime-interact |
oklch(0.73 0.14 125) |
generative | |
--tui-generative-lime-strong |
oklch(0.4 0.11 125) |
oklch(0.82 0.1 125) |
generative |
--tui-generative-lime-subtle |
oklch(0.94 0.045 125) |
oklch(0.3 0.055 125) |
generative |
--tui-generative-lime-subtle-interact |
oklch(0.9 0.06 125) |
oklch(0.34 0.065 125) |
generative |
--tui-generative-orange |
oklch(0.78 0.14 60) |
generative | |
--tui-generative-orange-fg |
#111928 |
generative | |
--tui-generative-orange-interact |
oklch(0.73 0.14 60) |
generative | |
--tui-generative-orange-strong |
oklch(0.4 0.11 60) |
oklch(0.82 0.1 60) |
generative |
--tui-generative-orange-subtle |
oklch(0.94 0.045 60) |
oklch(0.3 0.055 60) |
generative |
--tui-generative-orange-subtle-interact |
oklch(0.9 0.06 60) |
oklch(0.34 0.065 60) |
generative |
--tui-generative-pink |
oklch(0.52 0.13 350) |
generative | |
--tui-generative-pink-fg |
#fff |
generative | |
--tui-generative-pink-interact |
oklch(0.47 0.13 350) |
generative | |
--tui-generative-pink-strong |
oklch(0.4 0.11 350) |
oklch(0.82 0.1 350) |
generative |
--tui-generative-pink-subtle |
oklch(0.94 0.045 350) |
oklch(0.3 0.055 350) |
generative |
--tui-generative-pink-subtle-interact |
oklch(0.9 0.06 350) |
oklch(0.34 0.065 350) |
generative |
--tui-generative-teal |
oklch(0.52 0.13 192) |
generative | |
--tui-generative-teal-fg |
#fff |
generative | |
--tui-generative-teal-interact |
oklch(0.47 0.13 192) |
generative | |
--tui-generative-teal-strong |
oklch(0.4 0.11 192) |
oklch(0.82 0.1 192) |
generative |
--tui-generative-teal-subtle |
oklch(0.94 0.045 192) |
oklch(0.3 0.055 192) |
generative |
--tui-generative-teal-subtle-interact |
oklch(0.9 0.06 192) |
oklch(0.34 0.065 192) |
generative |
--tui-generative-violet |
oklch(0.52 0.13 300) |
generative | |
--tui-generative-violet-fg |
#fff |
generative | |
--tui-generative-violet-interact |
oklch(0.47 0.13 300) |
generative | |
--tui-generative-violet-strong |
oklch(0.4 0.11 300) |
oklch(0.82 0.1 300) |
generative |
--tui-generative-violet-subtle |
oklch(0.94 0.045 300) |
oklch(0.3 0.055 300) |
generative |
--tui-generative-violet-subtle-interact |
oklch(0.9 0.06 300) |
oklch(0.34 0.065 300) |
generative |
--tui-input-chevron |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 10'%3E%3Cpath fill='%23111928' d='M5.511 7.5a.939.939 0 0 1-.636-.244l-3.6-3.326a.833.833 0 0 1-.202-.27.778.778 0 0 1-.006-.643.83.83 0 0 1 .197-.273.909.909 0 0 1 .295-.182.965.965 0 0 1 .696.006c.11.043.21.106.292.186l2.964 2.738 2.964-2.738a.94.94 0 0 1 .633-.234c.236.002.462.09.628.244a.801.801 0 0 1 .264.58.8.8 0 0 1-.253.586l-3.6 3.326a.939.939 0 0 1-.636.244Z'/%3E%3C/svg%3E") |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 10'%3E%3Cpath fill='%23F9FAFB' d='M5.511 7.5a.939.939 0 0 1-.636-.244l-3.6-3.326a.833.833 0 0 1-.202-.27.778.778 0 0 1-.006-.643.83.83 0 0 1 .197-.273.909.909 0 0 1 .295-.182.965.965 0 0 1 .696.006c.11.043.21.106.292.186l2.964 2.738 2.964-2.738a.94.94 0 0 1 .633-.234c.236.002.462.09.628.244a.801.801 0 0 1 .264.58.8.8 0 0 1-.253.586l-3.6 3.326a.939.939 0 0 1-.636.244Z'/%3E%3C/svg%3E") |
input |
--tui-layer-elevated |
2 |
layer | |
--tui-layer-modal |
1000 |
layer | |
--tui-layer-overlay |
100 |
layer | |
--tui-layer-surface |
0 |
layer | |
--tui-layer-top |
9999 |
layer | |
--tui-motion-duration |
200ms |
motion | |
--tui-motion-timing |
ease-in-out |
motion | |
--tui-opacity-backdrop |
0.5 |
opacity | |
--tui-opacity-disabled |
0.75 |
opacity | |
--tui-palette-color-black |
#000 |
palette | |
--tui-palette-color-white |
#fff |
palette | |
--tui-palette-spacing-1 |
calc(var(--tui-spacing-base) * 1) |
palette | |
--tui-palette-spacing-10 |
calc(var(--tui-spacing-base) * 10) |
palette | |
--tui-palette-spacing-12 |
calc(var(--tui-spacing-base) * 12) |
palette | |
--tui-palette-spacing-16 |
calc(var(--tui-spacing-base) * 16) |
palette | |
--tui-palette-spacing-2 |
calc(var(--tui-spacing-base) * 2) |
palette | |
--tui-palette-spacing-20 |
calc(var(--tui-spacing-base) * 20) |
palette | |
--tui-palette-spacing-24 |
calc(var(--tui-spacing-base) * 24) |
palette | |
--tui-palette-spacing-3 |
calc(var(--tui-spacing-base) * 3) |
palette | |
--tui-palette-spacing-30 |
calc(var(--tui-spacing-base) * 30) |
palette | |
--tui-palette-spacing-4 |
calc(var(--tui-spacing-base) * 4) |
palette | |
--tui-palette-spacing-40 |
calc(var(--tui-spacing-base) * 40) |
palette | |
--tui-palette-spacing-5 |
calc(var(--tui-spacing-base) * 5) |
palette | |
--tui-palette-spacing-50 |
calc(var(--tui-spacing-base) * 50) |
palette | |
--tui-palette-spacing-6 |
calc(var(--tui-spacing-base) * 6) |
palette | |
--tui-palette-spacing-8 |
calc(var(--tui-spacing-base) * 8) |
palette | |
--tui-radius-full |
9999px |
radius | |
--tui-radius-lg |
12px |
radius | |
--tui-radius-md |
8px |
radius | |
--tui-radius-sm |
4px |
radius | |
--tui-radius-xl |
16px |
radius | |
--tui-radius-xs |
2px |
radius | |
--tui-shadow-color |
0, 0, 0 |
0, 0, 0 |
shadow |
--tui-shadow-dropdown |
0 4px 12px rgba(var(--tui-shadow-color), 0.15) |
shadow | |
--tui-shadow-lg |
0 10px 15px rgba(var(--tui-shadow-color), 0.1), 0 4px 6px rgba(var(--tui-shadow-color), 0.05) |
shadow | |
--tui-shadow-md |
0 4px 6px rgba(var(--tui-shadow-color), 0.1), 0 2px 4px rgba(var(--tui-shadow-color), 0.06) |
shadow | |
--tui-shadow-sm |
0 1px 3px rgba(var(--tui-shadow-color), 0.1), 0 1px 2px rgba(var(--tui-shadow-color), 0.06) |
shadow | |
--tui-shadow-xs |
0 1px 2px rgba(var(--tui-shadow-color), 0.05) |
shadow | |
--tui-spacing-base |
4px |
spacing | |
--tui-spacing-lg |
var(--tui-palette-spacing-6) |
spacing | |
--tui-spacing-md |
var(--tui-palette-spacing-4) |
spacing | |
--tui-spacing-sm |
var(--tui-palette-spacing-3) |
spacing | |
--tui-spacing-xl |
var(--tui-palette-spacing-8) |
spacing | |
--tui-spacing-xs |
var(--tui-palette-spacing-2) |
spacing | |
--tui-spacing-xxl |
var(--tui-palette-spacing-16) |
spacing | |
--tui-spacing-xxs |
var(--tui-palette-spacing-1) |
spacing | |
--tui-theme-danger-base |
#d63638 |
#e65054 |
theme |
--tui-theme-danger-soft |
#f86368 |
#d63638 |
theme |
--tui-theme-danger-strong |
#b32d2e |
#f86368 |
theme |
--tui-theme-danger-stronger |
#8a2424 |
#ff8085 |
theme |
--tui-theme-danger-strongest |
#451313 |
#ffabaf |
theme |
--tui-theme-danger-subtle |
#facfd2 |
#691c1c |
theme |
--tui-theme-danger-subtlest |
#fce3e5 |
#451313 |
theme |
--tui-theme-info-base |
#2942d1 |
#3858e9 |
theme |
--tui-theme-info-soft |
#7b93ff |
#2942d1 |
theme |
--tui-theme-info-strong |
#1d35b4 |
#5879f9 |
theme |
--tui-theme-info-stronger |
#1b2398 |
#7b93ff |
theme |
--tui-theme-info-strongest |
#090949 |
#a0b5fe |
theme |
--tui-theme-info-subtle |
#c7d6ff |
#101375 |
theme |
--tui-theme-info-subtlest |
#e2e9ff |
#090949 |
theme |
--tui-theme-primary-base |
#2942d1 |
#3858e9 |
theme |
--tui-theme-primary-soft |
#7b93ff |
#2942d1 |
theme |
--tui-theme-primary-strong |
#1d35b4 |
#5879f9 |
theme |
--tui-theme-primary-stronger |
#1b2398 |
#7b93ff |
theme |
--tui-theme-primary-strongest |
#090949 |
#a0b5fe |
theme |
--tui-theme-primary-subtle |
#c7d6ff |
#101375 |
theme |
--tui-theme-primary-subtlest |
#e2e9ff |
#090949 |
theme |
--tui-theme-secondary-base |
#6B7280 |
#9CA3AF |
theme |
--tui-theme-secondary-soft |
#9CA3AF |
#4B5563 |
theme |
--tui-theme-secondary-strong |
#374151 |
#D1D5DB |
theme |
--tui-theme-secondary-stronger |
#202836 |
#E5E7EB |
theme |
--tui-theme-secondary-strongest |
#111928 |
#F3F4F6 |
theme |
--tui-theme-secondary-subtle |
#E5E7EB |
#374151 |
theme |
--tui-theme-secondary-subtlest |
#F3F4F6 |
#202836 |
theme |
--tui-theme-success-base |
#008a20 |
#00a32a |
theme |
--tui-theme-success-soft |
#00ba37 |
#008a20 |
theme |
--tui-theme-success-strong |
#007017 |
#00ba37 |
theme |
--tui-theme-success-stronger |
#005c12 |
#1ed14b |
theme |
--tui-theme-success-strongest |
#003008 |
#68de7c |
theme |
--tui-theme-success-subtle |
#b7e7be |
#00450c |
theme |
--tui-theme-success-subtlest |
#d8f3dc |
#003008 |
theme |
--tui-theme-warning-base |
#996800 |
#bd8600 |
theme |
--tui-theme-warning-soft |
#dba617 |
#996800 |
theme |
--tui-theme-warning-strong |
#755100 |
#dba617 |
theme |
--tui-theme-warning-stronger |
#614200 |
#f0c33c |
theme |
--tui-theme-warning-strongest |
#362400 |
#f2d675 |
theme |
--tui-theme-warning-subtle |
#f5e6ab |
#4a3200 |
theme |
--tui-theme-warning-subtlest |
#f9f1d2 |
#362400 |
theme |
--tui-typography-color-base |
currentColor |
typography | |
--tui-typography-color-contrast-high |
var(--tui-color-fg) |
typography | |
--tui-typography-color-contrast-low |
var(--tui-color-fg-muted) |
typography | |
--tui-typography-color-headings |
var(--tui-color-fg) |
typography | |
--tui-typography-font-family |
inherit |
typography | |
--tui-typography-line-height |
1.4 |
typography | |
--tui-typography-line-height-tight |
1.25 |
typography | |
--tui-typography-size |
16px |
typography | |
--tui-typography-size-lg |
calc(20 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-size-md |
calc(16 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-size-multiplier |
calc(1rem / 16) |
typography | |
--tui-typography-size-sm |
calc(14 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-size-xl |
calc(24 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-size-xs |
calc(12 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-size-xxl |
calc(32 * var(--tui-typography-size-multiplier, calc(1rem / 16))) |
typography | |
--tui-typography-weight-bold |
700 |
typography | |
--tui-typography-weight-medium |
500 |
typography | |
--tui-typography-weight-normal |
400 |
typography | |
--tui-typography-weight-semibold |
600 |
typography |
In practice
Components resolve to these primitives, so overriding one on .tui-interface
re-themes everything at once — no per-component work. SearchInput's field
radius falls through --tui-input-radius → --tui-radius-md, so bumping that
one primitive pills the field (and every other control would follow):
<div className="tui-interface" style={{ "--tui-radius-md": "var(--tui-radius-full)", maxWidth: "22rem" }}>
<SearchInput defaultValue="Foundations" aria-label="Search courses" />
</div>
Live example: interactive page.