@12nil/theme-registry-package 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -221,6 +221,16 @@ function tokenSetToCssVariables(tokens) {
         variables[`--theme-${category}-${keyName}`] = value;
         if (category === "colors") {
           variables[`--color-theme-${keyName}`] = value;
+          variables[`--theme-${keyName}`] = value;
+        }
+        if (category === "surface") {
+          variables[`--surface-${keyName}`] = value;
+        }
+        if (category === "text") {
+          variables[`--text-${keyName}`] = value;
+        }
+        if (category === "border") {
+          variables[`--border-${keyName}`] = value;
         }
       });
     };
@@ -233,6 +243,7 @@ function tokenSetToCssVariables(tokens) {
   Object.entries(tokens).forEach(([key, value]) => {
     if (key === "tertiary" && !value) return;
     variables[`--color-theme-${key}`] = value;
+    variables[`--theme-${key}`] = value;
   });
   return variables;
 }
@@ -767,7 +778,10 @@ var index_exports = {};
 __export(index_exports, {
   RUNTIME_THEME_REGISTRY_VERSION: () => RUNTIME_THEME_REGISTRY_VERSION,
   ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  ThemeSwitcherStyled: () => ThemeSwitcherStyled,
   applyThemeToDocument: () => applyThemeToDocument,
+  createTailwindThemeColorMap: () => createTailwindThemeColorMap,
   default: () => themeRegistry,
   generateAllThemesCSS: () => generateAllThemesCSS,
   generateThemeCSS: () => generateThemeCSS,
@@ -798,6 +812,16 @@ function semanticTokensToCSSVariables(tokens) {
       variables[`--theme-${category}-${keyName}`] = value;
       if (category === "colors") {
         variables[`--color-theme-${keyName}`] = value;
+        variables[`--theme-${keyName}`] = value;
+      }
+      if (category === "surface") {
+        variables[`--surface-${keyName}`] = value;
+      }
+      if (category === "text") {
+        variables[`--text-${keyName}`] = value;
+      }
+      if (category === "border") {
+        variables[`--border-${keyName}`] = value;
       }
     });
   };
@@ -812,7 +836,9 @@ function legacyTokensToCSSVariables(tokens) {
   Object.entries(tokens).forEach(([key, value]) => {
     if (key === "tertiary" && !value) return;
     if (!value) return;
-    variables[`--color-theme-${String(key)}`] = value;
+    const keyName = String(key);
+    variables[`--color-theme-${keyName}`] = value;
+    variables[`--theme-${keyName}`] = value;
   });
   return variables;
 }
@@ -853,15 +879,84 @@ function applyThemeToDocument(theme, mode) {
     document.documentElement.style.setProperty(name, value);
   });
 }
+function createTailwindThemeColorMap() {
+  return {
+    primary: "var(--theme-primary)",
+    secondary: "var(--theme-secondary)",
+    background: "var(--theme-background)",
+    text: "var(--theme-text)",
+    accent: "var(--theme-accent)",
+    muted: "var(--theme-muted)",
+    error: "var(--theme-error)",
+    warning: "var(--theme-warning)",
+    success: "var(--theme-success)",
+    info: "var(--theme-info)",
+    "surface-page": "var(--surface-page)",
+    "surface-card": "var(--surface-card)",
+    "surface-sidebar": "var(--surface-sidebar)",
+    "surface-modal": "var(--surface-modal)",
+    "surface-popover": "var(--surface-popover)",
+    "text-primary": "var(--text-primary)",
+    "text-secondary": "var(--text-secondary)",
+    "text-tertiary": "var(--text-tertiary)",
+    "text-disabled": "var(--text-disabled)",
+    "border-default": "var(--border-default)",
+    "border-subtle": "var(--border-subtle)",
+    "border-strong": "var(--border-strong)"
+  };
+}
 
 // theme-provider.tsx
 init_app_theme();
 var import_jsx_runtime = require("react/jsx-runtime");
