@gilav21/shadcn-angular 0.0.5 → 0.0.7

package/dist/commands/add.js

@@ -55,7 +55,7 @@ export async function add(components, options) {
     const config = await getConfig(cwd);
     if (!config) {
         console.log(chalk.red('Error: components.json not found.'));
-        console.log(chalk.dim('Run `npx shadcn-angular init` first.'));
+        console.log(chalk.dim('Run `npx @gilav21/shadcn-angular init` first.'));
         process.exit(1);
     }
     // Get components to add

package/dist/commands/init.js

@@ -75,7 +75,7 @@ export async function init(options) {
             {
                 type: 'text',
                 name: 'globalCss',
-                message: 'Where is your global CSS file?',
+                message: 'Where is your global styles file?',
                 initial: 'src/styles.scss',
             },
         ]);
@@ -111,14 +111,23 @@ export async function init(options) {
         await fs.ensureDir(utilsDir);
         await fs.writeFile(path.join(cwd, utilsPathResolved + '.ts'), getUtilsTemplate());
         spinner.text = 'Created utils.ts';
-        // Create/update styles file
-        const stylesPath = path.join(cwd, config.tailwind.css);
-        const existingStyles = await fs.pathExists(stylesPath)
-            ? await fs.readFile(stylesPath, 'utf-8')
+        // Create tailwind.css file in the same directory as the global styles
+        const stylesDir = path.dirname(path.join(cwd, config.tailwind.css));
+        const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
+        // Write the tailwind.css file with all Tailwind directives
+        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor));
+        spinner.text = 'Created tailwind.css';
+        // Add import to the user's global styles file if not already present
+        const userStylesPath = path.join(cwd, config.tailwind.css);
+        let userStyles = await fs.pathExists(userStylesPath)
+            ? await fs.readFile(userStylesPath, 'utf-8')
             : '';
