@tomo-inc/tomo-ui 0.0.13 → 0.0.14

package/README.md

@@ -103,22 +103,18 @@ Tomo UI allows you to provide a theme configuration at runtime.
 The type is aligned with HeroUI’s theme configuration surface.
 
 ```tsx
-import {
-  TomoUIProvider,
-  useTheme,
-  type ThemeConfig,
-} from "@tomo-inc/tomo-ui";
+import { TomoUIProvider, useTheme, type ThemeConfig } from "@tomo-inc/tomo-ui";
 
 const themeConfig: ThemeConfig = {
   themes: {
     light: {
       colors: {
-        primary: "#FCD436",
+        primary: "#fe3c9c",
       },
     },
     dark: {
       colors: {
-        primary: "#FCD436",
+        primary: "#fe3c9c",
       },
     },
   },
@@ -214,4 +210,3 @@ If you are extending `@tomo-inc/tomo-ui` or integrating it into a new applicatio
 - Prefer importing from the root package (`@tomo-inc/tomo-ui`) instead of deep imports.
 - Avoid depending on HeroUI directly; treat it as an internal implementation detail.
 - Keep Tailwind integration minimal and aligned with the usage examples above, so that future UI framework changes can remain transparent to applications.
-

package/dist/index.cjs

@@ -834,6 +834,20 @@ var import_react25 = require("react");
 
 // src/tailwind/plugin.ts
 var import_react23 = require("@heroui/react");
+var TOMO_PRIMARY = {
+  50: "#FFFBEA",
+  100: "#FED8DB",
+  200: "#FEB1C0",
+  300: "#FE89AC",
+  400: "#FE6CA6",
+  500: "#FE3C9C",
+  600: "#DA2B93",
+  700: "#B61E88",
+  800: "#931379",
+  900: "#790B6E",
+  foreground: "#12122A",
+  DEFAULT: "#FE3C9C"
+};
 var baseConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
@@ -843,37 +857,49 @@ var baseConfig = {
         foreground: "#12122A",
         background: "#FFF",
         content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436"
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
+        primary: TOMO_PRIMARY,
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
         t1: "#12122A",
         t2: "#616184",
         t3: "#8989AB",
         t4: "#C1C0D8",
         t5: "#EEC41F"
       }
+    },
+    dark: {
+      colors: {
+        foreground: "#ECEDEE",
+        background: "#000",
+        content1: "#18181b",
+        primary: { ...TOMO_PRIMARY, foreground: "#FFF" },
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E"
+      }
     }
   }
 };
 var plugin_default = (0, import_react23.heroui)(baseConfig);
 
 // src/tailwind/theme-to-css.ts
+var import_theme = require("@heroui/theme");
 var import_color = __toESM(require("color"), 1);
 var flat = __toESM(require("flat"), 1);
+function deepMerge(a, b) {
+  const result = { ...a };
+  for (const key of Object.keys(b)) {
+    const aVal = a[key];
+    const bVal = b[key];
+    if (aVal && bVal && typeof aVal === "object" && !Array.isArray(aVal) && typeof bVal === "object" && !Array.isArray(bVal)) {
+      result[key] = deepMerge(aVal, bVal);
+    } else {
+      result[key] = bVal;
+    }
+  }
+  return result;
+}
 function toKebabCase(str) {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -939,6 +965,7 @@ function processLayoutTheme(layout, prefix) {
   return cssVars;
 }
 function themeConfigToCSS(config, scopeId) {
+  var _a, _b, _c, _d, _e;
   const prefix = baseConfig.prefix || "tomo";
   const themes = config.themes || {};
   const cssBlocks = [];
@@ -946,8 +973,12 @@ function themeConfigToCSS(config, scopeId) {
   const scopeSelector = scopeId ? `#${scopeId.replace(/:/g, "\\:")}` : "";
   for (const [themeName, themeConfig] of Object.entries(themes)) {
     const cssVars = [];
-    if (themeConfig == null ? void 0 : themeConfig.colors) {
-      const flatColors = flattenThemeObject(themeConfig.colors);
+    {
+      const heroDefaultColors = (_a = import_theme.semanticColors[themeName]) != null ? _a : {};
+      const baseConfigColors = (_d = (_c = (_b = baseConfig.themes) == null ? void 0 : _b[themeName]) == null ? void 0 : _c.colors) != null ? _d : {};
+      const userColors = (_e = themeConfig == null ? void 0 : themeConfig.colors) != null ? _e : {};
+      const mergedColors = deepMerge(deepMerge(heroDefaultColors, baseConfigColors), userColors);
+      const flatColors = flattenThemeObject(mergedColors);
       for (const [colorKey, colorValue] of Object.entries(flatColors)) {
         if (!colorValue) continue;
         const value = toHslString(colorValue);

package/dist/index.js

@@ -742,6 +742,20 @@ import { useId, useMemo as useMemo2 } from "react";
 
 // src/tailwind/plugin.ts
 import { heroui } from "@heroui/react";
+var TOMO_PRIMARY = {
+  50: "#FFFBEA",
+  100: "#FED8DB",
+  200: "#FEB1C0",
+  300: "#FE89AC",
+  400: "#FE6CA6",
+  500: "#FE3C9C",
+  600: "#DA2B93",
+  700: "#B61E88",
+  800: "#931379",
+  900: "#790B6E",
+  foreground: "#12122A",
+  DEFAULT: "#FE3C9C"
+};
 var baseConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
@@ -751,37 +765,49 @@ var baseConfig = {
         foreground: "#12122A",
         background: "#FFF",
         content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436"
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
+        primary: TOMO_PRIMARY,
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
         t1: "#12122A",
         t2: "#616184",
         t3: "#8989AB",
         t4: "#C1C0D8",
         t5: "#EEC41F"
       }
+    },
+    dark: {
+      colors: {
+        foreground: "#ECEDEE",
+        background: "#000",
+        content1: "#18181b",
+        primary: { ...TOMO_PRIMARY, foreground: "#FFF" },
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E"
+      }
     }
   }
 };
 var plugin_default = heroui(baseConfig);
 
 // src/tailwind/theme-to-css.ts
+import { semanticColors } from "@heroui/theme";
 import Color from "color";
 import * as flat from "flat";
+function deepMerge(a, b) {
+  const result = { ...a };
+  for (const key of Object.keys(b)) {
+    const aVal = a[key];
+    const bVal = b[key];
+    if (aVal && bVal && typeof aVal === "object" && !Array.isArray(aVal) && typeof bVal === "object" && !Array.isArray(bVal)) {
+      result[key] = deepMerge(aVal, bVal);
+    } else {
+      result[key] = bVal;
+    }
+  }
+  return result;
+}
 function toKebabCase(str) {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -847,6 +873,7 @@ function processLayoutTheme(layout, prefix) {
   return cssVars;
 }
 function themeConfigToCSS(config, scopeId) {
+  var _a, _b, _c, _d, _e;
   const prefix = baseConfig.prefix || "tomo";
   const themes = config.themes || {};
   const cssBlocks = [];
@@ -854,8 +881,12 @@ function themeConfigToCSS(config, scopeId) {
   const scopeSelector = scopeId ? `#${scopeId.replace(/:/g, "\\:")}` : "";
   for (const [themeName, themeConfig] of Object.entries(themes)) {
     const cssVars = [];
-    if (themeConfig == null ? void 0 : themeConfig.colors) {
-      const flatColors = flattenThemeObject(themeConfig.colors);
+    {
+      const heroDefaultColors = (_a = semanticColors[themeName]) != null ? _a : {};
+      const baseConfigColors = (_d = (_c = (_b = baseConfig.themes) == null ? void 0 : _b[themeName]) == null ? void 0 : _c.colors) != null ? _d : {};
+      const userColors = (_e = themeConfig == null ? void 0 : themeConfig.colors) != null ? _e : {};
+      const mergedColors = deepMerge(deepMerge(heroDefaultColors, baseConfigColors), userColors);
+      const flatColors = flattenThemeObject(mergedColors);
       for (const [colorKey, colorValue] of Object.entries(flatColors)) {
         if (!colorValue) continue;
         const value = toHslString(colorValue);

package/dist/tailwind/plugin.cjs

@@ -20,11 +20,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tailwind/plugin.ts
 var plugin_exports = {};
 __export(plugin_exports, {
+  TOMO_PRIMARY: () => TOMO_PRIMARY,
   baseConfig: () => baseConfig,
   default: () => plugin_default
 });
 module.exports = __toCommonJS(plugin_exports);
 var import_react = require("@heroui/react");
+var TOMO_PRIMARY = {
+  50: "#FFFBEA",
+  100: "#FED8DB",
+  200: "#FEB1C0",
+  300: "#FE89AC",
+  400: "#FE6CA6",
+  500: "#FE3C9C",
+  600: "#DA2B93",
+  700: "#B61E88",
+  800: "#931379",
+  900: "#790B6E",
+  foreground: "#12122A",
+  DEFAULT: "#FE3C9C"
+};
 var baseConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
@@ -34,34 +49,33 @@ var baseConfig = {
         foreground: "#12122A",
         background: "#FFF",
         content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436"
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
+        primary: TOMO_PRIMARY,
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
         t1: "#12122A",
         t2: "#616184",
         t3: "#8989AB",
         t4: "#C1C0D8",
         t5: "#EEC41F"
       }
+    },
+    dark: {
+      colors: {
+        foreground: "#ECEDEE",
+        background: "#000",
+        content1: "#18181b",
+        primary: { ...TOMO_PRIMARY, foreground: "#FFF" },
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E"
+      }
     }
   }
 };
 var plugin_default = (0, import_react.heroui)(baseConfig);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TOMO_PRIMARY,
   baseConfig
 });

package/dist/tailwind/plugin.js

@@ -1,5 +1,19 @@
 // src/tailwind/plugin.ts
 import { heroui } from "@heroui/react";
+var TOMO_PRIMARY = {
+  50: "#FFFBEA",
+  100: "#FED8DB",
+  200: "#FEB1C0",
+  300: "#FE89AC",
+  400: "#FE6CA6",
+  500: "#FE3C9C",
+  600: "#DA2B93",
+  700: "#B61E88",
+  800: "#931379",
+  900: "#790B6E",
+  foreground: "#12122A",
+  DEFAULT: "#FE3C9C"
+};
 var baseConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
@@ -9,34 +23,33 @@ var baseConfig = {
         foreground: "#12122A",
         background: "#FFF",
         content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436"
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
+        primary: TOMO_PRIMARY,
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
         t1: "#12122A",
         t2: "#616184",
         t3: "#8989AB",
         t4: "#C1C0D8",
         t5: "#EEC41F"
       }
+    },
+    dark: {
+      colors: {
+        foreground: "#ECEDEE",
+        background: "#000",
+        content1: "#18181b",
+        primary: { ...TOMO_PRIMARY, foreground: "#FFF" },
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E"
+      }
     }
   }
 };
 var plugin_default = heroui(baseConfig);
 export {
+  TOMO_PRIMARY,
   baseConfig,
   plugin_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomo-inc/tomo-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/App.tsx

@@ -5,42 +5,8 @@ import { Input } from "./components/input";
 import { Modal, ModalContent, ModalHeader } from "./components/modal";
 
 import "./style.css";
+import { baseConfig } from "./tailwind/plugin";
 import { TomoUIProvider } from "./theme-provider";
-import { ThemeConfig } from "./types";
-
-const _dogeThemeConfig: ThemeConfig = {
-  themes: {
-    light: {
-      colors: {
-        foreground: "#12122A",
-        background: "#FFF",
-        content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436",
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
-        t1: "#12122A",
-        t2: "#616184",
-        t3: "#8989AB",
-        t4: "#C1C0D8",
-        t5: "#EEC41F",
-      } as any,
-    },
-  },
-};
 
 export const MoonIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
@@ -115,10 +81,11 @@ function App() {
         </div>
       </TomoUIProvider>
       <br />
-      <TomoUIProvider themeConfig={_dogeThemeConfig}>
+      <TomoUIProvider themeConfig={baseConfig}>
         <div className="bg-content1 p-4 rounded-lg flex flex-col gap-4 border border-primary">
           <div className="flex items-center justify-between">
             <h1 className="text-2xl font-bold text-foreground">Doge Theme Config Preview</h1>
+            <p className="text-sm text-default">preview text</p>
             <SwitchTheme />
           </div>
           <Input label="Email" type="email" />

package/src/tailwind/plugin.ts

@@ -1,6 +1,21 @@
 import type { HeroUIPluginConfig } from "@heroui/react";
 import { heroui } from "@heroui/react";
 
+export const TOMO_PRIMARY = {
+  50: "#FFFBEA",
+  100: "#FED8DB",
+  200: "#FEB1C0",
+  300: "#FE89AC",
+  400: "#FE6CA6",
+  500: "#FE3C9C",
+  600: "#DA2B93",
+  700: "#B61E88",
+  800: "#931379",
+  900: "#790B6E",
+  foreground: "#12122A",
+  DEFAULT: "#FE3C9C",
+};
+
 export const baseConfig: HeroUIPluginConfig = {
   // Don't change this prefix, some css not working
   prefix: "heroui",
@@ -10,23 +25,10 @@ export const baseConfig: HeroUIPluginConfig = {
         foreground: "#12122A",
         background: "#FFF",
         content1: "#FCFCFD",
-        primary: {
-          50: "#FFFBEA",
-          100: "#FFF3C4",
-          200: "#FCE588",
-          300: "#FADB5F",
-          400: "#F7C948",
-          500: "#FCD436",
-          600: "#F0B429",
-          700: "#DE911D",
-          800: "#CB6E17",
-          900: "#B44D12",
-          foreground: "#12122A",
-          DEFAULT: "#FCD436",
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
+        primary: TOMO_PRIMARY,
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
         t1: "#12122A",
         t2: "#616184",
         t3: "#8989AB",
@@ -34,6 +36,17 @@ export const baseConfig: HeroUIPluginConfig = {
         t5: "#EEC41F",
       } as any,
     },
+    dark: {
+      colors: {
+        foreground: "#ECEDEE",
+        background: "#000",
+        content1: "#18181b",
+        primary: { ...TOMO_PRIMARY, foreground: "#FFF" },
+        danger: "#FF447C",
+        warning: "#FF9F4C",
+        success: "#A8D84E",
+      } as any,
+    },
   },
 };
 export default heroui(baseConfig) as any;

package/src/tailwind/theme-to-css.ts

@@ -1,9 +1,34 @@
 import type { ColorScale, HeroUIPluginConfig, LayoutTheme } from "@heroui/theme";
+import { semanticColors } from "@heroui/theme";
 
 import Color from "color";
 import * as flat from "flat";
 import { baseConfig } from "./plugin";
 
+/**
+ * Deep-merge two objects: b's values override a's, recursing into nested plain objects.
+ */
+function deepMerge<T extends Record<string, unknown>>(a: T, b: Record<string, unknown>): T {
+  const result = { ...a } as Record<string, unknown>;
+  for (const key of Object.keys(b)) {
+    const aVal = a[key];
+    const bVal = b[key];
+    if (
+      aVal &&
+      bVal &&
+      typeof aVal === "object" &&
+      !Array.isArray(aVal) &&
+      typeof bVal === "object" &&
+      !Array.isArray(bVal)
+    ) {
+      result[key] = deepMerge(aVal as Record<string, unknown>, bVal as Record<string, unknown>);
+    } else {
+      result[key] = bVal;
+    }
+  }
+  return result as T;
+}
+
 /**
  * Convert camelCase to kebab-case
  * Matches heroui's kebabCase utility
@@ -170,12 +195,19 @@ export function themeConfigToCSS(config: HeroUIPluginConfig, scopeId?: string):
   for (const [themeName, themeConfig] of Object.entries(themes)) {
     const cssVars: string[] = [];
 
-    // Process colors
-    if (themeConfig?.colors) {
-      // Flatten colors using the same method as heroui plugin
-      const flatColors = flattenThemeObject(themeConfig.colors as Record<string, ColorScale>);
+    // Merge chain: HeroUI semanticColors → tomo-ui baseConfig → user themeConfig
+    // This replicates at runtime what the heroui() Tailwind plugin does at build time,
+    // ensuring ALL semantic variables are present in the scoped CSS.
+    {
+      const heroDefaultColors = (semanticColors as Record<string, Record<string, unknown>>)[themeName] ?? {};
+      const baseConfigColors = ((baseConfig.themes as Record<string, any>)?.[themeName]?.colors ?? {}) as Record<
+        string,
+        unknown
+      >;
+      const userColors = (themeConfig?.colors ?? {}) as Record<string, unknown>;
+      const mergedColors = deepMerge(deepMerge(heroDefaultColors, baseConfigColors), userColors);
+      const flatColors = flattenThemeObject(mergedColors as Record<string, ColorScale>);
 
-      // Extract colors -> HSL triplet values (matching heroui plugin)
       for (const [colorKey, colorValue] of Object.entries(flatColors)) {
         if (!colorValue) continue;