+var THEME_UTILITY_STYLE_ID = "runtime-theme-registry-utility-classes";
+var THEME_UTILITY_CSS = `
+.bg-primary{background-color:var(--theme-primary)!important}
+.bg-secondary{background-color:var(--theme-secondary)!important}
+.bg-background{background-color:var(--theme-background)!important}
+.bg-accent{background-color:var(--theme-accent)!important}
+.bg-muted{background-color:var(--theme-muted)!important}
+.bg-error{background-color:var(--theme-error)!important}
+.bg-warning{background-color:var(--theme-warning)!important}
+.bg-success{background-color:var(--theme-success)!important}
+.bg-info{background-color:var(--theme-info)!important}
+.bg-surface-card{background-color:var(--surface-card)!important}
+.bg-surface-page{background-color:var(--surface-page)!important}
+
+.text-primary{color:var(--theme-primary)!important}
+.text-secondary{color:var(--theme-secondary)!important}
+.text-background{color:var(--theme-background)!important}
+.text-text{color:var(--theme-text)!important}
+.text-accent{color:var(--theme-accent)!important}
+.text-muted{color:var(--theme-muted)!important}
+.text-error{color:var(--theme-error)!important}
+.text-warning{color:var(--theme-warning)!important}
+.text-success{color:var(--theme-success)!important}
+.text-info{color:var(--theme-info)!important}
+.text-text-primary{color:var(--text-primary)!important}
+.text-text-secondary{color:var(--text-secondary)!important}
+.text-text-tertiary{color:var(--text-tertiary)!important}
+.text-text-disabled{color:var(--text-disabled)!important}
+
+.border-border-default{border-color:var(--border-default)!important}
+.border-border-subtle{border-color:var(--border-subtle)!important}
+.border-border-strong{border-color:var(--border-strong)!important}
+`;
 var ThemeContext = (0, import_react.createContext)(void 0);
