@vinhhypc/config-theme 0.1.0

package/dist/lib/config/types.d.ts

@@ -0,0 +1,146 @@
+/**
+ * The central data model for Theme Config.
+ * Every exported markdown file is derived purely from a `DesignConfig`.
+ */
+/** Base framework / authoring approach. */
+export type TargetStack = "react-tailwind" | "html-css" | "vue-tailwind" | "next";
+/** Optional component library layered on top of a React base. */
+export type ComponentLib = "none" | "shadcn" | "antd";
+/**
+ * The stack the generators actually render for: the base framework, unless a
+ * component library is selected (shadcn/antd imply their own component code).
+ */
+export type RenderStack = TargetStack | "shadcn" | "antd";
+export type ThemeMode = "light" | "dark" | "both";
+export type ThemeStyle = "modern" | "classic" | "minimal" | "playful" | "brutalist";
+export type RadiusStyle = "sharp" | "rounded" | "pill";
+export type BorderStyle = "solid" | "dashed";
+export type ElevationStyle = "flat" | "soft" | "hard";
+export type AnimationStyle = "none" | "subtle" | "smooth" | "bouncy";
+export type HoverEffect = "none" | "darken" | "lift" | "scale" | "glow";
+export type ComponentSize = "sm" | "md" | "lg";
+export type InputVariant = "outline" | "filled" | "underline";
+export type CardVariant = "elevated" | "outlined" | "flat";
+export type NamingConvention = "tailwind" | "css-vars" | "bem";
+export type AccessibilityLevel = "AA" | "AAA";
+export interface DesignColors {
+    primary: string;
+    secondary: string;
+    accent: string;
+    neutral: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+}
+export interface DesignConfig {
+    meta: {
+        name: string;
+        version: string;
+        description?: string;
+        targetStack: TargetStack;
+        /** Optional component library; only meaningful for React-based stacks. */
+        componentLib: ComponentLib;
+        /**
+         * When `install` is on, the exported docs instruct consuming the prebuilt
+         * component package from npm (with `<ThemeProvider>` + usage) instead of
+         * hand-rolling components. Only applies to React stacks without another
+         * component library. Default off.
+         */
+        componentPackage: {
+            install: boolean;
+            /** npm package name to install. */
+            name: string;
+        };
+    };
+    theme: {
+        mode: ThemeMode;
+        style: ThemeStyle;
+        colors: DesignColors;
+    };
+    typography: {
+        fontFamilyBase: string;
+        fontFamilyHeading: string;
+        fontFamilyMono: string;
+        baseSize: number;
+        scaleRatio: number;
+        weights: number[];
+        lineHeight: number;
+    };
+    spacing: {
+        baseUnit: number;
+        scale: number[];
+    };
+    radius: {
+        style: RadiusStyle;
+        base: number;
+    };
+    borders: {
+        width: number;
+        style: BorderStyle;
+        defaultColorToken: string;
+    };
+    elevation: {
+        style: ElevationStyle;
+        levels: number;
+    };
+    animation: {
+        enabled: boolean;
+        style: AnimationStyle;
+        durationMs: number;
+        easing: string;
+    };
+    /** How interactive elements respond to hover / focus / press. */
+    interactions: {
+        hover: HoverEffect;
+        pressFeedback: boolean;
+        focusRing: boolean;
+        underlineLinks: boolean;
+    };
+    components: {
+        button: {
+            variants: string[];
+            defaultSize: ComponentSize;
+        };
+        input: {
+            variant: InputVariant;
+        };
+        card: {
+            variant: CardVariant;
+        };
+        badge: {
+            enabled: boolean;
+        };
+        modal: {
+            enabled: boolean;
+        };
+        table: {
+            enabled: boolean;
+        };
+    };
+    aiRules: {
+        enforceTokensOnly: boolean;
+        namingConvention: NamingConvention;
+        accessibility: AccessibilityLevel;
+        cleanCode: boolean;
+        customRules: string[];
+    };
+}
+/** React-based stacks can layer on a component library (shadcn/antd). */
+export declare function stackSupportsComponentLib(stack: TargetStack): boolean;
+/**
+ * Whether exported docs should instruct installing the prebuilt npm component
+ * package: the toggle is on, the stack is React-based, and no other component
+ * library (shadcn/antd) is selected.
+ */
+export declare function usesComponentPackage(config: DesignConfig): boolean;
+/**
+ * The stack the generators render for. A selected component library takes
+ * precedence over the base framework (shadcn/antd ship their own components).
+ */
+export declare function effectiveStack(config: DesignConfig): RenderStack;
+/** Names of the colour roles, used when iterating in token generators. */
+export declare const COLOR_ROLES: (keyof DesignColors)[];
+/** Steps used for the auto-generated colour scale (primary-50 … primary-900). */
+export declare const COLOR_SCALE_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+export type ColorScaleStep = (typeof COLOR_SCALE_STEPS)[number];

