@shohojdhara/atomix 0.3.7 → 0.3.8

package/src/lib/theme/config/configLoader.ts

@@ -6,10 +6,9 @@
  * Includes both sync and async versions, with automatic fallbacks
  */
 
-import type { Theme } from '../types';
 import type { DesignTokens } from '../tokens/tokens';
 import { createTokens } from '../tokens/tokens';
-import { themeToDesignTokens, createDesignTokensFromTheme } from '../adapters/themeAdapter';
+import { loadAtomixConfig as loadAtomixConfigStatic } from '../../config/loader';
 
 /**
  * Load theme from config file (synchronous, Node.js only)
@@ -23,14 +22,14 @@ export function loadThemeFromConfigSync(options?: { configPath?: string; require
     throw new Error('loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.');
   }
 
-  // Use dynamic import to load the config loader
-  // This allows bundlers to handle external dependencies properly
-  let loadAtomixConfig: any;
+  // Use static import - the function handles browser environment checks internally
+  let config;
   
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { loadAtomixConfig: loader } = require('../../config/loader');
-    loadAtomixConfig = loader;
+    config = loadAtomixConfigStatic({
+      configPath: options?.configPath || 'atomix.config.ts',
+      required: options?.required !== false,
+    });
   } catch (error) {
     if (options?.required !== false) {
       throw new Error('Config loader module not available');
@@ -39,20 +38,26 @@ export function loadThemeFromConfigSync(options?: { configPath?: string; require
     return createTokens({});
   }
 
-  const config = loadAtomixConfig({
-    configPath: options?.configPath || 'atomix.config.ts',
-    required: options?.required !== false,
-  });
-
   if (!config?.theme) {
     return createTokens({});
   }
 
-  if (isThemeObject(config.theme)) {
-    return createDesignTokensFromTheme(config.theme);
+  // Extract tokens from config.theme structure
+  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
+  // We need to extract the actual DesignTokens (flat structure)
+  const themeConfig = config.theme;
+  
+  // Check if theme is directly a flat object (DesignTokens format)
+  // This handles the case where config.theme might be passed as DesignTokens directly
+  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
+    // It's likely already a flat DesignTokens object
+    return createTokens(themeConfig as Partial<DesignTokens>);
   }
-
-  return createTokens(config.theme);
+  
+  // If theme has nested structure (extend/tokens/themes), we can't directly use it
+  // Return empty tokens - the theme system will use defaults
+  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
+  return createTokens({});
 }
 
 /**
@@ -66,30 +71,43 @@ export async function loadThemeFromConfig(options?: { configPath?: string; requi
     throw new Error('loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
   }
 
-  // Dynamic import for config loader
-  const { loadAtomixConfig } = await import('../../config/loader');
+  // Use static import with runtime check
+  // The function will handle browser environment checks internally
+  let config;
   
-  const config = await loadAtomixConfig({
-    configPath: options?.configPath || 'atomix.config.ts',
-    required: options?.required !== false,
-  });
+  try {
+    // loadAtomixConfig is synchronous, not async
+    config = loadAtomixConfigStatic({
+      configPath: options?.configPath || 'atomix.config.ts',
+      required: options?.required !== false,
+    });
+  } catch (error) {
+    if (options?.required !== false) {
+      throw new Error('Config loader module not available');
+    }
+    // Return empty tokens if config is not required
+    return createTokens({});
+  }
 
   if (!config?.theme) {
     return createTokens({});
   }
 
-  if (isThemeObject(config.theme)) {
-    return createDesignTokensFromTheme(config.theme);
+  // Extract tokens from config.theme structure
+  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
+  // We need to extract the actual DesignTokens (flat structure)
+  const themeConfig = config.theme;
+  
+  // Check if theme is directly a flat object (DesignTokens format)
+  // This handles the case where config.theme might be passed as DesignTokens directly
+  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
+    // It's likely already a flat DesignTokens object
+    return createTokens(themeConfig as Partial<DesignTokens>);
   }
-
-  return createTokens(config.theme);
+  
+  // If theme has nested structure (extend/tokens/themes), we can't directly use it
+  // Return empty tokens - the theme system will use defaults
+  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
+  return createTokens({});
 }
 
-/**
- * Check if the provided object is a Theme object
- * @param theme - Object to check
- * @returns True if the object is a Theme object, false otherwise
- */
-function isThemeObject(theme: any): theme is Theme {
-  return typeof theme === 'object' && theme !== null;
-}

