/** * A flat map of token names to CSS values. * Keys may include or omit the leading "--". * e.g. { primary: "#3b82f6" } or { "--primary": "#3b82f6" } */ export type ThemeTokenMap = Record; /** * The themes object passed to globalTheme(). * Keys are theme names ("light", "dark", "high-contrast", …). * Values are flat token maps. * * Convention (Option A): * - first key → light base → injected on :root * - second key → dark theme → injected on [data-theme=""] AND * @media (prefers-color-scheme: dark) { :root:not([data-theme]) } * - any further keys → explicit [data-theme=""] only */ export type ThemesInput = Record; /** * cssVars returned by globalTheme(). * Every key from the first (base) theme maps to its CSS variable name string. * e.g. cssVars.primary → "--primary" * Use as: `var(${cssVars.primary})` */ export type CssVars = { readonly [K in keyof T]: string; }; /** * "auto" is always included. All defined theme names are also valid. */ export type ThemeMode = "auto" | (string & keyof T); export type GlobalThemeResult = { /** Plain object: tokenKey → "--token-key" (the CSS variable name, no var() wrapper). */ cssVars: CssVars; }; /** * Define your application's themes as named token maps. * * Convention (first key = light base, second key = dark): * * ```ts * export const { cssVars, themeAtom } = globalTheme({ * light: { primary: "#3b82f6", bg: "#ffffff", text: "#111827" }, * dark: { primary: "#60a5fa", bg: "#0f172a", text: "#f1f5f9" }, * }); * * // cssVars.primary → "--primary" * // use as: `var(${cssVars.primary})` * * // themeAtom is AtomType<"auto" | "light" | "dark"> * themeAtom.set("dark"); * themeAtom.set("auto"); // hands control back to the OS * ``` * * CSS injected (for the example above): * * ```css * :root { --primary: #3b82f6; ... } ← light base * [data-theme="light"] { --primary: #3b82f6; ... } ← explicit light * [data-theme="dark"] { --primary: #60a5fa; ... } ← explicit dark * @media (prefers-color-scheme: dark) { * :root:not([data-theme]) { --primary: #60a5fa; ... } ← auto OS dark * } * ``` * * To prevent flash-of-wrong-theme, add this inline script as the very first * child of (before any stylesheet): * * ```html * * ``` */ export declare function globalTheme(themes: T): GlobalThemeResult; /** * Inject a flat map of CSS properties into `:root` via the global sheet. * * Intended for base token overrides — e.g. Material Web component sizing, * shape, and typography tokens. Keys may be CSS custom properties (`--my-var`) * or plain camelCase/kebab-case properties (`fontFamily`, `font-family`). * * Like `globalCSS()`, injection is microtask-deferred and happens only once. * Safe to call from multiple modules at startup — all rules accumulate into the * same singleton sheet. * * ```ts * // app/tokens.ts ← module level * import { rootCSS } from "mates/css-in-js"; * * rootCSS({ * "--md-filled-button-container-height": "2.125rem", * "--md-sys-shape-corner-full": "9999px", * fontFamily: '"Roboto", sans-serif', * }); * ``` */ export declare function rootCSS>(tokens: T): T; //# sourceMappingURL=theme.d.ts.map