@tomo-inc/tomo-ui 0.0.8 → 0.0.10

package/src/tailwind/plugin.ts

@@ -1,11 +1,23 @@
-import { heroui } from "@heroui/react";
+import { heroui, HeroUIPluginConfig } from "@heroui/react";
 
-export const ThemePlugin: any = heroui({
-  layout: {},
+export const baseConfig: HeroUIPluginConfig = {
+  // Don't change this prefix, some css not working
+  prefix: "heroui",
+  // prefix: "tomoui",
   themes: {
-    light: {},
-    dark: {},
-    doge_light: {
+    // light: {
+    //   colors: {
+    //     foreground: "#000",
+    //     background: "#FFF",
+    //     content1: "#FCFCFD",
+    //     primary: {
+    //       ...generateColorScale("#fe3c9c"),
+    //       DEFAULT: "#fe3c9c",
+    //       foreground: "#fff",
+    //     },
+    //   },
+    // },
+    light: {
       colors: {
         foreground: "#12122A",
         background: "#FFF",
@@ -34,144 +46,183 @@ export const ThemePlugin: any = heroui({
         t5: "#EEC41F",
       } as any,
     },
-    wallet_kit_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",
-          DEFAULT: "#FCD436",
-        },
-        danger: "#FF5A5A",
-        warning: "#FFAD32",
-        success: "#079455",
-        t1: "#12122A",
-        t2: "#616184",
-        t3: "#8989AB",
-        t4: "#C1C0D8",
-        t5: "#EEC41F",
-      } as any,
-    },
-    mydoge: {
-      colors: {
-        primary: {
-          "50": "#fffef7",
-          "100": "#fffceb",
-          "200": "#fff9d5",
-          "300": "#fff5b8",
-          "400": "#feef8a",
-          "500": "#FED70B",
-          "600": "#e5c009",
-          "700": "#bfa007",
-          "800": "#998006",
-          "900": "#736005",
-          foreground: "#000",
-          DEFAULT: "#FED70B",
-        },
-        secondary: {
-          "50": "#f5f3ff",
-          "100": "#ede9fe",
-          "200": "#ddd6fe",
-          "300": "#c4b5fd",
-          "400": "#a78bfa",
-          "500": "#8b5cf6",
-          "600": "#7c3aed",
-          "700": "#6d28d9",
-          "800": "#5b21b6",
-          "900": "#4c1d95",
-          foreground: "#fff",
-          DEFAULT: "#8b5cf6",
-        },
-        default: {
-          "50": "#0e0e0e",
-          "100": "#1c1c1c",
-          "200": "#2a2a2a",
-          "300": "#383838",
-          "400": "#464646",
-          "500": "#6b6b6b",
-          "600": "#909090",
-          "700": "#b5b5b5",
-          "800": "#dadada",
-          "900": "#ffffff",
-          foreground: "#ffffff",
-          DEFAULT: "#464646",
-        },
-        success: {
-          "50": "#f0fdf4",
-          "100": "#dcfce7",
-          "200": "#bbf7d0",
-          "300": "#86efac",
-          "400": "#4ade80",
-          "500": "#10b981",
-          "600": "#059669",
-          "700": "#047857",
-          "800": "#065f46",
-          "900": "#064e3b",
-          foreground: "#fff",
-          DEFAULT: "#10b981",
-        },
-        warning: {
-          "50": "#fffbeb",
-          "100": "#fef3c7",
-          "200": "#fde68a",
-          "300": "#fcd34d",
-          "400": "#fbbf24",
-          "500": "#f59e0b",
-          "600": "#d97706",
-          "700": "#b45309",
-          "800": "#92400e",
-          "900": "#78350f",
-          foreground: "#000",
-          DEFAULT: "#f59e0b",
-        },
-        danger: {
-          "50": "#fef2f2",
-          "100": "#fee2e2",
-          "200": "#fecaca",
-          "300": "#fca5a5",
-          "400": "#f87171",
-          "500": "#ef4444",
-          "600": "#dc2626",
-          "700": "#b91c1c",
-          "800": "#991b1b",
-          "900": "#7f1d1d",
-          foreground: "#fff",
-          DEFAULT: "#ef4444",
-        },
-        background: "#000000",
-        foreground: "#ffffff",
-        content1: {
-          DEFAULT: "#1A1A1A",
-          foreground: "#fff",
-        },
-        content2: {
-          DEFAULT: "#242424",
-          foreground: "#fff",
-        },
-        content3: {
-          DEFAULT: "#464646",
-          foreground: "#fff",
-        },
-        content4: {
-          DEFAULT: "#666666",
-          foreground: "#fff",
-        },
-        focus: "#FED70B",
-        overlay: "#000000",
-        divider: "#464646",
-      },
-    },
+    dark: {},
   },
-});
+};
 
