@shohojdhara/atomix 0.3.6 → 0.3.8

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

@@ -7,7 +7,6 @@
  * Uses the unified theme system for CSS generation and injection.
  */
 
-import type { Theme, ThemeComponentOverrides, ComponentThemeOverride } from '../types';
 import type { DesignTokens } from '../tokens/tokens';
 import { createTheme } from '../core/createTheme';
 import { injectCSS, removeCSS } from '../utils/injectCSS';
@@ -26,42 +25,15 @@ export class ThemeApplicator {
   }
 
   /**
-   * Apply a complete theme configuration
+   * Apply a complete theme configuration using DesignTokens
    * 
-   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+   * Uses the unified theme system to generate and inject CSS.
    * Automatically respects atomix.config.ts when using DesignTokens.
    */
-  applyTheme(theme: Theme | DesignTokens): void {
+  applyTheme(tokens: Partial<DesignTokens>): void {
     // Clear previously applied variables
     this.clearAppliedVars();
 
-    // 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 (only for Theme objects)
-    if (!this.isDesignTokens(theme) && (theme as any).components) {
-      this.applyComponentOverrides((theme as any).components);
-    }
-  }
-
-  /**
-   * 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 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, {
@@ -74,19 +46,7 @@ export class ThemeApplicator {
   }
 
   /**
-   * Check if object is DesignTokens
-   */
-  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 global CSS variables (for component overrides)
+   * Apply global CSS variables
    */
   private applyGlobalCSSVars(vars: Record<string, string | number>): void {
     Object.entries(vars).forEach(([key, value]) => {
@@ -94,69 +54,6 @@ export class ThemeApplicator {
     });
   }
 
-  /**
-   * Apply component-level overrides
-   */
-  private applyComponentOverrides(overrides: ThemeComponentOverrides): void {
-    Object.entries(overrides).forEach(([componentName, override]) => {
-      if (override) {
-        this.applyComponentOverride(componentName, override);
-      }
-    });
-  }
-
-  /**
-   * Apply override for a specific component
-   */
-  private applyComponentOverride(
-    componentName: string,
-    override: ComponentThemeOverride
-  ): void {
-    const vars: Record<string, string | number> = {};
-    const componentKey = componentName.toLowerCase();
-
-    // Apply component-level CSS variables
-    if (override.cssVars) {
-      Object.entries(override.cssVars).forEach(([key, value]) => {
-        // If key doesn't start with --, add component prefix
-        const varKey = key.startsWith('--')
-          ? key
-          : `--atomix-${componentKey}-${key}`;
-        vars[varKey] = value;
-      });
-    }
-
-    // Apply part-specific CSS variables
-    if (override.parts) {
-      Object.entries(override.parts).forEach(([partName, partOverride]) => {
-        if (partOverride.cssVars) {
-          Object.entries(partOverride.cssVars).forEach(([key, value]) => {
-            const varKey = key.startsWith('--')
-              ? key
-              : `--atomix-${componentKey}-${partName}-${key}`;
-            vars[varKey] = value;
-          });
-        }
-      });
-    }
-
-    // Apply variant-specific CSS variables
-    if (override.variants) {
-      Object.entries(override.variants).forEach(([variantName, variantOverride]) => {
-        if (variantOverride.cssVars) {
-          Object.entries(variantOverride.cssVars).forEach(([key, value]) => {
-            const varKey = key.startsWith('--')
-              ? key
-              : `--atomix-${componentKey}-${variantName}-${key}`;
-            vars[varKey] = value;
-          });
-        }
-      });
-    }
-
-    this.applyGlobalCSSVars(vars);
-  }
-
   /**
    * Clear all applied CSS variables
    */
@@ -198,8 +95,8 @@ export function getThemeApplicator(): ThemeApplicator {
 /**
  * Apply theme using global applicator
  */
-export function applyTheme(theme: Theme): void {
-  getThemeApplicator().applyTheme(theme);
+export function applyTheme(tokens: Partial<DesignTokens>): void {
+  getThemeApplicator().applyTheme(tokens);
 }
 
 /**

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

@@ -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)