@shohojdhara/atomix 0.3.5 → 0.3.6

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);
   }
 
   /**

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