@vinhhypc/config-theme 0.1.0

package/dist/components/themed/styles.js

@@ -0,0 +1,270 @@
+import { buttonHoverCss, cardHoverCss, activeCss, focusRingCss } from "../../lib/tokens/index.js";
+function helpers(config) {
+    const i = config.interactions;
+    return {
+        base: config.typography.baseSize,
+        transition: "transition: all var(--duration) var(--easing);",
+        focus: focusRingCss(i.focusRing),
+        active: activeCss(i.pressFeedback),
+        btnHover: (c) => buttonHoverCss(i.hover, c),
+        ghostHover: i.hover === "darken"
+            ? "background: var(--color-primary-50);"
+            : buttonHoverCss(i.hover, "--color-primary"),
+        cardHover: cardHoverCss(i.hover),
+    };
+}
+/* ------------------------------- Button ------------------------------- */
+export function buttonStyles(p, config) {
+    const { base, transition, focus, active, btnHover, ghostHover } = helpers(config);
+    return `
+${p}.tcb { font-family: var(--font-base); font-weight: 600; font-size: ${base - 1}px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: var(--border-width) var(--border-style) transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); line-height: 1.2; ${transition} }
+${p}.tcb:focus-visible { ${focus} }
+${p}.tcb:active { ${active} }
+${p}.tcb[disabled] { opacity: .5; pointer-events: none; }
+${p}.tcb--sm { padding: var(--space-1) var(--space-3); font-size: ${base - 3}px; }
+${p}.tcb--lg { padding: var(--space-3) var(--space-6); font-size: ${base + 1}px; }
+${p}.tcb--primary { background: var(--color-primary-600); color: #fff; }
+${p}.tcb--primary:hover { ${btnHover("--color-primary")} }
+${p}.tcb--secondary { background: var(--color-secondary-600); color: #fff; }
+${p}.tcb--secondary:hover { ${btnHover("--color-secondary")} }
+${p}.tcb--destructive { background: var(--color-error-600); color: #fff; }
+${p}.tcb--destructive:hover { ${btnHover("--color-error")} }
+${p}.tcb--ghost { background: transparent; color: var(--color-primary-700); }
+${p}.tcb--ghost:hover { ${ghostHover} }
+${p}.tcb--outline { background: transparent; color: var(--text); border-color: var(--border-c); }
+${p}.tcb--outline:hover { ${ghostHover} border-color: var(--color-primary-400); }`;
+}
+/* -------------------------- Input / Select --------------------------- */
+export function inputStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tci { font-family: var(--font-base); font-size: ${base - 1}px; color: var(--text); background: var(--surface-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-width) var(--border-style) var(--border-c); ${transition} width: 100%; }
+${p}.tci:hover { border-color: var(--color-primary-400); }
+${p}.tci:focus-visible { outline: none; border-color: var(--color-primary-500); }
+${p}.tci[disabled] { opacity: .5; }
+${p}.tci--filled { background: var(--color-neutral-100); border-color: transparent; }
+${p}.tci--underline { background: transparent; border: 0; border-bottom: var(--border-width) var(--border-style) var(--border-c); border-radius: 0; }
+${p}.tci--error { border-color: var(--color-error-500); }
+${p}.tc-field { display: grid; gap: var(--space-1); font-size: ${base - 2}px; color: var(--text-muted); }
+${p}.tc-field > span { color: var(--text); }`;
+}
+/* ------------------------------ Checkbox ----------------------------- */
+export function checkboxStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font-size: ${base - 1}px; color: var(--text); cursor: pointer; user-select: none; }
+${p}.tc-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
+${p}.tc-checkbox__box { width: 18px; height: 18px; border-radius: var(--radius-sm); border: var(--border-width) var(--border-style) var(--border-c); display: inline-flex; align-items: center; justify-content: center; color: #fff; ${transition} }
+${p}.tc-checkbox__box svg { width: 12px; height: 12px; opacity: 0; }
+${p}.tc-checkbox[data-checked="true"] .tc-checkbox__box { background: var(--color-primary-600); border-color: var(--color-primary-600); }
+${p}.tc-checkbox[data-checked="true"] .tc-checkbox__box svg { opacity: 1; }
+${p}.tc-checkbox input:focus-visible + .tc-checkbox__box { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
+${p}.tc-checkbox[data-disabled="true"] { opacity: .5; pointer-events: none; }`;
+}
+/* ------------------------------- Badge ------------------------------- */
+export function badgeStyles(p, config) {
+    const { base } = helpers(config);
+    return `
+${p}.tc-badge { display: inline-flex; align-items: center; gap: 4px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: ${base - 4}px; font-weight: 600; line-height: 1.4; }
+${p}.tc-badge--solid { background: var(--color-primary-600); color: #fff; }
+${p}.tc-badge--neutral { background: var(--color-neutral-200); color: var(--text); }
+${p}.tc-badge--success { background: var(--color-success-100); color: var(--color-success-700); }
+${p}.tc-badge--warning { background: var(--color-warning-100); color: var(--color-warning-700); }
+${p}.tc-badge--error { background: var(--color-error-100); color: var(--color-error-700); }
+${p}.tc-badge--info { background: var(--color-info-100); color: var(--color-info-700); }`;
+}
+/* ------------------------------- Alert ------------------------------- */
+export function alertStyles(p, config) {
+    const { base } = helpers(config);
+    return `
+${p}.tc-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: ${base - 1}px; border-left: 3px solid; display: grid; gap: 2px; }
+${p}.tc-alert__title { font-weight: 600; }
+${p}.tc-alert--success { background: var(--color-success-50); color: var(--color-success-800); border-color: var(--color-success-500); }
+${p}.tc-alert--warning { background: var(--color-warning-50); color: var(--color-warning-800); border-color: var(--color-warning-500); }
+${p}.tc-alert--error { background: var(--color-error-50); color: var(--color-error-800); border-color: var(--color-error-500); }
+${p}.tc-alert--info { background: var(--color-info-50); color: var(--color-info-800); border-color: var(--color-info-500); }`;
+}
+/* ------------------------------ Avatar ------------------------------- */
+export function avatarStyles(p) {
+    return `
+${p}.tc-avatar { width: 40px; height: 40px; border-radius: 9999px; background: var(--color-primary-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; overflow: hidden; }
+${p}.tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
+${p}.tc-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
+${p}.tc-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
+${p}.tc-avatar--accent { background: var(--color-accent-500); }
+${p}.tc-avatar--soft { background: var(--color-neutral-200); color: var(--text); }`;
+}
+/* ------------------------------- Card -------------------------------- */
+export function cardStyles(p, config) {
+    const { base, transition, cardHover } = helpers(config);
+    return `
+${p}.tc-card { padding: var(--space-5, 20px); border-radius: var(--radius-lg); background: var(--surface-2); ${transition} display: flex; flex-direction: column; gap: var(--space-2, 8px); }
+${p}.tc-card:hover { ${cardHover} }
+${p}.tc-card--elevated { box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.10)); }
+${p}.tc-card--outlined { border: var(--border-width) var(--border-style) var(--border-c); box-shadow: none; }
+${p}.tc-card--flat { background: var(--color-neutral-100); box-shadow: none; }
+${p}.tc-card__title { font-family: var(--font-heading); font-size: ${base + 2}px; font-weight: 600; margin: 0; }
+${p}.tc-card__body { color: var(--text-muted); font-size: ${base - 1}px; margin: 0; flex: 1 1 auto; }
+${p}.tc-card__foot { margin-top: var(--space-3, 12px); display: flex; gap: var(--space-2); }`;
+}
+/* ------------------------------- Table ------------------------------- */
+export function tableStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-table { width: 100%; border-collapse: collapse; font-size: ${base - 2}px; color: var(--text); }
+${p}.tc-table th, ${p}.tc-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) var(--border-style) var(--border-c); }
+${p}.tc-table th { color: var(--text-muted); font-weight: 600; background: var(--color-neutral-100); }
+${p}.tc-table tbody tr { ${transition} }
+${p}.tc-table tbody tr:hover { background: var(--color-primary-50); }`;
+}
+/* ----------------------------- Progress ------------------------------ */
+export function progressStyles(p) {
+    return `
+${p}.tc-progress { height: 8px; background: var(--color-neutral-200); border-radius: var(--radius-pill); overflow: hidden; width: 100%; }
+${p}.tc-progress__bar { display: block; height: 100%; background: var(--color-primary-600); transition: width var(--duration) var(--easing); }`;
+}
+/* ------------------------------- Spin -------------------------------- */
+export function spinStyles(p) {
+    return `
+@keyframes tc-spin { to { transform: rotate(360deg); } }
+${p}.tc-spin { display: inline-block; width: 24px; height: 24px; border-radius: 9999px; border: 2px solid var(--color-neutral-200); border-top-color: var(--color-primary-600); animation: tc-spin .7s linear infinite; }
+${p}.tc-spin--sm { width: 16px; height: 16px; }
+${p}.tc-spin--lg { width: 36px; height: 36px; border-width: 3px; }
+@media (prefers-reduced-motion: reduce) { ${p}.tc-spin { animation-duration: 2s; } }`;
+}
+/* ------------------------------- Tabs -------------------------------- */
+export function tabsStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-tabs__list { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-neutral-100); border-radius: var(--radius-md); }
+${p}.tc-tab { padding: var(--space-1) var(--space-3); border: 0; background: transparent; border-radius: var(--radius-sm); font-size: ${base - 2}px; color: var(--text-muted); cursor: pointer; font-family: var(--font-base); ${transition} }
+${p}.tc-tab:hover { color: var(--text); }
+${p}.tc-tab--active { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-1); }
+${p}.tc-tabs__panel { padding: var(--space-3) 0; font-size: ${base - 1}px; color: var(--text); }`;
+}
+/* ------------------------------ Tooltip ------------------------------ */
+export function tooltipStyles(p, config) {
+    const { base } = helpers(config);
+    return `
+${p}.tc-tooltip { position: relative; display: inline-flex; }
+${p}.tc-tooltip__pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-neutral-900); color: var(--color-neutral-50); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: ${base - 4}px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--duration) var(--easing); z-index: 30; }
+${p}.tc-tooltip:hover .tc-tooltip__pop, ${p}.tc-tooltip:focus-within .tc-tooltip__pop { opacity: 1; }
+${p}.tc-tooltip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--color-neutral-900); }`;
+}
+/* ------------------------------ Dropdown ----------------------------- */
+export function dropdownStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-dropdown { position: relative; display: inline-flex; }
+${p}.tc-dropdown__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--surface-2); border: var(--border-width) var(--border-style) var(--border-c); border-radius: var(--radius-md); box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,.18)); padding: var(--space-1); z-index: 20; display: grid; gap: 2px; }
+${p}.tc-dropdown__item { text-align: left; border: 0; background: transparent; font-family: var(--font-base); font-size: ${base - 1}px; color: var(--text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; ${transition} }
+${p}.tc-dropdown__item:hover { background: var(--color-primary-50); color: var(--color-primary-700); }`;
+}
+/* ----------------------- Dialog / Drawer overlay --------------------- */
+export function overlayStyles(p, config) {
+    const { base } = helpers(config);
+    return `
+${p}.tc-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 50; }
+${p}.tc-dialog { background: var(--surface-2); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,.18)); padding: var(--space-5, 20px); display: grid; gap: var(--space-2, 8px); min-width: 300px; max-width: 92vw; }
+${p}.tc-dialog__title { font-family: var(--font-heading); font-size: ${base + 2}px; font-weight: 600; margin: 0; }
+${p}.tc-dialog__body { color: var(--text-muted); font-size: ${base - 1}px; margin: 0; }
+${p}.tc-dialog__foot { margin-top: var(--space-3); display: flex; justify-content: flex-end; gap: var(--space-2); }
+${p}.tc-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; }
+${p}.tc-drawer { position: fixed; top: 0; bottom: 0; width: min(360px, 90vw); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,.18)); padding: var(--space-5, 20px); display: grid; gap: var(--space-3); align-content: start; z-index: 51; }
+${p}.tc-drawer--right { right: 0; }
+${p}.tc-drawer--left { left: 0; }
+${p}.tc-dialog__title + .tc-dialog__body { margin-top: -4px; }`;
+}
+/* ----------------------------- Pagination ---------------------------- */
+export function paginationStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-pagination { display: inline-flex; gap: var(--space-1); align-items: center; }
+${p}.tc-page { min-width: 32px; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-md); border: var(--border-width) var(--border-style) var(--border-c); background: var(--surface-2); color: var(--text); font-size: ${base - 2}px; font-family: var(--font-base); cursor: pointer; ${transition} }
+${p}.tc-page:hover:not([disabled]) { border-color: var(--color-primary-400); }
+${p}.tc-page--active { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
+${p}.tc-page[disabled] { opacity: .5; cursor: default; }`;
+}
+/* ------------------------------ Calendar ----------------------------- */
+export function calendarStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-cal { background: var(--surface-2); border: var(--border-width) var(--border-style) var(--border-c); border-radius: var(--radius-lg); padding: var(--space-4); width: 280px; display: grid; gap: var(--space-3); }
+${p}.tc-cal__head { display: flex; align-items: center; justify-content: space-between; }
+${p}.tc-cal__title { font-weight: 600; font-size: ${base - 1}px; color: var(--text); }
+${p}.tc-cal__nav { width: 28px; height: 28px; border-radius: var(--radius-md); border: var(--border-width) var(--border-style) var(--border-c); background: var(--surface-2); color: var(--text); cursor: pointer; ${transition} }
+${p}.tc-cal__nav:hover { border-color: var(--color-primary-400); }
+${p}.tc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+${p}.tc-cal__dow { text-align: center; font-size: ${base - 5}px; color: var(--text-muted); padding: 2px 0; }
+${p}.tc-cal__day { aspect-ratio: 1; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: ${base - 3}px; color: var(--text); cursor: pointer; font-family: var(--font-base); ${transition} }
+${p}.tc-cal__day:hover { background: var(--color-primary-50); }
+${p}.tc-cal__day--muted { color: var(--text-muted); opacity: .45; }
+${p}.tc-cal__day--today { box-shadow: inset 0 0 0 1px var(--color-primary-400); }
+${p}.tc-cal__day--selected { background: var(--color-primary-600); color: #fff; }
+${p}.tc-cal__day--selected:hover { background: var(--color-primary-600); }`;
+}
+/* ------------------------------ Sidebar ------------------------------ */
+export function sidebarStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-sidebar { width: 220px; background: var(--surface-2); border: var(--border-width) var(--border-style) var(--border-c); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; gap: 2px; align-content: start; }
+${p}.tc-sidebar__title { font-size: ${base - 5}px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: var(--space-1) var(--space-2); margin: 0; }
+${p}.tc-sidebar__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 0; background: transparent; font-family: var(--font-base); font-size: ${base - 1}px; color: var(--text); cursor: pointer; ${transition} }
+${p}.tc-sidebar__item:hover { background: var(--color-primary-50); }
+${p}.tc-sidebar__item--active { background: var(--color-primary-600); color: #fff; }
+${p}.tc-sidebar__item--active:hover { background: var(--color-primary-600); }`;
+}
+/* ------------------------------- Toast ------------------------------- */
+export function toastStyles(p, config) {
+    const { base } = helpers(config);
+    return `
+${p}.tc-toast { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface-2); color: var(--text); border: var(--border-width) var(--border-style) var(--border-c); border-left: 3px solid var(--color-primary-500); border-radius: var(--radius-md); box-shadow: var(--shadow-3, 0 12px 32px rgba(0,0,0,.18)); padding: var(--space-3) var(--space-4); min-width: 260px; max-width: 360px; }
+${p}.tc-toast__body { display: grid; gap: 2px; flex: 1 1 auto; }
+${p}.tc-toast__title { font-weight: 600; font-size: ${base - 1}px; }
+${p}.tc-toast__msg { font-size: ${base - 2}px; color: var(--text-muted); }
+${p}.tc-toast__close { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: var(--radius-sm); }
+${p}.tc-toast__close:hover { color: var(--text); background: var(--color-neutral-100); }
+${p}.tc-toast--success { border-left-color: var(--color-success-500); }
+${p}.tc-toast--warning { border-left-color: var(--color-warning-500); }
+${p}.tc-toast--error { border-left-color: var(--color-error-500); }
+${p}.tc-toast--info { border-left-color: var(--color-info-500); }`;
+}
+/* ----------------------------- Accordion ----------------------------- */
+export function accordionStyles(p, config) {
+    const { base, transition } = helpers(config);
+    return `
+${p}.tc-accordion { display: grid; gap: var(--space-2); width: 100%; max-width: 480px; }
+${p}.tc-accordion__item { border: var(--border-width) var(--border-style) var(--border-c); border-radius: var(--radius-md); background: var(--surface-2); overflow: hidden; }
+${p}.tc-accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: transparent; border: 0; font-family: var(--font-base); font-size: ${base - 1}px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; ${transition} }
+${p}.tc-accordion__header:hover { background: var(--color-primary-50); }
+${p}.tc-accordion__header:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: -2px; }
+${p}.tc-accordion__icon { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--duration) var(--easing); }
+${p}.tc-accordion__item[data-open="true"] .tc-accordion__icon { transform: rotate(180deg); }
+${p}.tc-accordion__panel { padding: 0 var(--space-4) var(--space-4); font-size: ${base - 1}px; color: var(--text-muted); line-height: 1.5; }`;
+}
+/** Concatenate every component stylesheet for the given selector prefix. */
+export function componentStyles(prefix, config) {
+    const parts = [
+        buttonStyles(prefix, config),
+        accordionStyles(prefix, config),
+        sidebarStyles(prefix, config),
+        toastStyles(prefix, config),
+        inputStyles(prefix, config),
+        checkboxStyles(prefix, config),
+        badgeStyles(prefix, config),
+        alertStyles(prefix, config),
+        avatarStyles(prefix),
+        cardStyles(prefix, config),
+        tableStyles(prefix, config),
+        progressStyles(prefix),
+        spinStyles(prefix),
+        tabsStyles(prefix, config),
+        tooltipStyles(prefix, config),
+        dropdownStyles(prefix, config),
+        overlayStyles(prefix, config),
+        paginationStyles(prefix, config),
+        calendarStyles(prefix, config),
+    ];
+    return parts.join("\n") + `\n@media (prefers-reduced-motion: reduce) { ${prefix}.tcb, ${prefix}.tc-card, ${prefix}.tc-page { transition: none !important; } }\n`;
+}
+//# sourceMappingURL=styles.js.map