package/src/lib/theme/core/composeTheme.ts

@@ -1,12 +1,9 @@
 /**
  * Theme Composition Utilities
  *
- * Simplified utilities for composing, merging, and extending themes.
+ * Simplified utilities for composing and merging DesignTokens.
  */
 
-import type { Theme, ThemeOptions } from '../types';
-import { createThemeObject } from './createThemeObject';
-
 // ============================================================================
 // Deep Merge Utility
 // ============================================================================
@@ -52,50 +49,45 @@ export function deepMerge<T extends Record<string, unknown>>(...objects: Partial
 }
 
 // ============================================================================
-// Theme Merging
+// DesignTokens Merging
 // ============================================================================
 
+import type { DesignTokens } from '../tokens/tokens';
+
 /**
- * Merge multiple theme options into a single theme options object
+ * Merge multiple DesignTokens objects into a single DesignTokens object
  *
- * @param themes - Theme options to merge
- * @returns Merged theme options
+ * @param tokens - DesignTokens objects to merge
+ * @returns Merged DesignTokens object
  *
  * @example
  * ```typescript
- * const baseTheme = { palette: { primary: { main: '#000' } } };
- * const customTheme = { palette: { secondary: { main: '#fff' } } };
- * const merged = mergeTheme(baseTheme, customTheme);
+ * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
+ * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
+ * const merged = mergeTheme(baseTokens, customTokens);
+ * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
  * ```
  */
