@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/lib/theme/index.ts

@@ -1,33 +1,164 @@
 /**
  * Theme System Exports
  * 
- * Central export point for all theme-related functionality
+ * Unified theme system - handles both DesignTokens and Theme objects.
+ * 
+ * @example
+ * ```typescript
+ * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
+ * 
+ * // Using DesignTokens (recommended - flat structure)
+ * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
+ * injectTheme(css);
+ * 
+ * // Or use with ThemeProvider
+ * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * const tokens = { 'primary': '#7c3aed' };
+ * <ThemeProvider defaultTheme={tokens}>...</ThemeProvider>
+ * ```
+ */
+
+// ============================================================================
+// Core Theme Functions
+// ============================================================================
+
+// Unified createTheme (handles both DesignTokens and Theme objects)
+export { createTheme } from './core';
+
+// Theme object creation
+export { createThemeObject } from './core';
+
+// Theme composition
+export { deepMerge, mergeTheme, extendTheme } from './core';
+
+// Simplified Theme Registry
+export { 
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+} from './core';
+
+// ============================================================================
+// Theme Injection and Management
+// ============================================================================
+
+import { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
+import { saveCSSFile, saveCSSFileSync } from './generators/cssFile';
+
+/**
+ * Inject theme CSS into DOM
+ */
+export function injectTheme(css: string, id: string = 'atomix-theme'): void {
+  injectCSS(css, id);
+}
+
+/**
+ * Remove theme from DOM
+ */
+export function removeTheme(id: string = 'atomix-theme'): void {
+  removeCSS(id);
+}
+
+/**
+ * Save theme to CSS file
  */
+export async function saveTheme(css: string, filePath: string): Promise<void> {
+  await saveCSSFile(css, filePath);
+}
+
+// ============================================================================
+// Token Utilities
+// ============================================================================
+
+export { createTokens, defaultTokens, type DesignTokens } from './tokens';
+
+// ============================================================================
+// CSS Generation
+// ============================================================================
+
+export {
+  generateCSSVariables,
+  generateCSSVariablesForSelector,
+  type GenerateCSSVariablesOptions,
+} from './generators';
 
-// Core theme system
+// ============================================================================
+// Naming and Component Theming Utilities
+// ============================================================================
+
+export {
+  generateClassName,
+  generateCSSVariableName,
+  normalizeThemeTokens,
+  camelToKebab,
+  themePropertyToCSSVar,
+  type NamingOptions,
+} from './utils/naming';
+
+export {
+  getComponentThemeValue,
+  generateComponentCSSVars,
+  applyComponentTheme,
+  useComponentTheme,
+  type ComponentThemeOptions,
+} from './utils/componentTheming';
+
+// ============================================================================
+// Injection Utilities
+// ============================================================================
+
+export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
+
+
+// ============================================================================
+// Config Loader
+// ============================================================================
+
+export {
+  loadThemeFromConfig,
+  loadThemeFromConfigSync,
+} from './config/configLoader';
+
+// ============================================================================
+// React Integration
+// ============================================================================
+
+// Core React components and hooks
 export { ThemeProvider } from './runtime/ThemeProvider';
 export { useTheme } from './runtime/useTheme';
-export { ThemeContext } from './ThemeContext';
-export { ThemeManager } from './runtime/ThemeManager';
+export { useThemeTokens } from './runtime/useThemeTokens';
+export { ThemeContext } from './runtime/ThemeContext';
 export { ThemeErrorBoundary } from './runtime/ThemeErrorBoundary';
 
-// Theme creation
-export { createTheme } from './createTheme';
-export { createThemeFromConfig } from './createThemeFromConfig';
-
-// Theme utilities
-export { quickTheme, createDarkVariant, validateTheme, themeToCSS, exportTheme, importTheme } from '../theme-tools';
+// Theme application
+export { ThemeApplicator, getThemeApplicator, applyTheme } from './runtime/ThemeApplicator';
 
 // DevTools (for development and debugging)
 export * from './devtools';
 
-// Theme application
-export { ThemeApplicator, getThemeApplicator, applyTheme, removeTheme } from './runtime/ThemeApplicator';
+// Theme adapter (converts between Theme and DesignTokens)
+export {
+  themeToDesignTokens,
+  designTokensToCSSVars,
+  createDesignTokensFromTheme,
+  designTokensToTheme,
+} from './adapters';
+
+// Theme helpers (utilities for working with themes and DesignTokens)
+export {
+  getDesignTokensFromTheme,
+  isDesignTokens,
+  isThemeObject,
+} from './utils/themeHelpers';
 
 // CSS variable utilities
 export {
-  generateCSSVariableName,
-  generateComponentCSSVars,
   mapSCSSTokensToCSSVars,
   applyCSSVariables,
   removeCSSVariables,
@@ -36,16 +167,15 @@ export {
   mergeCSSVars,
   isValidCSSVariableName,
   extractComponentName,
-} from './cssVariableMapper';
+} from './adapters/cssVariableMapper';
 
 // RTL Support
 export { RTLManager } from './i18n/rtl';
 
+
 // Types
 export type {
   Theme,
-  ThemeMetadata,
-  ThemeManagerConfig,
   ThemeChangeEvent,
   ThemeLoadOptions,
   ThemeValidationResult,
@@ -61,6 +191,6 @@ export type { ThemeErrorBoundaryProps } from './runtime/ThemeErrorBoundary';
 export type {
   CSSVariableConfig,
   CSSVariableNamingOptions,
-} from './cssVariableMapper';
+} from './adapters/cssVariableMapper';
 
-export type { RTLConfig } from './i18n/rtl';
+export type { RTLConfig } from './i18n/rtl';

package/src/lib/theme/runtime/ThemeApplicator.ts

@@ -3,17 +3,23 @@
  * 
  * Applies theme configurations to the DOM, including CSS variables,
  * component overrides, typography, spacing, and color palettes.
+ * 
+ * Uses the unified theme system for CSS generation and injection.
  */
 
-import { applyCSSVariables, removeCSSVariables } from '../cssVariableMapper';
 import type { Theme, ThemeComponentOverrides, ComponentThemeOverride } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
+import { createTheme } from '../core/createTheme';
+import { injectCSS, removeCSS } from '../utils/injectCSS';
 
 /**
  * Theme applicator class for runtime theme application
+ * 
+ * Uses the unified theme system for efficient CSS variable generation and injection.
  */
 export class ThemeApplicator {
-  private appliedVars: Set<string> = new Set();
   private root: HTMLElement;
+  private styleId: string = 'atomix-theme-applicator';
 
   constructor(root: HTMLElement = document.documentElement) {
     this.root = root;
@@ -21,129 +27,71 @@ export class ThemeApplicator {
 
   /**
    * Apply a complete theme configuration
+   * 
+   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+   * Automatically respects atomix.config.ts when using DesignTokens.
    */
-  applyTheme(theme: Theme): void {
+  applyTheme(theme: Theme | DesignTokens): void {
     // Clear previously applied variables
     this.clearAppliedVars();
 
-    // Apply global CSS variables
-    if (theme.cssVars) {
-      this.applyGlobalCSSVars(theme.cssVars);
-    }
-
-    // Apply typography system
-    if (theme.typography) {
-      this.applyTypography(theme.typography);
-    }
-
-    // Apply spacing system
-    if (theme.spacing) {
-      this.applySpacing(theme.spacing);
-    }
-
-    // Apply color palette
-    if (theme.palette) {
-      this.applyPalette(theme.palette);
+    // Check if it's DesignTokens
+    if (this.isDesignTokens(theme)) {
+      // Direct DesignTokens - use unified theme system (with config support)
+      this.applyDesignTokens(theme);
+    } else {
+      // Theme object - use createTheme which handles Theme objects
+      // createTheme automatically converts Theme to DesignTokens internally
+      const css = createTheme(theme, {
+        selector: ':root',
+        prefix: 'atomix',
+      });
+      injectCSS(css, this.styleId);
     }
 
-    // Apply component overrides
-    if ((theme as any).components) {
+    // Apply component overrides (only for Theme objects)
+    if (!this.isDesignTokens(theme) && (theme as any).components) {
       this.applyComponentOverrides((theme as any).components);
     }
   }
 
   /**
-   * Apply global CSS variables
+   * Apply DesignTokens using unified theme system
+   * 
+   * Uses createTheme() which automatically loads from atomix.config.ts
+   * if no tokens are provided, ensuring config is always respected.
    */
-  private applyGlobalCSSVars(vars: Record<string, string | number>): void {
-    Object.entries(vars).forEach(([key, value]) => {
-      this.root.style.setProperty(key, String(value));
-      this.appliedVars.add(key);
+  private applyDesignTokens(tokens: Partial<DesignTokens>): void {
+    // Use createTheme() which handles config loading automatically
+    // If tokens is empty, it will load from config
+    const css = createTheme(tokens, {
+      selector: ':root',
+      prefix: 'atomix', // Can be overridden by config
     });
-  }
-
-  /**
-   * Apply typography system
-   */
-  private applyTypography(typography: Theme['typography']): void {
-    if (!typography) return;
-
-    const vars: Record<string, string | number> = {};
-
-    if (typography.fontFamily) {
-      vars['--atomix-font-family'] = typography.fontFamily;
-    }
-
-    if (typography.fontSize) {
-      Object.entries(typography.fontSize).forEach(([key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number') {
-          vars[`--atomix-font-size-${key}`] = value;
-        }
-      });
-    }
-
-    if (typography.fontWeight) {
-      Object.entries(typography.fontWeight).forEach(([key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number') {
-          vars[`--atomix-font-weight-${key}`] = value;
-        }
-      });
-    }
 
-    if (typography.lineHeight) {
-      Object.entries(typography.lineHeight).forEach(([key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number') {
-          vars[`--atomix-line-height-${key}`] = value;
-        }
-      });
-    }
-
-    this.applyGlobalCSSVars(vars);
+    // Inject CSS into DOM
+    injectCSS(css, this.styleId);
   }
 
   /**
-   * Apply spacing system
+   * Check if object is DesignTokens
    */
-  private applySpacing(spacing: any): void {
-    const vars: Record<string, string | number> = {};
-
-    // Handle spacing function or object
-    if (typeof spacing === 'function') {
-      // If spacing is a function, we can't iterate it directly
-      // Just skip for now as it's a special case
-      return;
-    }
-
-    if (typeof spacing === 'object' && spacing !== null) {
-      Object.entries(spacing).forEach(([key, value]) => {
-        if (typeof value === 'string' || typeof value === 'number') {
-          vars[`--atomix-space-${key}`] = value;
-        }
-      });
-    }
-
-    this.applyGlobalCSSVars(vars);
+  private isDesignTokens(obj: Theme | DesignTokens): obj is DesignTokens {
+    // DesignTokens is a flat object with string keys, no nested structures
+    return obj !== null &&
+           typeof obj === 'object' &&
+           !('palette' in obj) &&
+           !('typography' in obj) &&
+           !('__isJSTheme' in obj);
   }
 
   /**
-   * Apply color palette
+   * Apply global CSS variables (for component overrides)
    */
-  private applyPalette(palette: Theme['palette']): void {
-    if (!palette) return;
-
-    const vars: Record<string, string | number> = {};
-
-    Object.entries(palette).forEach(([colorName, colorScale]) => {
-      if (colorScale && typeof colorScale === 'object') {
-        Object.entries(colorScale).forEach(([shade, value]) => {
-          if (value && (typeof value === 'string' || typeof value === 'number')) {
-            vars[`--atomix-color-${colorName}-${shade}`] = value;
-          }
-        });
-      }
+  private applyGlobalCSSVars(vars: Record<string, string | number>): void {
+    Object.entries(vars).forEach(([key, value]) => {
+      this.root.style.setProperty(key, String(value));
     });
-
-    this.applyGlobalCSSVars(vars);
   }
 
   /**
@@ -213,15 +161,7 @@ export class ThemeApplicator {
    * Clear all applied CSS variables
    */
   private clearAppliedVars(): void {
-    removeCSSVariables(Array.from(this.appliedVars), this.root);
-    this.appliedVars.clear();
-  }
-
-  /**
-   * Get all currently applied variables
-   */
-  getAppliedVars(): string[] {
-    return Array.from(this.appliedVars);
+    removeCSS(this.styleId);
   }
 
   /**
@@ -229,6 +169,7 @@ export class ThemeApplicator {
    */
   removeTheme(): void {
     this.clearAppliedVars();
+    removeCSS(this.styleId);
   }
 
   /**
@@ -257,7 +198,7 @@ export function getThemeApplicator(): ThemeApplicator {
 /**
  * Apply theme using global applicator
  */
-export function applyTheme(theme: Theme): void {
+export function applyTheme(theme: Theme | DesignTokens): void {
   getThemeApplicator().applyTheme(theme);
 }
 

package/src/lib/theme/{ThemeContext.tsx → runtime/ThemeContext.tsx}

@@ -5,7 +5,7 @@
  */
 
 import { createContext } from 'react';
-import type { ThemeContextValue } from './types';
+import type { ThemeContextValue } from '../types';
 
 /**
  * Theme context with default values

package/src/lib/theme/runtime/ThemeErrorBoundary.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { Component, type ReactNode, type ErrorInfo } from 'react';
-import { ThemeError, ThemeErrorCode, getLogger } from '../errors';
+import { ThemeError, ThemeErrorCode, getLogger } from '../errors/errors';
 
 /**
  * Error boundary state
@@ -83,7 +83,7 @@ const DefaultFallback: React.FC<{ error: Error; errorInfo: ErrorInfo }> = ({ err
           </pre>
         </details>
       )}
-      {process.env.NODE_ENV === 'development' && errorInfo && (
+      {(typeof process === 'undefined' || process.env?.NODE_ENV === 'development') && errorInfo && (
         <details style={{ marginTop: '1rem' }}>
           <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>
             Stack Trace (Development Only)
@@ -148,7 +148,7 @@ export class ThemeErrorBoundary extends Component<
     };
   }
 
-  override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     // Log error
     const themeError = error instanceof ThemeError
       ? error
@@ -187,7 +187,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  override componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
+  componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
     // Reset error if resetOnPropsChange is true and children changed
     if (
       this.props.resetOnPropsChange &&
@@ -202,7 +202,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  override render(): ReactNode {
+  render(): ReactNode {
     if (this.state.hasError && this.state.error && this.state.errorInfo) {
       // Use custom fallback if provided
       if (this.props.fallback) {