package/dist/components/themed/styles.js.map

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

package/dist/components/themed/themeCss.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared theming layer for the component showcase (Storybook) and any other
+ * surface that needs to render real components using a `DesignConfig`.
+ *
+ * It reuses the exact same token resolution + interaction helpers as the Live
+ * Preview, so a component shown in Storybook looks identical to how it appears
+ * in the in-app preview for the same config.
+ */
+import type { CSSProperties } from "react";
+import type { DesignConfig } from "../../lib/config/types.js";
+export type Mode = "light" | "dark";
+/**
+ * Semantic surface vars per mode (`--surface`, `--text`, …) layered on top of
+ * the raw colour scale. Single source of truth for the Live Preview, the
+ * showcase surface, and the baked `theme-tokens.css`.
+ */
+export declare const SEMANTIC_VARS: Record<Mode, Record<string, string>>;
+/**
+ * The full set of CSS custom properties for a config, plus the semantic
+ * surface vars resolved for the given light/dark mode. Mirrors `LivePreview`.
+ */
+export declare function themeVars(config: DesignConfig, mode: Mode): CSSProperties;
+/**
+ * Button stylesheet (`.tcb`), with every selector prefixed by `prefix`.
+ * Pass `".${scope} "` for a scoped instance (multiple themed surfaces on one
+ * page), or `""` for a global stylesheet (e.g. the baked `theme-tokens.css`
+ * shipped when a component is installed into another project). Hover / focus /
+ * active states are derived from `config.interactions`.
+ */
+export declare function buttonRules(prefix: string, config: DesignConfig): string;
+/**
+ * Scoped Button stylesheet — every selector prefixed by `.${scope}` so multiple
+ * themed surfaces can coexist on one page. Used by `<ThemedSurface>`.
+ */
+export declare function buttonCss(scope: string, config: DesignConfig): string;

