theme()

Define CSS custom properties at :root level for design tokens.

Signature

function theme(tokens: ThemeTokens): void

Parameters

Param	Type	Description
tokens	ThemeTokens	Object of token groups and values

Examples

import { theme, sheet } from "@whisq/core";

theme({
  color: {
    primary: "#4386FB",
    text: "#111827",
    bg: "#ffffff",
  },
  space: { sm: "0.5rem", md: "1rem", lg: "1.5rem" },
  radius: { md: "8px", lg: "12px" },
});

// Generated CSS: --color-primary: #4386FB; --space-md: 1rem; etc.

// Use in sheet():
sheet({
  card: {
    background: "var(--color-bg)",
    padding: "var(--space-lg)",
    borderRadius: "var(--radius-lg)",
  },
});