@hyperpackai/hyperui 0.1.0

package/dist/tokens/index.js

@@ -0,0 +1,345 @@
+/**
+ * HyperUI Design Token API
+ *
+ * The complete token system in one import.
+ *
+ * Quick start:
+ *   import { createTheme, applyTheme, tokens, useTokens } from "@hyperpackai/hyperui/tokens";
+ *
+ *   // Apply a built-in theme:
+ *   applyTheme("forest");
+ *
+ *   // Build a custom brand theme:
+ *   applyTheme(createTheme({ primaryColor: "#7c3aed", radius: "12px" }));
+ *
+ *   // Access tokens in JS/TS:
+ *   console.log(tokens.colors.indigo[500]); // "#6366f1"
+ *
+ *   // Reactive token access in components:
+ *   const { colors } = useTokens();
+ */
+import { signal, effect } from "@hyperpackai/hyperion";
+import { h } from "../theme/index.js";
+import { primitives } from "./primitives.js";
+import { lightSemanticTokens, darkSemanticTokens } from "./semantic.js";
+import { defaultComponentTokens } from "./component.js";
+import { themes, getDarkVariant } from "./themes.js";
+// Re-export everything for convenience
+export { primitives } from "./primitives.js";
+export { lightSemanticTokens, darkSemanticTokens, lightColors, darkColors, semanticSpacing, semanticTypography, semanticShadow, semanticMotion, semanticRadius, semanticZIndex } from "./semantic.js";
+export { defaultComponentTokens } from "./component.js";
+export { themes, getDarkVariant } from "./themes.js";
+let _activeTheme = themes.default.overrides;
+let _isDark = false;
+let _direction = "ltr";
+const _tokensSignal = signal({
+    primitives,
+    semantic: lightSemanticTokens,
+    component: defaultComponentTokens
+});
+// Shorthand — the raw primitives object (no reactivity needed)
+export const tokens = primitives;
+// ============================================================
+// CSS variable generation
+// ============================================================
+function buildCSSVars(overrides, dark) {
+    const base = {};
+    if (overrides.primaryColor)
+        base["--hu-primary"] = overrides.primaryColor;
+    if (overrides.primaryDark)
+        base["--hu-primary-dk"] = overrides.primaryDark;
+    if (overrides.primaryLight)
+        base["--hu-primary-lt"] = overrides.primaryLight;
+    if (overrides.primaryBg)
+        base["--hu-primary-bg"] = overrides.primaryBg;
+    if (overrides.radius)
+        base["--hu-radius"] = overrides.radius;
+    if (overrides.fontFamily)
+        base["--hu-font-sans"] = overrides.fontFamily;
+    // Density scale — adjusts spacing and font sizes proportionally
+    if (overrides.densityScale && overrides.densityScale !== 1) {
+        const d = overrides.densityScale;
+        const scale = (px) => `${Math.round(px * d)}px`;
+        base["--hu-space-1"] = scale(4);
+        base["--hu-space-2"] = scale(8);
+        base["--hu-space-3"] = scale(12);
+        base["--hu-space-4"] = scale(16);
+        base["--hu-space-5"] = scale(20);
+        base["--hu-space-6"] = scale(24);
+    }
+    // Dark mode overrides
+    if (dark) {
+        const darkVars = getDarkVariant("default").cssVars ?? {};
+        Object.assign(base, darkVars);
+    }
+    // Custom CSS variable overrides (highest specificity)
+    if (overrides.cssVars) {
+        Object.assign(base, overrides.cssVars);
+    }
+    return base;
+}
+function getDefaultThemeTarget() {
+    return typeof document === "undefined" ? undefined : document.documentElement;
+}
+function applyCSSVars(vars, target) {
+    if (!target)
+        return;
+    for (const [key, value] of Object.entries(vars)) {
+        target.style.setProperty(key, value);
+    }
+}
+/**
+ * Apply a theme to the document root. Accepts either a built-in theme name
+ * or a custom `ThemeOverrides` object.
+ *
+ *   applyTheme("ocean");
+ *   applyTheme("compact");
+ *   applyTheme({ primaryColor: "#7c3aed", radius: "12px" });
+ *   applyTheme("forest", { dark: true });
+ */
+export function applyTheme(theme, options = {}) {
+    const { dark = _isDark, direction = _direction } = options;
+    const target = options.target ?? getDefaultThemeTarget();
+    const overrides = typeof theme === "string"
+        ? (themes[theme]?.overrides ?? themes.default.overrides)
+        : theme;
+    _activeTheme = overrides;
+    _isDark = dark;
+    _direction = direction;
+    const cssVars = buildCSSVars(overrides, dark);
+    applyCSSVars(cssVars, target);
+    // Update data-theme for CSS selector targeting
+    target?.setAttribute("data-theme", dark ? "dark" : "light");
+    target?.setAttribute("dir", direction);
+    // Update reactive token signal
+    _tokensSignal.value = {
+        primitives,
+        semantic: dark ? darkSemanticTokens : lightSemanticTokens,
+        component: defaultComponentTokens
+    };
+}
+// ============================================================
+// createTheme — compose a custom theme
+// ============================================================
+/**
+ * Composes a theme from a base theme and partial overrides.
+ * Returns a `ThemeOverrides` object ready for `applyTheme()`.
+ *
+ *   const myBrand = createTheme("default", {
+ *     primaryColor: "#7c3aed",
+ *     radius: "12px",
+ *     fontFamily: "Inter, sans-serif"
+ *   });
+ *   applyTheme(myBrand);
+ */
+export function createTheme(baseOrOverrides, overrides = {}) {
+    const base = typeof baseOrOverrides === "string"
+        ? (themes[baseOrOverrides]?.overrides ?? themes.default.overrides)
+        : baseOrOverrides;
+    return {
+        ...base,
+        ...overrides,
+        cssVars: { ...(base.cssVars ?? {}), ...(overrides.cssVars ?? {}) }
+    };
+}
+let _colorMode = "system";
+const _colorModeSignal = signal("light");
+const _themeSignal = signal(_activeTheme);
+const _directionSignal = signal(_direction);
+/**
+ * Set the colour mode. Pass `"system"` to follow `prefers-color-scheme`.
+ *
+ *   setColorMode("dark");
+ *   setColorMode("system"); // auto
+ */
+export function setColorMode(mode) {
+    _colorMode = mode;
+    if (mode === "system") {
+        if (typeof window === "undefined") {
+            _colorModeSignal.value = _isDark ? "dark" : "light";
+            applyTheme(_activeTheme, { dark: _isDark });
+            return;
+        }
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const apply = (dark) => {
+            _colorModeSignal.value = dark ? "dark" : "light";
+            applyTheme(_activeTheme, { dark });
+        };
+        apply(mq.matches);
+        mq.addEventListener("change", (e) => apply(e.matches));
+    }
+    else {
+        _colorModeSignal.value = mode;
+        applyTheme(_activeTheme, { dark: mode === "dark" });
+    }
+}
+function resolveThemeInput(theme, density) {
+    if (theme)
+        return theme;
+    if (density === "compact")
+        return "compact";
+    if (density === "comfortable")
+        return "comfortable";
+    return "default";
+}
+function resolveDarkMode(mode) {
+    if (mode === "dark")
+        return true;
+    if (mode === "light")
+        return false;
+    return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function currentThemeState() {
+    const isDark = signal(_colorModeSignal.value === "dark");
+    effect(() => { isDark.value = _colorModeSignal.value === "dark"; });
+    return {
+        theme: _themeSignal,
+        colorMode: _colorModeSignal,
+        direction: _directionSignal,
+        isDark,
+        setTheme(theme, options = {}) {
+            const nextMode = options.colorMode ?? _colorMode;
+            const nextDirection = options.direction ?? _direction;
+            const dark = resolveDarkMode(nextMode);
+            applyTheme(theme, { dark, direction: nextDirection });
+            _themeSignal.value = typeof theme === "string"
+                ? (themes[theme]?.overrides ?? themes.default.overrides)
+                : theme;
+            _colorMode = nextMode;
+            _colorModeSignal.value = dark ? "dark" : "light";
+            _directionSignal.value = nextDirection;
+        },
+        setColorMode(mode) {
+            setColorMode(mode);
+            _colorModeSignal.value = resolveDarkMode(mode) ? "dark" : "light";
+        },
+        setDirection(direction) {
+            _direction = direction;
+            _directionSignal.value = direction;
+            applyTheme(_activeTheme, { dark: _isDark, direction });
+        }
+    };
+}
+/**
+ * Applies a HyperUI theme and returns a lightweight provider wrapper.
+ * In browser apps this mutates the target root with CSS variables.
+ * In SSR/Node it still returns a VNode with data attributes and inline variables.
+ */
+export function ThemeProvider(props) {
+    const theme = resolveThemeInput(props.theme, props.density);
+    const mode = props.colorMode ?? "system";
+    const direction = props.direction ?? "ltr";
+    const dark = resolveDarkMode(mode);
+    const resolvedTheme = typeof theme === "string"
+        ? (themes[theme]?.overrides ?? themes.default.overrides)
+        : theme;
+    applyTheme(resolvedTheme, { dark, target: props.target, direction });
+    _themeSignal.value = resolvedTheme;
+    _colorMode = mode;
+    _colorModeSignal.value = dark ? "dark" : "light";
+    _directionSignal.value = direction;
+    const vars = buildCSSVars(resolvedTheme, dark);
+    const style = Object.entries(vars).map(([key, value]) => `${key}:${value}`).join(";");
+    return h("div", {
+        class: props.class,
+        "data-hu-provider": "true",
+        "data-theme": dark ? "dark" : "light",
+        dir: direction,
+        style
+    }, props.children);
+}
+export function useTheme() {
+    return currentThemeState();
+}
+// ============================================================
+// useTokens — reactive token access in components
+// ============================================================
+/**
+ * Returns the current design tokens as reactive signals. Re-renders
+ * the component when the theme or colour mode changes.
+ *
+ *   const { semantic, primitives } = useTokens();
+ *   <div style={{ color: semantic.value.colors.text.default }}>Hello</div>
+ */
+export function useTokens() {
+    const isDark = signal(_colorModeSignal.value === "dark");
+    effect(() => { isDark.value = _colorModeSignal.value === "dark"; });
+    return {
+        tokens: _tokensSignal,
+        colorMode: _colorModeSignal,
+        isDark
+    };
+}
+// ============================================================
+// getCSSVar — read a CSS variable value at runtime
+// ============================================================
+/**
+ * Reads the current value of a CSS custom property from the document root.
+ * Useful for reading computed tokens in JavaScript.
+ *
+ *   const primary = getCSSVar("--hu-primary"); // "#6366f1"
+ */
+export function getCSSVar(name, element) {
+    const el = element ?? getDefaultThemeTarget();
+    if (!el || typeof getComputedStyle === "undefined")
+        return "";
+    return getComputedStyle(el).getPropertyValue(name).trim();
+}
+// ============================================================
+// tokenToCSS — generate a full CSS variable block from tokens
+// ============================================================
+/**
+ * Generates a CSS variable block string from a `ThemeOverrides` object.
+ * Useful for SSR head injection or CSS-in-JS integration.
+ *
+ *   const css = tokenToCSS(myTheme);
+ *   // ":root { --hu-primary: #7c3aed; ... }"
+ */
+export function tokenToCSS(overrides, dark = false, selector = ":root") {
+    const vars = buildCSSVars(overrides, dark);
+    const declarations = Object.entries(vars)
+        .map(([k, v]) => `  ${k}: ${v};`)
+        .join("\n");
+    return `${selector} {\n${declarations}\n}`;
+}
+/**
+ * Exports the complete design token system as a plain JSON-serialisable
+ * object. Use with Style Dictionary or Figma Tokens plugins.
+ *
+ *   const json = JSON.stringify(exportTokens(), null, 2);
+ *   fs.writeFileSync("tokens.json", json);
+ */
+export function exportTokens() {
+    return {
+        version: "1.0.0",
+        generated: new Date().toISOString(),
+        primitives,
+        semantic: {
+            light: lightSemanticTokens,
+            dark: darkSemanticTokens
+        },
+        components: defaultComponentTokens,
+        themes
+    };
+}
+// ============================================================
+// Convenience: all tokens in a flat CSS variable map
+// ============================================================
+/**
+ * Returns every CSS variable defined by HyperUI as a flat Record.
+ * Useful for debugging or for exporting to a CSS file.
+ *
+ *   console.log(getAllCSSVars()["--hu-primary"]); // "#6366f1"
+ */
+export function getAllCSSVars() {
+    if (typeof document === "undefined")
+        return {};
+    const styles = getComputedStyle(document.documentElement);
+    const vars = {};
+    for (const prop of Array.from(styles)) {
+        if (prop.startsWith("--hu-")) {
+            vars[prop] = styles.getPropertyValue(prop).trim();
+        }
+    }
+    return vars;
+}