Generate tokens

buildThemeTokens is the main orchestration API. It returns light and dark color sets, static tokens, resolved breakpoints, the resolved config, and accessibility warnings in one deterministic value.

tsimport { buildThemeTokens } from "@tavojs/ui-core";

const theme = buildThemeTokens({
  color: { light: { primary: "#116a67", secondary: "#d86c3d" } },
  accessibility: { contrast: "AA" }
});

console.log(theme.modes.light.tokens["color-primary-bg"]);
console.log(theme.staticTokens["radius-md"]);
console.log(theme.breakpoints.md);
console.log(theme.warnings);

• modes.light and modes.dark contain ramps, semantic colors, and mode-specific color tokens.

• staticTokens contains scale, spacing, radius, typography, interaction, motion, opacity, blur, and breakpoint values.

• breakpoints contains numeric sm, md, and lg thresholds for programmatic consumers.

• config contains the fully resolved configuration.

• warnings contains contrast messages when auditing is enabled.

UI Core deliberately does not write CSS. A web tool can join static and mode tokens into variables, while another renderer can map the same result into a typed theme object.

tsfunction toVariables(tokens: Record<string, string>, prefix = "tui") {
  return Object.entries(tokens)
    .map(([name, value]) => `--${prefix}-${name}: ${value};`)
    .join("
");
}

const lightVariables = toVariables({
  ...theme.staticTokens,
  ...theme.modes.light.tokens
});