@vinhhypc/config-theme 0.1.0

package/dist/lib/tokens/index.js

@@ -0,0 +1,88 @@
+import { COLOR_ROLES, COLOR_SCALE_STEPS, } from "../../lib/config/types.js";
+import { generateColorScale } from "./color.js";
+import { generateTypeScale } from "./typography.js";
+import { generateSpacing, generateRadius } from "./spacing.js";
+import { generateElevation } from "./elevation.js";
+import { generateOpacity } 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";
+/**
+ * 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 function resolveTokens(config) {
+    const colorScales = {};
+    const colors = [];
+    for (const role of COLOR_ROLES) {
+        const baseHex = config.theme.colors[role];
+        const scale = generateColorScale(baseHex);
+        colorScales[role] = scale;
+        // base alias points at the 500 step value
+        colors.push({ role, step: null, token: role, hex: baseHex });
+        for (const step of COLOR_SCALE_STEPS) {
+            colors.push({ role, step, token: `${role}-${step}`, hex: scale[step] });
+        }
+    }
+    return {
+        colors,
+        colorScales,
+        type: generateTypeScale(config.typography),
+        spacing: generateSpacing(config.spacing),
+        radius: generateRadius(config.radius),
+        elevation: generateElevation(config.elevation),
+        opacity: generateOpacity(config),
+    };
+}
+/** Build the CSS custom properties for `:root`. */
+export function buildCssVars(config) {
+    const tokens = resolveTokens(config);
+    const vars = [];
+    for (const c of tokens.colors) {
+        const suffix = c.step === null ? c.role : `${c.role}-${c.step}`;
+        vars.push({ name: `--color-${suffix}`, value: c.hex });
+    }
+    for (const s of tokens.spacing) {
+        vars.push({ name: `--${s.token}`, value: `${s.px}px` });
+    }
+    for (const r of tokens.radius) {
+        vars.push({ name: `--${r.token}`, value: r.px === "9999px" ? "9999px" : `${r.px}px` });
+    }
+    for (const e of tokens.elevation) {
+        vars.push({ name: `--${e.token}`, value: e.value });
+    }
+    for (const o of tokens.opacity) {
+        vars.push({ name: `--${o.token}`, value: o.value });
+    }
+    vars.push({ name: "--font-base", value: config.typography.fontFamilyBase });
+    vars.push({ name: "--font-heading", value: config.typography.fontFamilyHeading });
+    vars.push({ name: "--font-mono", value: config.typography.fontFamilyMono });
+    vars.push({ name: "--text-base", value: `${config.typography.baseSize}px` });
+    vars.push({ name: "--line-height", value: String(config.typography.lineHeight) });
+    vars.push({ name: "--border-width", value: `${config.borders.width}px` });
+    vars.push({ name: "--border-style", value: config.borders.style });
+    vars.push({
+        name: "--duration",
+        value: config.animation.enabled ? `${config.animation.durationMs}ms` : "0ms",
+    });
+    vars.push({ name: "--easing", value: config.animation.easing });
+    return vars;
+}
+/** Serialise CSS vars into a `:root { ... }` block string. */
+export function cssVarsToBlock(config, selector = ":root") {
+    const vars = buildCssVars(config);
+    const lines = vars.map((v) => `  ${v.name}: ${v.value};`).join("\n");
+    return `${selector} {\n${lines}\n}`;
+}
+/** A flat record form, convenient for React inline `style` on the preview root. */
+export function cssVarsToStyleObject(config) {
+    const obj = {};
+    for (const v of buildCssVars(config))
+        obj[v.name] = v.value;
+    return obj;
+}
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,12 @@
+import type { DesignConfig, HoverEffect } from "../../lib/config/types.js";
+/** Human-readable summary of a hover effect (used in markdown + UI hints). */
+export declare const HOVER_LABELS: Record<HoverEffect, string>;
+export declare const HOVER_LABELS_EN: Record<HoverEffect, string>;
+/** CSS declarations applied on `:hover` for a button-like surface. */
+export declare function buttonHoverCss(effect: HoverEffect, baseColorVar?: string): string;
+/** CSS declarations applied on `:hover` for a card/surface. */
+export declare function cardHoverCss(effect: HoverEffect): string;
+export declare function activeCss(pressFeedback: boolean): string;
+export declare function focusRingCss(focusRing: boolean): string;
+/** Tailwind-class equivalents for the chosen hover effect (for component-patterns.md). */
+export declare function hoverTailwindClasses(config: DesignConfig): string;

package/dist/lib/tokens/interactions.js