-        if (!existingStyles.includes('--background:')) {
-            await fs.writeFile(stylesPath, getStylesTemplate(config.tailwind.baseColor) + '\n' + existingStyles);
-            spinner.text = 'Updated styles with theme variables';
+        const tailwindImport = '@import "./tailwind.css";';
+        if (!userStyles.includes('tailwind.css')) {
+            // Add import at the top of the file
+            userStyles = tailwindImport + '\n\n' + userStyles;
+            await fs.writeFile(userStylesPath, userStyles);
+            spinner.text = 'Added tailwind.css import to styles';
         }
         // Create components/ui directory
         const uiPathResolved = config.aliases.ui.replace('@/', 'src/');
@@ -131,54 +140,26 @@ export async function init(options) {
             'clsx',
             'tailwind-merge',
             'class-variance-authority',
-            '@angular/cdk',
             'lucide-angular',
             'tailwindcss',
             'postcss',
             '@tailwindcss/postcss'
         ];
         await execa('npm', ['install', ...dependencies], { cwd });
-        // Setup PostCSS
+        // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
         spinner.text = 'Configuring PostCSS...';
-        const postcssConfigPath = path.join(cwd, 'postcss.config.js');
-        const postcssConfigMjsPath = path.join(cwd, 'postcss.config.mjs');
-        if (await fs.pathExists(postcssConfigMjsPath)) {
-            // Check mjs config
-            const content = await fs.readFile(postcssConfigMjsPath, 'utf-8');
-            if (!content.includes('@tailwindcss/postcss')) {
-                // Very basic append attempt for mjs, safest is to warn or skip complex types
-                // But user asked to try.
-                // If it's a simple export default { plugins: {} }, we can try to inject.
-                // For now, let's just log a warning if we can't safely inject
-                console.log(chalk.yellow('\nComputed postcss.config.mjs found. Please manually add "@tailwindcss/postcss" to your plugins.'));
-            }
-        }
-        else if (await fs.pathExists(postcssConfigPath)) {
-            let content = await fs.readFile(postcssConfigPath, 'utf-8');
-            if (!content.includes('@tailwindcss/postcss')) {
-                // Try to inject into plugins object
-                if (content.includes('plugins: {')) {
-                    content = content.replace('plugins: {', 'plugins: {\n    \'@tailwindcss/postcss\': {},');
-                    await fs.writeFile(postcssConfigPath, content);
-                }
-                else {
-                    console.log(chalk.yellow('\nExisting postcss.config.js found but structure not recognized. Please manually add "@tailwindcss/postcss" to your plugins.'));
+        const postcssrcPath = path.join(cwd, '.postcssrc.json');
+        if (!await fs.pathExists(postcssrcPath)) {
+            const configContent = {
+                plugins: {
+                    '@tailwindcss/postcss': {}
                 }
-            }
-        }
-        else {
-            // Create new config
-            const configContent = `module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
-`;
-            await fs.writeFile(postcssConfigPath, configContent);
+            };
+            await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
         spinner.succeed(chalk.green('Project initialized successfully!'));
         console.log('\n' + chalk.bold('Next steps:'));
-        console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx shadcn-angular add button'));
+        console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx @gilav21/shadcn-angular add button'));
         console.log(chalk.dim('  2. Import and use in your templates'));
         console.log(chalk.dim('  3. Update your ') + chalk.bold('tsconfig.json') + chalk.dim(' paths:'));
         console.log(chalk.dim('    "compilerOptions": {'));

package/dist/index.js

@@ -6,7 +6,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.1');
+    .version('0.0.6');
 program
     .command('init')
     .description('Initialize shadcn-angular in your project')

package/dist/registry/index.js

@@ -38,10 +38,12 @@ export const registry = {
     'button-group': {
         name: 'button-group',
         files: ['button-group.component.ts'],
+        dependencies: ['button']
     },
     calendar: {
         name: 'calendar',
-        files: ['calendar.component.ts'],
+        files: ['calendar.component.ts', 'calendar-locales.ts'],
+        dependencies: ['button', 'select'],
     },
     card: {
         name: 'card',
@@ -213,4 +215,9 @@ export const registry = {
         name: 'tooltip',
         files: ['tooltip.component.ts'],
     },
+    'speed-dial': {
+        name: 'speed-dial',
+        files: ['speed-dial.component.ts'],
+        dependencies: ['button']
+    },
 };

package/dist/templates/styles.js

@@ -219,6 +219,10 @@ export function getStylesTemplate(baseColor = 'neutral') {
     const colors = baseColors[baseColor];
     return `@import "tailwindcss";
 
+/* Tell Tailwind v4 where to scan for classes */
+@source "../src/**/*.ts";
+@source "../src/**/*.html";
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -257,7 +261,7 @@ ${generateCssVars(colors.dark)}
 }
 
 @theme inline {
-  --font-sans: system-ui, sans-serif;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -300,13 +304,16 @@ ${generateCssVars(colors.dark)}
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    border-color: var(--border);
+    outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
   }
   body {
-    @apply font-sans bg-background text-foreground;
+    font-family: var(--font-sans);
+    background-color: var(--background);
+    color: var(--foreground);
   }
   html {
-    @apply font-sans;
+    font-family: var(--font-sans);
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "description": "CLI for adding shadcn-angular components to your project",
     "bin": {
         "shadcn-angular": "./dist/index.js"
@@ -32,4 +32,4 @@
         "@types/prompts": "^2.4.9",
         "typescript": "^5.5.0"
     }
-}
+}

package/src/commands/add.ts

@@ -70,7 +70,7 @@ export async function add(components: string[], options: AddOptions) {
     const config = await getConfig(cwd);
     if (!config) {
         console.log(chalk.red('Error: components.json not found.'));
-        console.log(chalk.dim('Run `npx shadcn-angular init` first.'));
+        console.log(chalk.dim('Run `npx @gilav21/shadcn-angular init` first.'));
         process.exit(1);
     }
 

package/src/commands/init.ts

@@ -85,7 +85,7 @@ export async function init(options: InitOptions) {
             {
                 type: 'text',
                 name: 'globalCss',
-                message: 'Where is your global CSS file?',
+                message: 'Where is your global styles file?',
                 initial: 'src/styles.scss',
             },
         ]);
@@ -128,15 +128,26 @@ export async function init(options: InitOptions) {
         await fs.writeFile(path.join(cwd, utilsPathResolved + '.ts'), getUtilsTemplate());
         spinner.text = 'Created utils.ts';
 
-        // Create/update styles file
-        const stylesPath = path.join(cwd, config.tailwind.css);
-        const existingStyles = await fs.pathExists(stylesPath)
-            ? await fs.readFile(stylesPath, 'utf-8')
+        // Create tailwind.css file in the same directory as the global styles
+        const stylesDir = path.dirname(path.join(cwd, config.tailwind.css));
+        const tailwindCssPath = path.join(stylesDir, 'tailwind.css');
+
+        // Write the tailwind.css file with all Tailwind directives
+        await fs.writeFile(tailwindCssPath, getStylesTemplate(config.tailwind.baseColor));
+        spinner.text = 'Created tailwind.css';
+
+        // Add import to the user's global styles file if not already present
+        const userStylesPath = path.join(cwd, config.tailwind.css);
+        let userStyles = await fs.pathExists(userStylesPath)
+            ? await fs.readFile(userStylesPath, 'utf-8')
             : '';
 
-        if (!existingStyles.includes('--background:')) {
-            await fs.writeFile(stylesPath, getStylesTemplate(config.tailwind.baseColor) + '\n' + existingStyles);
-            spinner.text = 'Updated styles with theme variables';
+        const tailwindImport = '@import "./tailwind.css";';
+        if (!userStyles.includes('tailwind.css')) {
+            // Add import at the top of the file
+            userStyles = tailwindImport + '\n\n' + userStyles;
+            await fs.writeFile(userStylesPath, userStyles);
+            spinner.text = 'Added tailwind.css import to styles';
         }
 
         // Create components/ui directory
@@ -151,7 +162,6 @@ export async function init(options: InitOptions) {
             'clsx',
             'tailwind-merge',
             'class-variance-authority',
-            '@angular/cdk',
             'lucide-angular',
             'tailwindcss',
             'postcss',
@@ -159,47 +169,23 @@ export async function init(options: InitOptions) {
         ];
         await execa('npm', ['install', ...dependencies], { cwd });
 
-        // Setup PostCSS
+        // Setup PostCSS - create .postcssrc.json which is the preferred format for Angular
         spinner.text = 'Configuring PostCSS...';
-        const postcssConfigPath = path.join(cwd, 'postcss.config.js');
-        const postcssConfigMjsPath = path.join(cwd, 'postcss.config.mjs');
-
-        if (await fs.pathExists(postcssConfigMjsPath)) {
-            // Check mjs config
-            const content = await fs.readFile(postcssConfigMjsPath, 'utf-8');
-            if (!content.includes('@tailwindcss/postcss')) {
-                // Very basic append attempt for mjs, safest is to warn or skip complex types
-                // But user asked to try.
-                // If it's a simple export default { plugins: {} }, we can try to inject.
-                // For now, let's just log a warning if we can't safely inject
-                console.log(chalk.yellow('\nComputed postcss.config.mjs found. Please manually add "@tailwindcss/postcss" to your plugins.'));
-            }
-        } else if (await fs.pathExists(postcssConfigPath)) {
-            let content = await fs.readFile(postcssConfigPath, 'utf-8');
-            if (!content.includes('@tailwindcss/postcss')) {
-                // Try to inject into plugins object
-                if (content.includes('plugins: {')) {
-                    content = content.replace('plugins: {', 'plugins: {\n    \'@tailwindcss/postcss\': {},');
-                    await fs.writeFile(postcssConfigPath, content);
-                } else {
-                    console.log(chalk.yellow('\nExisting postcss.config.js found but structure not recognized. Please manually add "@tailwindcss/postcss" to your plugins.'));
+        const postcssrcPath = path.join(cwd, '.postcssrc.json');
+
+        if (!await fs.pathExists(postcssrcPath)) {
+            const configContent = {
+                plugins: {
+                    '@tailwindcss/postcss': {}
                 }
-            }
-        } else {
-            // Create new config
-            const configContent = `module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
-`;
-            await fs.writeFile(postcssConfigPath, configContent);
+            };
+            await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
 
         spinner.succeed(chalk.green('Project initialized successfully!'));
 
         console.log('\n' + chalk.bold('Next steps:'));
-        console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx shadcn-angular add button'));
+        console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx @gilav21/shadcn-angular add button'));
         console.log(chalk.dim('  2. Import and use in your templates'));
         console.log(chalk.dim('  3. Update your ') + chalk.bold('tsconfig.json') + chalk.dim(' paths:'));
         console.log(chalk.dim('    "compilerOptions": {'));

package/src/index.ts

@@ -8,7 +8,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.1');
+    .version('0.0.6');
 
 program
     .command('init')

package/src/registry/index.ts

@@ -47,10 +47,12 @@ export const registry: Record<string, ComponentDefinition> = {
   'button-group': {
     name: 'button-group',
     files: ['button-group.component.ts'],
+    dependencies: ['button']
   },
   calendar: {
     name: 'calendar',
-    files: ['calendar.component.ts'],
+    files: ['calendar.component.ts', 'calendar-locales.ts'],
+    dependencies: ['button', 'select'],
   },
   card: {
     name: 'card',
@@ -222,4 +224,9 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'tooltip',
     files: ['tooltip.component.ts'],
   },
+  'speed-dial': {
+    name: 'speed-dial',
+    files: ['speed-dial.component.ts'],
+    dependencies: ['button']
+  },
 };

package/src/templates/styles.ts

@@ -1,228 +1,232 @@
 type BaseColor = 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
 
 const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Record<string, string> }> = {
-    neutral: {
-        light: {
-            '--background': 'oklch(1 0 0)',
-            '--foreground': 'oklch(0.145 0 0)',
-            '--card': 'oklch(1 0 0)',
-            '--card-foreground': 'oklch(0.145 0 0)',
-            '--popover': 'oklch(1 0 0)',
-            '--popover-foreground': 'oklch(0.145 0 0)',
-            '--primary': 'oklch(0.205 0 0)',
-            '--primary-foreground': 'oklch(0.985 0 0)',
-            '--secondary': 'oklch(0.97 0 0)',
-            '--secondary-foreground': 'oklch(0.205 0 0)',
-            '--muted': 'oklch(0.97 0 0)',
-            '--muted-foreground': 'oklch(0.556 0 0)',
-            '--accent': 'oklch(0.97 0 0)',
-            '--accent-foreground': 'oklch(0.205 0 0)',
-            '--destructive': 'oklch(0.577 0.245 27.325)',
-            '--border': 'oklch(0.922 0 0)',
-            '--input': 'oklch(0.922 0 0)',
-            '--ring': 'oklch(0.708 0 0)',
-        },
-        dark: {
-            '--background': 'oklch(0.145 0 0)',
-            '--foreground': 'oklch(0.985 0 0)',
-            '--card': 'oklch(0.205 0 0)',
-            '--card-foreground': 'oklch(0.985 0 0)',
-            '--popover': 'oklch(0.269 0 0)',
-            '--popover-foreground': 'oklch(0.985 0 0)',
-            '--primary': 'oklch(0.922 0 0)',
-            '--primary-foreground': 'oklch(0.205 0 0)',
-            '--secondary': 'oklch(0.269 0 0)',
-            '--secondary-foreground': 'oklch(0.985 0 0)',
-            '--muted': 'oklch(0.269 0 0)',
-            '--muted-foreground': 'oklch(0.708 0 0)',
-            '--accent': 'oklch(0.371 0 0)',
-            '--accent-foreground': 'oklch(0.985 0 0)',
-            '--destructive': 'oklch(0.704 0.191 22.216)',
-            '--border': 'oklch(1 0 0 / 10%)',
-            '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.556 0 0)',
-        },
+  neutral: {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.145 0 0)',
+      '--card': 'oklch(1 0 0)',
+      '--card-foreground': 'oklch(0.145 0 0)',
+      '--popover': 'oklch(1 0 0)',
+      '--popover-foreground': 'oklch(0.145 0 0)',
+      '--primary': 'oklch(0.205 0 0)',
+      '--primary-foreground': 'oklch(0.985 0 0)',
+      '--secondary': 'oklch(0.97 0 0)',
+      '--secondary-foreground': 'oklch(0.205 0 0)',
+      '--muted': 'oklch(0.97 0 0)',
+      '--muted-foreground': 'oklch(0.556 0 0)',
+      '--accent': 'oklch(0.97 0 0)',
+      '--accent-foreground': 'oklch(0.205 0 0)',
+      '--destructive': 'oklch(0.577 0.245 27.325)',
+      '--border': 'oklch(0.922 0 0)',
+      '--input': 'oklch(0.922 0 0)',
+      '--ring': 'oklch(0.708 0 0)',
     },
-    slate: {
-        light: {
-            '--background': 'oklch(1 0 0)',
-            '--foreground': 'oklch(0.129 0.042 264.695)',
-            '--card': 'oklch(1 0 0)',
-            '--card-foreground': 'oklch(0.129 0.042 264.695)',
-            '--popover': 'oklch(1 0 0)',
-            '--popover-foreground': 'oklch(0.129 0.042 264.695)',
-            '--primary': 'oklch(0.208 0.042 265.755)',
-            '--primary-foreground': 'oklch(0.984 0.003 247.858)',
-            '--secondary': 'oklch(0.968 0.007 247.896)',
-            '--secondary-foreground': 'oklch(0.208 0.042 265.755)',
-            '--muted': 'oklch(0.968 0.007 247.896)',
-            '--muted-foreground': 'oklch(0.554 0.046 257.417)',
-            '--accent': 'oklch(0.968 0.007 247.896)',
-            '--accent-foreground': 'oklch(0.208 0.042 265.755)',
-            '--destructive': 'oklch(0.577 0.245 27.325)',
-            '--border': 'oklch(0.929 0.013 255.508)',
-            '--input': 'oklch(0.929 0.013 255.508)',
-            '--ring': 'oklch(0.704 0.04 256.788)',
-        },
-        dark: {
-            '--background': 'oklch(0.129 0.042 264.695)',
-            '--foreground': 'oklch(0.984 0.003 247.858)',
-            '--card': 'oklch(0.208 0.042 265.755)',
-            '--card-foreground': 'oklch(0.984 0.003 247.858)',
-            '--popover': 'oklch(0.269 0.04 260.031)',
-            '--popover-foreground': 'oklch(0.984 0.003 247.858)',
-            '--primary': 'oklch(0.929 0.013 255.508)',
-            '--primary-foreground': 'oklch(0.208 0.042 265.755)',
-            '--secondary': 'oklch(0.269 0.04 260.031)',
-            '--secondary-foreground': 'oklch(0.984 0.003 247.858)',
-            '--muted': 'oklch(0.269 0.04 260.031)',
-            '--muted-foreground': 'oklch(0.704 0.04 256.788)',
-            '--accent': 'oklch(0.372 0.044 257.287)',
-            '--accent-foreground': 'oklch(0.984 0.003 247.858)',
-            '--destructive': 'oklch(0.704 0.191 22.216)',
-            '--border': 'oklch(1 0 0 / 10%)',
-            '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.554 0.046 257.417)',
-        },
+    dark: {
+      '--background': 'oklch(0.145 0 0)',
+      '--foreground': 'oklch(0.985 0 0)',
+      '--card': 'oklch(0.205 0 0)',
+      '--card-foreground': 'oklch(0.985 0 0)',
+      '--popover': 'oklch(0.269 0 0)',
+      '--popover-foreground': 'oklch(0.985 0 0)',
+      '--primary': 'oklch(0.922 0 0)',
+      '--primary-foreground': 'oklch(0.205 0 0)',
+      '--secondary': 'oklch(0.269 0 0)',
+      '--secondary-foreground': 'oklch(0.985 0 0)',
+      '--muted': 'oklch(0.269 0 0)',
+      '--muted-foreground': 'oklch(0.708 0 0)',
+      '--accent': 'oklch(0.371 0 0)',
+      '--accent-foreground': 'oklch(0.985 0 0)',
+      '--destructive': 'oklch(0.704 0.191 22.216)',
+      '--border': 'oklch(1 0 0 / 10%)',
+      '--input': 'oklch(1 0 0 / 15%)',
+      '--ring': 'oklch(0.556 0 0)',
     },
-    stone: {
-        light: {
-            '--background': 'oklch(1 0 0)',
-            '--foreground': 'oklch(0.147 0.004 49.25)',
-            '--card': 'oklch(1 0 0)',
-            '--card-foreground': 'oklch(0.147 0.004 49.25)',
-            '--popover': 'oklch(1 0 0)',
-            '--popover-foreground': 'oklch(0.147 0.004 49.25)',
-            '--primary': 'oklch(0.216 0.006 56.043)',
-            '--primary-foreground': 'oklch(0.985 0.001 106.423)',
-            '--secondary': 'oklch(0.97 0.001 106.424)',
-            '--secondary-foreground': 'oklch(0.216 0.006 56.043)',
-            '--muted': 'oklch(0.97 0.001 106.424)',
-            '--muted-foreground': 'oklch(0.553 0.013 58.071)',
-            '--accent': 'oklch(0.97 0.001 106.424)',
-            '--accent-foreground': 'oklch(0.216 0.006 56.043)',
-            '--destructive': 'oklch(0.577 0.245 27.325)',
-            '--border': 'oklch(0.923 0.003 48.717)',
-            '--input': 'oklch(0.923 0.003 48.717)',
-            '--ring': 'oklch(0.709 0.01 56.259)',
-        },
-        dark: {
-            '--background': 'oklch(0.147 0.004 49.25)',
-            '--foreground': 'oklch(0.985 0.001 106.423)',
-            '--card': 'oklch(0.216 0.006 56.043)',
-            '--card-foreground': 'oklch(0.985 0.001 106.423)',
-            '--popover': 'oklch(0.268 0.007 34.298)',
-            '--popover-foreground': 'oklch(0.985 0.001 106.423)',
-            '--primary': 'oklch(0.923 0.003 48.717)',
-            '--primary-foreground': 'oklch(0.216 0.006 56.043)',
-            '--secondary': 'oklch(0.268 0.007 34.298)',
-            '--secondary-foreground': 'oklch(0.985 0.001 106.423)',
-            '--muted': 'oklch(0.268 0.007 34.298)',
-            '--muted-foreground': 'oklch(0.709 0.01 56.259)',
-            '--accent': 'oklch(0.374 0.01 67.558)',
-            '--accent-foreground': 'oklch(0.985 0.001 106.423)',
-            '--destructive': 'oklch(0.704 0.191 22.216)',
-            '--border': 'oklch(1 0 0 / 10%)',
-            '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.553 0.013 58.071)',
-        },
+  },
+  slate: {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.129 0.042 264.695)',
+      '--card': 'oklch(1 0 0)',
+      '--card-foreground': 'oklch(0.129 0.042 264.695)',
+      '--popover': 'oklch(1 0 0)',
+      '--popover-foreground': 'oklch(0.129 0.042 264.695)',
+      '--primary': 'oklch(0.208 0.042 265.755)',
+      '--primary-foreground': 'oklch(0.984 0.003 247.858)',
+      '--secondary': 'oklch(0.968 0.007 247.896)',
+      '--secondary-foreground': 'oklch(0.208 0.042 265.755)',
+      '--muted': 'oklch(0.968 0.007 247.896)',
+      '--muted-foreground': 'oklch(0.554 0.046 257.417)',
+      '--accent': 'oklch(0.968 0.007 247.896)',
+      '--accent-foreground': 'oklch(0.208 0.042 265.755)',
+      '--destructive': 'oklch(0.577 0.245 27.325)',
+      '--border': 'oklch(0.929 0.013 255.508)',
+      '--input': 'oklch(0.929 0.013 255.508)',
+      '--ring': 'oklch(0.704 0.04 256.788)',
     },
-    gray: {
-        light: {
-            '--background': 'oklch(1 0 0)',
-            '--foreground': 'oklch(0.13 0.028 261.692)',
-            '--card': 'oklch(1 0 0)',
-            '--card-foreground': 'oklch(0.13 0.028 261.692)',
-            '--popover': 'oklch(1 0 0)',
-            '--popover-foreground': 'oklch(0.13 0.028 261.692)',
-            '--primary': 'oklch(0.21 0.028 264.532)',
-            '--primary-foreground': 'oklch(0.985 0.002 247.839)',
-            '--secondary': 'oklch(0.967 0.003 264.542)',
-            '--secondary-foreground': 'oklch(0.21 0.028 264.532)',
-            '--muted': 'oklch(0.967 0.003 264.542)',
-            '--muted-foreground': 'oklch(0.551 0.027 264.364)',
-            '--accent': 'oklch(0.967 0.003 264.542)',
-            '--accent-foreground': 'oklch(0.21 0.028 264.532)',
-            '--destructive': 'oklch(0.577 0.245 27.325)',
-            '--border': 'oklch(0.928 0.006 264.531)',
-            '--input': 'oklch(0.928 0.006 264.531)',
-            '--ring': 'oklch(0.707 0.022 264.436)',
-        },
-        dark: {
-            '--background': 'oklch(0.13 0.028 261.692)',
-            '--foreground': 'oklch(0.985 0.002 247.839)',
-            '--card': 'oklch(0.21 0.028 264.532)',
-            '--card-foreground': 'oklch(0.985 0.002 247.839)',
-            '--popover': 'oklch(0.274 0.029 256.848)',
-            '--popover-foreground': 'oklch(0.985 0.002 247.839)',
-            '--primary': 'oklch(0.928 0.006 264.531)',
-            '--primary-foreground': 'oklch(0.21 0.028 264.532)',
-            '--secondary': 'oklch(0.274 0.029 256.848)',
-            '--secondary-foreground': 'oklch(0.985 0.002 247.839)',
-            '--muted': 'oklch(0.274 0.029 256.848)',
-            '--muted-foreground': 'oklch(0.707 0.022 264.436)',
-            '--accent': 'oklch(0.37 0.029 259.733)',
-            '--accent-foreground': 'oklch(0.985 0.002 247.839)',
-            '--destructive': 'oklch(0.704 0.191 22.216)',
-            '--border': 'oklch(1 0 0 / 10%)',
-            '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.551 0.027 264.364)',
-        },
+    dark: {
+      '--background': 'oklch(0.129 0.042 264.695)',
+      '--foreground': 'oklch(0.984 0.003 247.858)',
+      '--card': 'oklch(0.208 0.042 265.755)',
+      '--card-foreground': 'oklch(0.984 0.003 247.858)',
+      '--popover': 'oklch(0.269 0.04 260.031)',
+      '--popover-foreground': 'oklch(0.984 0.003 247.858)',
+      '--primary': 'oklch(0.929 0.013 255.508)',
+      '--primary-foreground': 'oklch(0.208 0.042 265.755)',
+      '--secondary': 'oklch(0.269 0.04 260.031)',
+      '--secondary-foreground': 'oklch(0.984 0.003 247.858)',
+      '--muted': 'oklch(0.269 0.04 260.031)',
+      '--muted-foreground': 'oklch(0.704 0.04 256.788)',
+      '--accent': 'oklch(0.372 0.044 257.287)',
+      '--accent-foreground': 'oklch(0.984 0.003 247.858)',
+      '--destructive': 'oklch(0.704 0.191 22.216)',
+      '--border': 'oklch(1 0 0 / 10%)',
+      '--input': 'oklch(1 0 0 / 15%)',
+      '--ring': 'oklch(0.554 0.046 257.417)',
     },
-    zinc: {
-        light: {
-            '--background': 'oklch(1 0 0)',
-            '--foreground': 'oklch(0.141 0.005 285.823)',
-            '--card': 'oklch(1 0 0)',
-            '--card-foreground': 'oklch(0.141 0.005 285.823)',
-            '--popover': 'oklch(1 0 0)',
-            '--popover-foreground': 'oklch(0.141 0.005 285.823)',
-            '--primary': 'oklch(0.21 0.006 285.885)',
-            '--primary-foreground': 'oklch(0.985 0 0)',
-            '--secondary': 'oklch(0.967 0.001 286.375)',
-            '--secondary-foreground': 'oklch(0.21 0.006 285.885)',
-            '--muted': 'oklch(0.967 0.001 286.375)',
-            '--muted-foreground': 'oklch(0.552 0.016 285.938)',
-            '--accent': 'oklch(0.967 0.001 286.375)',
-            '--accent-foreground': 'oklch(0.21 0.006 285.885)',
-            '--destructive': 'oklch(0.577 0.245 27.325)',
-            '--border': 'oklch(0.92 0.004 286.32)',
-            '--input': 'oklch(0.92 0.004 286.32)',
-            '--ring': 'oklch(0.705 0.015 286.067)',
-        },
-        dark: {
-            '--background': 'oklch(0.141 0.005 285.823)',
-            '--foreground': 'oklch(0.985 0 0)',
-            '--card': 'oklch(0.21 0.006 285.885)',
-            '--card-foreground': 'oklch(0.985 0 0)',
-            '--popover': 'oklch(0.274 0.006 286.033)',
-            '--popover-foreground': 'oklch(0.985 0 0)',
-            '--primary': 'oklch(0.92 0.004 286.32)',
-            '--primary-foreground': 'oklch(0.21 0.006 285.885)',
-            '--secondary': 'oklch(0.274 0.006 286.033)',
-            '--secondary-foreground': 'oklch(0.985 0 0)',
-            '--muted': 'oklch(0.274 0.006 286.033)',
-            '--muted-foreground': 'oklch(0.705 0.015 286.067)',
-            '--accent': 'oklch(0.37 0.013 285.805)',
-            '--accent-foreground': 'oklch(0.985 0 0)',
-            '--destructive': 'oklch(0.704 0.191 22.216)',
-            '--border': 'oklch(1 0 0 / 10%)',
-            '--input': 'oklch(1 0 0 / 15%)',
-            '--ring': 'oklch(0.552 0.016 285.938)',
-        },
+  },
+  stone: {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.147 0.004 49.25)',
+      '--card': 'oklch(1 0 0)',
+      '--card-foreground': 'oklch(0.147 0.004 49.25)',
+      '--popover': 'oklch(1 0 0)',
+      '--popover-foreground': 'oklch(0.147 0.004 49.25)',
+      '--primary': 'oklch(0.216 0.006 56.043)',
+      '--primary-foreground': 'oklch(0.985 0.001 106.423)',
+      '--secondary': 'oklch(0.97 0.001 106.424)',
+      '--secondary-foreground': 'oklch(0.216 0.006 56.043)',
+      '--muted': 'oklch(0.97 0.001 106.424)',
+      '--muted-foreground': 'oklch(0.553 0.013 58.071)',
+      '--accent': 'oklch(0.97 0.001 106.424)',
+      '--accent-foreground': 'oklch(0.216 0.006 56.043)',
+      '--destructive': 'oklch(0.577 0.245 27.325)',
+      '--border': 'oklch(0.923 0.003 48.717)',
+      '--input': 'oklch(0.923 0.003 48.717)',
+      '--ring': 'oklch(0.709 0.01 56.259)',
     },
+    dark: {
+      '--background': 'oklch(0.147 0.004 49.25)',
+      '--foreground': 'oklch(0.985 0.001 106.423)',
+      '--card': 'oklch(0.216 0.006 56.043)',
+      '--card-foreground': 'oklch(0.985 0.001 106.423)',
+      '--popover': 'oklch(0.268 0.007 34.298)',
+      '--popover-foreground': 'oklch(0.985 0.001 106.423)',
+      '--primary': 'oklch(0.923 0.003 48.717)',
+      '--primary-foreground': 'oklch(0.216 0.006 56.043)',
+      '--secondary': 'oklch(0.268 0.007 34.298)',
+      '--secondary-foreground': 'oklch(0.985 0.001 106.423)',
+      '--muted': 'oklch(0.268 0.007 34.298)',
+      '--muted-foreground': 'oklch(0.709 0.01 56.259)',
+      '--accent': 'oklch(0.374 0.01 67.558)',
+      '--accent-foreground': 'oklch(0.985 0.001 106.423)',
+      '--destructive': 'oklch(0.704 0.191 22.216)',
+      '--border': 'oklch(1 0 0 / 10%)',
+      '--input': 'oklch(1 0 0 / 15%)',
+      '--ring': 'oklch(0.553 0.013 58.071)',
+    },
+  },
+  gray: {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.13 0.028 261.692)',
+      '--card': 'oklch(1 0 0)',
+      '--card-foreground': 'oklch(0.13 0.028 261.692)',
+      '--popover': 'oklch(1 0 0)',
+      '--popover-foreground': 'oklch(0.13 0.028 261.692)',
+      '--primary': 'oklch(0.21 0.028 264.532)',
+      '--primary-foreground': 'oklch(0.985 0.002 247.839)',
+      '--secondary': 'oklch(0.967 0.003 264.542)',
+      '--secondary-foreground': 'oklch(0.21 0.028 264.532)',
+      '--muted': 'oklch(0.967 0.003 264.542)',
+      '--muted-foreground': 'oklch(0.551 0.027 264.364)',
+      '--accent': 'oklch(0.967 0.003 264.542)',
+      '--accent-foreground': 'oklch(0.21 0.028 264.532)',
+      '--destructive': 'oklch(0.577 0.245 27.325)',
+      '--border': 'oklch(0.928 0.006 264.531)',
+      '--input': 'oklch(0.928 0.006 264.531)',
+      '--ring': 'oklch(0.707 0.022 264.436)',
+    },
+    dark: {
+      '--background': 'oklch(0.13 0.028 261.692)',
+      '--foreground': 'oklch(0.985 0.002 247.839)',
+      '--card': 'oklch(0.21 0.028 264.532)',
+      '--card-foreground': 'oklch(0.985 0.002 247.839)',
+      '--popover': 'oklch(0.274 0.029 256.848)',
+      '--popover-foreground': 'oklch(0.985 0.002 247.839)',
+      '--primary': 'oklch(0.928 0.006 264.531)',
+      '--primary-foreground': 'oklch(0.21 0.028 264.532)',
+      '--secondary': 'oklch(0.274 0.029 256.848)',
+      '--secondary-foreground': 'oklch(0.985 0.002 247.839)',
+      '--muted': 'oklch(0.274 0.029 256.848)',
+      '--muted-foreground': 'oklch(0.707 0.022 264.436)',
+      '--accent': 'oklch(0.37 0.029 259.733)',
+      '--accent-foreground': 'oklch(0.985 0.002 247.839)',
+      '--destructive': 'oklch(0.704 0.191 22.216)',
+      '--border': 'oklch(1 0 0 / 10%)',
+      '--input': 'oklch(1 0 0 / 15%)',
+      '--ring': 'oklch(0.551 0.027 264.364)',
+    },
+  },
+  zinc: {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.141 0.005 285.823)',
+      '--card': 'oklch(1 0 0)',
+      '--card-foreground': 'oklch(0.141 0.005 285.823)',
+      '--popover': 'oklch(1 0 0)',
+      '--popover-foreground': 'oklch(0.141 0.005 285.823)',
+      '--primary': 'oklch(0.21 0.006 285.885)',
+      '--primary-foreground': 'oklch(0.985 0 0)',
+      '--secondary': 'oklch(0.967 0.001 286.375)',
+      '--secondary-foreground': 'oklch(0.21 0.006 285.885)',
+      '--muted': 'oklch(0.967 0.001 286.375)',
+      '--muted-foreground': 'oklch(0.552 0.016 285.938)',
+      '--accent': 'oklch(0.967 0.001 286.375)',
+      '--accent-foreground': 'oklch(0.21 0.006 285.885)',
+      '--destructive': 'oklch(0.577 0.245 27.325)',
+      '--border': 'oklch(0.92 0.004 286.32)',
+      '--input': 'oklch(0.92 0.004 286.32)',
+      '--ring': 'oklch(0.705 0.015 286.067)',
+    },
+    dark: {
+      '--background': 'oklch(0.141 0.005 285.823)',
+      '--foreground': 'oklch(0.985 0 0)',
+      '--card': 'oklch(0.21 0.006 285.885)',
+      '--card-foreground': 'oklch(0.985 0 0)',
+      '--popover': 'oklch(0.274 0.006 286.033)',
+      '--popover-foreground': 'oklch(0.985 0 0)',
+      '--primary': 'oklch(0.92 0.004 286.32)',
+      '--primary-foreground': 'oklch(0.21 0.006 285.885)',
+      '--secondary': 'oklch(0.274 0.006 286.033)',
+      '--secondary-foreground': 'oklch(0.985 0 0)',
+      '--muted': 'oklch(0.274 0.006 286.033)',
+      '--muted-foreground': 'oklch(0.705 0.015 286.067)',
+      '--accent': 'oklch(0.37 0.013 285.805)',
+      '--accent-foreground': 'oklch(0.985 0 0)',
+      '--destructive': 'oklch(0.704 0.191 22.216)',
+      '--border': 'oklch(1 0 0 / 10%)',
+      '--input': 'oklch(1 0 0 / 15%)',
+      '--ring': 'oklch(0.552 0.016 285.938)',
+    },
+  },
 };
 
 function generateCssVars(vars: Record<string, string>, indent: string = '  '): string {
-    return Object.entries(vars)
-        .map(([key, value]) => `${indent}${key}: ${value};`)
-        .join('\n');
+  return Object.entries(vars)
+    .map(([key, value]) => `${indent}${key}: ${value};`)
+    .join('\n');
 }
 
 export function getStylesTemplate(baseColor: BaseColor = 'neutral'): string {
-    const colors = baseColors[baseColor];
+  const colors = baseColors[baseColor];
+
+  return `@import "tailwindcss";
 
-    return `@import "tailwindcss";
+/* Tell Tailwind v4 where to scan for classes */
+@source "../src/**/*.ts";
+@source "../src/**/*.html";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -262,7 +266,7 @@ ${generateCssVars(colors.dark)}
 }
 
 @theme inline {
-  --font-sans: system-ui, sans-serif;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -305,13 +309,16 @@ ${generateCssVars(colors.dark)}
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    border-color: var(--border);
+    outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
   }
   body {
-    @apply font-sans bg-background text-foreground;
+    font-family: var(--font-sans);
+    background-color: var(--background);
+    color: var(--foreground);
   }
   html {
-    @apply font-sans;
+    font-family: var(--font-sans);
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {