@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/tokens/tokenExporter.esm.js

@@ -1,397 +1,333 @@
-import type { ThemeTokens, TokenExportOptions } from './types';
-
 export class TokenExporter {
-  /**
-   * Exports tokens in the specified format
-   */
-  static exportTokens(tokens: ThemeTokens, options: TokenExportOptions): string {
-    switch (options.format) {
-      case 'json':
-        return this.exportAsJSON(tokens, options);
-      case 'css':
-        return this.exportAsCSS(tokens, options);
-      case 'scss':
-        return this.exportAsSCSS(tokens, options);
-      case 'js':
-        return this.exportAsJS(tokens, options);
-      case 'ts':
-        return this.exportAsTS(tokens, options);
-      default:
-        throw new Error(`Unsupported export format: ${options.format}`);
+    /**
+     * Exports tokens in the specified format
+     */
+    static exportTokens(tokens, options) {
+        switch (options.format) {
+            case 'json':
+                return this.exportAsJSON(tokens, options);
+            case 'css':
+                return this.exportAsCSS(tokens, options);
+            case 'scss':
+                return this.exportAsSCSS(tokens, options);
+            case 'js':
+                return this.exportAsJS(tokens, options);
+            case 'ts':
+                return this.exportAsTS(tokens, options);
+            default:
+                throw new Error(`Unsupported export format: ${options.format}`);
+        }
     }
-  }
-
-  /**
-   * Exports tokens as JSON
-   */
-  private static exportAsJSON(tokens: ThemeTokens, options: TokenExportOptions): string {
-    const exportData = options.includeMetadata ? tokens : tokens.tokens;
-    return JSON.stringify(exportData, null, 2);
-  }
-
-  /**
-   * Exports tokens as CSS custom properties
-   */
-  private static exportAsCSS(tokens: ThemeTokens, options: TokenExportOptions): string {
-    let css = '';
-    
-    if (options.includeComments) {
-      css += `/* ${tokens.theme} Design Tokens - v${tokens.version} */\n`;
-      css += `/* Generated on: ${new Date().toISOString()} */\n\n`;
+    /**
+     * Exports tokens as JSON
+     */
+    static exportAsJSON(tokens, options) {
+        const exportData = options.includeMetadata ? tokens : tokens.tokens;
+        return JSON.stringify(exportData, null, 2);
     }
-
-    css += `:root {\n`;
-    
-    // Export color tokens
-    if (tokens.tokens.color) {
-      css += this.exportColorTokensAsCSS(tokens.tokens.color, 2);
+    /**
+     * Exports tokens as CSS custom properties
+     */
+    static exportAsCSS(tokens, options) {
+        let css = '';
+        if (options.includeComments) {
+            css += `/* ${tokens.theme} Design Tokens - v${tokens.version} */\n`;
+            css += `/* Generated on: ${new Date().toISOString()} */\n\n`;
+        }
+        css += `:root {\n`;
+        // Export color tokens
+        if (tokens.tokens.color) {
+            css += this.exportColorTokensAsCSS(tokens.tokens.color, 2);
+        }
+        // Export font tokens
+        if (tokens.tokens.font) {
+            css += this.exportFontTokensAsCSS(tokens.tokens.font, 2);
+        }
+        // Export spacing tokens
+        if (tokens.tokens.spacing) {
+            css += this.exportSpacingTokensAsCSS(tokens.tokens.spacing, 2);
+        }
+        // Export shadow tokens
+        if (tokens.tokens.shadow) {
+            css += this.exportShadowTokensAsCSS(tokens.tokens.shadow, 2);
+        }
+        // Export transition tokens
+        if (tokens.tokens.transition) {
+            css += this.exportTransitionTokensAsCSS(tokens.tokens.transition, 2);
+        }
+        // Export breakpoint tokens
+        if (tokens.tokens.breakpoint) {
+            css += this.exportBreakpointTokensAsCSS(tokens.tokens.breakpoint, 2);
+        }
+        css += `}\n`;
+        return css;
     }
-
-    // Export font tokens
-    if (tokens.tokens.font) {
-      css += this.exportFontTokensAsCSS(tokens.tokens.font, 2);
-    }
-
-    // Export spacing tokens
-    if (tokens.tokens.spacing) {
-      css += this.exportSpacingTokensAsCSS(tokens.tokens.spacing, 2);
-    }
-
-    // Export shadow tokens
-    if (tokens.tokens.shadow) {
-      css += this.exportShadowTokensAsCSS(tokens.tokens.shadow, 2);
-    }
-
-    // Export transition tokens
-    if (tokens.tokens.transition) {
-      css += this.exportTransitionTokensAsCSS(tokens.tokens.transition, 2);
-    }
-
-    // Export breakpoint tokens
-    if (tokens.tokens.breakpoint) {
-      css += this.exportBreakpointTokensAsCSS(tokens.tokens.breakpoint, 2);
-    }
-
-    css += `}\n`;
-    return css;
-  }
-
-  /**
-   * Exports color tokens as CSS custom properties
-   */
-  private static exportColorTokensAsCSS(colorTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
-      if (typeof categoryTokens === 'object' && categoryTokens.value) {
-        // Single token
-        css += `${spaces}--color-${category}: ${categoryTokens.value};\n`;
-      } else if (typeof categoryTokens === 'object') {
-        // Token group
-        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
-          if (token && typeof token === 'object' && token.value) {
-            css += `${spaces}--color-${category}-${shade}: ${token.value};\n`;
-          }
+    /**
+     * Exports color tokens as CSS custom properties
+     */
+    static exportColorTokensAsCSS(colorTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(colorTokens).forEach(([category, categoryTokens]) => {
+            if (typeof categoryTokens === 'object' && categoryTokens.value) {
+                // Single token
+                css += `${spaces}--color-${category}: ${categoryTokens.value};\n`;
+            }
+            else if (typeof categoryTokens === 'object') {
+                // Token group
+                Object.entries(categoryTokens).forEach(([shade, token]) => {
+                    if (token && typeof token === 'object' && token.value) {
+                        css += `${spaces}--color-${category}-${shade}: ${token.value};\n`;
+                    }
+                });
+            }
         });
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Exports font tokens as CSS custom properties
-   */
-  private static exportFontTokensAsCSS(fontTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(fontTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        const cssVarName = this.getFontCSSVarName(name, token.type);
-        css += `${spaces}--font-${cssVarName}: ${token.value};\n`;
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Gets the CSS variable name for font tokens
-   */
-  private static getFontCSSVarName(name: string, type: string): string {
-    if (type === 'fontFamily') {
-      return name;
+        return css;
     }
-    if (type === 'fontSize') {
-      return name.replace('size-', 'size-');
+    /**
+     * Exports font tokens as CSS custom properties
+     */
+    static exportFontTokensAsCSS(fontTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(fontTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                const cssVarName = this.getFontCSSVarName(name, token.type);
+                css += `${spaces}--font-${cssVarName}: ${token.value};\n`;
+            }
+        });
+        return css;
     }
-    if (type === 'fontWeight') {
-      return name.replace('weight-', 'weight-');
+    /**
+     * Gets the CSS variable name for font tokens
+     */
+    static getFontCSSVarName(name, type) {
+        if (type === 'fontFamily') {
+            return name;
+        }
+        if (type === 'fontSize') {
+            return name.replace('size-', 'size-');
+        }
+        if (type === 'fontWeight') {
+            return name.replace('weight-', 'weight-');
+        }
+        if (type === 'lineHeight') {
+            return name.replace('line-height-', 'line-height-');
+        }
+        return name;
     }
-    if (type === 'lineHeight') {
-      return name.replace('line-height-', 'line-height-');
+    /**
+     * Exports spacing tokens as CSS custom properties
+     */
+    static exportSpacingTokensAsCSS(spacingTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(spacingTokens).forEach(([scale, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                css += `${spaces}--spacing-${scale}: ${token.value}px;\n`;
+            }
+        });
+        return css;
     }
-    return name;
-  }
-
-  /**
-   * Exports spacing tokens as CSS custom properties
-   */
-  private static exportSpacingTokensAsCSS(spacingTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--spacing-${scale}: ${token.value}px;\n`;
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Exports shadow tokens as CSS custom properties
-   */
-  private static exportShadowTokensAsCSS(shadowTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--shadow-${elevation}: ${token.value};\n`;
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Exports transition tokens as CSS custom properties
-   */
-  private static exportTransitionTokensAsCSS(transitionTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--transition-${name}: ${token.value};\n`;
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Exports breakpoint tokens as CSS custom properties
-   */
-  private static exportBreakpointTokensAsCSS(breakpointTokens: any, indent: number): string {
-    let css = '';
-    const spaces = ' '.repeat(indent);
-
-    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--breakpoint-${name}: ${token.value}px;\n`;
-      }
-    });
-
-    return css;
-  }
-
-  /**
-   * Exports tokens as SCSS variables
-   */
-  private static exportAsSCSS(tokens: ThemeTokens, options: TokenExportOptions): string {
-    let scss = '';
-    
-    if (options.includeComments) {
-      scss += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      scss += `// Generated on: ${new Date().toISOString()}\n\n`;
+    /**
+     * Exports shadow tokens as CSS custom properties
+     */
+    static exportShadowTokensAsCSS(shadowTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(shadowTokens).forEach(([elevation, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                css += `${spaces}--shadow-${elevation}: ${token.value};\n`;
+            }
+        });
+        return css;
     }
-
-    // Export color tokens
-    if (tokens.tokens.color) {
-      scss += this.exportColorTokensAsSCSS(tokens.tokens.color);
+    /**
+     * Exports transition tokens as CSS custom properties
+     */
+    static exportTransitionTokensAsCSS(transitionTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(transitionTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                css += `${spaces}--transition-${name}: ${token.value};\n`;
+            }
+        });
+        return css;
     }
-
-    // Export font tokens
-    if (tokens.tokens.font) {
-      scss += this.exportFontTokensAsSCSS(tokens.tokens.font);
+    /**
+     * Exports breakpoint tokens as CSS custom properties
+     */
+    static exportBreakpointTokensAsCSS(breakpointTokens, indent) {
+        let css = '';
+        const spaces = ' '.repeat(indent);
+        Object.entries(breakpointTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                css += `${spaces}--breakpoint-${name}: ${token.value}px;\n`;
+            }
+        });
+        return css;
     }
-
-    // Export spacing tokens
-    if (tokens.tokens.spacing) {
-      scss += this.exportSpacingTokensAsSCSS(tokens.tokens.spacing);
+    /**
+     * Exports tokens as SCSS variables
+     */
+    static exportAsSCSS(tokens, options) {
+        let scss = '';
+        if (options.includeComments) {
+            scss += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+            scss += `// Generated on: ${new Date().toISOString()}\n\n`;
+        }
+        // Export color tokens
+        if (tokens.tokens.color) {
+            scss += this.exportColorTokensAsSCSS(tokens.tokens.color);
+        }
+        // Export font tokens
+        if (tokens.tokens.font) {
+            scss += this.exportFontTokensAsSCSS(tokens.tokens.font);
+        }
+        // Export spacing tokens
+        if (tokens.tokens.spacing) {
+            scss += this.exportSpacingTokensAsSCSS(tokens.tokens.spacing);
+        }
+        // Export shadow tokens
+        if (tokens.tokens.shadow) {
+            scss += this.exportShadowTokensAsSCSS(tokens.tokens.shadow);
+        }
+        // Export transition tokens
+        if (tokens.tokens.transition) {
+            scss += this.exportTransitionTokensAsSCSS(tokens.tokens.transition);
+        }
+        // Export breakpoint tokens
+        if (tokens.tokens.breakpoint) {
+            scss += this.exportBreakpointTokensAsSCSS(tokens.tokens.breakpoint);
+        }
+        return scss;
     }
-
-    // Export shadow tokens
-    if (tokens.tokens.shadow) {
-      scss += this.exportShadowTokensAsSCSS(tokens.tokens.shadow);
+    /**
+     * Exports color tokens as SCSS variables
+     */
+    static exportColorTokensAsSCSS(colorTokens) {
+        let scss = '\n// Color Tokens\n';
+        Object.entries(colorTokens).forEach(([category, categoryTokens]) => {
+            if (typeof categoryTokens === 'object' && categoryTokens.value) {
+                // Single token
+                scss += `$color-${category}: ${categoryTokens.value};\n`;
+            }
+            else if (typeof categoryTokens === 'object') {
+                // Token group
+                Object.entries(categoryTokens).forEach(([shade, token]) => {
+                    if (token && typeof token === 'object' && token.value) {
+                        scss += `$color-${category}-${shade}: ${token.value};\n`;
+                    }
+                });
+            }
+        });
+        return scss;
     }
-
-    // Export transition tokens
-    if (tokens.tokens.transition) {
-      scss += this.exportTransitionTokensAsSCSS(tokens.tokens.transition);
+    /**
+     * Exports font tokens as SCSS variables
+     */
+    static exportFontTokensAsSCSS(fontTokens) {
+        let scss = '\n// Font Tokens\n';
+        Object.entries(fontTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                const scssVarName = this.getFontSCSSVarName(name, token.type);
+                scss += `$font-${scssVarName}: ${token.value};\n`;
+            }
+        });
+        return scss;
     }
-
-    // Export breakpoint tokens
-    if (tokens.tokens.breakpoint) {
-      scss += this.exportBreakpointTokensAsSCSS(tokens.tokens.breakpoint);
+    /**
+     * Gets the SCSS variable name for font tokens
+     */
+    static getFontSCSSVarName(name, type) {
+        if (type === 'fontFamily') {
+            return name;
+        }
+        if (type === 'fontSize') {
+            return name.replace('size-', 'size-');
+        }
+        if (type === 'fontWeight') {
+            return name.replace('weight-', 'weight-');
+        }
+        if (type === 'lineHeight') {
+            return name.replace('line-height-', 'line-height-');
+        }
+        return name;
     }
-
-    return scss;
-  }
-
-  /**
-   * Exports color tokens as SCSS variables
-   */
-  private static exportColorTokensAsSCSS(colorTokens: any): string {
-    let scss = '\n// Color Tokens\n';
-    
-    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
-      if (typeof categoryTokens === 'object' && categoryTokens.value) {
-        // Single token
-        scss += `$color-${category}: ${categoryTokens.value};\n`;
-      } else if (typeof categoryTokens === 'object') {
-        // Token group
-        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
-          if (token && typeof token === 'object' && token.value) {
-            scss += `$color-${category}-${shade}: ${token.value};\n`;
-          }
+    /**
+     * Exports spacing tokens as SCSS variables
+     */
+    static exportSpacingTokensAsSCSS(spacingTokens) {
+        let scss = '\n// Spacing Tokens\n';
+        Object.entries(spacingTokens).forEach(([scale, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                scss += `$spacing-${scale}: ${token.value}px;\n`;
+            }
         });
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Exports font tokens as SCSS variables
-   */
-  private static exportFontTokensAsSCSS(fontTokens: any): string {
-    let scss = '\n// Font Tokens\n';
-    
-    Object.entries(fontTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        const scssVarName = this.getFontSCSSVarName(name, token.type);
-        scss += `$font-${scssVarName}: ${token.value};\n`;
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Gets the SCSS variable name for font tokens
-   */
-  private static getFontSCSSVarName(name: string, type: string): string {
-    if (type === 'fontFamily') {
-      return name;
+        return scss;
     }
-    if (type === 'fontSize') {
-      return name.replace('size-', 'size-');
+    /**
+     * Exports shadow tokens as SCSS variables
+     */
+    static exportShadowTokensAsSCSS(shadowTokens) {
+        let scss = '\n// Shadow Tokens\n';
+        Object.entries(shadowTokens).forEach(([elevation, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                scss += `$shadow-${elevation}: ${token.value};\n`;
+            }
+        });
+        return scss;
     }
-    if (type === 'fontWeight') {
-      return name.replace('weight-', 'weight-');
+    /**
+     * Exports transition tokens as SCSS variables
+     */
+    static exportTransitionTokensAsSCSS(transitionTokens) {
+        let scss = '\n// Transition Tokens\n';
+        Object.entries(transitionTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                scss += `$transition-${name}: ${token.value};\n`;
+            }
+        });
+        return scss;
     }
-    if (type === 'lineHeight') {
-      return name.replace('line-height-', 'line-height-');
+    /**
+     * Exports breakpoint tokens as SCSS variables
+     */
+    static exportBreakpointTokensAsSCSS(breakpointTokens) {
+        let scss = '\n// Breakpoint Tokens\n';
+        Object.entries(breakpointTokens).forEach(([name, token]) => {
+            if (token && typeof token === 'object' && token.value) {
+                scss += `$breakpoint-${name}: ${token.value}px;\n`;
+            }
+        });
+        return scss;
     }
-    return name;
-  }
-
-  /**
-   * Exports spacing tokens as SCSS variables
-   */
-  private static exportSpacingTokensAsSCSS(spacingTokens: any): string {
-    let scss = '\n// Spacing Tokens\n';
-    
-    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        scss += `$spacing-${scale}: ${token.value}px;\n`;
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Exports shadow tokens as SCSS variables
-   */
-  private static exportShadowTokensAsSCSS(shadowTokens: any): string {
-    let scss = '\n// Shadow Tokens\n';
-    
-    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        scss += `$shadow-${elevation}: ${token.value};\n`;
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Exports transition tokens as SCSS variables
-   */
-  private static exportTransitionTokensAsSCSS(transitionTokens: any): string {
-    let scss = '\n// Transition Tokens\n';
-    
-    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        scss += `$transition-${name}: ${token.value};\n`;
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Exports breakpoint tokens as SCSS variables
-   */
-  private static exportBreakpointTokensAsSCSS(breakpointTokens: any): string {
-    let scss = '\n// Breakpoint Tokens\n';
-    
-    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
-      if (token && typeof token === 'object' && token.value) {
-        scss += `$breakpoint-${name}: ${token.value}px;\n`;
-      }
-    });
-
-    return scss;
-  }
-
-  /**
-   * Exports tokens as JavaScript object
-   */
-  private static exportAsJS(tokens: ThemeTokens, options: TokenExportOptions): string {
-    const exportData = options.includeMetadata ? tokens : tokens.tokens;
-    let js = '';
-    
-    if (options.includeComments) {
-      js += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      js += `// Generated on: ${new Date().toISOString()}\n\n`;
+    /**
+     * Exports tokens as JavaScript object
+     */
+    static exportAsJS(tokens, options) {
+        const exportData = options.includeMetadata ? tokens : tokens.tokens;
+        let js = '';
+        if (options.includeComments) {
+            js += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+            js += `// Generated on: ${new Date().toISOString()}\n\n`;
+        }
+        js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
+        return js;
     }
-
-    js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
-    return js;
-  }
-
-  /**
-   * Exports tokens as TypeScript object
-   */
-  private static exportAsTS(tokens: ThemeTokens, options: TokenExportOptions): string {
-    const exportData = options.includeMetadata ? tokens : tokens.tokens;
-    let ts = '';
-    
-    if (options.includeComments) {
-      ts += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      ts += `// Generated on: ${new Date().toISOString()}\n\n`;
+    /**
+     * Exports tokens as TypeScript object
+     */
+    static exportAsTS(tokens, options) {
+        const exportData = options.includeMetadata ? tokens : tokens.tokens;
+        let ts = '';
+        if (options.includeComments) {
+            ts += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+            ts += `// Generated on: ${new Date().toISOString()}\n\n`;
+        }
+        ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
+        ts += `export type Tokens = typeof tokens;\n`;
+        return ts;
     }
-
-    ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
-    ts += `export type Tokens = typeof tokens;\n`;
-    return ts;
-  }
 }