@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/lib/theme/createTheme.ts

@@ -32,6 +32,8 @@ import type {
     ZIndexOptions,
     BorderRadiusOptions,
 } from './types';
+import { hexToRgb, getLuminance, getContrastText, lighten, darken, createSpacing } from './themeUtils';
+import { deepMerge } from './composeTheme';
 
 // ============================================================================
 // Default Theme Values
@@ -39,116 +41,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 +172,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'] = {
@@ -219,109 +224,6 @@ const DEFAULT_BORDER_RADIUS: Theme['borderRadius'] = {
 // Helper Functions
 // ============================================================================
 
-/**
- * Deep merge two objects
- */
-function deepMerge<T extends Record<string, any>>(target: T, ...sources: Partial<T>[]): T {
-    if (!sources.length) return target;
-    const source = sources.shift();
-
-    if (isObject(target) && isObject(source)) {
-        for (const key in source) {
-            if (!source.hasOwnProperty(key)) continue;
-            const sourceValue = source[key];
-            if (isObject(sourceValue)) {
-                if (!target[key]) Object.assign(target, { [key]: {} });
-                deepMerge(target[key] as any, sourceValue as any);
-            } else {
-                Object.assign(target, { [key]: sourceValue });
-            }
-        }
-    }
-
-    return deepMerge(target, ...sources);
-}
-
-/**
- * Check if value is an object
- */
-function isObject(item: any): item is Record<string, any> {
-    return item && typeof item === 'object' && !Array.isArray(item);
-}
-
-/**
- * Convert hex color to RGB
- */
-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result || !result[1] || !result[2] || !result[3]) {
-        return null;
-    }
-    return {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-    };
-}
-
-/**
- * Calculate relative luminance
- */
-function getLuminance(color: string): number {
-    const rgb = hexToRgb(color);
-    if (!rgb) return 0;
-
-    const { r, g, b } = rgb;
-    const [rs, gs, bs] = [r ?? 0, g ?? 0, b ?? 0].map((c) => {
-        const val = c / 255;
-        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-    });
-
-    return 0.2126 * (rs ?? 0) + 0.7152 * (gs ?? 0) + 0.0722 * (bs ?? 0);
-}
-
-/**
- * Get contrast text color (black or white) based on background
- */
-function getContrastText(background: string): string {
-    const luminance = getLuminance(background);
-    return luminance > 0.5 ? '#000000' : '#FFFFFF';
-}
-
-/**
- * Lighten a color
- */
-function lighten(color: string, amount: number = 0.2): string {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
-
-    const { r, g, b } = rgb;
-    const lightenValue = (val: number) => Math.min(255, Math.round(val + (255 - val) * amount));
-
-    const newR = lightenValue(r ?? 0).toString(16).padStart(2, '0');
-    const newG = lightenValue(g ?? 0).toString(16).padStart(2, '0');
-    const newB = lightenValue(b ?? 0).toString(16).padStart(2, '0');
-
-    return `#${newR}${newG}${newB}`;
-}
-
-/**
- * Darken a color
- */
-function darken(color: string, amount: number = 0.2): string {
-    const rgb = hexToRgb(color);
-    if (!rgb) return color;
-
-    const { r, g, b } = rgb;
-    const darkenValue = (val: number) => Math.max(0, Math.round(val * (1 - amount)));
-
-    const newR = darkenValue(r ?? 0).toString(16).padStart(2, '0');
-    const newG = darkenValue(g ?? 0).toString(16).padStart(2, '0');
-    const newB = darkenValue(b ?? 0).toString(16).padStart(2, '0');
-
-    return `#${newR}${newG}${newB}`;
-}
-
 /**
  * Create a complete palette color from partial configuration
  */
@@ -343,37 +245,6 @@ function createPaletteColor(color: Partial<PaletteColor> | string): PaletteColor
     };
 }
 
