scss-variable-extractor 1.6.6 → 2.0.1

package/README.md

@@ -43,54 +43,154 @@ cd scss-variable-extractor
 npm install
 ```
 
+## ⚡ Minimal Example
+
+**Got an Angular project? Generate a theme in one command:**
+
+```bash
+cd my-angular-app
+npx scss-extract generate-themes --analyze
+```
+
+That's it! The tool:
+
+- ✅ Finds your Angular project from `angular.json`
+- ✅ Scans your SCSS files
+- ✅ Extracts your app's actual colors
+- ✅ Generates complete dark/light theme structure
+- ✅ Places files in the right location
+
+No configuration needed! 🎉
+
 ## Quick Start
 
-> **💡 Tip:** If you have an `angular.json` file, you can omit the source path - the tool will auto-detect your project structure!
+> **� Zero Config:** If you have an `angular.json` file, just run the commands without any arguments - the tool automatically detects your project structure, source directories, and output paths!
 
 ### 1. Analyze (Dry Run)
 
 See what values would be extracted without modifying any files:
 
 ```bash
-# With angular.json (auto-detects project)
+# Auto-detects everything from angular.json ✨
 npx scss-extract analyze
 
 # Or specify path manually
 npx scss-extract analyze ./apps/subapp/src --threshold 2
 ```
 
-### 2. Generate Variables File
+### 2. Generate Theme Structure (Most Used!)
+
+Generate a complete dark/light theme with colors extracted from your app:
+
+```bash
+# Auto-detects project and extracts YOUR colors! ✨
+npx scss-extract generate-themes --analyze
+
+# Without color extraction (uses Material defaults)
+npx scss-extract generate-themes
+```
+
+### 3. Generate Variables File
 
 Create a `_variables.scss` file with extracted variables:
 
 ```bash
-# With angular.json
+# Auto-detects project ✨
 npx scss-extract generate
 
 # Or specify paths manually
 npx scss-extract generate ./apps/subapp/src --output ./libs/styles/_variables.scss
 ```
 
-### 3. Full Refactoring
+### 4. Full Refactoring
 
 Generate variables file AND replace hardcoded values in all SCSS files:
 
 ```bash
+# Auto-detects project ✨
+npx scss-extract refactor
+
+# Or specify paths manually
 npx scss-extract refactor ./apps/subapp/src --output ./libs/styles/_variables.scss
 ```
 
-### 4. Modernize Code (Remove Anti-Patterns)
+### 5. Modernize Code (Remove Anti-Patterns)
 
 Remove `::ng-deep` and `!important` following Angular Material v15+ best practices:
 
 ```bash
-# Preview changes first
-npx scss-extract modernize ./src --dry-run
+# Preview changes first (auto-detects project) ✨
+npx scss-extract modernize --dry-run
 
 # Apply modernization
-npx scss-extract modernize ./src
+npx scss-extract modernize
+```
+
+## 🔧 Angular.json Integration
+
+The tool **automatically detects and uses your Angular project structure** from `angular.json`. This means you can run commands **without specifying any paths**!
+
+### How It Works
+
+When you run a command (like `generate-themes --analyze`), the tool:
+
+1. **Finds angular.json** in your current directory
+2. **Detects your project** (uses default project or specify with `--project`)
+3. **Auto-discovers:**
+   - ✅ Source directory (`src/app`, etc.)
+   - ✅ Global styles location (`src/styles.scss`)
+   - ✅ Output path for generated files
+   - ✅ Style preprocessor (scss, sass, css)
+   - ✅ Project prefix and configuration
+
+### Example
+
+Instead of:
+
+```bash
+# ❌ Manual paths - tedious!
+npx scss-extract generate-themes ./apps/my-app/src --output ./apps/my-app/src/styles
+```
+
+Just run:
+
+```bash
+# ✅ Auto-detects everything!
+npx scss-extract generate-themes --analyze
+```
+
+### Multi-Project Workspaces
+
+If you have multiple projects in your Angular workspace:
+
+```bash
+# Use specific project
+npx scss-extract generate-themes --analyze --project my-app
+
+# Use default project (auto-detected)
+npx scss-extract generate-themes --analyze
 ```
 
+### Disable Auto-Detection
+
+If you want to use manual paths instead:
+
+```bash
+npx scss-extract generate-themes ./src --output ./src/styles --no-angular
+```
+
+### All Commands Support angular.json
+
+Every command works with angular.json integration:
+
+- `analyze`
+- `generate`
+- `refactor`
+- `modernize`
+- `generate-themes` ⭐
+- `detect-bootstrap`
+- `migrate-bootstrap`
+
 ## CLI Commands
 
 ### `analyze` - Dry-run Analysis
@@ -528,7 +628,7 @@ npx scss-extract migrate-bootstrap --no-custom-utilities
 
 ### `generate-themes` - Theme Structure Generator
 
-Generate a complete dark/light theme structure for Angular Material applications.
+Generate a complete dark/light theme structure for Angular Material applications with **automatic color extraction** from your existing styles.
 
 ```bash
 npx scss-extract generate-themes [src]