package/dist/components/themed/themeCss.js

@@ -0,0 +1,76 @@
+import { cssVarsToStyleObject, buttonHoverCss, activeCss, focusRingCss, } from "../../lib/tokens/index.js";
+/**
+ * Semantic surface vars per mode (`--surface`, `--text`, …) layered on top of
+ * the raw colour scale. Single source of truth for the Live Preview, the
+ * showcase surface, and the baked `theme-tokens.css`.
+ */
+export const SEMANTIC_VARS = {
+    light: {
+        "--surface": "var(--color-neutral-50)",
+        "--surface-2": "#ffffff",
+        "--text": "var(--color-neutral-900)",
+        "--text-muted": "var(--color-neutral-600)",
+        "--border-c": "var(--color-neutral-200)",
+    },
+    dark: {
+        "--surface": "var(--color-neutral-900)",
+        "--surface-2": "var(--color-neutral-800)",
+        "--text": "var(--color-neutral-50)",
+        "--text-muted": "var(--color-neutral-300)",
+        "--border-c": "var(--color-neutral-700)",
+    },
+};
+/**
+ * The full set of CSS custom properties for a config, plus the semantic
+ * surface vars resolved for the given light/dark mode. Mirrors `LivePreview`.
+ */
+export function themeVars(config, mode) {
+    const vars = cssVarsToStyleObject(config);
+    Object.assign(vars, SEMANTIC_VARS[mode]);
+    return vars;
+}
+/**
+ * Button stylesheet (`.tcb`), with every selector prefixed by `prefix`.
+ * Pass `".${scope} "` for a scoped instance (multiple themed surfaces on one
+ * page), or `""` for a global stylesheet (e.g. the baked `theme-tokens.css`
+ * shipped when a component is installed into another project). Hover / focus /
+ * active states are derived from `config.interactions`.
+ */
+export function buttonRules(prefix, config) {
+    const i = config.interactions;
+    const transition = "transition: all var(--duration) var(--easing);";
+    const focus = focusRingCss(i.focusRing);
+    const active = activeCss(i.pressFeedback);
+    const btnHover = (colorVar) => buttonHoverCss(i.hover, colorVar);
+    const ghostHover = i.hover === "darken"
+        ? "background: var(--color-primary-50);"
+        : buttonHoverCss(i.hover, "--color-primary");
+    const base = config.typography.baseSize;
+    return `
+${prefix}.tcb { font-family: var(--font-base); font-weight: 600; font-size: ${base - 1}px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: var(--border-width) var(--border-style) transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); line-height: 1.2; ${transition} }
+${prefix}.tcb:focus-visible { ${focus} }
+${prefix}.tcb:active { ${active} }
+${prefix}.tcb[disabled] { opacity: .5; pointer-events: none; }
+${prefix}.tcb--sm { padding: var(--space-1) var(--space-3); font-size: ${base - 3}px; }
+${prefix}.tcb--lg { padding: var(--space-3) var(--space-6); font-size: ${base + 1}px; }
+${prefix}.tcb--primary { background: var(--color-primary-600); color: #fff; }
+${prefix}.tcb--primary:hover { ${btnHover("--color-primary")} }
+${prefix}.tcb--secondary { background: var(--color-secondary-600); color: #fff; }
+${prefix}.tcb--secondary:hover { ${btnHover("--color-secondary")} }
+${prefix}.tcb--destructive { background: var(--color-error-600); color: #fff; }
+${prefix}.tcb--destructive:hover { ${btnHover("--color-error")} }
+${prefix}.tcb--ghost { background: transparent; color: var(--color-primary-700); }
+${prefix}.tcb--ghost:hover { ${ghostHover} }
+${prefix}.tcb--outline { background: transparent; color: var(--text); border-color: var(--border-c); }
+${prefix}.tcb--outline:hover { ${ghostHover} border-color: var(--color-primary-400); }
+@media (prefers-reduced-motion: reduce) { ${prefix}.tcb { transition: none !important; } }
+`;
+}
+/**
+ * Scoped Button stylesheet — every selector prefixed by `.${scope}` so multiple
+ * themed surfaces can coexist on one page. Used by `<ThemedSurface>`.
+ */
+export function buttonCss(scope, config) {
+    return buttonRules(`.${scope} `, config);
+}
+//# sourceMappingURL=themeCss.js.map

