@shohojdhara/atomix 0.3.1 → 0.3.2

package/src/lib/theme/createTheme.ts

@@ -39,116 +39,119 @@ import type {
 
 const DEFAULT_PALETTE: Theme['palette'] = {
     primary: {
-        main: '#7AFFD7',
-        light: '#A3FFE5',
-        dark: '#00E6C3',
-        contrastText: '#000000',
+        main: '#7c3aed', // Primary-6
+        light: '#d0b2f5', // Primary-3
+        dark: '#3c1583', // Primary-9
+        contrastText: '#ffffff',
     },
     secondary: {
-        main: '#FF5733',
-        light: '#FF8A65',
-        dark: '#C62828',
-        contrastText: '#FFFFFF',
+        main: '#f3f4f6', // Gray-2
+        light: '#ffffff', // Gray-1
+        dark: '#e5e7eb', // Gray-3
+        contrastText: '#1f2937', // Gray-9
     },
     error: {
-        main: '#F44336',
-        light: '#E57373',
-        dark: '#D32F2F',
-        contrastText: '#FFFFFF',
+        main: '#ef4444', // Red-6
+        light: '#fca5a5', // Red-4
+        dark: '#991b1b', // Red-9
+        contrastText: '#ffffff',
     },
     warning: {
-        main: '#FF9800',
-        light: '#FFB74D',
-        dark: '#F57C00',
+        main: '#eab308', // Yellow-6
+        light: '#fde047', // Yellow-4
+        dark: '#854d0e', // Yellow-9
         contrastText: '#000000',
     },
     info: {
-        main: '#2196F3',
-        light: '#64B5F6',
-        dark: '#1976D2',
-        contrastText: '#FFFFFF',
+        main: '#3b82f6', // Blue-6
+        light: '#93c5fd', // Blue-4
+        dark: '#1e40af', // Blue-9
+        contrastText: '#ffffff',
     },
     success: {
-        main: '#4CAF50',
-        light: '#81C784',
-        dark: '#388E3C',
-        contrastText: '#FFFFFF',
+        main: '#22c55e', // Green-6
+        light: '#86efac', // Green-4
+        dark: '#166534', // Green-9
+        contrastText: '#ffffff',
     },
     background: {
-        default: '#FFFFFF',
-        paper: '#F5F5F5',
-        subtle: '#FAFAFA',
+        default: '#ffffff', // Primary-bg
+        paper: '#f3f4f6', // Secondary-bg
+        subtle: '#d1d5db', // Gray-4 (Tertiary-bg)
     },
     text: {
-        primary: 'rgba(0, 0, 0, 0.87)',
-        secondary: 'rgba(0, 0, 0, 0.6)',
-        disabled: 'rgba(0, 0, 0, 0.38)',
+        primary: '#111827', // Gray-10
+        secondary: '#374151', // Gray-8
+        disabled: '#9ca3af', // Gray-5
     },
 };
 
 const DEFAULT_TYPOGRAPHY: Theme['typography'] = {
-    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-    fontSize: 14,
+    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
+    fontSize: 16, // 1rem
     fontWeightLight: 300,
     fontWeightRegular: 400,
     fontWeightMedium: 500,
     fontWeightSemiBold: 600,
     fontWeightBold: 700,
+    fontWeightHeavy: 800,
+    fontWeightBlack: 900,
     h1: {
-        fontSize: '2.5rem',
+        fontSize: '2.5rem', // 40px
         fontWeight: 700,
-        lineHeight: 1.2,
-        letterSpacing: '-0.01562em',
+        lineHeight: 1.3,
+        letterSpacing: '-1px',
     },
     h2: {
-        fontSize: '2rem',
+        fontSize: '2rem', // 32px
         fontWeight: 700,
         lineHeight: 1.3,
-        letterSpacing: '-0.00833em',
+        letterSpacing: '-1px',
     },
     h3: {
-        fontSize: '1.75rem',
-        fontWeight: 600,
-        lineHeight: 1.4,
-        letterSpacing: '0em',
+        fontSize: '1.5rem', // 24px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: '-1px',
     },
     h4: {
-        fontSize: '1.5rem',
-        fontWeight: 600,
-        lineHeight: 1.4,
-        letterSpacing: '0.00735em',
+        fontSize: '1.25rem', // 20px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: '-0.5px',
     },
     h5: {
-        fontSize: '1.25rem',
-        fontWeight: 600,
-        lineHeight: 1.5,
-        letterSpacing: '0em',
+        fontSize: '1.125rem', // 18px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: '-0.5px',
     },
     h6: {
-        fontSize: '1rem',
-        fontWeight: 600,
-        lineHeight: 1.6,
-        letterSpacing: '0.0075em',
+        fontSize: '1rem', // 16px
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: '-0.5px',
     },
     body1: {
-        fontSize: '1rem',
+        fontSize: '1rem', // 16px
         fontWeight: 400,
-        lineHeight: 1.5,
+        lineHeight: 1.2,
     },
     body2: {
-        fontSize: '0.875rem',
+        fontSize: '0.875rem', // 14px
         fontWeight: 400,
-        lineHeight: 1.43,
+        lineHeight: 1.2,
     },
 };
 
 const DEFAULT_BREAKPOINTS: Theme['breakpoints'] = {
     values: {
         xs: 0,
-        sm: 600,
-        md: 960,
-        lg: 1280,
-        xl: 1920,
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+        xxl: 1440,
     },
     unit: 'px',
     up: (key) => {
@@ -167,12 +170,12 @@ const DEFAULT_BREAKPOINTS: Theme['breakpoints'] = {
 };
 
 const DEFAULT_SHADOWS: Theme['shadows'] = {
-    xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    inset: 'inset 0 1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    xs: '0px 1px 2px 0px rgba(45, 54, 67, 0.04), 0px 2px 4px 0px rgba(45, 54, 67, 0.08)',
+    sm: '0 2px 4px rgba(0, 0, 0, 0.075)',
+    md: '0 4px 8px rgba(0, 0, 0, 0.1)',
+    lg: '0 16px 48px rgba(0, 0, 0, 0.175)',
+    xl: '0px 16px 64px -8px rgba(45, 54, 67, 0.14)',
+    inset: 'inset 0 1px 2px rgba(0, 0, 0, 0.075)',
 };
 
 const DEFAULT_TRANSITIONS: Theme['transitions'] = {
@@ -381,10 +384,11 @@ function createSpacing(spacingInput: SpacingOptions = 4): SpacingFunction {
 function createBreakpoints(breakpointsInput?: BreakpointsOptions): Theme['breakpoints'] {
     const values = {
         xs: 0,
-        sm: 600,
-        md: 960,
-        lg: 1280,
-        xl: 1920,
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+        xxl: 1440,
         ...breakpointsInput?.values,
     };
 
@@ -431,6 +435,13 @@ export function createTheme(...options: ThemeOptions[]): Theme {
         warning: createPaletteColor(mergedOptions.palette?.warning || DEFAULT_PALETTE.warning),
         info: createPaletteColor(mergedOptions.palette?.info || DEFAULT_PALETTE.info),
         success: createPaletteColor(mergedOptions.palette?.success || DEFAULT_PALETTE.success),
+        // Handle light and dark colors if provided
+        ...(mergedOptions.palette?.light && {
+            light: createPaletteColor(mergedOptions.palette.light),
+        }),
+        ...(mergedOptions.palette?.dark && {
+            dark: createPaletteColor(mergedOptions.palette.dark),
+        }),
         background: {
             default: mergedOptions.palette?.background?.default || DEFAULT_PALETTE.background.default,
             paper: mergedOptions.palette?.background?.paper || DEFAULT_PALETTE.background.paper,

package/src/lib/theme/devtools/CLI.ts

@@ -0,0 +1,279 @@
+/**
+ * Theme CLI
+ * 
+ * Command-line interface for theme management
+ */
+
+import { generateConfigTemplate } from '../generators/ConfigGenerator';
+import { generateCSS } from '../generators/CSSGenerator';
+import { generateTypes } from '../generators/TypeGenerator';
+import { loadThemeConfig } from '../config/loader';
+import { validateConfig } from '../config/validator';
+
+/**
+ * CLI command interface
+ */
+export interface CLICommand {
+  name: string;
+  description: string;
+  options?: Record<string, string>;
+  handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
+}
+
+/**
+ * Theme CLI
+ * 
+ * Command-line interface for theme operations
+ */
+export class ThemeCLI {
+  private commands: Map<string, CLICommand> = new Map();
+
+  constructor() {
+    this.registerDefaultCommands();
+  }
+
+  /**
+   * Register default commands
+   */
+  private registerDefaultCommands(): void {
+    this.register({
+      name: 'init',
+      description: 'Initialize theme configuration',
+      options: {
+        '--format': 'Output format (typescript, javascript, json)',
+        '--examples': 'Include example themes',
+      },
+      handler: this.handleInit.bind(this),
+    });
+
+    this.register({
+      name: 'validate',
+      description: 'Validate theme configuration',
+      handler: this.handleValidate.bind(this),
+    });
+
+    this.register({
+      name: 'build',
+      description: 'Build theme CSS files',
+      options: {
+        '--output': 'Output directory',
+        '--minify': 'Minify output',
+      },
+      handler: this.handleBuild.bind(this),
+    });
+
+    this.register({
+      name: 'types',
+      description: 'Generate TypeScript types',
+      options: {
+        '--output': 'Output file',
+        '--module': 'Module name',
+      },
+      handler: this.handleTypes.bind(this),
+    });
+
+    this.register({
+      name: 'help',
+      description: 'Show help information',
+      handler: this.handleHelp.bind(this),
+    });
+  }
+
+  /**
+   * Register a command
+   */
+  register(command: CLICommand): void {
+    this.commands.set(command.name, command);
+  }
+
+  /**
+   * Run CLI with arguments
+   */
+  async run(args: string[]): Promise<void> {
+    const [commandName, ...commandArgs] = args;
+
+    if (!commandName) {
+      this.handleHelp([], {});
+      return;
+    }
+
+    const command = this.commands.get(commandName);
+    if (!command) {
+      console.error(`Unknown command: ${commandName}`);
+      console.error('Run "atomix-theme help" for available commands');
+      process.exit(1);
+    }
+
+    try {
+      const { args: parsedArgs, options } = this.parseArgs(commandArgs);
+      await command.handler(parsedArgs, options);
+    } catch (error) {
+      console.error(`Error running command "${commandName}":`, error);
+      process.exit(1);
+    }
+  }
+
+  /**
+   * Parse command arguments
+   */
+  private parseArgs(args: string[]): { args: string[]; options: Record<string, any> } {
+    const parsedArgs: string[] = [];
+    const options: Record<string, any> = {};
+
+    for (let i = 0; i < args.length; i++) {
+      const arg = args[i];
+      if (arg?.startsWith('--')) {
+        const key = arg.slice(2);
+        const nextArg = args[i + 1];
+        if (nextArg && !nextArg.startsWith('--')) {
+          options[key] = nextArg;
+          i++; // Skip next argument
+        } else {
+          options[key] = true;
+        }
+      } else if (arg) {
+        parsedArgs.push(arg);
+      }
+    }
+
+    return { args: parsedArgs, options };
+  }
+
+  /**
+   * Handle init command
+   */
+  private handleInit(args: string[], options: Record<string, any>): void {
+    const format = options.format || 'typescript';
+    const includeExamples = options.examples !== false;
+
+    const config = generateConfigTemplate({
+      format: format as any,
+      includeExamples,
+      includeComments: true,
+    });
+
+    const filename = format === 'json' ? 'theme.config.json' : 
+                    format === 'javascript' ? 'theme.config.js' : 
+                    'theme.config.ts';
+
+    console.log(`Generating ${filename}...`);
+    console.log(config);
+    console.log(`\\nTheme configuration template generated!`);
+    console.log(`Save this content to ${filename} in your project root.`);
+  }
+
+  /**
+   * Handle validate command
+   */
+  private handleValidate(args: string[], options: Record<string, any>): void {
+    try {
+      const config = loadThemeConfig();
+      const result = validateConfig(config);
+
+      if (result.valid) {
+        console.log('✅ Theme configuration is valid');
+        if (result.warnings.length > 0) {
+          console.log('\\n⚠️  Warnings:');
+          result.warnings.forEach(warning => console.log(`  - ${warning}`));
+        }
+      } else {
+        console.log('❌ Theme configuration is invalid');
+        console.log('\\nErrors:');
+        result.errors.forEach(error => console.log(`  - ${error}`));
+        
+        if (result.warnings.length > 0) {
+          console.log('\\nWarnings:');
+          result.warnings.forEach(warning => console.log(`  - ${warning}`));
+        }
+        process.exit(1);
+      }
+    } catch (error) {
+      console.error('Failed to load theme configuration:', error);
+      process.exit(1);
+    }
+  }
+
+  /**
+   * Handle build command
+   */
+  private handleBuild(args: string[], options: Record<string, any>): void {
+    console.log('Building themes...');
+    console.log('Note: This is a placeholder. Implement actual build logic based on your needs.');
+    
+    try {
+      const config = loadThemeConfig();
+      console.log(`Found ${Object.keys(config.themes).length} themes to build`);
+      
+      // This would typically:
+      // 1. Load each theme
+      // 2. Generate CSS for CSS themes
+      // 3. Execute createTheme for JS themes and generate CSS
+      // 4. Write files to output directory
+      
+      console.log('✅ Build completed');
+    } catch (error) {
+      console.error('Build failed:', error);
+      process.exit(1);
+    }
+  }
+
+  /**
+   * Handle types command
+   */
+  private handleTypes(args: string[], options: Record<string, any>): void {
+    console.log('Generating TypeScript types...');
+    console.log('Note: This is a placeholder. Implement actual type generation logic.');
+    
+    try {
+      const config = loadThemeConfig();
+      const moduleName = options.module || 'CustomTheme';
+      
+      // This would typically:
+      // 1. Load themes
+      // 2. Generate TypeScript definitions
+      // 3. Write to output file
+      
+      console.log(`Generated types for module: ${moduleName}`);
+      console.log('✅ Type generation completed');
+    } catch (error) {
+      console.error('Type generation failed:', error);
+      process.exit(1);
+    }
+  }
+
+  /**
+   * Handle help command
+   */
+  private handleHelp(args: string[], options: Record<string, any>): void {
+    console.log('Atomix Theme CLI\\n');
+    console.log('Usage: atomix-theme <command> [options]\\n');
+    console.log('Commands:');
+
+    for (const [name, command] of this.commands.entries()) {
+      console.log(`  ${name.padEnd(12)} ${command.description}`);
+      
+      if (command.options) {
+        for (const [option, description] of Object.entries(command.options)) {
+          console.log(`    ${option.padEnd(16)} ${description}`);
+        }
+      }
+      console.log();
+    }
+  }
+}
+
+/**
+ * Create CLI instance
+ */
+export function createCLI(): ThemeCLI {
+  return new ThemeCLI();
+}
+
+/**
+ * Run CLI with process arguments
+ */
+export function runCLI(): void {
+  const cli = createCLI();
+  const args = process.argv.slice(2);
+  cli.run(args);
+}