@@ -544,7 +644,7 @@ npx scss-extract generate-themes ./src --output ./src/styles --analyze
 **Options:**
 
 - `--output <dir>` - Output directory for theme files (default: `./src/styles`)
-- `--analyze` - Analyze existing styles for theme readiness
+- `--analyze` - Analyze existing styles and extract actual colors from your app
 - `--format <format>` - Report format for analysis (table, json, markdown)
 
 **What it generates:**
@@ -560,6 +660,10 @@ npx scss-extract generate-themes ./src --output ./src/styles --analyze
 
 ✅ **Features:**
 
+- **🎨 Automatic Color Extraction** - Uses actual colors from your app (with `--analyze`)
+- **Intelligent Color Selection** - Automatically picks primary, accent, and warn colors based on usage
+- **Smart Red Detection** - Prefers red hues for warn colors
+- **Dark Theme Variants** - Auto-generates lightened colors for dark mode
 - Material Design color palettes
 - Automatic dark/light mode switching
 - CSS custom properties support
@@ -569,13 +673,80 @@ npx scss-extract generate-themes ./src --output ./src/styles --analyze
 **Example Usage:**
 
 ```bash
-# Generate theme structure
-npx scss-extract generate-themes --output ./src/styles
+# 🚀 SIMPLEST: Auto-detects everything from angular.json and extracts YOUR colors!
+npx scss-extract generate-themes --analyze
+
+# Without color extraction (uses Material Design defaults)
+npx scss-extract generate-themes
 
-# Analyze existing styles first
+# Manual paths (if no angular.json)
 npx scss-extract generate-themes ./src --analyze --output ./src/styles
 ```
 
+**Output Example:**
+
+When you run with `--analyze`, you'll see:
+
+```
+🎨 Theme Structure Generator
+
+📦 Angular Project: my-app
+   Prefix: app
+   Style: scss
+   Source: src/app
+
+🔍 Analyzing styles in: src/app
+
+   Found 47 SCSS files
+
+📊 Theme Readiness Analysis:
+
+   Total hardcoded colors: 156
+   Unique colors: 12
+   Components needing theme mixins: 8
+
+🎨 Extracted Color Palettes:
+
+Primary Color:
+  Light theme: #007bff
+  Dark theme:  #66b0ff
+
+Accent Color:
+  Light theme: #28a745
+  Dark theme:  #74d77c
+
+Warn Color:
+  Light theme: #dc3545
+  Dark theme:  #dc3545
+
+📁 Output directory: src/styles
+
+✓ Using extracted colors from your app
+
+✓ Created _theme-base.scss
+✓ Created _theme-light.scss
+✓ Created _theme-dark.scss
+✓ Created themes.scss
+✓ Created _css-variables.scss
+✓ Created _component-theme-mixin.scss
+
+✓ Theme structure generated!
+```
+
+**How Color Extraction Works:**
+
+When you use `--analyze`, the tool:
+
+1. **Scans all SCSS files** in your source directory
+2. **Extracts all colors** (hex, rgba) and counts usage frequency
+3. **Filters out utility colors** (black, white, grays)
+4. **Intelligently categorizes**:
+   - Most used color → **Primary** palette
+   - Second most used → **Accent** palette
+   - Red hues (or third most used) → **Warn** palette
+5. **Generates dark variants** by lightening colors for dark theme
+6. **Creates theme files** with your actual brand colors
+
 **Using Generated Themes:**
 
 1. Import in your `styles.scss`:
@@ -1184,6 +1355,51 @@ MIT License - see [LICENSE](./LICENSE) file for details
 
 ## Changelog
 