@@ -0,0 +1,72 @@
+/** Human-readable summary of a hover effect (used in markdown + UI hints). */
+export const HOVER_LABELS = {
+    none: "Không đổi",
+    darken: "Đậm màu hơn (nền/màu sẫm đi 1 bậc)",
+    lift: "Nâng lên (dịch lên + tăng đổ bóng)",
+    scale: "Phóng to nhẹ (scale up)",
+    glow: "Phát sáng (viền sáng theo màu primary)",
+};
+export const HOVER_LABELS_EN = {
+    none: "No change",
+    darken: "Darken by one step",
+    lift: "Lift (translateY up + larger shadow)",
+    scale: "Slight scale-up",
+    glow: "Glow ring in the primary color",
+};
+/** CSS declarations applied on `:hover` for a button-like surface. */
+export function buttonHoverCss(effect, baseColorVar = "--color-primary") {
+    switch (effect) {
+        case "darken":
+            return `background: var(${baseColorVar}-700);`;
+        case "lift":
+            return "transform: translateY(-2px); box-shadow: var(--shadow-2);";
+        case "scale":
+            return "transform: scale(1.03);";
+        case "glow":
+            return `box-shadow: 0 0 0 3px color-mix(in srgb, var(${baseColorVar}-500) 40%, transparent);`;
+        case "none":
+        default:
+            return "";
+    }
+}
+/** CSS declarations applied on `:hover` for a card/surface. */
+export function cardHoverCss(effect) {
+    switch (effect) {
+        case "darken":
+            return "filter: brightness(0.98);";
+        case "lift":
+            return "transform: translateY(-3px); box-shadow: var(--shadow-3);";
+        case "scale":
+            return "transform: scale(1.01);";
+        case "glow":
+            return "box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent);";
+        case "none":
+        default:
+            return "";
+    }
+}
+export function activeCss(pressFeedback) {
+    return pressFeedback ? "transform: scale(0.97);" : "";
+}
+export function focusRingCss(focusRing) {
+    return focusRing
+        ? "outline: 2px solid var(--color-primary-500); outline-offset: 2px;"
+        : "outline: none;";
+}
+/** Tailwind-class equivalents for the chosen hover effect (for component-patterns.md). */
+export function hoverTailwindClasses(config) {
+    const e = config.interactions.hover;
+    const map = {
+        none: "",
+        darken: "hover:bg-[var(--color-primary-700)]",
+        lift: "hover:-translate-y-0.5 hover:shadow-[var(--shadow-2)]",
+        scale: "hover:scale-[1.03]",
+        glow: "hover:shadow-[0_0_0_3px_color-mix(in_srgb,var(--color-primary-500)_40%,transparent)]",
+    };
+    const press = config.interactions.pressFeedback ? "active:scale-[0.97]" : "";
+    const focus = config.interactions.focusRing
+        ? "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-500)]"
+        : "focus-visible:outline-none";
+    return [map[e], press, focus, "transition-all duration-[var(--duration)]"].filter(Boolean).join(" ");
+}
+//# sourceMappingURL=interactions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.js","sourceRoot":"","sources":["../../../../../lib/tokens/interactions.ts"],"names":[],"mappings":"AAEA,8EAA8E;AAC9E,MAAM,CAAC,MAAM,YAAY,GAAgC;IACvD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,oCAAoC;IAC5C,IAAI,EAAE,oCAAoC;IAC1C,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,wCAAwC;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAgC;IAC1D,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,oBAAoB;IAC5B,IAAI,EAAE,sCAAsC;IAC5C,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF,sEAAsE;AACtE,MAAM,UAAU,cAAc,CAAC,MAAmB,EAAE,YAAY,GAAG,iBAAiB;IAClF,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,QAAQ;YACX,OAAO,mBAAmB,YAAY,QAAQ,CAAC;QACjD,KAAK,MAAM;YACT,OAAO,2DAA2D,CAAC;QACrE,KAAK,OAAO;YACV,OAAO,yBAAyB,CAAC;QACnC,KAAK,MAAM;YACT,OAAO,gDAAgD,YAAY,0BAA0B,CAAC;QAChG,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,YAAY,CAAC,MAAmB;IAC9C,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,QAAQ;YACX,OAAO,2BAA2B,CAAC;QACrC,KAAK,MAAM;YACT,OAAO,2DAA2D,CAAC;QACrE,KAAK,OAAO;YACV,OAAO,yBAAyB,CAAC;QACnC,KAAK,MAAM;YACT,OAAO,sFAAsF,CAAC;QAChG,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,aAAsB;IAC9C,OAAO,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,SAAkB;IAC7C,OAAO,SAAS;QACd,CAAC,CAAC,mEAAmE;QACrE,CAAC,CAAC,gBAAgB,CAAC;AACvB,CAAC;AAED,0FAA0F;AAC1F,MAAM,UAAU,oBAAoB,CAAC,MAAoB;IACvD,MAAM,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC;IACpC,MAAM,GAAG,GAAgC;QACvC,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,qCAAqC;QAC7C,IAAI,EAAE,uDAAuD;QAC7D,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sFAAsF;KAC7F,CAAC;IACF,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7E,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,SAAS;QACzC,CAAC,CAAC,+HAA+H;QACjI,CAAC,CAAC,4BAA4B,CAAC;IACjC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,2CAA2C,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACvG,CAAC"}

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