-function ThemeProvider({ children }) {
+function ThemeProvider({ children, injectUtilityClasses = true }) {
   const [currentTheme, setCurrentTheme] = (0, import_react.useState)(null);
   const [currentMode, setCurrentMode] = (0, import_react.useState)(null);
   const [themes, setThemes] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    if (!injectUtilityClasses) return;
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(THEME_UTILITY_STYLE_ID);
+    if (existing) return;
+    const style = document.createElement("style");
+    style.id = THEME_UTILITY_STYLE_ID;
+    style.textContent = THEME_UTILITY_CSS;
+    document.head.appendChild(style);
+  }, [injectUtilityClasses]);
   (0, import_react.useEffect)(() => {
     const registeredThemes = themeRegistry.getAll();
     if (registeredThemes.length === 0) {
@@ -934,6 +1029,146 @@ function useTheme() {
   return context;
 }
 
+// theme-switcher.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getDefaultModeForTheme(themes, themeName, fallbackMode) {
+  const nextTheme = themes.find((theme) => theme.name === themeName);
+  if (!nextTheme) return null;
+  if (fallbackMode && nextTheme.modes[fallbackMode]) {
+    return fallbackMode;
+  }
+  const firstMode = Object.keys(nextTheme.modes)[0];
+  return firstMode ?? null;
+}
+function ThemeSwitcher({
+  className,
+  themeLabel = "Theme",
+  modeLabel = "Mode",
+  showModeSelector = true,
+  idPrefix = "runtime-theme-switcher",
+  onThemeChanged,
+  onModeChanged
+}) {
+  const { themes, currentTheme, currentMode, availableModes, setTheme, setMode } = useTheme();
+  if (themes.length === 0) {
+    return null;
+  }
+  const handleThemeChange = (event) => {
+    const nextThemeName = event.target.value;
+    const nextMode = getDefaultModeForTheme(themes, nextThemeName, currentMode);
+    if (!nextMode) return;
+    setTheme(nextThemeName, nextMode);
+    onThemeChanged?.(nextThemeName, nextMode);
+  };
+  const handleModeChange = (event) => {
+    const nextMode = event.target.value;
+    setMode(nextMode);
+    onModeChanged?.(nextMode);
+  };
+  const themeSelectId = `${idPrefix}-theme`;
+  const modeSelectId = `${idPrefix}-mode`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: themeSelectId, children: themeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { id: themeSelectId, value: currentTheme ?? "", onChange: handleThemeChange, children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: theme.name, children: theme.name }, theme.name)) }),
+    showModeSelector ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: modeSelectId, children: modeLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { id: modeSelectId, value: currentMode ?? "", onChange: handleModeChange, children: availableModes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: mode, children: mode }, mode)) })
+    ] }) : null
+  ] });
+}
+function ThemeSwitcherStyled({
+  className,
+  title = "Theme",
+  subtitle = "Switch appearance and mode",
+  themeLabel = "Theme",
+  modeLabel = "Mode",
+  showModeSelector = true,
+  idPrefix = "runtime-theme-switcher-styled",
+  onThemeChanged,
+  onModeChanged
+}) {
+  const { themes, currentTheme, currentMode, availableModes, setTheme, setMode } = useTheme();
+  if (themes.length === 0) {
+    return null;
+  }
+  const handleThemeChange = (event) => {
+    const nextThemeName = event.target.value;
+    const nextMode = getDefaultModeForTheme(themes, nextThemeName, currentMode);
+    if (!nextMode) return;
+    setTheme(nextThemeName, nextMode);
+    onThemeChanged?.(nextThemeName, nextMode);
+  };
+  const handleModeClick = (mode) => {
+    setMode(mode);
+    onModeChanged?.(mode);
+  };
+  const themeSelectId = `${idPrefix}-theme`;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "section",
+    {
+      className,
+      style: {
+        border: "1px solid var(--theme-border-subtle, #d1d5db)",
+        borderRadius: 12,
+        padding: 12,
+        background: "var(--theme-surface-card, var(--color-theme-background, #ffffff))",
+        color: "var(--theme-text-primary, var(--color-theme-text, #111827))",
+        display: "grid",
+        gap: 10,
+        maxWidth: 360
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { style: { display: "grid", gap: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { style: { opacity: 0.8 }, children: subtitle })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: themeSelectId, children: themeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "select",
+            {
+              id: themeSelectId,
+              value: currentTheme ?? "",
+              onChange: handleThemeChange,
+              style: {
+                border: "1px solid var(--theme-border-default, #9ca3af)",
+                borderRadius: 8,
+                padding: "8px 10px",
+                background: "var(--theme-surface-page, var(--color-theme-background, #ffffff))",
+                color: "inherit"
+              },
+              children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: theme.name, children: theme.name }, theme.name))
+            }
+          )
+        ] }),
+        showModeSelector ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: modeLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: availableModes.map((mode) => {
+            const isActive = mode === currentMode;
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleModeClick(mode),
+                style: {
+                  border: "1px solid var(--theme-border-default, #9ca3af)",
+                  borderRadius: 999,
+                  padding: "6px 12px",
+                  cursor: "pointer",
+                  background: isActive ? "var(--theme-colors-primary, var(--color-theme-primary, #2563eb))" : "var(--theme-surface-page, var(--color-theme-background, #ffffff))",
+                  color: isActive ? "var(--theme-surface-page, var(--color-theme-background, #ffffff))" : "inherit"
+                },
+                children: mode
+              },
+              mode
+            );
+          }) })
+        ] }) : null
+      ]
+    }
+  );
+}
+
 // index.ts
 init_theme_registry();
 init_theme_registry();
@@ -941,7 +1176,10 @@ init_theme_registry();
 0 && (module.exports = {
   RUNTIME_THEME_REGISTRY_VERSION,
   ThemeProvider,
+  ThemeSwitcher,
+  ThemeSwitcherStyled,
   applyThemeToDocument,
+  createTailwindThemeColorMap,
   generateAllThemesCSS,
   generateThemeCSS,
   isThemeTokensV2,