+export const ThemePlugin = heroui(baseConfig) as any;
 export default ThemePlugin;
+
+// export const ThemePlugin: any = heroui({
+//   layout: {},
+//   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",
+//           DEFAULT: "#FCD436",
+//         },
+//         danger: "#FF5A5A",
+//         warning: "#FFAD32",
+//         success: "#079455",
+//         // Remove no required colors
+//         // t1: "#12122A",
+//         // t2: "#616184",
+//         // t3: "#8989AB",
+//         // t4: "#C1C0D8",
+//         // t5: "#EEC41F",
+//       },
+//     },
+//     // doge_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,
+//     // },
+
+//     // mydoge: {
+//     //   colors: {
+//     //     primary: {
+//     //       "50": "#fffef7",
+//     //       "100": "#fffceb",
+//     //       "200": "#fff9d5",
+//     //       "300": "#fff5b8",
+//     //       "400": "#feef8a",
+//     //       "500": "#FED70B",
+//     //       "600": "#e5c009",
+//     //       "700": "#bfa007",
+//     //       "800": "#998006",
+//     //       "900": "#736005",
+//     //       foreground: "#000",
+//     //       DEFAULT: "#FED70B",
+//     //     },
+//     //     secondary: {
+//     //       "50": "#f5f3ff",
+//     //       "100": "#ede9fe",
+//     //       "200": "#ddd6fe",
+//     //       "300": "#c4b5fd",
+//     //       "400": "#a78bfa",
+//     //       "500": "#8b5cf6",
+//     //       "600": "#7c3aed",
+//     //       "700": "#6d28d9",
+//     //       "800": "#5b21b6",
+//     //       "900": "#4c1d95",
+//     //       foreground: "#fff",
+//     //       DEFAULT: "#8b5cf6",
+//     //     },
+//     //     default: {
+//     //       "50": "#0e0e0e",
+//     //       "100": "#1c1c1c",
+//     //       "200": "#2a2a2a",
+//     //       "300": "#383838",
+//     //       "400": "#464646",
+//     //       "500": "#6b6b6b",
+//     //       "600": "#909090",
+//     //       "700": "#b5b5b5",
+//     //       "800": "#dadada",
+//     //       "900": "#ffffff",
+//     //       foreground: "#ffffff",
+//     //       DEFAULT: "#464646",
+//     //     },
+//     //     success: {
+//     //       "50": "#f0fdf4",
+//     //       "100": "#dcfce7",
+//     //       "200": "#bbf7d0",
+//     //       "300": "#86efac",
+//     //       "400": "#4ade80",
+//     //       "500": "#10b981",
+//     //       "600": "#059669",
+//     //       "700": "#047857",
+//     //       "800": "#065f46",
+//     //       "900": "#064e3b",
+//     //       foreground: "#fff",
+//     //       DEFAULT: "#10b981",
+//     //     },
+//     //     warning: {
+//     //       "50": "#fffbeb",
+//     //       "100": "#fef3c7",
+//     //       "200": "#fde68a",
+//     //       "300": "#fcd34d",
+//     //       "400": "#fbbf24",
+//     //       "500": "#f59e0b",
+//     //       "600": "#d97706",
+//     //       "700": "#b45309",
+//     //       "800": "#92400e",
+//     //       "900": "#78350f",
+//     //       foreground: "#000",
+//     //       DEFAULT: "#f59e0b",
+//     //     },
+//     //     danger: {
+//     //       "50": "#fef2f2",
+//     //       "100": "#fee2e2",
+//     //       "200": "#fecaca",
+//     //       "300": "#fca5a5",
+//     //       "400": "#f87171",
+//     //       "500": "#ef4444",
+//     //       "600": "#dc2626",
+//     //       "700": "#b91c1c",
+//     //       "800": "#991b1b",
+//     //       "900": "#7f1d1d",
+//     //       foreground: "#fff",
+//     //       DEFAULT: "#ef4444",
+//     //     },
+//     //     background: "#000000",
+//     //     foreground: "#ffffff",
+//     //     content1: {
+//     //       DEFAULT: "#1A1A1A",
+//     //       foreground: "#fff",
+//     //     },
+//     //     content2: {
+//     //       DEFAULT: "#242424",
+//     //       foreground: "#fff",
+//     //     },
+//     //     content3: {
+//     //       DEFAULT: "#464646",
+//     //       foreground: "#fff",
+//     //     },
+//     //     content4: {
+//     //       DEFAULT: "#666666",
+//     //       foreground: "#fff",
+//     //     },
+//     //     focus: "#FED70B",
+//     //     overlay: "#000000",
+//     //     divider: "#464646",
+//     //   },
+//     // },
+//   },
+// });

