feat: themes (#1135)

apps/www/scripts/build-registry.ts

@@ -190,18 +190,12 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
- 
-    --muted: <%- colors.light["muted"] %>;
-    --muted-foreground: <%- colors.light["muted-foreground"] %>;
- 
-    --popover: <%- colors.light["popover"] %>;
-    --popover-foreground: <%- colors.light["popover-foreground"] %>;
- 
+
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
  
-    --border: <%- colors.light["border"] %>;
-    --input: <%- colors.light["input"] %>;
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
  
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
@@ -209,12 +203,17 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
  
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
  
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
- 
+
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
     --ring: <%- colors.light["ring"] %>;
  
     --radius: 0.5rem;
@@ -224,17 +223,11 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
  
-    --muted: <%- colors.dark["muted"] %>;
-    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
- 
-    --popover: <%- colors.dark["popover"] %>;
-    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
- 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
  
-    --border: <%- colors.dark["border"] %>;
-    --input: <%- colors.dark["input"] %>;
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
  
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
@@ -242,12 +235,17 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
  
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
  
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
  
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
     --ring: <%- colors.dark["ring"] %>;
   }
 }
@@ -261,7 +259,7 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   }
 }`
 
-for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone", "lime"]) {
+for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
   const base: Record<string, any> = {
     inlineColors: {},
     cssVars: {},
@@ -334,7 +332,7 @@ export const THEME_STYLES_WITH_VARIABLES = `
  
     --ring: <%- colors.light["ring"] %>;
  
-    --radius: 0.5rem;
+    --radius: <%- colors.light["radius"] %>;
   }
  
   .dark .theme-<%- theme %> {
@@ -384,4 +382,49 @@ fs.writeFileSync(
   "utf8"
 )
 
+// ----------------------------------------------------------------------------
+// Build registry/themes/[theme].json
+// ----------------------------------------------------------------------------
+rimraf.sync(path.join(REGISTRY_PATH, "themes"))
+for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
+  const payload = {
+    name: baseColor,
+    label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
+    cssVars: {},
+  }
+
+  for (const [mode, values] of Object.entries(colorMapping)) {
+    payload["cssVars"][mode] = {}
+    for (const [key, value] of Object.entries(values)) {
+      if (typeof value === "string") {
+        const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`)
+        payload["cssVars"][mode][key] = resolvedColor
+
+        const [resolvedBase, scale] = resolvedColor.split("-")
+        const color = scale
+          ? colorsData[resolvedBase].find(
+              (item) => item.scale === parseInt(scale)
+            )
+          : colorsData[resolvedBase]
+        if (color) {
+          payload["cssVars"][mode][key] = color.hslChannel
+        }
+      }
+    }
+  }
+
+  const targetPath = path.join(REGISTRY_PATH, "themes")
+
+  // Create directory if it doesn't exist.
+  if (!fs.existsSync(targetPath)) {
+    fs.mkdirSync(targetPath, { recursive: true })
+  }
+
+  fs.writeFileSync(
+    path.join(targetPath, `${payload.name}.json`),
+    JSON.stringify(payload, null, 2),
+    "utf8"
+  )
+}
+
 console.log("✅ Done!")