package/dist/lib/config/types.js

@@ -0,0 +1,46 @@
+/**
+ * The central data model for Theme Config.
+ * Every exported markdown file is derived purely from a `DesignConfig`.
+ */
+/** React-based stacks can layer on a component library (shadcn/antd). */
+export function stackSupportsComponentLib(stack) {
+    return stack === "react-tailwind" || stack === "next";
+}
+/**
+ * Whether exported docs should instruct installing the prebuilt npm component
+ * package: the toggle is on, the stack is React-based, and no other component
+ * library (shadcn/antd) is selected.
+ */
+export function usesComponentPackage(config) {
+    return (config.meta.componentPackage.install &&
+        stackSupportsComponentLib(config.meta.targetStack) &&
+        config.meta.componentLib === "none");
+}
+/**
+ * The stack the generators render for. A selected component library takes
+ * precedence over the base framework (shadcn/antd ship their own components).
+ */
+export function effectiveStack(config) {
+    const { targetStack, componentLib } = config.meta;
+    if (stackSupportsComponentLib(targetStack)) {
+        if (componentLib === "shadcn")
+            return "shadcn";
+        if (componentLib === "antd")
+            return "antd";
+    }
+    return targetStack;
+}
+/** Names of the colour roles, used when iterating in token generators. */
+export const COLOR_ROLES = [
+    "primary",
+    "secondary",
+    "accent",
+    "neutral",
+    "success",
+    "warning",
+    "error",
+    "info",
+];
+/** Steps used for the auto-generated colour scale (primary-50 … primary-900). */
+export const COLOR_SCALE_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+//# sourceMappingURL=types.js.map

package/dist/lib/config/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../lib/config/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAoIH,yEAAyE;AACzE,MAAM,UAAU,yBAAyB,CAAC,KAAkB;IAC1D,OAAO,KAAK,KAAK,gBAAgB,IAAI,KAAK,KAAK,MAAM,CAAC;AACxD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,MAAoB;IACvD,OAAO,CACL,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO;QACpC,yBAAyB,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;QAClD,MAAM,CAAC,IAAI,CAAC,YAAY,KAAK,MAAM,CACpC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,MAAoB;IACjD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAClD,IAAI,yBAAyB,CAAC,WAAW,CAAC,EAAE,CAAC;QAC3C,IAAI,YAAY,KAAK,QAAQ;YAAE,OAAO,QAAQ,CAAC;QAC/C,IAAI,YAAY,KAAK,MAAM;YAAE,OAAO,MAAM,CAAC;IAC7C,CAAC;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,WAAW;IACX,QAAQ;IACR,SAAS;IACT,SAAS;IACT,SAAS;IACT,OAAO;IACP,MAAM;CACP,CAAC;AAEF,iFAAiF;AACjF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC"}

package/dist/lib/tokens/adapters.d.ts

