gradient-forge 1.0.5 → 1.0.7

package/cli/index.mjs

@@ -164,23 +164,61 @@ const promptSelect = async (title, items, defaultIndex = 0) => {
   });
 };
 
-// Generate CSS
+// Generate CSS - with !important to override tailwind defaults
 const generateCSS = (themeId, mode) => {
   const tokens = getThemeTokens(themeId);
-  return `/* Gradient Forge Theme */
-.${themeId} {
+  const isDark = mode === "dark";
+  
+  return `/* Gradient Forge Theme - ${mode} */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --font-sans: 'Inter', sans-serif;
+}
+
+/* Theme CSS Variables */
+.${themeId},
+.${themeId} body {
 ${Object.entries(tokens).map(([k, v]) => `  ${k}: ${v};`).join("\n")}
 }
 
-body {
-  background: hsl(${tokens["--background"]});
-  color: hsl(${tokens["--foreground"]});
+/* Force theme override with !important */
+.${themeId} {
+  --background: ${tokens["--background"]} !important;
+  --foreground: ${tokens["--foreground"]} !important;
+  --primary: ${tokens["--primary"]} !important;
+  --primary-foreground: ${tokens["--primary-foreground"]} !important;
+  --secondary: ${tokens["--secondary"]} !important;
+  --secondary-foreground: ${tokens["--secondary-foreground"]} !important;
+  --muted: ${tokens["--muted"]} !important;
+  --muted-foreground: ${tokens["--muted-foreground"]} !important;
+  --accent: ${tokens["--accent"]} !important;
+  --accent-foreground: ${tokens["--accent-foreground"]} !important;
+  --destructive: ${tokens["--destructive"]} !important;
+  --destructive-foreground: ${tokens["--destructive-foreground"]} !important;
+  --border: ${tokens["--border"]} !important;
+  --card: ${tokens["--card"]} !important;
+  --card-foreground: ${tokens["--card-foreground"]} !important;
+  --popover: ${tokens["--popover"]} !important;
+  --popover-foreground: ${tokens["--popover-foreground"]} !important;
+  --input: ${tokens["--input"]} !important;
+  --ring: ${tokens["--ring"]} !important;
+}
+
+/* Apply gradient background */
+.${themeId} body {
+  background: linear-gradient(160deg, hsl(${tokens["--background"]}) 0%, hsl(${tokens["--background"]}) 50%, hsl(${tokens["--background"]}) 100%);
+  background-attachment: fixed;
 }
 
-.bg-card, .bg-popover, .bg-sidebar {
-  background-color: hsl(${tokens["--card"]} / 0.34);
+/* Surface layers with glassmorphism */
+.${themeId} .bg-card,
+.${themeId} .bg-popover,
+.${themeId} .bg-sidebar {
+  background-color: hsl(${tokens["--card"]} / 0.4) !important;
   background-image: linear-gradient(${tokens["--app-surface-tint"]}, ${tokens["--app-surface-tint"]});
   backdrop-filter: blur(16px);
+  border: 1px solid hsl(${tokens["--border"]} / 0.3);
 }
 `;
 };
@@ -268,12 +306,14 @@ const setupNextJs = (projectRoot, themeId, mode) => {
   fs.writeFileSync(contextPath, generateContext(themeId, mode));
   logSuccess(`Created: components/theme/theme-context.tsx`);
   
-  // Inject into globals.css
+  // Inject into globals.css - add AFTER tailwind imports so theme overrides tailwind
   const globalsPath = path.join(appDir, "globals.css");
   if (fs.existsSync(globalsPath)) {
-    const content = fs.readFileSync(globalsPath, "utf8");
+    let content = fs.readFileSync(globalsPath, "utf8");
     if (!content.includes("gradient-forge.css")) {
-      fs.writeFileSync(globalsPath, `@import "./gradient-forge.css";\n${content}`);
+      // Add at the end after all tailwind imports
+      content = content + '\n@import "./gradient-forge.css";';
+      fs.writeFileSync(globalsPath, content);
       logSuccess(`Injected into: app/globals.css`);
     }
   }
@@ -290,12 +330,22 @@ const setupNextJs = (projectRoot, themeId, mode) => {
         content = importStmt + "\n" + content;
       }
       
-      // Wrap body - ensure proper spacing
-      content = content.replace(/(<body[^>]*>)/, "$1\n<ThemeProvider>");
-      content = content.replace(/(<\/body>)/, "</ThemeProvider>\n$1");
+      // Wrap body - keep existing className and add ThemeProvider around children
+      content = content.replace(/(<body[^>]*>)([\s\S]*?)(<\/body>)/, 
+        '$1<ThemeProvider>$2</ThemeProvider>$3');
       
-      // Add classes to html - preserve existing attributes
-      content = content.replace(/<html/, `<html class="${mode} ${themeId}" data-theme="${themeId}" data-color-mode="${mode}"`);
+      // Add theme classes to html - preserve existing className and add theme classes
+      if (content.includes('className=')) {
+        // For JSX className={expression}, add theme classes to the expression
+        content = content.replace(
+          /(className=\{)([^}]+)(\})/,
+          `$1$2 + " ${mode} ${themeId}"$3`
+        );
+      } else {
+        // For plain html or no className, add className attribute
+        content = content.replace(/<html/, 
+          `<html className="${mode} ${themeId}" data-theme="${themeId}" data-color-mode="${mode}"`);
+      }
       
       fs.writeFileSync(layoutPath, content);
       logSuccess(`Updated: app/layout.tsx`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gradient-forge",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A production-ready gradient theming framework for shadcn/ui with CLI support",
   "type": "module",
   "bin": {