create-ng-tailwind 2.1.1 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,61 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.0] - 2025-11-30
+
+### 💥 Breaking Changes
+
+- **Angular CLI Alignment**: Now fully relies on Angular CLI for project configuration
+  - Removed custom `ensureZoneJs()` method - Angular CLI handles zone.js natively
+  - Explicitly passes `--zoneless=false` or `--zoneless=true` to Angular CLI in non-interactive mode
+  - Projects now match exactly what `ng new` produces interactively
+
+### 🐛 Bug Fixes
+
+- **zone.js Configuration**: Fixed issue where zone.js was not being properly configured when selecting "No" for zoneless application
+  - Fixes runtime error `NG0908: In this configuration Angular requires Zone.js`
+
+## [2.2.0] - 2025-11-01
+
+### ✨ New Features - Comprehensive Tailwind v4 Theming System
+
+- **Complete Theme System using Tailwind v4 @theme directive**:
+  - Added comprehensive color theming with 7 semantic color scales (primary, secondary, accent, success, danger, warning, info)
+  - Each color includes full 50-950 scale for maximum flexibility
+  - All colors defined using modern `@theme` directive in `styles.css`
+  - Automatic utility class generation (bg-*, text-*, border-*, ring-*, etc.)
+
+- **Theme Customization**:
+  - Easy customization by editing CSS custom properties in `styles.css`
+  - Clear documentation and usage examples in theme configuration
+  - All components automatically update when theme colors change
+  - No JavaScript configuration needed - pure CSS approach
+
+- **Updated All Components to Use Theme Colors**:
+  - ButtonComponent: Uses primary, secondary, and danger theme colors
+  - ToastComponent: Uses success, danger, warning, and info colors
+  - LoadingSpinnerComponent: Supports all theme color variants
+  - Contact page: Gradient backgrounds using primary, secondary, and accent
+  - Header component: Navigation and active states use primary theme
+  - Home & About pages: Hero sections and feature cards use theme colors
+  - Auth pages: Login, Register, Forgot Password use primary theme
+  - Footer: Links use primary theme colors
+
+- **Developer Experience**:
+  - Comprehensive inline documentation in `styles.css`
+  - Usage examples for all theme colors
+  - Clear instructions for customization
+  - Consistent color usage across all generated components
+
+### 🎨 Design Improvements
+
+- Replaced all hardcoded blue, cyan, red, green colors with semantic theme colors
+- Updated gradients to use primary-secondary-accent combinations
+- Error states now use danger theme color instead of hardcoded red
+- Success states use success theme color instead of hardcoded green
+- Info messages use info theme color
+- Warning states use warning theme color
+
 ## [2.1.1] - 2025-10-30
 
 ### 🐛 Fixed

package/README.md

@@ -168,6 +168,40 @@ This tool uses **Tailwind CSS v4** with the official PostCSS approach:
 
 **Note:** Tailwind v4 does not support SCSS, Sass, or Less. Modern CSS provides all the features you need!
 
+### 🎨 Comprehensive Theming System
+
+The starter template includes a **powerful Tailwind v4 theming system** using the `@theme` directive:
+
+**Theme Colors:**
+- `primary` - Main brand color (with full 50-950 scale)
+- `secondary` - Secondary brand color (with full 50-950 scale)
+- `accent` - Accent/highlight color (with full 50-950 scale)
+- `success` - Success states (green)
+- `danger` - Error/danger states (red)
+- `warning` - Warning states (yellow/orange)
+- `info` - Informational states (blue)
+
+**Customization:**
+Simply edit `src/styles.css` and change the color values in the `@theme` block. All components automatically update!
+
+```css
+@theme {
+  --color-primary-500: #3b82f6;  /* Change this to your brand color */
+  --color-secondary-500: #06b6d4;
+  --color-accent-500: #a855f7;
+  /* ... complete color scales included */
+}
+```
+
+**Usage in templates:**
+```html
+<div class="bg-primary-600 text-white">Primary button</div>
+<div class="bg-secondary-500">Secondary element</div>
+<p class="text-danger-600">Error message</p>
+```
+
+All UI components, pages, and layouts use these theme colors, making it easy to rebrand your entire application by changing a few color values!
+
 ## 📄 License
 
 MIT License - see the LICENSE file included in the package.

package/lib/managers/ProjectManager.js