@@ -0,0 +1,15 @@
+import type { DesignConfig } from "../../lib/config/types.js";
+/**
+ * Adapters that map a DesignConfig onto popular component libraries.
+ * Pure functions returning ready-to-paste code strings.
+ */
+/**
+ * shadcn/ui `globals.css` — maps our token scales onto shadcn's semantic CSS
+ * variables, in the HSL-channel format shadcn uses (`hsl(var(--primary))`).
+ */
+export declare function shadcnCssVars(config: DesignConfig): string;
+/**
+ * Ant Design v6 theme config for `<ConfigProvider theme={...}>`.
+ * antd derives its own palettes from these seed tokens.
+ */
+export declare function antdThemeConfig(config: DesignConfig): string;

package/dist/lib/tokens/adapters.js

@@ -0,0 +1,102 @@
+import { generateColorScale, hexToHslChannels, readableTextColor } from "./color.js";
+/**
+ * Adapters that map a DesignConfig onto popular component libraries.
+ * Pure functions returning ready-to-paste code strings.
+ */
+/**
+ * shadcn/ui `globals.css` — maps our token scales onto shadcn's semantic CSS
+ * variables, in the HSL-channel format shadcn uses (`hsl(var(--primary))`).
+ */
+export function shadcnCssVars(config) {
+    const c = config.theme.colors;
+    const primary = generateColorScale(c.primary);
+    const neutral = generateColorScale(c.neutral);
+    const error = generateColorScale(c.error);
+    const h = hexToHslChannels;
+    const light = [
+        `  --background: ${h(neutral[50])};`,
+        `  --foreground: ${h(neutral[900])};`,
+        `  --card: ${h("#ffffff")};`,
+        `  --card-foreground: ${h(neutral[900])};`,
+        `  --popover: ${h("#ffffff")};`,
+        `  --popover-foreground: ${h(neutral[900])};`,
+        `  --primary: ${h(primary[600])};`,
+        `  --primary-foreground: ${h(readableTextColor(primary[600]))};`,
+        `  --secondary: ${h(neutral[100])};`,
+        `  --secondary-foreground: ${h(neutral[900])};`,
+        `  --muted: ${h(neutral[100])};`,
+        `  --muted-foreground: ${h(neutral[600])};`,
+        `  --accent: ${h(neutral[100])};`,
+        `  --accent-foreground: ${h(neutral[900])};`,
+        `  --destructive: ${h(error[600])};`,
+        `  --destructive-foreground: ${h("#ffffff")};`,
+        `  --border: ${h(neutral[200])};`,
+        `  --input: ${h(neutral[200])};`,
+        `  --ring: ${h(primary[500])};`,
+        `  --radius: ${config.radius.base}px;`,
+    ].join("\n");
+    let css = `:root {\n${light}\n}`;
+    if (config.theme.mode === "both" || config.theme.mode === "dark") {
+        const dark = [
+            `  --background: ${h(neutral[900])};`,
+            `  --foreground: ${h(neutral[50])};`,
+            `  --card: ${h(neutral[900])};`,
+            `  --card-foreground: ${h(neutral[50])};`,
+            `  --popover: ${h(neutral[900])};`,
+            `  --popover-foreground: ${h(neutral[50])};`,
+            `  --primary: ${h(primary[500])};`,
+            `  --primary-foreground: ${h(readableTextColor(primary[500]))};`,
+            `  --secondary: ${h(neutral[800])};`,
+            `  --secondary-foreground: ${h(neutral[50])};`,
+            `  --muted: ${h(neutral[800])};`,
+            `  --muted-foreground: ${h(neutral[300])};`,
+            `  --accent: ${h(neutral[800])};`,
+            `  --accent-foreground: ${h(neutral[50])};`,
+            `  --destructive: ${h(error[500])};`,
+            `  --destructive-foreground: ${h("#ffffff")};`,
+            `  --border: ${h(neutral[700])};`,
+            `  --input: ${h(neutral[700])};`,
+            `  --ring: ${h(primary[500])};`,
+        ].join("\n");
+        css += `\n\n.dark {\n${dark}\n}`;
+    }
+    return css;
+}
+/**
+ * Ant Design v6 theme config for `<ConfigProvider theme={...}>`.
+ * antd derives its own palettes from these seed tokens.
+ */
+export function antdThemeConfig(config) {
+    const c = config.theme.colors;
+    const algoComment = config.theme.mode === "both"
+        ? " // light + dark: swap to theme.darkAlgorithm when in dark mode"
+        : config.theme.mode === "dark"
+            ? ""
+            : "";
+    const algo = config.theme.mode === "dark" ? "theme.darkAlgorithm" : "theme.defaultAlgorithm";
+    return [
+        `import { theme, type ThemeConfig } from "antd";`,
+        ``,
+        `export const themeConfig: ThemeConfig = {`,
+        `  token: {`,
+        `    colorPrimary: "${c.primary}",`,
+        `    colorSuccess: "${c.success}",`,
+        `    colorWarning: "${c.warning}",`,
+        `    colorError: "${c.error}",`,
+        `    colorInfo: "${c.info}",`,
+        `    colorTextBase: "${c.neutral}",`,
+        `    borderRadius: ${config.radius.base},`,
+        `    fontFamily: ${JSON.stringify(config.typography.fontFamilyBase)},`,
+        `    fontSize: ${config.typography.baseSize},`,
+        `    lineHeight: ${config.typography.lineHeight},`,
+        `    motionDurationMid: "${config.animation.enabled ? config.animation.durationMs : 0}ms",`,
+        `    wireframe: false,`,
+        `  },`,
+        `  algorithm: ${algo},${algoComment}`,
+        `};`,
+        ``,
+        `// Usage:`,
+        `// <ConfigProvider theme={themeConfig}>{children}</ConfigProvider>`,
+    ].join("\n");
+}
+//# sourceMappingURL=adapters.js.map

