Theme and tokens API
Theme configuration, token generation, runtime mode control, snapshots, subscriptions, and token metadata.
Theme and tokens exports
47 public exports from @tavojs/ui/theme.
@tavojs/ui/theme
Canonical import boundary for every symbol in this section.
buildTheme#
buildTheme(config: TavoUiThemeConfig): ThemeBuildResultPublic function exported from @tavojs/ui/theme.
Related guidecreateLiveThemeController#
createLiveThemeController(config: TavoUiThemeConfig, options?: LiveThemeControllerOptions | undefined): LiveThemeControllerPublic function exported from @tavojs/ui/theme.
Related guidecreateThemeController#
createThemeController(defaultMode?: ThemeMode | undefined, options?: ThemeControllerOptions | undefined): ThemeControllerPublic function exported from @tavojs/ui/theme.
Related guidecreateThemeControllerFromConfig#
createThemeControllerFromConfig(config: Pick<TavoUiThemeConfig, "defaultTheme">): ThemeControllerPublic function exported from @tavojs/ui/theme.
Related guidegetLiveThemeSnapshot#
getLiveThemeSnapshot(controller: LiveThemeController): LiveThemeSnapshotPublic function exported from @tavojs/ui/theme.
Related guidegetTavoUiTokenGroup#
getTavoUiTokenGroup(name: string): TavoUiTokenGroupPublic function exported from @tavojs/ui/theme.
Related guidegetTavoUiTokenMetadata#
getTavoUiTokenMetadata(config?: TavoUiThemeConfig | undefined): TavoUiTokenMetadata[]Public function exported from @tavojs/ui/theme.
Related guidegetThemeSnapshot#
getThemeSnapshot(controller: ThemeController): ThemeSnapshotPublic function exported from @tavojs/ui/theme.
Related guideLiveThemeController#
type LiveThemeController = {
store: Store<LiveThemeRuntimeState>;
setMode(mode: ThemeMode): void;
toggleMode(): void;
setConfig(config: TavoUiThemeConfig): LiveThemeUpdateResult;
patchConfig(patch: ThemeConfigPatch): LiveThemeUpdateResult;
updateConfig(updater: (config: TavoUiThemeConfig) => TavoUiThemeConfig): LiveThemeUpdateResult;
setProperty(path: string, value: unknown): LiveThemeUpdateResult;
resetConfig(): LiveThemeUpdateResult;
syncDocument(): void;
watchSystem(): () => void;
dispose(): void;
};Public type exported from @tavojs/ui/theme.
Related guideLiveThemeControllerOptions#
type LiveThemeControllerOptions = {
styleId?: string;
nonce?: string;
ownerDocument?: Document;
styleHost?: HTMLElement;
persistence?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideLiveThemeRuntimeState#
type LiveThemeRuntimeState = ThemeRuntimeState & {
config: TavoUiThemeConfig;
warnings: string[];
error: string | null;
revision: number;
};Public type exported from @tavojs/ui/theme.
Related guideLiveThemeSnapshot#
type LiveThemeSnapshot = LiveThemeRuntimeState & {
setMode(mode: ThemeMode): void;
toggleMode(): void;
setConfig(config: TavoUiThemeConfig): LiveThemeUpdateResult;
patchConfig(patch: ThemeConfigPatch): LiveThemeUpdateResult;
updateConfig(updater: (config: TavoUiThemeConfig) => TavoUiThemeConfig): LiveThemeUpdateResult;
setProperty(path: string, value: unknown): LiveThemeUpdateResult;
resetConfig(): LiveThemeUpdateResult;
};Public type exported from @tavojs/ui/theme.
Related guideLiveThemeUpdateResult#
type LiveThemeUpdateResult = {
applied: boolean;
warnings: string[];
error?: string;
};Public type exported from @tavojs/ui/theme.
Related guidemountLiveThemeController#
mountLiveThemeController(controller: LiveThemeController): () => voidPublic function exported from @tavojs/ui/theme.
Related guidemountThemeController#
mountThemeController(controller: ThemeController): () => voidPublic function exported from @tavojs/ui/theme.
Related guideResolvedThemeMode#
type ResolvedThemeMode = "light" | "dark";Public type exported from @tavojs/ui/theme.
Related guidesubscribeLiveTheme#
subscribeLiveTheme(controller: LiveThemeController, listener: (snapshot: LiveThemeSnapshot) => void, options?: { immediate?: boolean | undefined; } | undefined): () => voidPublic function exported from @tavojs/ui/theme.
Related guidesubscribeTheme#
subscribeTheme(controller: ThemeController, listener: (snapshot: ThemeSnapshot) => void, options?: { immediate?: boolean | undefined; } | undefined): () => voidPublic function exported from @tavojs/ui/theme.
Related guideTavoUiThemeConfig#
type TavoUiThemeConfig = {
$schema?: string;
preset?: ThemePreset;
defaultTheme?: ThemeMode;
color: ThemeColorConfig;
scale?: ThemeScaleConfig;
typography?: ThemeTypographyConfig;
interaction?: ThemeInteractionConfig;
viewport?: ThemeViewportConfig;
breakpoints?: ThemeBreakpointsConfig;
semantic?: ThemeModeSemanticConfig;
output?: ThemeOutputConfig;
accessibility?: ThemeAccessibilityConfig;
tokens?: ThemeTokenOverrides;
};Public type exported from @tavojs/ui/theme.
Related guideTavoUiTokenGroup#
type TavoUiTokenGroup = "color" | "sizing" | "spacing" | "radius" | "border" | "focus" | "motion" | "opacity" | "interaction" | "effects" | "breakpoint" | "typography" | "custom";Public type exported from @tavojs/ui/theme.
Related guidetavoUiTokenMetadata#
tavoUiTokenMetadata: readonly TavoUiTokenMetadata[]Complete built-in Tavo.js UI CSS variable catalog.
Related guideTavoUiTokenMetadata#
type TavoUiTokenMetadata = {
name: string;
cssVariable: `--tui-${string}`;
group: TavoUiTokenGroup;
};Public type exported from @tavojs/ui/theme.
Related guidetavoUiTokenNames#
tavoUiTokenNames: readonly `--tui-${string}`[]Complete built-in Tavo.js UI CSS variable names.
Related guideThemeAccessibilityConfig#
type ThemeAccessibilityConfig = {
contrast?: "AA" | "AAA";
failOnViolation?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemeBreakpointsConfig#
type ThemeBreakpointsConfig = {
sm?: number;
md?: number;
lg?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeBuildResult#
type ThemeBuildResult = {
cssText: string;
modes: Record<ResolvedThemeMode, ThemeResolvedColorSet>;
staticTokens: Record<string, string>;
config: TavoUiThemeConfig;
warnings: string[];
};Public type exported from @tavojs/ui/theme.
Related guideThemeColorConfig#
type ThemeColorConfig = {
light: ThemeColorPair;
dark?: Partial<ThemeColorPair>;
method?: ThemeMethod;
fixShade?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemeColorPair#
type ThemeColorPair = {
primary: string;
secondary?: string;
};Public type exported from @tavojs/ui/theme.
Related guideThemeConfigPatch#
type ThemeConfigPatch = DeepPartial<TavoUiThemeConfig>;Public type exported from @tavojs/ui/theme.
Related guideThemeController#
type ThemeController = {
store: Store<ThemeRuntimeState>;
setMode(mode: ThemeMode): void;
toggleMode(): void;
syncDocument(): void;
watchSystem(): () => void;
};Public type exported from @tavojs/ui/theme.
Related guideThemeControllerOptions#
type ThemeControllerOptions = {
ownerDocument?: Document;
persistence?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemeDensity#
type ThemeDensity = "compact" | "comfortable" | "spacious";Public type exported from @tavojs/ui/theme.
Related guideThemeInteractionConfig#
type ThemeInteractionConfig = {
hoverLift?: number;
hoverShadow?: number;
activeScale?: number;
focusAlpha?: number;
disabledOpacity?: number;
transition?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeMethod#
type ThemeMethod = "analogous" | "monochromatic" | "glass";Public type exported from @tavojs/ui/theme.
Related guideThemeMode#
type ThemeMode = "light" | "dark" | "system";Public type exported from @tavojs/ui/theme.
Related guideThemeModeSemanticConfig#
type ThemeModeSemanticConfig = ThemeSemanticConfig & {
light?: ThemeSemanticConfig;
dark?: ThemeSemanticConfig;
};Public type exported from @tavojs/ui/theme.
Related guideThemeOutputConfig#
type ThemeOutputConfig = {
selector?: string;
darkSelector?: string;
includeMediaQuery?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemePreset#
type ThemePreset = "minimal" | "glass" | "enterprise" | "editorial" | "dense" | "mobile" | "monochrome";Public type exported from @tavojs/ui/theme.
Related guideThemeRamp#
type ThemeRamp = Record<number, string>;Public type exported from @tavojs/ui/theme.
Related guideThemeResolvedColorSet#
type ThemeResolvedColorSet = {
primary: ThemeRamp;
secondary: ThemeRamp;
neutral: ThemeRamp;
semantic: Required<ThemeSemanticConfig>;
tokens: Record<string, string>;
};Public type exported from @tavojs/ui/theme.
Related guideThemeRuntimeState#
type ThemeRuntimeState = {
mode: ThemeMode;
resolvedMode: ResolvedThemeMode;
};Public type exported from @tavojs/ui/theme.
Related guideThemeScaleConfig#
type ThemeScaleConfig = {
unit?: number;
controlHeight?: number;
spacing?: number;
radius?: number;
shadow?: number;
border?: number;
density?: ThemeDensity;
focus?: number;
motion?: number;
opacity?: number;
blur?: number;
glassAlpha?: number;
controlRadius?: number;
surfaceRadius?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeSemanticConfig#
type ThemeSemanticConfig = {
success?: string;
warning?: string;
danger?: string;
info?: string;
};Public type exported from @tavojs/ui/theme.
Related guideThemeSnapshot#
type ThemeSnapshot = ThemeRuntimeState & {
setMode(mode: ThemeMode): void;
toggleMode(): void;
};Public type exported from @tavojs/ui/theme.
Related guideThemeTokenOverrides#
type ThemeTokenOverrides = Partial<Record<ResolvedThemeMode, Record<string, string>>>;Public type exported from @tavojs/ui/theme.
Related guideThemeTypographyConfig#
type ThemeTypographyConfig = {
fontFamily?: string;
textFontFamily?: string;
headingFontFamily?: string;
bodySize?: number;
captionSize?: number;
labelSize?: number;
headingScale?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeViewportConfig#
type ThemeViewportConfig = {
strategy?: ThemeViewportStrategy;
rootMin?: number;
rootMax?: number;
minWidth?: number;
maxWidth?: number;
};Public type exported from @tavojs/ui/theme.
Related guide