//#region src/styles/theme-tokens.d.ts /** * v3 theme token contract — the single home for color token names and the * `createTheme` extension path. * * Token keys map to long, readable CSS vars (`--c-accent`, not v2's `--c-a`). * Three keys were renamed from v2 because the old names lied about their role; * everything else carries over 1:1 (migration doc covers the renames): * * v2 `highlight` → v3 `accent` (the brand color / selected-cell fill) * v2 `accent` → v3 `focusRing` (focus outline ink; v2 only ever painted * it on focus rings and as a deep fallback) * v2 `tone` → v3 `tone` (kept — subtle hover/secondary surface) */ type ThemeTokens = { /** Brand color: selected cells, active drum items. (v2 `highlight`) */ accent: string; /** Ink on top of `accent` (selected-cell text). */ activeText: string; /** Today marker color. */ todayDot: string; /** Root shell background. */ backdrop: string; /** Subtle surface: hover fills, secondary chips. (v2 `tone`) */ tone: string; /** Main ink. */ text: string; /** Borders and separators. */ stroke: string; /** Shadow color (usually the accent at low alpha). */ shadow: string; /** Disabled surface. */ disabled: string; /** Secondary ink (out-of-focus labels). */ mutedText: string; /** Disabled ink. */ disabledText: string; /** Weekend ink — themes ship reds/oranges; surfaces derive tints from it. */ weekend: string; /** Range fill color. */ range: string; /** Validation/error ink. */ error: string; /** Ink for days outside the viewed month. */ outOfMonth?: string; /** Focus outline ink. Derived from `activeText` when omitted. (v2 `accent`) */ focusRing?: string; }; /** Brand symbol: marks objects produced by `createTheme` (or the generator). */ declare const THEME_BRAND: unique symbol; type ThemeVariant = { [THEME_BRAND]: true; vars: Record; }; type ThemeFamily = { kind: "family"; light: ThemeVariant; dark: ThemeVariant; }; type ThemeMode = "light" | "dark"; type ThemeVariantInput = Partial; type ThemeFamilyInput = Partial & { light?: ThemeVariantInput; dark?: ThemeVariantInput; }; /** * Create one logical theme with light and dark variants. Top-level tokens are * shared; `light` / `dark` override per side. Pass the result as the `theme` * prop on ``. * * @example * const tealTheme = createTheme({ * accent: "#14b8a6", * range: "#0ea5e9", * weekend: "#be123c", * light: { backdrop: "#f0fdff" }, * dark: { backdrop: "#061a1d", text: "#e6fffb" }, * }); * */ declare function createTheme(theme: ThemeFamilyInput): ThemeFamily; //#endregion export { createTheme as a, type ThemeTokens as i, type ThemeFamilyInput as n, type ThemeMode as r, type ThemeFamily as t };