package/dist/lib/tokens/adapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adapters.js","sourceRoot":"","sources":["../../../../../lib/tokens/adapters.ts"],"names":[],"mappings":"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"}

package/dist/lib/tokens/color.d.ts

@@ -0,0 +1,23 @@
+import { type ColorScaleStep } from "../../lib/config/types.js";
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Parse #rgb or #rrggbb into RGB. Returns null for invalid input. */
+export declare function hexToRgb(hex: string): RGB | null;
+export declare function rgbToHex({ r, g, b }: RGB): string;
+/**
+ * Generate a 50..900 scale from a single base hex.
+ * 500 is the base colour; lighter steps are tints, darker steps are shades.
+ */
+export declare function generateColorScale(baseHex: string): Record<ColorScaleStep, string>;
+/**
+ * Convert a hex color to an HSL *channel* string like `"221 83% 53%"`,
+ * the format shadcn/ui expects for its CSS variables (`hsl(var(--primary))`).
+ */
+export declare function hexToHslChannels(hex: string): string;
+/** WCAG contrast ratio between two hex colours (1..21). */
+export declare function contrastRatio(hexA: string, hexB: string): number;
+/** Choose black or white text for best contrast against a background hex. */
+export declare function readableTextColor(bgHex: string): "#000000" | "#ffffff";

package/dist/lib/tokens/color.js

