Theme configuration reference
Look up every theme configuration group, default, range, merge rule, and validation failure.
Color, modes, and semantic status
color.light.primaryis the only required value. Brand and semantic colors require three- or six-digit hex strings with a leading #; CSS variables, rgb(), and named colors are not accepted here.color.light.secondaryis derived from primary when omitted.color.darkis partial and inherits missing anchors from light.color.methoddefaults to analogous; supported values are analogous, monochromatic, and glass.color.fixShadedefaults to true. It centers the source at shade 500; false places it near its inferred lightness.defaultThemedefaults to system. semantic values can be shared, then overridden undersemantic.lightorsemantic.dark.
Scale and interaction fields
| Scale field | Valid range | Default or derivation |
|---|---|---|
unit | > 0 | unset; derives several scales when set |
controlHeight | > 0 | 40px at comfortable density |
spacing | > 0 | unit or 20% of control height |
radius | >= 0 | unit or 8px |
controlRadius | >= 0 | radius |
surfaceRadius | >= 0 | 1.4× radius |
density | compact | comfortable | spacious | comfortable |
shadow | >= 0 | 0.5 |
border | >= 0 | 1px |
focus | >= 0 | 3px or 0.375× unit |
motion | >= 0 | 1× |
opacity | 0–1 | 0.58 |
blur | >= 0 | 22px or 2.75× unit |
glassAlpha | 0–1 | 0.62 |
Interaction defaults are hoverLift 1px, hoverShadow 1, activeScale 0.98, focusAlpha 0.28, disabledOpacity equal to the scale opacity, and transition equal to the motion multiplier. hoverShadow, focusAlpha, and disabledOpacity accept 0–1; hoverLift, activeScale, and transition must be non-negative. These values live under interaction, while the table fields live under scale.
Typography and viewport fields
fontFamilyis the shared fallback.textFontFamilyandheadingFontFamilyoverride it independently.bodySizedefaults to 16px,captionSizeto 13px,labelSizeto 14px, andheadingScaleto 1.24 unless unit derives the first three.All typography sizes and
headingScalemust be positive.viewport.strategyaccepts fixed, fluid, or stepped. fixed usesrootMax; fluid interpolates with clamp; stepped changes root size at generated threshold rules.With no viewport object, resolution uses fixed at 16px. A viewport object without strategy uses legacy fluid defaults of
rootMin14,rootMax16,minWidth320, andmaxWidth960. Preset merging can produce that object, so set strategy explicitly when size behavior matters.Use viewport: { strategy: "fixed" } for constant root sizing, or choose fluid/stepped and set the bounds intentionally. Changes affect rem-backed dimensions throughout the application.
rootMinmay equalrootMaxfor a fixed root size;minWidthmust remain lower thanmaxWidth.
Output, breakpoints, and token overrides
Generated token names use the canonical
--tuiprefix.output.selectordefaults to :root anddarkSelectordefaults to thedata-tavo-themedark selector.includeMediaQuerydefaults to true but emits a system-dark query only whendefaultThemeis system.breakpoint defaults are sm 480, md 768, and lg 1024 and must be strictly ascending.
The current web package compiles responsive props and sx at its published breakpoints; changing config emits different token/build data but does not rebuild packaged media queries.
tokens.lightandtokens.darkare arbitrary name-to-string maps applied after generation.
Accessibility configuration
Without
accessibility.contrast, theme generation produces no contrast warnings.AA checks at 4.5:1 and AAA checks at 7:1 for six supported token pairs.
failOnViolationdefaults to false. When true,buildThemeTokensandbuildThemethrow when warnings exist.auditThemeA11yconverts those thrown violations into error-severity structured issues.Token overrides can create violations after palette generation, so run the audit on the final project config.
Compare preset starting values
minimal: monochromatic, 2px radii, no shadows, comfortable density, and reduced motion.
glass: translucent glass color method, 22px blur, stronger surface rounding and moderate shadow.
enterprise: analogous fixed-shade palette, compact density, restrained radii and shadows.
editorial: spacious density, larger surface radius and heading scale, half-pixel borders.
dense: compact density, 36px medium controls, small radii and quiet shadows.
mobile: spacious density, 46px controls, larger control and surface radii, glass method.
monochrome: strict black primary, monochromatic method, zero radius and shadow.