-export function mergeTheme(...themes: ThemeOptions[]): ThemeOptions {
-    return deepMerge({}, ...themes);
+export function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens> {
+    return deepMerge({}, ...tokens);
 }
 
 /**
- * Extend an existing theme with new options
+ * Extend DesignTokens with additional tokens
  *
- * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
- * @param extension - Theme options to extend with
- * @returns New theme with extended options
+ * @param baseTokens - Base DesignTokens to extend
+ * @param extension - Additional DesignTokens to merge
+ * @returns Extended DesignTokens object
  *
  * @example
  * ```typescript
- * const base = createTheme({ palette: { primary: { main: '#000' } } });
- * const extended = extendTheme(base, {
- *   palette: { secondary: { main: '#fff' } }
- * });
+ * const base = { 'primary': '#000' };
+ * const extended = extendTheme(base, { 'secondary': '#fff' });
+ * // Returns: { 'primary': '#000', 'secondary': '#fff' }
  * ```
  */
-export function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme {
-    // Convert baseTheme to ThemeOptions if it's a complete Theme
-    const baseOptions: ThemeOptions = (baseTheme as Theme & { __isJSTheme?: boolean }).__isJSTheme
-        ? { ...baseTheme } as ThemeOptions
-        : baseTheme;
-
-    // Merge and create new theme
-    const merged = mergeTheme(baseOptions, extension);
-    return createThemeObject(merged);
+export function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens> {
+    return mergeTheme(baseTokens, extension);
 }
 
 export default {

package/src/lib/theme/core/createTheme.ts

@@ -1,32 +1,29 @@
 /**
  * Core Theme Functions
  *
- * Simplified theme system that handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  * Config-first approach: loads from atomix.config.ts when no input is provided.
- * Config file is required for automatic loading.
  */
 
 import type { DesignTokens } from '../tokens/tokens';
-import type { Theme } from '../types';
 import type { GenerateCSSVariablesOptions } from '../generators/generateCSS';
 import { createTokens } from '../tokens/tokens';
 import { generateCSSVariables } from '../generators/generateCSS';
-import { themeToDesignTokens } from '../adapters/themeAdapter';
+import { ThemeError, ThemeErrorCode } from '../errors/errors';
 
 /**
- * Create theme CSS from tokens or Theme object
+ * Create theme CSS from DesignTokens
  *
  * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
- * Config file is required for automatic loading.
  *
- * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
+ * @param input - DesignTokens (partial) or undefined (loads from config)
  * @param options - CSS generation options (prefix is automatically read from config if not provided)
  * @returns CSS string with custom properties
  * @throws Error if config loading fails when no input is provided
  *
  * @example
  * ```typescript
- * // Loads from atomix.config.ts (config file required)
+ * // Loads from atomix.config.ts
  * const css = createTheme();
  *
  * // Using DesignTokens
@@ -35,35 +32,56 @@ import { themeToDesignTokens } from '../adapters/themeAdapter';
  *   'spacing-4': '1rem',
  * });
  *
- * // Using Theme object
- * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
- * const css = createTheme(theme);
- *
  * // With custom options
  * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
  * ```
  */
 export function createTheme(
-  input?: Partial<DesignTokens> | Theme,
+  input?: Partial<DesignTokens>,
   options?: GenerateCSSVariablesOptions
 ): string {
+  // Validate options if provided
+  if (options?.prefix) {
+    const prefixPattern = /^[a-z][a-z0-9-]*$/;
+    if (!prefixPattern.test(options.prefix)) {
+      throw new ThemeError(
+        `Invalid CSS variable prefix: "${options.prefix}". Prefix must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens (e.g., "atomix", "my-app").`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { prefix: options.prefix, pattern: prefixPattern.toString() }
+      );
+    }
+  }
+
+  // Validate selector if provided
+  if (options?.selector) {
+    // Basic validation - selector should be a valid CSS selector
+    if (typeof options.selector !== 'string' || options.selector.trim().length === 0) {
+      throw new ThemeError(
+        `Invalid CSS selector: "${options.selector}". Selector must be a non-empty string (e.g., ":root", ".my-theme").`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { selector: options.selector }
+      );
+    }
+  }
+
   // Determine tokens based on input
   let tokens: Partial<DesignTokens>;
   
   if (!input) {
     // Check if we're in a browser environment
     if (typeof window !== 'undefined') {
-      throw new Error('createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.');
+      throw new ThemeError(
+        'No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.',
+        ThemeErrorCode.CONFIG_LOAD_FAILED,
+        { environment: 'browser' }
+      );
     }
     
     // Load from config when no input provided
-    // Using dynamic import in a way that's more compatible with bundlers
     let loadThemeFromConfigSync: any;
     let loadAtomixConfig: any;
     
     try {
-      // Use dynamic require but only in Node.js environments
-      // This approach allows bundlers to properly handle external dependencies
       const configLoaderModule = require('../config/configLoader');
       const loaderModule = require('../../config/loader');
       
@@ -83,12 +101,22 @@ export function createTheme(
         }
       }
     } catch (error) {
-      throw new Error('createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.');
+      throw new ThemeError(
+        'No input provided and config loading is not available in this environment. Please provide tokens explicitly.',
+        ThemeErrorCode.CONFIG_LOAD_FAILED,
+        { error: error instanceof Error ? error.message : String(error) }
+      );
     }
-  } else if (isThemeObject(input)) {
-    // Convert Theme object to DesignTokens
-    tokens = themeToDesignTokens(input);
   } else {
+    // Validate input tokens structure
+    if (typeof input !== 'object' || input === null || Array.isArray(input)) {
+      throw new ThemeError(
+        `Invalid tokens input. Expected an object with DesignTokens, but received: ${typeof input}.`,
+        ThemeErrorCode.THEME_VALIDATION_FAILED,
+        { inputType: typeof input }
+      );
+    }
+    
     // Use DesignTokens directly
     tokens = input;
   }
@@ -100,9 +128,4 @@ export function createTheme(
   const prefix = options?.prefix ?? 'atomix';
 
   return generateCSSVariables(allTokens, { ...options, prefix });
-}
-
-// Helper functions to simplify main function
-function isThemeObject(input: any): input is Theme {
-  return input?.__isJSTheme === true || (input?.palette && input?.typography);
 }

package/src/lib/theme/core/index.ts

@@ -5,7 +5,6 @@
  */
 
 export { createTheme } from './createTheme';
-export { createThemeObject } from './createThemeObject';
 export { deepMerge, mergeTheme, extendTheme } from './composeTheme';
 
 // Simplified Theme Registry API

package/src/lib/theme/generators/generateCSSNested.ts

@@ -69,7 +69,8 @@ export function generateNestedCSSVariables(
   const flattened = flatten ? flattenTokens(tokens, separator) : tokens;
 
   // Generate CSS variables using the original function
-  return generateCSSVariables(flattened, { selector, prefix });
+  // Cast to DesignTokens since generateCSSVariables filters out undefined values
+  return generateCSSVariables(flattened as DesignTokens, { selector, prefix });
 }
 
 /**
@@ -79,8 +80,8 @@ export function generateNestedCSSVariables(
  * @param separator - Separator for nested keys
  * @returns Flattened token object
  */
-function flattenTokens(tokens: DesignTokens, separator: string): DesignTokens {
-  const result: DesignTokens = {};
+function flattenTokens(tokens: DesignTokens, separator: string): Partial<DesignTokens> {
+  const result: Partial<DesignTokens> = {};
 
   for (const [key, value] of Object.entries(tokens)) {
     if (value && typeof value === 'object' && !Array.isArray(value)) {

package/src/lib/theme/generators/generateCSSVariables.ts

@@ -40,28 +40,36 @@ export interface GenerateCSSVariablesOptions {
 
 /**
  * Convert a nested object to flat CSS variable declarations
+ * Uses iterative approach for better performance with large objects
  */
 function flattenObject(
     obj: Record<string, any>,
     prefix: string = '',
     result: Record<string, string> = {}
 ): Record<string, string> {
-    for (const key in obj) {
-        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
-
-        const value = obj[key];
-        const newKey = prefix ? `${prefix}-${key}` : key;
-
-        if (value && typeof value === 'object' && !Array.isArray(value)) {
-            // Skip special objects like functions
-            if (typeof value === 'function') continue;
-
-            // Recursively flatten nested objects
-            flattenObject(value, newKey, result);
-        } else if (typeof value === 'string' || typeof value === 'number') {
-            // Convert camelCase to kebab-case
-            const kebabKey = newKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            result[kebabKey] = String(value);
+    // Use iterative approach with stack to avoid deep recursion
+    const stack: Array<{ obj: Record<string, any>; prefix: string }> = [{ obj, prefix }];
+    
+    while (stack.length > 0) {
+        const { obj: currentObj, prefix: currentPrefix } = stack.pop()!;
+        
+        for (const key in currentObj) {
+            if (!Object.prototype.hasOwnProperty.call(currentObj, key)) continue;
+
+            const value = currentObj[key];
+            const newKey = currentPrefix ? `${currentPrefix}-${key}` : key;
+
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                // Skip special objects like functions
+                if (typeof value === 'function') continue;
+
+                // Add to stack for iterative processing
+                stack.push({ obj: value, prefix: newKey });
+            } else if (typeof value === 'string' || typeof value === 'number') {
+                // Convert camelCase to kebab-case
+                const kebabKey = newKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                result[kebabKey] = String(value);
+            }
         }
     }
 

package/src/lib/theme/index.ts

@@ -1,13 +1,13 @@
 /**
  * Theme System Exports
  * 
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  * 
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  * 
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  * 
@@ -22,12 +22,9 @@
 // Core Theme Functions
 // ============================================================================
 
-// Unified createTheme (handles both DesignTokens and Theme objects)
+// Create theme CSS from DesignTokens
 export { createTheme } from './core';
 
-// Theme object creation
-export { createThemeObject } from './core';
-
 // Theme composition
 export { deepMerge, mergeTheme, extendTheme } from './core';
 
@@ -142,19 +139,12 @@ export { ThemeApplicator, getThemeApplicator, applyTheme } from './runtime/Theme
 // DevTools (for development and debugging)
 export * from './devtools';
 
-// Theme adapter (converts between Theme and DesignTokens)
-export {
-  themeToDesignTokens,
-  designTokensToCSSVars,
-  createDesignTokensFromTheme,
-  designTokensToTheme,
-} from './adapters';
+// CSS variable utilities
+export { designTokensToCSSVars } from './adapters';
 
-// Theme helpers (utilities for working with themes and DesignTokens)
+// Theme helpers (utilities for working with DesignTokens)
 export {
-  getDesignTokensFromTheme,
   isDesignTokens,
-  isThemeObject,
 } from './utils/themeHelpers';
 
 // CSS variable utilities
@@ -175,7 +165,6 @@ export { RTLManager } from './i18n/rtl';
 
 // Types
 export type {
-  Theme,
   ThemeChangeEvent,
   ThemeLoadOptions,
   ThemeValidationResult,
@@ -186,6 +175,10 @@ export type {
   ThemeComponentOverrides,
 } from './types';
 
+// Note: Theme type is deprecated - use DesignTokens instead
+// Keeping for backward compatibility with devtools and internal use only
+export type { Theme } from './types';
+
 export type { ThemeErrorBoundaryProps } from './runtime/ThemeErrorBoundary';
 
 export type {

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 | DesignTokens): void {
-  getThemeApplicator().applyTheme(theme);
+export function applyTheme(tokens: Partial<DesignTokens>): void {
+  getThemeApplicator().applyTheme(tokens);
 }
 
 /**