@@ -0,0 +1,132 @@
+import { COLOR_SCALE_STEPS } from "../../lib/config/types.js";
+/** Parse #rgb or #rrggbb into RGB. Returns null for invalid input. */
+export function hexToRgb(hex) {
+    const m = hex.trim().match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
+    if (!m)
+        return null;
+    let h = m[1];
+    if (h.length === 3) {
+        h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    }
+    return {
+        r: parseInt(h.slice(0, 2), 16),
+        g: parseInt(h.slice(2, 4), 16),
+        b: parseInt(h.slice(4, 6), 16),
+    };
+}
+const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+export function rgbToHex({ r, g, b }) {
+    const toHex = (n) => clamp(n).toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/** Mix a colour toward white (amount 0..1). */
+function tint(rgb, amount) {
+    return {
+        r: rgb.r + (255 - rgb.r) * amount,
+        g: rgb.g + (255 - rgb.g) * amount,
+        b: rgb.b + (255 - rgb.b) * amount,
+    };
+}
+/** Mix a colour toward black (amount 0..1). */
+function shade(rgb, amount) {
+    return {
+        r: rgb.r * (1 - amount),
+        g: rgb.g * (1 - amount),
+        b: rgb.b * (1 - amount),
+    };
+}
+/**
+ * How far each step is tinted (toward white, steps < 500) or
+ * shaded (toward black, steps > 500). Step 500 is the base colour.
+ */
+const TINT_BY_STEP = {
+    50: 0.95,
+    100: 0.88,
+    200: 0.74,
+    300: 0.56,
+    400: 0.3,
+    500: 0,
+    600: 0.12,
+    700: 0.26,
+    800: 0.42,
+    900: 0.58,
+};
+/**
+ * Generate a 50..900 scale from a single base hex.
+ * 500 is the base colour; lighter steps are tints, darker steps are shades.
+ */
+export function generateColorScale(baseHex) {
+    const base = hexToRgb(baseHex) ?? { r: 0, g: 0, b: 0 };
+    const out = {};
+    for (const step of COLOR_SCALE_STEPS) {
+        const amount = TINT_BY_STEP[step];
+        if (step < 500)
+            out[step] = rgbToHex(tint(base, amount));
+        else if (step > 500)
+            out[step] = rgbToHex(shade(base, amount));
+        else
+            out[step] = rgbToHex(base);
+    }
+    return out;
+}
+/**
+ * Convert a hex color to an HSL *channel* string like `"221 83% 53%"`,
+ * the format shadcn/ui expects for its CSS variables (`hsl(var(--primary))`).
+ */
+export function hexToHslChannels(hex) {
+    const rgb = hexToRgb(hex) ?? { r: 0, g: 0, b: 0 };
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            default:
+                h = (r - g) / d + 4;
+        }
+        h /= 6;
+    }
+    const H = Math.round(h * 360);
+    const S = Math.round(s * 100);
+    const L = Math.round(l * 100);
+    return `${H} ${S}% ${L}%`;
+}
+/** Relative luminance per WCAG. */
+function relativeLuminance({ r, g, b }) {
+    const channel = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+/** WCAG contrast ratio between two hex colours (1..21). */
+export function contrastRatio(hexA, hexB) {
+    const a = hexToRgb(hexA);
+    const b = hexToRgb(hexB);
+    if (!a || !b)
+        return 1;
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    const lighter = Math.max(la, lb);
+    const darker = Math.min(la, lb);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/** Choose black or white text for best contrast against a background hex. */
+export function readableTextColor(bgHex) {
+    return contrastRatio(bgHex, "#ffffff") >= contrastRatio(bgHex, "#000000")
+        ? "#ffffff"
+        : "#000000";
+}
+//# sourceMappingURL=color.js.map

package/dist/lib/tokens/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../../lib/tokens/color.ts"],"names":[],"mappings":"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"}

package/dist/lib/tokens/elevation.d.ts

@@ -0,0 +1,6 @@
+import type { DesignConfig } from "../../lib/config/types.js";
+export interface ShadowToken {
+    token: string;
+    value: string;
+}
+export declare function generateElevation(elevation: DesignConfig["elevation"]): ShadowToken[];

package/dist/lib/tokens/elevation.js

@@ -0,0 +1,40 @@
+/**
+ * Box-shadow presets per elevation style. Index 0 = no shadow.
+ * We return up to `levels` shadows (level 0 is always "none").
+ */
+const PRESETS = {
+    flat: [
+        "none",
+        "0 1px 1px rgba(0,0,0,0.04)",
+        "0 1px 2px rgba(0,0,0,0.06)",
+        "0 2px 3px rgba(0,0,0,0.06)",
+        "0 2px 4px rgba(0,0,0,0.08)",
+        "0 3px 6px rgba(0,0,0,0.08)",
+    ],
+    soft: [
+        "none",
+        "0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10)",
+        "0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.10)",
+        "0 4px 8px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.12)",
+        "0 8px 16px rgba(0,0,0,0.10), 0 16px 32px rgba(0,0,0,0.14)",
+        "0 16px 32px rgba(0,0,0,0.12), 0 24px 48px rgba(0,0,0,0.16)",
+    ],
+    hard: [
+        "none",
+        "2px 2px 0 rgba(0,0,0,0.90)",
+        "3px 3px 0 rgba(0,0,0,0.90)",
+        "4px 4px 0 rgba(0,0,0,0.90)",
+        "6px 6px 0 rgba(0,0,0,0.90)",
+        "8px 8px 0 rgba(0,0,0,0.90)",
+    ],
+};
+export function generateElevation(elevation) {
+    const preset = PRESETS[elevation.style];
+    const count = Math.min(elevation.levels, preset.length - 1);
+    const out = [{ token: "shadow-0", value: "none" }];
+    for (let i = 1; i <= count; i++) {
+        out.push({ token: `shadow-${i}`, value: preset[i] });
+    }
+    return out;
+}
+//# sourceMappingURL=elevation.js.map

package/dist/lib/tokens/elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../../../../lib/tokens/elevation.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,OAAO,GAAyD;IACpE,IAAI,EAAE;QACJ,MAAM;QACN,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;KAC7B;IACD,IAAI,EAAE;QACJ,MAAM;QACN,wDAAwD;QACxD,wDAAwD;QACxD,yDAAyD;QACzD,2DAA2D;QAC3D,4DAA4D;KAC7D;IACD,IAAI,EAAE;QACJ,MAAM;QACN,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;KAC7B;CACF,CAAC;AAOF,MAAM,UAAU,iBAAiB,CAAC,SAAoC;IACpE,MAAM,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC5D,MAAM,GAAG,GAAkB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACvD,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/lib/tokens/index.d.ts

@@ -0,0 +1,43 @@
+import { type DesignConfig } from "../../lib/config/types.js";
+import { type TypeStep } from "./typography.js";
+import { type SpacingToken, type RadiusToken } from "./spacing.js";
+import { type ShadowToken } from "./elevation.js";
+import { type OpacityToken } from "./opacity.js";
+export * from "./color.js";
+export * from "./typography.js";
+export * from "./spacing.js";
+export * from "./elevation.js";
+export * from "./interactions.js";
+export * from "./opacity.js";
+export * from "./adapters.js";
+export interface ColorTokenEntry {
+    role: string;
+    step: number | null;
+    token: string;
+    hex: string;
+}
+export interface ResolvedTokens {
+    colors: ColorTokenEntry[];
+    colorScales: Record<string, Record<number, string>>;
+    type: TypeStep[];
+    spacing: SpacingToken[];
+    radius: RadiusToken[];
+    elevation: ShadowToken[];
+    opacity: OpacityToken[];
+}
+/**
+ * Resolve a DesignConfig into the full set of concrete token values.
+ * Pure function — the single source of truth for both markdown export and preview.
+ */
+export declare function resolveTokens(config: DesignConfig): ResolvedTokens;
+/** What goes inside a `--var: value;` declaration. */
+export interface CssVar {
+    name: string;
+    value: string;
+}
+/** Build the CSS custom properties for `:root`. */
+export declare function buildCssVars(config: DesignConfig): CssVar[];
+/** Serialise CSS vars into a `:root { ... }` block string. */
+export declare function cssVarsToBlock(config: DesignConfig, selector?: string): string;
+/** A flat record form, convenient for React inline `style` on the preview root. */
+export declare function cssVarsToStyleObject(config: DesignConfig): Record<string, string>;