gradient-forge 1.0.4 → 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);
 }
 `;
 };
@@ -188,18 +226,26 @@ body {
 // Generate theme context
 const generateContext = (themeId, mode) => {
   return `"use client";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 
 export type ThemeId = string;
 export type ColorMode = string;
 
+interface ThemeContextType {
+  themeId: string;
+  colorMode: string;
+  setThemeId: (id: string) => void;
+  setColorMode: (mode: string) => void;
+  themes: { id: string; label: string }[];
+}
+
 const allThemes = [
 ${themes.map(t => `  { id: "${t.id}", label: "${t.label}" }`).join(",\n")}
 ];
 
-const ThemeContext: any = createContext(null);
+const ThemeContext = createContext<ThemeContextType | null>(null);
 
-export const ThemeProvider = ({ children }: { children: any }) => {
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
   const [themeId, setThemeId] = useState("${themeId}");
   const [colorMode, setColorMode] = useState("${mode}");
 
@@ -231,8 +277,8 @@ export function ThemeSwitcher() {
   const { themeId, colorMode, setThemeId, setColorMode, themes } = useTheme();
   return (
     <div style={{ display: "flex", gap: "8px", padding: "8px" }}>
-      <select value={themeId} onChange={(e: any) => setThemeId(e.target.value)} style={{ padding: "4px" }}>
-        {themes.map((t: any) => <option key={t.id} value={t.id}>{t.label}</option>)}
+      <select value={themeId} onChange={(e) => setThemeId(e.target.value)} style={{ padding: "4px" }}>
+        {themes.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
       </select>
       <button onClick={() => setColorMode(colorMode === "dark" ? "light" : "dark")} style={{ padding: "4px 8px" }}>
         {colorMode === "dark" ? "🌙" : "☀️"}
@@ -260,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`);
     }
   }
@@ -276,18 +324,28 @@ const setupNextJs = (projectRoot, themeId, mode) => {
     let content = fs.readFileSync(layoutPath, "utf8");
     
     if (!content.includes("ThemeProvider")) {
-      // Add import
-      const importStmt = `import { ThemeProvider } from "./components/theme/theme-context";`;
+      // Use @/ import path for Next.js
+      const importStmt = `import { ThemeProvider } from "@/components/theme/theme-context";`;
       if (!content.includes(importStmt)) {
         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.4",
+  "version": "1.0.7",
   "description": "A production-ready gradient theming framework for shadcn/ui with CLI support",
   "type": "module",
   "bin": {