+### 2.0.0 (2026-02-12) - Zero Config Release 🚀
+
+**BREAKING CHANGES:**
+
+- `generate-themes --output` default removed (now auto-detected from angular.json)
+
+**Major Improvements:**
+
+- **🎉 Zero Configuration:** All commands now fully leverage angular.json integration
+- **✨ Auto-Detection:** `generate-themes` automatically finds source directory and output path
+- **📦 Smart Project Detection:** Shows Angular project info (name, prefix, style preprocessor)
+- **🔧 Simplified Usage:** Just run `npx scss-extract generate-themes --analyze` - no arguments needed!
+- **📚 Comprehensive Documentation:** New angular.json integration guide
+- **⚡ Minimal Example:** Added quick-start section showing one-command theme generation
+- **🎯 Better UX:** Clearer console output with project context and file counts
+- **💡 Helpful Tips:** Shows suggestions when auto-detection features aren't used
+
+**Enhanced Commands:**
+
+- `generate-themes` now accepts `--angular-json`, `--project`, `--no-angular` options
+- Auto-detects output directory from global styles configuration
+- Shows Angular project metadata in output
+- Provides context-aware help messages
+
+**Documentation:**
+
+- Added "Minimal Example" section showing simplest usage
+- Added "Angular.json Integration" section explaining auto-detection
+- Updated all examples to show angular.json usage first
+- Improved THEME-GUIDE.md with zero-config examples
+- Added output examples showing what users will see
+
+### 1.9.0 (2026-02-12)
+
+- **Added:** 🎨 Automatic color extraction from existing app styles
+- **Added:** `extractColorPalettes()` function to intelligently select primary, accent, and warn colors
+- **Added:** Smart red hue detection for warn color selection
+- **Enhanced:** `generate-themes --analyze` now uses actual app colors instead of Material defaults
+- **Enhanced:** Gray shade filtering to exclude utility colors
+- **Enhanced:** Automatic dark theme variant generation (lightens colors for dark mode)
+- **Added:** Color normalization (hex3 → hex6, rgba → hex)
+- **Added:** Usage-based color ranking (most-used = primary, etc.)
+- **Documented:** Comprehensive color extraction examples in THEME-GUIDE.md
+- **Tested:** 12 new tests for color extraction (144 total tests passing)
+
 ### 1.8.0 (2026-02-12)
 
 - **Added:** `analyze-dependencies` command for multi-app dependency analysis

package/THEME-GUIDE.md

@@ -1,13 +1,125 @@
-# Theme Generation and Global Styles Example
+# Theme Generation and Global Styles Guide
 
-This guide demonstrates the new features for theme generation and global styles preservation.
+This guide demonstrates the theme generation features including **automatic color extraction** from your existing styles.
+
+## 🎨 Automatic Color Extraction (New!)
+
+The theme generator can now **automatically extract colors from your app** and use them to create theme palettes, instead of using generic Material Design colors.
+
+### How It Works
+
+When you use the `--analyze` flag, the tool:
+
+1. **Scans all SCSS files** in your source directory
+2. **Extracts all colors** (hex, rgba, named colors)
+3. **Counts usage frequency** to identify your brand colors
+4. **Filters out utility colors** (black, white, grays)
+5. **Intelligently categorizes colors**:
+   - Most-used color → **Primary** palette
+   - Second most-used → **Accent** palette
+   - Red hues → **Warn** palette (or third most-used)
+6. **Generates dark theme variants** by lightening colors
+
+### Example
+
+Suppose your app has these colors:
+
+```scss
+// component-a.component.scss
+.header {
+  color: #007bff; // Used 25 times across app
+  background: #28a745; // Used 15 times
+}
+
+// component-b.component.scss
+.button {
+  background: #007bff; // Same blue, used frequently
+  border: 1px solid #dc3545; // Red, used 8 times
+}
+```
+
+**Without `--analyze` (default):**
+
+```bash
+npx scss-extract generate-themes --output ./src/styles
+```
+
+Uses Material Design defaults:
+
+- Primary: `#1976d2` (Material Blue)
+- Accent: `#ff4081` (Material Pink)
+- Warn: `#f44336` (Material Red)
+
+**With `--analyze` (extracts your colors):**
+
+```bash
+npx scss-extract generate-themes ./src --analyze --output ./src/styles
+```
+
+Output:
+
+```
+🎨 Extracted Color Palettes:
+
+Primary Color:
+  Light theme: #007bff  (used 25 times - your brand blue!)
+  Dark theme:  #66b0ff  (auto-lightened)
+
+Accent Color:
+  Light theme: #28a745  (used 15 times - your brand green!)
+  Dark theme:  #74d77c  (auto-lightened)
+
+Warn Color:
+  Light theme: #dc3545  (detected red hue - your error color!)
+  Dark theme:  #dc3545  (red stays consistent)
+```
+
+### Smart Red Detection
+
+The tool prefers **red hues** for the warn palette:
+
+```scss
+// Even if yellow is used more...
+$warning: #ffc107; // Used 12 times
+$error: #dc3545; // Used 8 times
+
+// ...red will be selected for warn palette
+// because warn colors should indicate errors/danger
+```
+
+### Color Filtering
+
+The tool automatically filters out:
+
+- **Black/white**: `#000`, `#fff`, `transparent`
+- **Gray shades**: `#333`, `#666`, `#ccc`, etc.
+- **Low usage colors**: Colors used less than 2 times (configurable)
+
+This ensures only your **brand colors** are selected for theme palettes.
 
 ## 1. Generate Theme Structure
 