package/dist/components/themed/themeCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeCss.js","sourceRoot":"","sources":["../../../../../components/themed/themeCss.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,SAAS,EACT,YAAY,GACb,MAAM,cAAc,CAAC;AAItB;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAyC;IACjE,KAAK,EAAE;QACL,WAAW,EAAE,yBAAyB;QACtC,aAAa,EAAE,SAAS;QACxB,QAAQ,EAAE,0BAA0B;QACpC,cAAc,EAAE,0BAA0B;QAC1C,YAAY,EAAE,0BAA0B;KACzC;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,0BAA0B;QACvC,aAAa,EAAE,0BAA0B;QACzC,QAAQ,EAAE,yBAAyB;QACnC,cAAc,EAAE,0BAA0B;QAC1C,YAAY,EAAE,0BAA0B;KACzC;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,MAAoB,EAAE,IAAU;IACxD,MAAM,IAAI,GAAG,oBAAoB,CAAC,MAAM,CAA2B,CAAC;IACpE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACzC,OAAO,IAAqB,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,MAAc,EAAE,MAAoB;IAC9D,MAAM,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC;IAC9B,MAAM,UAAU,GAAG,gDAAgD,CAAC;IACpE,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACzE,MAAM,UAAU,GACd,CAAC,CAAC,KAAK,KAAK,QAAQ;QAClB,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC;IAExC,OAAO;EACP,MAAM,sEAAsE,IAAI,GAAG,CAAC,yQAAyQ,UAAU;EACvW,MAAM,wBAAwB,KAAK;EACnC,MAAM,iBAAiB,MAAM;EAC7B,MAAM;EACN,MAAM,iEAAiE,IAAI,GAAG,CAAC;EAC/E,MAAM,iEAAiE,IAAI,GAAG,CAAC;EAC/E,MAAM;EACN,MAAM,yBAAyB,QAAQ,CAAC,iBAAiB,CAAC;EAC1D,MAAM;EACN,MAAM,2BAA2B,QAAQ,CAAC,mBAAmB,CAAC;EAC9D,MAAM;EACN,MAAM,6BAA6B,QAAQ,CAAC,eAAe,CAAC;EAC5D,MAAM;EACN,MAAM,uBAAuB,UAAU;EACvC,MAAM;EACN,MAAM,yBAAyB,UAAU;4CACC,MAAM;CACjD,CAAC;AACF,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa,EAAE,MAAoB;IAC3D,OAAO,WAAW,CAAC,IAAI,KAAK,GAAG,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC"}

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