package/src/tailwind/tailwind.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
-@plugin "./plugin";
+@plugin "./plugin.ts";
 
 @source "../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx,mjs}";
+@source "../components/**/*.{js,ts,jsx,tsx,mjs}";

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

@@ -0,0 +1,256 @@
+import type { ColorScale, HeroUIPluginConfig, LayoutTheme } from "@heroui/theme";
+
+import Color from "color";
+import * as flat from "flat";
+import { baseConfig } from "./plugin";
+
+/**
+ * Convert camelCase to kebab-case
+ * Matches heroui's kebabCase utility
+ */
+function toKebabCase(str: string): string {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/**
+ * Remove DEFAULT keys (e.g., "primary-DEFAULT" -> "primary")
+ * This matches heroui plugin's removeDefaultKeys function
+ */
+function removeDefaultKeys(obj: Record<string, unknown>): Record<string, unknown> {
+  const newObj: Record<string, unknown> = {};
+
+  for (const key in obj) {
+    if (key.endsWith("-DEFAULT")) {
+      newObj[key.replace("-DEFAULT", "")] = obj[key];
+      continue;
+    }
+    newObj[key] = obj[key];
+  }
+
+  return newObj;
+}
+
+/**
+ * Flatten nested theme objects to `a-b-c` keys.
+ * Uses the same logic as heroui plugin's flattenThemeObject
+ */
+function flattenThemeObject(obj: Record<string, unknown>): Record<string, unknown> {
+  return removeDefaultKeys(
+    flat.flatten(obj, {
+      safe: true,
+      delimiter: "-",
+    }) as Record<string, unknown>,
+  );
+}
+
+/**
+ * Convert color string to HSL format (h s% l%)
+ * Matches heroui plugin's color conversion logic
+ */
+function toHslString(colorValue: string): string | null {
+  try {
+    const parsedColor = Color(colorValue).hsl().round(2).array();
+    const [h, s, l] = parsedColor;
+
+    return `${h} ${s}% ${l}%`;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Generate CSS variable name from prefix and color key
+ * This matches the naming convention used by heroui() plugin
+ */
+function generateCSSVariableName(prefix: string, colorKey: string): string {
+  return `--${prefix}-${colorKey}`;
+}
+
+/**
+ * Process layout theme and convert to CSS variables
+ * Matches heroui plugin's layout processing logic
+ *
+ * @param layout - Layout theme object
+ * @param prefix - CSS variable prefix
+ * @returns Array of CSS variable strings
+ */
+function processLayoutTheme(layout: LayoutTheme, prefix: string): string[] {
+  const cssVars: string[] = [];
+
+  if (!layout) return cssVars;
+
+  // Convert keys to kebab-case (matching heroui's mapKeys logic)
+  const kebabLayout: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(layout)) {
+    kebabLayout[toKebabCase(key)] = value;
+  }
+
+  // Flatten nested layout objects
+  const flatLayout = flat.flatten(kebabLayout, {
+    safe: true,
+    delimiter: "-",
+  }) as Record<string, unknown>;
+
+  // Process each layout value
+  for (const [key, value] of Object.entries(flatLayout)) {
+    if (!value) continue;
+
+    const layoutVariablePrefix = `--${prefix}-${key}`;
+
+    if (typeof value === "object" && !Array.isArray(value)) {
+      // Handle nested objects (e.g., boxShadow: { small: "...", medium: "..." })
+      for (const [nestedKey, nestedValue] of Object.entries(value)) {
+        if (!nestedValue) continue;
+
+        const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+
+        cssVars.push(`  ${nestedLayoutVariable}: ${nestedValue};`);
+      }
+    } else {
+      // Handle singular values (e.g., disabledOpacity: 0.5)
+      // Special handling for opacity values: 0.5 -> .5
+      let formattedValue = value;
+
+      if (layoutVariablePrefix.includes("opacity") && typeof value === "number") {
+        formattedValue = value.toString().replace(/^0\./, ".");
+      }
+
+      cssVars.push(`  ${layoutVariablePrefix}: ${formattedValue};`);
+    }
+  }
+
+  return cssVars;
+}
+
+/**
+ * Convert heroui theme configuration to CSS variables string
+ *
+ * This function takes a standard HeroUI theme config (same format as heroui({}))
+ * and converts it to CSS variables that can override the base theme.
+ *
+ * The base theme is automatically generated by heroui() plugin at build time.
+ * This function uses the same processing logic as heroui plugin:
+ * - Uses flat() to flatten nested objects
+ * - Uses Color() to convert colors to HSL
+ * - Generates CSS variables with the same naming convention
+ *
+ * @param config - HeroUI theme configuration object (same format as heroui({}))
+ * @param scopeId - Optional unique ID to scope CSS variables to a specific element
+ * @returns CSS variables as string that can be injected into CSS to override base theme
+ *
+ * @example
+ * const config: HeroUIPluginConfig = {
+ *   themes: {
+ *     light: {
+ *       colors: {
+ *         primary: "#ff0000"
+ *       }
+ *     }
+ *   }
+ * };
+ * const css = themeConfigToCSS(config);
+ * // Returns: ":root { --heroui-primary: 0 100% 50%; }"
+ * const css = themeConfigToCSS(config, "unique-id");
+ * // Returns: "#unique-id [class=\"light\"] { --heroui-primary: 0 100% 50%; }"
+ */
+export function themeConfigToCSS(config: HeroUIPluginConfig, scopeId?: string): string {
+  const prefix = baseConfig.prefix || "tomo"; // is Fixed
+  const themes = config.themes || {};
+  const cssBlocks: string[] = [];
+
+  // Process global layout (applies to all themes)
+  const globalLayoutVars = config.layout ? processLayoutTheme(config.layout, prefix) : [];
+
+  // Build scope selector prefix if scopeId is provided
+  // CSS variables are scoped to the element with the given ID
+  const scopeSelector = scopeId ? `#${scopeId.replace(/:/g, "\\:")}` : "";
+
+  // Process each theme (matching heroui plugin's resolveConfig logic)
+  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>);
+
+      // Extract colors -> HSL triplet values (matching heroui plugin)
+      for (const [colorKey, colorValue] of Object.entries(flatColors)) {
+        if (!colorValue) continue;
+
+        const value = toHslString(colorValue as string);
+
+        if (value) {
+          const varName = generateCSSVariableName(prefix, colorKey);
+
+          cssVars.push(`  ${varName}: ${value};`);
+        }
+      }
+    }
+
+    // Process theme-specific layout (overrides global layout)
+    if (themeConfig?.layout) {
+      const themeLayoutVars = processLayoutTheme(themeConfig.layout, prefix);
+
+      cssVars.push(...themeLayoutVars);
+    } else if (globalLayoutVars.length > 0) {
+      // Apply global layout if no theme-specific layout
+      cssVars.push(...globalLayoutVars);
+    }
+
+    if (cssVars.length > 0) {
+      // Scope CSS variables to the element with the given ID when class matches
+      // Each TomoUIProvider instance has its own scoped div with class attribute
+      const selector = scopeId ? `${scopeSelector}[class="${themeName}"]` : `[class="${themeName}"]`;
+
+      cssBlocks.push(`${selector} {${cssVars.join("")}}`);
+    }
+  }
+
+  // If no themes but global layout exists, add it to :root or scoped element
+  if (cssBlocks.length === 0 && globalLayoutVars.length > 0) {
+    const rootSelector = scopeId ? scopeSelector : ":root";
+
+    cssBlocks.push(`${rootSelector} {${globalLayoutVars.join("")}}`);
+  }
+
+  return cssBlocks.join("\n");
+}
+
+/**
+ * Generate a color scale from a base color
+ * @param baseColor - The base color to generate the color scale from
+ * @returns A record of color scale values
+ *
+ * @example
+ * const colorScale = generateColorScale("#000000");
+ * // Returns: { "50": "#000000", "100": "#000000", "200": "#000000", "300": "#000000", "400": "#000000", "500": "#000000", "600": "#000000", "700": "#000000", "800": "#000000", "900": "#000000", "950": "#000000" }
+ */
+export function generateColorScale(baseColor: string) {
+  const base = Color(baseColor);
+
+  const steps = {
+    "50": 0.45,
+    "100": 0.35,
+    "200": 0.25,
+    "300": 0.15,
+    "400": 0.07,
+    "500": 0,
+    "600": -0.07,
+    "700": -0.15,
+    "800": -0.25,
+    "900": -0.35,
+    "950": -0.45,
+  };
+
+  const scale: Record<string, string> = {};
+
+  Object.keys(steps).forEach((key) => {
+    const amount = steps[key as keyof typeof steps];
+
+    scale[key] = amount >= 0 ? base.lighten(amount).hex() : base.darken(Math.abs(amount)).hex();
+  });
+
+  return scale;
+}

package/src/theme-context.tsx

@@ -0,0 +1,47 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+type Theme = string;
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeContextProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  forcedTheme?: Theme;
+  themes?: string[];
+}
+
+export function ThemeContextProvider({ children, defaultTheme = "light", forcedTheme }: ThemeContextProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(forcedTheme || defaultTheme);
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      if (!forcedTheme) {
+        setThemeState(newTheme);
+      }
+    },
+    [forcedTheme],
+  );
+
+  const value: ThemeContextType = {
+    theme: forcedTheme || theme,
+    setTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeContextProvider");
+  }
+
+  return context;
+}