-First, generate a complete theme structure for your Angular Material app:
+Generate a complete theme structure for your Angular Material app:
+
+### With angular.json (Recommended - Zero Config!)
+
+```bash
+# 🚀 Auto-detects everything and extracts YOUR app's colors!
+npx scss-extract generate-themes --analyze
+```
+
+That's it! The tool automatically:
+
+- ✅ Finds your Angular project from angular.json
+- ✅ Detects source directory
+- ✅ Places theme files in your styles folder
+- ✅ Extracts actual colors from your app
+- ✅ Generates dark/light theme variants
+
+### Without angular.json (Manual Paths)
 
 ```bash
-# Analyze existing styles and generate themes
+# Specify paths manually
 npx scss-extract generate-themes ./src --analyze --output ./src/styles
 ```
 

package/bin/cli.js

@@ -21,7 +21,11 @@ const {
   generateBootstrapReport,
 } = require('../src/bootstrap-migrator');
 const { analyzeStyleOrganization, generateOrganizationReport } = require('../src/style-organizer');
-const { generateThemeStructure, analyzeThemeReadiness } = require('../src/theme-utils');
+const {
+  generateThemeStructure,
+  analyzeThemeReadiness,
+  extractColorPalettes,
+} = require('../src/theme-utils');
 const { analyzeMultiAppDependencies } = require('../src/multi-app-analyzer');
 
 const program = new Command();
@@ -690,48 +694,118 @@ program
 program
   .command('generate-themes')
   .description('Generate theme structure for dark/light mode support with Angular Material')
-  .argument('[src]', 'Source directory to scan for analysis (optional)')
-  .option('--output <dir>', 'Output directory for theme files', './src/styles')
-  .option('--analyze', 'Analyze existing styles for theme readiness')
+  .argument('[src]', 'Source directory to scan for analysis (optional if using angular.json)')
+  .option('--output <dir>', 'Output directory for theme files (auto-detected from angular.json)')
+  .option('--analyze', 'Analyze existing styles and extract colors from your app')
   .option('--format <format>', 'Report format (table, json, markdown)', 'table')