@@ -0,0 +1,14 @@
+import type { DesignConfig } from "../../lib/config/types.js";
+export interface OpacityToken {
+    token: string;
+    value: string;
+    role: string;
+    alpha: number;
+}
+/**
+ * Derive opacity/overlay tokens purely from the configured colors.
+ * No extra config needed — these are computed alongside the colour scales.
+ */
+export declare function generateOpacity(config: DesignConfig): OpacityToken[];
+/** The recommended modal/scrim overlay token name. */
+export declare const SCRIM_TOKEN = "opacity-black-7";

package/dist/lib/tokens/opacity.js

@@ -0,0 +1,34 @@
+import { hexToRgb } from "./color.js";
+/**
+ * Alpha ramp for the primary opacity scale (overlays, emphasis layers, scrims).
+ * Mirrors a perceptually spaced set so low steps are subtle tints and high
+ * steps are near-solid.
+ */
+const PRIMARY_ALPHAS = [0.03, 0.08, 0.13, 0.18, 0.24, 0.35, 0.44, 0.52, 0.68, 0.8, 0.92];
+/** Single mid-strength alpha used for semantic + black/white overlay tokens. */
+const MID_ALPHA = 0.35;
+function rgba(hex, alpha) {
+    const c = hexToRgb(hex) ?? { r: 0, g: 0, b: 0 };
+    return `rgba(${c.r}, ${c.g}, ${c.b}, ${alpha})`;
+}
+/**
+ * Derive opacity/overlay tokens purely from the configured colors.
+ * No extra config needed — these are computed alongside the colour scales.
+ */
+export function generateOpacity(config) {
+    const out = [];
+    PRIMARY_ALPHAS.forEach((alpha, i) => {
+        out.push({ token: `opacity-primary-${i}`, value: rgba(config.theme.colors.primary, alpha), role: "primary", alpha });
+    });
+    ["secondary", "accent", "success", "warning", "error", "info"].forEach((role) => {
+        out.push({ token: `opacity-${role}-5`, value: rgba(config.theme.colors[role], MID_ALPHA), role, alpha: MID_ALPHA });
+    });
+    // Black / white overlays for scrims and inverse surfaces.
+    out.push({ token: "opacity-black-5", value: "rgba(0, 0, 0, 0.35)", role: "black", alpha: 0.35 });
+    out.push({ token: "opacity-black-7", value: "rgba(0, 0, 0, 0.52)", role: "black", alpha: 0.52 });
+    out.push({ token: "opacity-white-5", value: "rgba(255, 255, 255, 0.35)", role: "white", alpha: 0.35 });
+    return out;
+}
+/** The recommended modal/scrim overlay token name. */
+export const SCRIM_TOKEN = "opacity-black-7";
+//# sourceMappingURL=opacity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"opacity.js","sourceRoot":"","sources":["../../../../../lib/tokens/opacity.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AASnC;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAEzF,gFAAgF;AAChF,MAAM,SAAS,GAAG,IAAI,CAAC;AAEvB,SAAS,IAAI,CAAC,GAAW,EAAE,KAAa;IACtC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAChD,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC;AAClD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,MAAoB;IAClD,MAAM,GAAG,GAAmB,EAAE,CAAC;IAE/B,cAAc,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IACvH,CAAC,CAAC,CAAC;IAEF,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACzF,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,IAAI,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACtH,CAAC,CAAC,CAAC;IAEH,0DAA0D;IAC1D,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACjG,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACjG,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,2BAA2B,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvG,OAAO,GAAG,CAAC;AACb,CAAC;AAED,sDAAsD;AACtD,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { DesignConfig } from "../../lib/config/types.js";
+export interface SpacingToken {
+    token: string;
+    step: number;
+    px: number;
+}
+/** Map the spacing scale into `space-N` tokens. */
+export declare function generateSpacing(spacing: DesignConfig["spacing"]): SpacingToken[];
+export interface RadiusToken {
+    token: string;
+    px: number | "9999px";
+}
+/**
+ * Radius tokens derived from base radius and style.
+ * "pill" forces a large radius for the `radius-pill` token.
+ */
+export declare function generateRadius(radius: DesignConfig["radius"]): RadiusToken[];

package/dist/lib/tokens/spacing.js

