Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/utils/theme/cssConfigExporter.ts

@@ -0,0 +1,100 @@
+import { ThemeConfig, ThemeColors } from "./ThemeConfig";
+
+export function exportConfigToCss(config: ThemeConfig): string {
+  let css = "";
+
+  // Export light mode colors
+  if (config.colors && Object.keys(config.colors).length > 0) {
+    css += ":root {\n";
+
+    // Add font family if present
+    if (config.fontFamily) {
+      css += `  --font-sans: ${config.fontFamily};\n`;
+    }
+    // Add radius if present
+    if (config.radius) {
+      css += `  --radius: ${config.radius};\n`;
+    }
+
+    css += exportColors(config.colors);
+
+    css += "}\n";
+  }
+
+  // Export dark mode colors
+  if (config.darkColors && Object.keys(config.darkColors).length > 0) {
+    if (css) css += "\n";
+    css += ".dark {\n";
+
+    if (config.fontFamily) {
+      css += `  --font-sans: ${config.fontFamily};\n`;
+    }
+
+    // Add radius if different from light mode
+    if (config.radius && !config.colors) {
+      css += `  --radius: ${config.radius};\n`;
+    }
+
+    css += exportColors(config.darkColors);
+
+    css += "}\n";
+  }
+
+  // If no colors but has other config, export to :root
+  if (!css && (config.radius || config.fontFamily)) {
+    css += ":root {\n";
+    if (config.fontFamily) {
+      css += `  --font-sans: ${config.fontFamily};\n`;
+    }
+    if (config.radius) {
+      css += `  --radius: ${config.radius};\n`;
+    }
+    css += "}\n";
+  }
+
+  return css || "/* No custom theme configuration */";
+}
+
+function exportColors(colors: ThemeColors): string {
+  let css = "";
+
+  const colorMap: Record<keyof ThemeColors, string> = {
+    background: "--background",
+    foreground: "--foreground",
+    card: "--card",
+    cardForeground: "--card-foreground",
+    popover: "--popover",
+    popoverForeground: "--popover-foreground",
+    primary: "--primary",
+    primaryForeground: "--primary-foreground",
+    secondary: "--secondary",
+    secondaryForeground: "--secondary-foreground",
+    muted: "--muted",
+    mutedForeground: "--muted-foreground",
+    accent: "--accent",
+    accentForeground: "--accent-foreground",
+    destructive: "--destructive",
+    destructiveForeground: "--destructive-foreground",
+    border: "--border",
+    input: "--input",
+    ring: "--ring",
+    sidebar: "--sidebar",
+    sidebarBackground: "--sidebar-background",
+    sidebarForeground: "--sidebar-foreground",
+    sidebarPrimary: "--sidebar-primary",
+    sidebarPrimaryForeground: "--sidebar-primary-foreground",
+    sidebarAccent: "--sidebar-accent",
+    sidebarAccentForeground: "--sidebar-accent-foreground",
+    sidebarBorder: "--sidebar-border",
+    sidebarRing: "--sidebar-ring",
+  };
+
+  for (const [key, cssVar] of Object.entries(colorMap)) {
+    const value = colors[key as keyof ThemeColors];
+    if (value) {
+      css += `  ${cssVar}: ${value};\n`;
+    }
+  }
+
+  return css;
+}