@@ -0,0 +1,5 @@
+import type { DesignConfig } from "./types.js";
+/** The default design system shown when the app first loads. */
+export declare const defaultConfig: DesignConfig;
+/** Deep clone helper so callers never mutate the shared default object. */
+export declare function cloneConfig(config: DesignConfig): DesignConfig;

package/dist/lib/config/defaults.js

@@ -0,0 +1,86 @@
+/** The default design system shown when the app first loads. */
+export const defaultConfig = {
+    meta: {
+        name: "Theme config System",
+        version: "1.0.0",
+        description: "A starter design system generated by Theme config System.",
+        targetStack: "react-tailwind",
+        componentLib: "none",
+        componentPackage: { install: false, name: "@vinhhypc/config-theme" },
+    },
+    theme: {
+        mode: "light",
+        style: "modern",
+        colors: {
+            primary: "#2563eb",
+            secondary: "#7c3aed",
+            accent: "#f59e0b",
+            neutral: "#64748b",
+            success: "#16a34a",
+            warning: "#d97706",
+            error: "#dc2626",
+            info: "#0ea5e9",
+        },
+    },
+    typography: {
+        fontFamilyBase: "'Inter', sans-serif",
+        fontFamilyHeading: "'Inter', sans-serif",
+        fontFamilyMono: "'JetBrains Mono', monospace",
+        baseSize: 16,
+        scaleRatio: 1.25,
+        weights: [400, 500, 600, 700],
+        lineHeight: 1.5,
+    },
+    spacing: {
+        baseUnit: 4,
+        scale: [0, 1, 2, 3, 4, 6, 8, 12, 16, 24],
+    },
+    radius: {
+        style: "rounded",
+        base: 8,
+    },
+    borders: {
+        width: 1,
+        style: "solid",
+        defaultColorToken: "neutral-200",
+    },
+    elevation: {
+        style: "soft",
+        levels: 4,
+    },
+    animation: {
+        enabled: true,
+        style: "smooth",
+        durationMs: 200,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+    interactions: {
+        hover: "darken",
+        pressFeedback: true,
+        focusRing: true,
+        underlineLinks: true,
+    },
+    components: {
+        button: {
+            variants: ["primary", "secondary", "ghost", "destructive"],
+            defaultSize: "md",
+        },
+        input: { variant: "outline" },
+        card: { variant: "elevated" },
+        badge: { enabled: true },
+        modal: { enabled: true },
+        table: { enabled: true },
+    },
+    aiRules: {
+        enforceTokensOnly: true,
+        namingConvention: "tailwind",
+        accessibility: "AA",
+        cleanCode: true,
+        customRules: [],
+    },
+};
+/** Deep clone helper so callers never mutate the shared default object. */
+export function cloneConfig(config) {
+    return JSON.parse(JSON.stringify(config));
+}
+//# sourceMappingURL=defaults.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../../lib/config/defaults.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,MAAM,CAAC,MAAM,aAAa,GAAiB;IACzC,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAqB;QAC3B,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,2DAA2D;QACxE,WAAW,EAAE,gBAAgB;QAC7B,YAAY,EAAE,MAAM;QACpB,gBAAgB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,wBAAwB,EAAE;KACrE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;YACpB,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;KACF;IACD,UAAU,EAAE;QACV,cAAc,EAAE,qBAAqB;QACrC,iBAAiB,EAAE,qBAAqB;QACxC,cAAc,EAAE,6BAA6B;QAC7C,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;QAC7B,UAAU,EAAE,GAAG;KAChB;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;KACzC;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,CAAC;KACR;IACD,OAAO,EAAE;QACP,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,OAAO;QACd,iBAAiB,EAAE,aAAa;KACjC;IACD,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,CAAC;KACV;IACD,SAAS,EAAE;QACT,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;QACf,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,8BAA8B;KACvC;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,QAAQ;QACf,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,IAAI;QACf,cAAc,EAAE,IAAI;KACrB;IACD,UAAU,EAAE;QACV,MAAM,EAAE;YACN,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC;YAC1D,WAAW,EAAE,IAAI;SAClB;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACxB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACxB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;KACzB;IACD,OAAO,EAAE;QACP,iBAAiB,EAAE,IAAI;QACvB,gBAAgB,EAAE,UAAU;QAC5B,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,EAAE;KAChB;CACF,CAAC;AAEF,2EAA2E;AAC3E,MAAM,UAAU,WAAW,CAAC,MAAoB;IAC9C,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAiB,CAAC;AAC5D,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { DesignConfig, ThemeStyle } from "./types.js";
+/**
+ * Style presets fill the config quickly; the user can then fine-tune.
+ * Each preset is a deep-merge patch applied on top of `defaultConfig`.
+ */
+export interface StylePreset {
+    id: ThemeStyle;
+    label: string;
+    description: string;
+    apply: (base: DesignConfig) => DesignConfig;
+}
+export declare const presets: StylePreset[];
+export declare function applyPreset(id: ThemeStyle, base?: DesignConfig): DesignConfig;

package/dist/lib/config/presets.js

@@ -0,0 +1,104 @@
+import { cloneConfig, defaultConfig } from "./defaults.js";
+function patch(base, fn) {
+    const next = cloneConfig(base);
+    fn(next);
+    return next;
+}
+export const presets = [
+    {
+        id: "modern",
+        label: "Hiện đại",
+        description: "Xanh dương/tím tươi, bóng mềm, chuyển động mượt, bo góc vừa.",
+        apply: (base) => patch(base, (c) => {
+            c.theme.style = "modern";
+            c.theme.colors.primary = "#2563eb";
+            c.theme.colors.secondary = "#7c3aed";
+            c.theme.colors.accent = "#f59e0b";
+            c.typography.fontFamilyBase = "'Inter', sans-serif";
+            c.typography.fontFamilyHeading = "'Inter', sans-serif";
+            c.radius = { style: "rounded", base: 8 };
+            c.elevation = { style: "soft", levels: 4 };
+            c.animation = { enabled: true, style: "smooth", durationMs: 200, easing: "cubic-bezier(0.4, 0, 0.2, 1)" };
+            c.interactions = { hover: "lift", pressFeedback: true, focusRing: true, underlineLinks: true };
+        }),
+    },
+    {
+        id: "classic",
+        label: "Cổ điển",
+        description: "Tiêu đề serif, xanh navy + vàng đồng, bo góc nhẹ, cạnh cứng.",
+        apply: (base) => patch(base, (c) => {
+            c.theme.style = "classic";
+            c.theme.colors.primary = "#1e3a8a";
+            c.theme.colors.secondary = "#334155";
+            c.theme.colors.accent = "#b45309";
+            c.typography.fontFamilyHeading = "'Times New Roman', serif";
+            c.typography.fontFamilyBase = "'Times New Roman', serif";
+            c.typography.scaleRatio = 1.2;
+            c.radius = { style: "rounded", base: 4 };
+            c.elevation = { style: "hard", levels: 3 };
+            c.animation = { enabled: true, style: "subtle", durationMs: 150, easing: "ease-in-out" };
+            c.interactions = { hover: "darken", pressFeedback: false, focusRing: true, underlineLinks: true };
+        }),
+    },
+    {
+        id: "minimal",
+        label: "Tối giản",
+        description: "Trung tính đơn sắc, bề mặt phẳng, góc vuông, gần như không chuyển động.",
+        apply: (base) => patch(base, (c) => {
+            c.theme.style = "minimal";
+            c.theme.colors.primary = "#111827";
+            c.theme.colors.secondary = "#374151";
+            c.theme.colors.accent = "#6b7280";
+            c.typography.fontFamilyBase = "'Inter', sans-serif";
+            c.typography.scaleRatio = 1.2;
+            c.radius = { style: "sharp", base: 2 };
+            c.elevation = { style: "flat", levels: 2 };
+            c.borders = { width: 1, style: "solid", defaultColorToken: "neutral-200" };
+            c.animation = { enabled: true, style: "subtle", durationMs: 120, easing: "ease-out" };
+            c.interactions = { hover: "darken", pressFeedback: false, focusRing: true, underlineLinks: false };
+        }),
+    },
+    {
+        id: "playful",
+        label: "Vui nhộn",
+        description: "Hồng/xanh ngọc tươi sáng, bo viên thuốc, chuyển động nảy, bo tròn mọi thứ.",
+        apply: (base) => patch(base, (c) => {
+            c.theme.style = "playful";
+            c.theme.colors.primary = "#ec4899";
+            c.theme.colors.secondary = "#14b8a6";
+            c.theme.colors.accent = "#facc15";
+            c.typography.fontFamilyHeading = "'Plus Jakarta Sans', sans-serif";
+            c.typography.fontFamilyBase = "'Plus Jakarta Sans', sans-serif";
+            c.typography.scaleRatio = 1.333;
+            c.radius = { style: "pill", base: 16 };
+            c.elevation = { style: "soft", levels: 5 };
+            c.animation = { enabled: true, style: "bouncy", durationMs: 300, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" };
+            c.interactions = { hover: "scale", pressFeedback: true, focusRing: true, underlineLinks: true };
+        }),
+    },
+    {
+        id: "brutalist",
+        label: "Brutalist",
+        description: "Đen/trắng tương phản cao, viền dày, không bo góc, bóng cứng.",
+        apply: (base) => patch(base, (c) => {
+            c.theme.style = "brutalist";
+            c.theme.colors.primary = "#000000";
+            c.theme.colors.secondary = "#ffffff";
+            c.theme.colors.accent = "#ff3b3b";
+            c.theme.colors.neutral = "#1a1a1a";
+            c.typography.fontFamilyBase = "'Barlow', sans-serif";
+            c.typography.fontFamilyHeading = "'Barlow', sans-serif";
+            c.typography.scaleRatio = 1.414;
+            c.radius = { style: "sharp", base: 0 };
+            c.elevation = { style: "hard", levels: 3 };
+            c.borders = { width: 3, style: "solid", defaultColorToken: "neutral-900" };
+            c.animation = { enabled: false, style: "none", durationMs: 0, easing: "linear" };
+            c.interactions = { hover: "none", pressFeedback: false, focusRing: true, underlineLinks: true };
+        }),
+    },
+];
+export function applyPreset(id, base = defaultConfig) {
+    const preset = presets.find((p) => p.id === id);
+    return preset ? preset.apply(base) : cloneConfig(base);
+}
+//# sourceMappingURL=presets.js.map

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

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