tokens

Two-tier design tokens and preset.css default skin for Fluixi UI.

Layer 3 of the Fluixi UI ecosystem: the design token and theming system. Every visual value a component uses comes from here as a CSS variable, so components never hardcode design values.

Architecture

Two tiers:

Reference tokens — the raw scales. Non-color tokens (spacing, sizing, typography, radius, borders, shadows, motion, opacity, blur, elevation, z-index, breakpoints) are static. Color scales (gray, accent, status) are authored per theme; their --flx-ui-* values change between themes.
Semantic tokens — meaning-based aliases (color-bg, color-fg, color-primary, color-border, …) defined once, referencing the scale variables. Because the scales flip per theme, the semantics follow automatically.

Components consume semantic tokens only.

All variables are prefixed --flx-ui-. Themes are selected with data-theme and fall back to prefers-color-scheme when unset.

:root, [data-theme='light'] { /* static + light scales + semantics */ }
[data-theme='dark']          { /* dark scales only */ }
[data-theme='high-contrast'] { /* high-contrast scales + semantics */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])    { /* automatic dark */ }
}

Using tokens in components

Import the vars reference — typed var(--flx-ui-*) strings — and never write raw values:

import { vars } from '@fluixi/tokens/vars';

const styles = {
  background: vars.color.bg,
  color: vars.color.fg,
  padding: vars.space[4],
  borderRadius: vars.radius.md,
  boxShadow: vars.shadow.md,
  transition: `background ${vars.duration.fast} ${vars.easing.standard}`,
};

Theming at runtime

import { injectTokens, createThemeController } from '@fluixi/tokens/theme';

injectTokens(); // add the stylesheet to <head>

const theme = createThemeController({ defaultPreference: 'system' });
theme.setPreference('dark');   // light | dark | high-contrast | system
theme.toggle();
theme.theme();                 // resolved ThemeName (reactive)

createThemeController resolves the preference (honoring prefers-color-scheme and prefers-contrast for system), applies it via data-theme, persists it, and follows system changes while the preference is system.

Static helpers are also available: setTheme, getTheme, clearTheme, getSystemTheme, prefersHighContrast, prefersReducedMotion, resolveTheme.

Token categories

Colors, typography (family, size, weight, line-height, letter-spacing), spacing, sizes, radius, border widths, shadows, motion (duration, easing), opacity, blur, elevation, z-index, breakpoints — with light, dark and high-contrast themes.

Performance

Side-effect free; the stylesheet is a plain string (tokensCss) that can be injected at runtime or extracted at build time.
Theme switching only toggles one attribute; no per-component recomputation.
SSR-safe: DOM and matchMedia access no-op on the server.

Extension points

generateTokensCss() rebuilds the stylesheet from the token definitions, and the reference scales (colorScales, semanticColors, staticTokens) are exported for custom builds, additional palettes, or brand overrides.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.