@@ -0,0 +1,32 @@
+/** Map the spacing scale into `space-N` tokens. */
+export function generateSpacing(spacing) {
+    return spacing.scale.map((step) => ({
+        token: `space-${step}`,
+        step,
+        px: Math.round(spacing.baseUnit * step * 100) / 100,
+    }));
+}
+/**
+ * Radius tokens derived from base radius and style.
+ * "pill" forces a large radius for the `radius-pill` token.
+ */
+export function generateRadius(radius) {
+    if (radius.style === "sharp") {
+        return [
+            { token: "radius-none", px: 0 },
+            { token: "radius-sm", px: 0 },
+            { token: "radius-md", px: 0 },
+            { token: "radius-lg", px: 0 },
+            { token: "radius-pill", px: "9999px" },
+        ];
+    }
+    const base = radius.base;
+    return [
+        { token: "radius-none", px: 0 },
+        { token: "radius-sm", px: Math.round(base * 0.5 * 100) / 100 },
+        { token: "radius-md", px: base },
+        { token: "radius-lg", px: Math.round(base * 1.5 * 100) / 100 },
+        { token: "radius-pill", px: radius.style === "pill" ? "9999px" : Math.round(base * 2 * 100) / 100 },
+    ];
+}
+//# sourceMappingURL=spacing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../../../../../lib/tokens/spacing.ts"],"names":[],"mappings":"AAQA,mDAAmD;AACnD,MAAM,UAAU,eAAe,CAAC,OAAgC;IAC9D,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,SAAS,IAAI,EAAE;QACtB,IAAI;QACJ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG;KACpD,CAAC,CAAC,CAAC;AACN,CAAC;AAOD;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,MAA8B;IAC3D,IAAI,MAAM,CAAC,KAAK,KAAK,OAAO,EAAE,CAAC;QAC7B,OAAO;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,EAAE;YAC/B,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,EAAE;YAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,EAAE;YAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,EAAE;YAC7B,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE;SACvC,CAAC;IACJ,CAAC;IACD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,OAAO;QACL,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,EAAE;QAC/B,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE;QAC9D,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE;QAChC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE;QAC9D,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,EAAE;KACpG,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { DesignConfig } from "../../lib/config/types.js";
+export interface TypeStep {
+    /** Token name, e.g. "text-lg" / "text-base". */
+    token: string;
+    /** Human label, e.g. "H1", "Body". */
+    role: string;
+    /** Computed size in px (rounded to 0.1). */
+    px: number;
+    /** Computed size in rem relative to baseSize. */
+    rem: number;
+}
+/**
+ * Build a modular type scale from baseSize × scaleRatio^n.
+ * Negative steps (sm/xs) are baseSize ÷ ratio.
+ */
+export declare function generateTypeScale(typography: DesignConfig["typography"]): TypeStep[];

package/dist/lib/tokens/typography.js

@@ -0,0 +1,23 @@
+/**
+ * Build a modular type scale from baseSize × scaleRatio^n.
+ * Negative steps (sm/xs) are baseSize ÷ ratio.
+ */
+export function generateTypeScale(typography) {
+    const { baseSize, scaleRatio } = typography;
+    const steps = [
+        { token: "text-xs", role: "Caption / fine print", exp: -2 },
+        { token: "text-sm", role: "Small / secondary", exp: -1 },
+        { token: "text-base", role: "Body", exp: 0 },
+        { token: "text-lg", role: "Lead paragraph", exp: 1 },
+        { token: "text-xl", role: "H4", exp: 2 },
+        { token: "text-2xl", role: "H3", exp: 3 },
+        { token: "text-3xl", role: "H2", exp: 4 },
+        { token: "text-4xl", role: "H1", exp: 5 },
+    ];
+    return steps.map(({ token, role, exp }) => {
+        const px = Math.round(baseSize * Math.pow(scaleRatio, exp) * 10) / 10;
+        const rem = Math.round((px / baseSize) * 1000) / 1000;
+        return { token, role, px, rem };
+    });
+}
+//# sourceMappingURL=typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../../../lib/tokens/typography.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAAsC;IACtE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC;IAC5C,MAAM,KAAK,GAAmD;QAC5D,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE;QAC3D,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE;QACxD,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE;QAC5C,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE;QACpD,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;QACxC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;QACzC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;QACzC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE;KAC1C,CAAC;IAEF,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;QACxC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;QACtE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;QACtD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vinhhypc/config-theme",
+  "version": "0.1.0",
+  "description": "Token-driven React components themed at runtime by a ThemeProvider.",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "design-tokens",
+    "theme",
+    "ui"
+  ],
+  "homepage": "https://storybook-config-theme.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vinhhypc/theme_config_v2.git",
+    "directory": "packages/theme-ui"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/components/themed/index.js",
+  "module": "./dist/components/themed/index.js",
+  "types": "./dist/components/themed/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/themed/index.d.ts",
+      "import": "./dist/components/themed/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}