@@ -1,9 +1,8 @@
-const fs = require("fs-extra");
-const path = require("path");
-const execa = require("execa");
-const TailwindManager = require("./TailwindManager");
-const TemplateManager = require("./TemplateManager");
-const { createAIConfigs } = require("../utils/ai-config");
+const fs = require('fs-extra');
+const execa = require('execa');
+const TailwindManager = require('./TailwindManager');
+const TemplateManager = require('./TemplateManager');
+const { createAIConfigs } = require('../utils/ai-config');
 
 class ProjectManager {
   constructor(config, logger) {
@@ -18,15 +17,15 @@ class ProjectManager {
     if (await fs.pathExists(this.config.fullPath)) {
       const { overwrite } = await this.logger.prompt([
         {
-          type: "confirm",
-          name: "overwrite",
+          type: 'confirm',
+          name: 'overwrite',
           message: `Directory ${this.config.projectName} already exists. Do you want to overwrite it?`,
           default: false,
         },
       ]);
 
       if (!overwrite) {
-        this.logger.warn("Operation cancelled");
+        this.logger.warn('Operation cancelled');
         process.exit(0);
       }
 
@@ -43,37 +42,30 @@ class ProjectManager {
     await this.templateManager.apply();
 
     // Create AI configuration files (CLAUDE.md + tool-specific)
-    await createAIConfigs(
-      this.config.fullPath,
-      this.config.projectName,
-      this.config.aiConfig,
-    );
+    await createAIConfigs(this.config.fullPath, this.config.projectName, this.config.aiConfig);
   }
 
   async createAngularProject() {
-    const spinner = this.logger.spinner("Creating Angular project...");
+    const spinner = this.logger.spinner('Creating Angular project...');
 
     try {
       // Build ng new command with user's choices
       const routing = this.config.routing !== false;
       const ssr = this.config.ssr || false;
       const zoneless = this.config.zoneless || false;
-      const aiConfig = this.config.aiConfig || ["none"];
+      const aiConfig = this.config.aiConfig || ['none'];
 
       let cmd = `npx @angular/cli@latest new ${this.config.projectName}`;
       cmd += ` --routing=${routing}`;
       cmd += ` --style=css`; // Always use CSS (Tailwind v4 official approach)
       cmd += ` --ssr=${ssr}`;
-
-      if (zoneless) {
-        cmd += ` --zoneless`;
-      }
+      cmd += ` --zoneless=${zoneless}`;
 
       // Add AI config - Angular CLI supports multiple --ai-config flags
-      if (aiConfig.length > 0 && !aiConfig.includes("none")) {
+      if (aiConfig.length > 0 && !aiConfig.includes('none')) {
         // Add each AI tool as a separate --ai-config flag
         aiConfig.forEach((tool) => {
-          if (tool !== "none") {
+          if (tool !== 'none') {
             cmd += ` --ai-config=${tool}`;
           }
         });
@@ -83,12 +75,12 @@ class ProjectManager {
 
       await execa.command(cmd, {
         cwd: process.cwd(),
-        stdio: "pipe",
+        stdio: 'pipe',
       });
 
-      spinner.succeed("Angular project created");
+      spinner.succeed('Angular project created');
     } catch (error) {
-      spinner.fail("Failed to create Angular project");
+      spinner.fail('Failed to create Angular project');
       throw error;
     }
   }

package/lib/templates/starter/advanced-features.js

@@ -284,12 +284,11 @@ export class ToastService {
 
 async function createToastComponent(config) {
   const toastComponent = `import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ToastService, Toast } from '@core/services/toast.service';
 
 @Component({
   selector: 'app-toast',
-  imports: [CommonModule],
+  imports: [],
   template: \`
     <!-- Toast Container -->
     <div class="fixed top-4 right-4 z-50 space-y-2 max-w-sm w-full">
@@ -302,22 +301,22 @@ import { ToastService, Toast } from '@core/services/toast.service';
           <div class="shrink-0">
             @switch (toast.type) {
               @case ('success') {
-                <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-success-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                 </svg>
               }
               @case ('error') {
-                <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-danger-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
               }
               @case ('warning') {
-                <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                 </svg>
               }
               @case ('info') {
-                <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="h-6 w-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
               }
@@ -364,10 +363,10 @@ export class ToastComponent {
   getToastClasses(toast: Toast): string {
     const baseClasses = 'border-l-4';
     const typeClasses = {
-      success: 'bg-green-50 border-green-500',
-      error: 'bg-red-50 border-red-500',
-      warning: 'bg-yellow-50 border-yellow-500',
-      info: 'bg-blue-50 border-blue-500'
+      success: 'bg-success-50 border-success-500',
+      error: 'bg-danger-50 border-danger-500',
+      warning: 'bg-warning-50 border-warning-500',
+      info: 'bg-info-50 border-info-500'
     };
 
     return \`\${baseClasses} \${typeClasses[toast.type]}\`;