+  .option('--angular-json <path>', 'Path to angular.json file')
+  .option('--project <name>', 'Angular project name (uses default if not specified)')
+  .option('--no-angular', 'Disable angular.json integration')
   .action(async (src, options) => {
     try {
       console.log(chalk.cyan.bold('\n🎨 Theme Structure Generator\n'));
 
       const fs = require('fs');
-      const outputDir = path.resolve(options.output);
+
+      // Load config with angular.json integration
+      const config = loadConfig(null, {
+        useAngularJson: options.angular !== false,
+        angularJsonPath: options.angularJson,
+        projectName: options.project,
+      });
+
+      // Override with command-line options
+      if (src) {
+        config.src = src;
+      }
+
+      // Determine output directory
+      let outputDir;
+      if (options.output) {
+        outputDir = path.resolve(options.output);
+      } else if (config.angular && config.output) {
+        // Use the styles directory from angular.json
+        outputDir = path.resolve(path.dirname(config.output));
+      } else {
+        outputDir = path.resolve('./src/styles');
+      }
+
+      // Show Angular project info if available
+      if (config.angular) {
+        console.log(chalk.cyan(`📦 Angular Project: ${config.angular.project}`));
+        console.log(chalk.gray(`   Prefix: ${config.angular.prefix}`));
+        console.log(chalk.gray(`   Style: ${config.angular.stylePreprocessor}`));
+        console.log(chalk.gray(`   Source: ${config.src}\n`));
+      }
+
+      let extractedPalettes = null;
 
       // Analyze existing styles if requested
-      if (options.analyze && src) {
-        console.log(chalk.gray(`Analyzing: ${src}\n`));
-        const config = loadConfig();
-        const files = await scanScssFiles(src, config.ignore);
-        const analysis = analyzeThemeReadiness(files);
-
-        console.log(chalk.blue.bold('Theme Readiness Analysis:\n'));
-        console.log(chalk.gray(`Total hardcoded colors: ${analysis.hardcodedColors.length}`));
-        console.log(chalk.gray(`Unique colors: ${analysis.colorUsage.size}`));
-        console.log(
-          chalk.gray(`Components needing theme mixins: ${analysis.themeableComponents.length}\n`)
-        );
+      if (options.analyze) {
+        const scanDir = config.src || './src';
+        console.log(chalk.gray(`🔍 Analyzing styles in: ${scanDir}\n`));
 
-        if (analysis.recommendations.length > 0) {
-          console.log(chalk.yellow.bold('📋 Recommendations:\n'));
-          analysis.recommendations.forEach(rec => {
-            const icon = rec.priority === 'high' ? '🔴' : '🟡';
-            console.log(chalk.gray(`${icon} ${rec.message}`));
-          });
-          console.log();
+        const files = await scanScssFiles(scanDir, config.ignore);
+
+        if (files.length === 0) {
+          console.log(chalk.yellow('⚠  No SCSS files found. Using default Material colors.\n'));
+        } else {
+          console.log(chalk.gray(`   Found ${files.length} SCSS files\n`));
+
+          const analysis = analyzeThemeReadiness(files);
+
+          console.log(chalk.blue.bold('📊 Theme Readiness Analysis:\n'));
+          console.log(chalk.gray(`   Total hardcoded colors: ${analysis.hardcodedColors.length}`));
+          console.log(chalk.gray(`   Unique colors: ${analysis.colorUsage.size}`));
+          console.log(
+            chalk.gray(
+              `   Components needing theme mixins: ${analysis.themeableComponents.length}\n`
+            )
+          );
+
+          // Extract color palettes from usage
+          extractedPalettes = extractColorPalettes(analysis.colorUsage);
+
+          console.log(chalk.green.bold('🎨 Extracted Color Palettes:\n'));
+          console.log(chalk.cyan('Primary Color:'));
+          console.log(chalk.gray(`  Light theme: ${extractedPalettes.primary.light}`));
+          console.log(chalk.gray(`  Dark theme:  ${extractedPalettes.primary.dark}`));
+          console.log(chalk.cyan('Accent Color:'));
+          console.log(chalk.gray(`  Light theme: ${extractedPalettes.accent.light}`));
+          console.log(chalk.gray(`  Dark theme:  ${extractedPalettes.accent.dark}`));
+          console.log(chalk.cyan('Warn Color:'));
+          console.log(chalk.gray(`  Light theme: ${extractedPalettes.warn.light}`));
+          console.log(chalk.gray(`  Dark theme:  ${extractedPalettes.warn.dark}\n`));
+
+          if (analysis.recommendations.length > 0) {
+            console.log(chalk.yellow.bold('📋 Recommendations:\n'));
+            analysis.recommendations.forEach(rec => {
+              const icon = rec.priority === 'high' ? '🔴' : '🟡';
+              console.log(chalk.gray(`   ${icon} ${rec.message}`));
+            });
+            console.log();
+          }
         }
       }
 
       // Generate theme files
-      console.log(chalk.gray(`Generating theme files in: ${outputDir}\n`));
+      console.log(chalk.gray(`📁 Output directory: ${outputDir}\n`));
 
-      const themeStructure = generateThemeStructure({
+      const themeOptions = {
         outputDir,
         includeComponents: true,
-      });
+      };
+
+      // Use extracted palettes if available
+      if (extractedPalettes) {
+        themeOptions.themePalettes = extractedPalettes;
+        console.log(chalk.green('✓ Using extracted colors from your app\n'));
+      } else {
+        console.log(chalk.yellow('ℹ  Using default Material Design colors\n'));
+        console.log(chalk.gray('   💡 Tip: Use --analyze to extract colors from your app\n'));
+      }
+
+      const themeStructure = generateThemeStructure(themeOptions);
 
       // Create output directory if it doesn't exist
       if (!fs.existsSync(outputDir)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scss-variable-extractor",
-  "version": "1.6.6",
+  "version": "2.0.1",
   "description": "Analyzes Angular SCSS files and extracts repeated hardcoded values into reusable variables",
   "bin": {
     "scss-extract": "./bin/cli.js"

package/src/theme-utils.js

@@ -1,6 +1,205 @@
 const fs = require('fs');
 const path = require('path');
 
+/**
+ * Extracts color palettes from analyzed color usage in the app
+ * Intelligently categorizes colors as primary, accent, and warn based on usage patterns
+ * @param {Map} colorUsage - Map of color → usage count from analyzeThemeReadiness
+ * @param {Object} options - Configuration options
+ * @returns {Object} - Theme palettes with light and dark variants
+ */
+function extractColorPalettes(colorUsage, options = {}) {
+  const { minUsage = 2 } = options;
+
+  if (!colorUsage || colorUsage.size === 0) {
+    console.warn('No color usage data provided. Using default Material palettes.');
+    return {
+      primary: { light: '#1976d2', dark: '#90caf9' },
+      accent: { light: '#ff4081', dark: '#ff4081' },
+      warn: { light: '#f44336', dark: '#f44336' },
+    };
+  }
+
+  // Filter out common utility colors (black, white, transparent, gray shades)
+  const utilityColors = [
+    '#000',
+    '#000000',
+    '#fff',
+    '#ffffff',
+    'transparent',
+    'rgba(0,0,0,0)',
+    'rgba(0, 0, 0, 0)',
+  ];
+
+  // Filter and sort colors by usage
+  const colorsByUsage = Array.from(colorUsage.entries())
+    .filter(([color, count]) => {
+      const normalized = color.trim().toLowerCase();
+      // Skip utility colors
+      if (utilityColors.some(util => normalized.includes(util.toLowerCase()))) {
+        return false;
+      }
+      // Skip gray shades (common in borders, backgrounds)
+      if (normalized.match(/#[0-9a-f]{3,6}/i)) {
+        const hex = normalized.match(/#([0-9a-f]{3,6})/i)[1];
+        const expanded =
+          hex.length === 3
+            ? hex
+                .split('')
+                .map(c => c + c)
+                .join('')
+            : hex;
+        const r = parseInt(expanded.substr(0, 2), 16);
+        const g = parseInt(expanded.substr(2, 2), 16);
+        const b = parseInt(expanded.substr(4, 2), 16);
+        // If all RGB values are similar (within 15), it's a gray
+        if (Math.abs(r - g) < 15 && Math.abs(g - b) < 15 && Math.abs(r - b) < 15) {
+          return false;
+        }
+      }
+      return count >= minUsage;
+    })
+    .sort((a, b) => b[1] - a[1]);
+
+  if (colorsByUsage.length === 0) {
+    console.warn('No suitable brand colors found. Using default Material palettes.');
+    return {
+      primary: { light: '#1976d2', dark: '#90caf9' },
+      accent: { light: '#ff4081', dark: '#ff4081' },
+      warn: { light: '#f44336', dark: '#f44336' },
+    };
+  }
+
+  // Extract top 3 colors (or fewer if not available)
+  const primaryColor = colorsByUsage[0] ? colorsByUsage[0][0] : '#1976d2';
+  const accentColor = colorsByUsage[1] ? colorsByUsage[1][0] : '#ff4081';
+  const warnColor = colorsByUsage[2] ? colorsByUsage[2][0] : '#f44336';
+
+  // Try to identify warn color based on hue (prefer reds)
+  let finalWarnColor = warnColor;
+  for (const [color, count] of colorsByUsage) {
+    if (isRedHue(color)) {
+      finalWarnColor = color;
+      break;
+    }
+  }
+
+  // Generate dark variants (lighten colors for dark theme)
+  const palettes = {
+    primary: {
+      light: normalizeColor(primaryColor),
+      dark: lightenColor(primaryColor, 40),
+    },
+    accent: {
+      light: normalizeColor(accentColor),
+      dark: lightenColor(accentColor, 30),
+    },
+    warn: {
+      light: normalizeColor(finalWarnColor),
+      dark: normalizeColor(finalWarnColor), // Warn colors usually stay the same
+    },
+  };
+
+  return palettes;
+}
+
+/**
+ * Checks if a color is in the red hue range (for warn color detection)
+ * @param {string} color - Color value (hex or rgba)
+ * @returns {boolean} - True if color is reddish
+ */
+function isRedHue(color) {
+  const hex = color.match(/#([0-9a-f]{3,6})/i);
+  if (!hex) return false;
+
+  const hexValue = hex[1];
+  const expanded =
+    hexValue.length === 3
+      ? hexValue
+          .split('')
+          .map(c => c + c)
+          .join('')
+      : hexValue;
+  const r = parseInt(expanded.substring(0, 2), 16);
+  const g = parseInt(expanded.substring(2, 4), 16);
+  const b = parseInt(expanded.substring(4, 6), 16);
+
+  // Red hue criteria:
+  // 1. Red must be dominant (greater than both green and blue)
+  // 2. Red should be bright enough (r > 150)
+  // 3. Green should be significantly less than red (to exclude yellows/oranges)
+  // 4. Blue should be significantly less than red
+  const result =
+    r > g &&
+    r > b &&
+    r > 150 &&
+    g < r * 0.6 && // Green should be less than 60% of red (excludes yellow/orange)
+    r - g > 50; // Red should be significantly higher than green
+
+  return result;
+}
+
+/**
+ * Normalizes color format to hex6 format
+ * @param {string} color - Color value
+ * @returns {string} - Normalized hex color
+ */
+function normalizeColor(color) {
+  // Already normalized hex6
+  if (color.match(/^#[0-9a-f]{6}$/i)) {
+    return color.toLowerCase();
+  }
+
+  // Hex3 to hex6
+  const hex3 = color.match(/^#([0-9a-f]{3})$/i);
+  if (hex3) {
+    return (
+      '#' +
+      hex3[1]
+        .split('')
+        .map(c => c + c)
+        .join('')
+        .toLowerCase()
+    );
+  }
+
+  // RGBA to hex (ignoring alpha)
+  const rgba = color.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (rgba) {
+    const r = parseInt(rgba[1]).toString(16).padStart(2, '0');
+    const g = parseInt(rgba[2]).toString(16).padStart(2, '0');
+    const b = parseInt(rgba[3]).toString(16).padStart(2, '0');
+    return `#${r}${g}${b}`;
+  }
+
+  // Fallback
+  return color;
+}
+
+/**
+ * Lightens a color by a percentage for dark theme
+ * @param {string} color - Hex color
+ * @param {number} percent - Percentage to lighten (0-100)
+ * @returns {string} - Lightened hex color
+ */
+function lightenColor(color, percent) {
+  const normalized = normalizeColor(color);
+  const hex = normalized.replace('#', '');
+
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+
+  // Lighten by moving toward 255
+  const lighten = val => Math.min(255, Math.round(val + ((255 - val) * percent) / 100));
+
+  const newR = lighten(r).toString(16).padStart(2, '0');
+  const newG = lighten(g).toString(16).padStart(2, '0');
+  const newB = lighten(b).toString(16).padStart(2, '0');
+
+  return `#${newR}${newG}${newB}`;
+}
+
 /**
  * Generates SCSS theme structure for Angular Material applications
  * Supports dark and light themes with proper variable organization
@@ -427,6 +626,7 @@ function getLineNumber(content, index) {
 module.exports = {
   generateThemeStructure,
   analyzeThemeReadiness,
+  extractColorPalettes,
   getThemeRecommendations,
   getRecommendedStructure,
 };

package/test/color-extraction.test.js

@@ -0,0 +1,166 @@
+const { extractColorPalettes } = require('../src/theme-utils');
+
+describe('Color Palette Extraction', () => {
+  describe('extractColorPalettes', () => {
+    test('should return default palettes when no color usage provided', () => {
+      const palettes = extractColorPalettes(null);
+
+      expect(palettes).toHaveProperty('primary');
+      expect(palettes).toHaveProperty('accent');
+      expect(palettes).toHaveProperty('warn');
+      expect(palettes.primary).toHaveProperty('light');
+      expect(palettes.primary).toHaveProperty('dark');
+    });
+
+    test('should extract primary, accent, and warn colors from usage data', () => {
+      const colorUsage = new Map([
+        ['#007bff', 25], // Most used (primary)
+        ['#28a745', 15], // Second most (accent)
+        ['#dc3545', 10], // Third most (warn - red)
+        ['#ffc107', 5],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.primary.light).toBe('#007bff');
+      expect(palettes.accent.light).toBe('#28a745');
+      expect(palettes.warn.light).toBe('#dc3545');
+    });
+
+    test('should filter out utility colors (black, white, transparent)', () => {
+      const colorUsage = new Map([
+        ['#000000', 100], // Should be filtered
+        ['#ffffff', 90], // Should be filtered
+        ['transparent', 80], // Should be filtered
+        ['#007bff', 25],
+        ['#28a745', 15],
+        ['#dc3545', 10],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.primary.light).toBe('#007bff');
+      expect(palettes.accent.light).toBe('#28a745');
+    });
+
+    test('should filter out gray shades', () => {
+      const colorUsage = new Map([
+        ['#808080', 50], // Gray - should be filtered
+        ['#cccccc', 40], // Light gray - should be filtered
+        ['#333333', 30], // Dark gray - should be filtered
+        ['#007bff', 25],
+        ['#28a745', 15],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.primary.light).toBe('#007bff');
+      expect(palettes.accent.light).toBe('#28a745');
+    });
+
+    test('should prefer red colors for warn palette', () => {
+      const colorUsage = new Map([
+        ['#007bff', 25], // Blue
+        ['#28a745', 15], // Green
+        ['#ffc107', 12], // Yellow
+        ['#dc3545', 8], // Red (less usage but should be warn)
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.warn.light).toBe('#dc3545');
+    });
+
+    test('should generate dark variants for primary and accent', () => {
+      const colorUsage = new Map([
+        ['#1976d2', 25],
+        ['#d32f2f', 15],
+        ['#f57c00', 10],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      // Dark variants should be lighter than light variants
+      expect(palettes.primary.dark).not.toBe(palettes.primary.light);
+      expect(palettes.accent.dark).not.toBe(palettes.accent.light);
+      expect(palettes.primary.dark).toMatch(/#[0-9a-f]{6}/);
+      expect(palettes.accent.dark).toMatch(/#[0-9a-f]{6}/);
+    });
+
+    test('should normalize hex3 colors to hex6', () => {
+      const colorUsage = new Map([
+        ['#07f', 25], // Hex3
+        ['#0f0', 15], // Hex3
+        ['#f00', 10], // Hex3
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.primary.light).toMatch(/#[0-9a-f]{6}/);
+      expect(palettes.primary.light).toBe('#0077ff');
+    });
+
+    test('should handle rgba colors', () => {
+      const colorUsage = new Map([
+        ['rgba(25, 118, 210, 1)', 25],
+        ['rgba(211, 47, 47, 0.8)', 15],
+        ['rgba(245, 124, 0, 1)', 10],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      // Should convert to hex
+      expect(palettes.primary.light).toMatch(/#[0-9a-f]{6}/);
+      expect(palettes.accent.light).toMatch(/#[0-9a-f]{6}/);
+    });
+
+    test('should respect minUsage threshold', () => {
+      const colorUsage = new Map([
+        ['#007bff', 25],
+        ['#28a745', 2], // Below threshold
+        ['#dc3545', 1], // Below threshold
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage, { minUsage: 3 });
+
+      // Should only use colors with usage >= 3
+      expect(palettes.primary.light).toBe('#007bff');
+      // Others should fall back to defaults
+      expect(palettes.accent.light).toMatch(/#[0-9a-f]{6}/);
+    });
+
+    test('should handle empty color usage', () => {
+      const colorUsage = new Map();
+      const palettes = extractColorPalettes(colorUsage);
+
+      // Should return defaults
+      expect(palettes.primary.light).toBe('#1976d2');
+      expect(palettes.accent.light).toBe('#ff4081');
+      expect(palettes.warn.light).toBe('#f44336');
+    });
+
+    test('should handle single color', () => {
+      const colorUsage = new Map([['#007bff', 25]]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      expect(palettes.primary.light).toBe('#007bff');
+      // Accent and warn should fall back to defaults
+      expect(palettes.accent.light).toMatch(/#[0-9a-f]{6}/);
+      expect(palettes.warn.light).toMatch(/#[0-9a-f]{6}/);
+    });
+
+    test('should keep warn color same for light and dark themes', () => {
+      const colorUsage = new Map([
+        ['#007bff', 25],
+        ['#28a745', 15],
+        ['#dc3545', 10],
+      ]);
+
+      const palettes = extractColorPalettes(colorUsage);
+
+      // Warn colors typically stay the same in both themes
+      expect(palettes.warn.light).toBe(palettes.warn.dark);
+    });
+  });
+});