-/**
- * Create spacing function
- */
-function createSpacing(spacingInput: SpacingOptions = 4): SpacingFunction {
-    // If it's already a function, return it
-    if (typeof spacingInput === 'function') {
-        return spacingInput;
-    }
-
-    // If it's a number, create a function that multiplies by that number
-    if (typeof spacingInput === 'number') {
-        return (...values: number[]) => {
-            if (values.length === 0) return '0px';
-            return values.map((value) => `${value * spacingInput}px`).join(' ');
-        };
-    }
-
-    // If it's an array, use it as a scale
-    if (Array.isArray(spacingInput)) {
-        return (...values: number[]) => {
-            if (values.length === 0) return '0px';
-            return values.map((value) => `${spacingInput[value] || value}px`).join(' ');
-        };
-    }
-
-    // Default to 4px base
-    return (...values: number[]) => {
-        if (values.length === 0) return '0px';
-        return values.map((value) => `${value * 4}px`).join(' ');
-    };
-}
 
 /**
  * Create breakpoints object
@@ -381,10 +252,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 +303,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/cssVariableMapper.ts

@@ -0,0 +1,261 @@
+/**
+ * CSS Variable Mapper
+ * 
+ * Utilities for generating and managing CSS custom properties from SCSS tokens
+ * and component configurations.
+ */
+
+/**
+ * Configuration for generating CSS variables for a component
+ */
+export interface CSSVariableConfig {
+  /** Component name (e.g., 'button', 'card') */
+  component: string;
+  /** Base properties for the component */
+  properties: Record<string, string | number>;
+  /** Part-specific properties (e.g., icon, label) */
+  parts?: Record<string, Record<string, string | number>>;
+  /** State-specific properties (e.g., hover, active, disabled) */
+  states?: Record<string, Record<string, string | number>>;
+  /** Variant-specific properties (e.g., primary, secondary) */
+  variants?: Record<string, Record<string, string | number>>;
+}
+
+/**
+ * CSS variable naming options
+ */
+export interface CSSVariableNamingOptions {
+  /** Prefix for all variables (default: 'atomix') */
+  prefix?: string;
+  /** Separator between parts (default: '-') */
+  separator?: string;
+  /** Whether to include component name in variable (default: true) */
+  includeComponent?: boolean;
+}
+
+/**
+ * Generate CSS variable name from parts
+ * 
+ * @example
+ * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
+ * // Returns: '--atomix-button-bg'
+ */
+export function generateCSSVariableName(
+  component: string,
+  property: string,
+  options: CSSVariableNamingOptions = {}
+): string {
+  const {
+    prefix = 'atomix',
+    separator = '-',
+    includeComponent = true,
+  } = options;
+
+  const parts = [prefix];
+  
+  if (includeComponent) {
+    parts.push(component);
+  }
+  
+  parts.push(property);
+  
+  return `--${parts.join(separator)}`;
+}
+
+/**
+ * Generate CSS variables object from configuration
+ * 
+ * @example
+ * const vars = generateComponentCSSVars({
+ *   component: 'button',
+ *   properties: { bg: '#000', color: '#fff' }
+ * })
+ * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
+ */
+export function generateComponentCSSVars(
+  config: CSSVariableConfig,
+  options: CSSVariableNamingOptions = {}
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const { component, properties, parts, states, variants } = config;
+
+  // Base properties
+  Object.entries(properties).forEach(([key, value]) => {
+    const varName = generateCSSVariableName(component, key, options);
+    vars[varName] = String(value);
+  });
+
+  // Part properties
+  if (parts) {
+    Object.entries(parts).forEach(([partName, partProps]) => {
+      Object.entries(partProps).forEach(([key, value]) => {
+        const varName = generateCSSVariableName(
+          component,
+          `${partName}-${key}`,
+          options
+        );
+        vars[varName] = String(value);
+      });
+    });
+  }
+
+  // State properties
+  if (states) {
+    Object.entries(states).forEach(([stateName, stateProps]) => {
+      Object.entries(stateProps).forEach(([key, value]) => {
+        const varName = generateCSSVariableName(
+          component,
+          `${stateName}-${key}`,
+          options
+        );
+        vars[varName] = String(value);
+      });
+    });
+  }
+
+  // Variant properties
+  if (variants) {
+    Object.entries(variants).forEach(([variantName, variantProps]) => {
+      Object.entries(variantProps).forEach(([key, value]) => {
+        const varName = generateCSSVariableName(
+          component,
+          `${variantName}-${key}`,
+          options
+        );
+        vars[varName] = String(value);
+      });
+    });
+  }
+
+  return vars;
+}
+
+/**
+ * Map SCSS tokens to CSS custom properties
+ * 
+ * @example
+ * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
+ * const vars = mapSCSSTokensToCSSVars(tokens)
+ * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
+ */
+export function mapSCSSTokensToCSSVars(
+  tokens: Record<string, any>,
+  options: CSSVariableNamingOptions = {}
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const { prefix = 'atomix', separator = '-' } = options;
+
+  Object.entries(tokens).forEach(([key, value]) => {
+    // Remove $ prefix from SCSS variables
+    const cleanKey = key.startsWith('$') ? key.slice(1) : key;
+    
+    // Convert underscores to separators
+    const normalizedKey = cleanKey.replace(/_/g, separator);
+    
+    // Generate variable name
+    const varName = `--${prefix}${separator}${normalizedKey}`;
+    
+    vars[varName] = String(value);
+  });
+
+  return vars;
+}
+
+/**
+ * Apply CSS variables to an element
+ * 
+ * @param element - Target element (defaults to document.documentElement)
+ * @param vars - CSS variables to apply
+ */
+export function applyCSSVariables(
+  vars: Record<string, string | number>,
+  element: HTMLElement = document.documentElement
+): void {
+  Object.entries(vars).forEach(([key, value]) => {
+    element.style.setProperty(key, String(value));
+  });
+}
+
+/**
+ * Remove CSS variables from an element
+ * 
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
+ */
+export function removeCSSVariables(
+  varNames: string[],
+  element: HTMLElement = document.documentElement
+): void {
+  varNames.forEach((varName) => {
+    element.style.removeProperty(varName);
+  });
+}
+
+/**
+ * Get CSS variable value from an element
+ * 
+ * @param varName - Variable name to get
+ * @param element - Target element (defaults to document.documentElement)
+ * @returns Variable value or null if not found
+ */
+export function getCSSVariable(
+  varName: string,
+  element: HTMLElement = document.documentElement
+): string | null {
+  return getComputedStyle(element).getPropertyValue(varName).trim() || null;
+}
+
+/**
+ * Convert CSS variable object to inline style object
+ * 
+ * @example
+ * const vars = { '--atomix-button-bg': '#000' }
+ * const style = cssVarsToStyle(vars)
+ * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
+ */
+export function cssVarsToStyle(
+  vars: Record<string, string | number>
+): React.CSSProperties {
+  return Object.entries(vars).reduce((acc, [key, value]) => {
+    (acc as any)[key] = typeof value === 'number' ? `${value}px` : value;
+    return acc;
+  }, {} as React.CSSProperties);
+}
+
+/**
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
+ */
+export function mergeCSSVars(
+  ...varObjects: Array<Record<string, string | number> | undefined>
+): Record<string, string | number> {
+  return varObjects.reduce<Record<string, string | number>>((acc, vars) => {
+    if (vars) {
+      Object.assign(acc, vars);
+    }
+    return acc;
+  }, {});
+}
+
+/**
+ * Validate CSS variable name format
+ */
+export function isValidCSSVariableName(name: string): boolean {
+  return /^--[a-z0-9-]+$/.test(name);
+}
+
+/**
+ * Extract component name from CSS variable name
+ * 
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
+ */
+export function extractComponentName(
+  varName: string,
+  prefix: string = 'atomix'
+): string | null {
+  const regex = new RegExp(`^--${prefix}-([a-z0-9]+)-`);
+  const match = varName.match(regex);
+  return match ? (match[1] ?? null) : null;
+}