@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/tokens/tokenExporter.d.ts

@@ -0,0 +1,336 @@
+export class TokenExporter {
+
+  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}`);
+    }
+  }
+
+  private static exportAsJSON(tokens: ThemeTokens, options: TokenExportOptions): string {
+    const exportData = options.includeMetadata ? tokens : tokens.tokens;
+    return JSON.stringify(exportData, null, 2);
+  }
+
+  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`;
+    }
+
+    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;
+  }
+
+  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`;
+          }
+        });
+      }
+    });
+
+    return css;
+  }
+
+  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;
+  }
+
+  private static getFontCSSVarName(name: string, type: string): string {
+    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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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`;
+    }
+
+    // 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;
+  }
+
+  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`;
+          }
+        });
+      }
+    });
+
+    return scss;
+  }
+
+  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;
+  }
+
+  private static getFontSCSSVarName(name: string, type: string): string {
+    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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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`;
+    }
+
+    js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
+    return js;
+  }
+
+  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`;
+    }
+
+    ts += `export declare const tokens: ${JSON.stringify(exportData, null, 2)} as const;\n`;
+    ts += `export type Tokens = typeof tokens;\n`;
+    return ts;
+  }
+}

package/dist/tokens/tokenExporter.esm.js

@@ -0,0 +1,371 @@
+
+
+export class TokenExporter {
+  /**
+   * Exports tokens in the specified format
+   */
+  static exportTokens(tokens, options)) {
+      case 'json', options);
+      case 'css', options);
+      case 'scss', options);
+      case 'js', options);
+      case 'ts', options);
+      default}`);
+    }
+  }
+
+  /**
+   * Exports tokens as JSON
+   */
+  private static exportAsJSON(tokens, options)= options.includeMetadata ? tokens ;
+    return JSON.stringify(exportData, null, 2);
+  }
+
+  /**
+   * Exports tokens as CSS custom properties
+   */
+  private static exportAsCSS(tokens, options)= '';
+    
+    if (options.includeComments) {
+      css += `/* ${tokens.theme} Design Tokens - v${tokens.version} */\n`;
+      css += `/* Generated on).toISOString()} */\n\n`;
+    }
+
+    css += `;
+    
+    // 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;
+  }
+
+  /**
+   * Exports color tokens as CSS custom properties
+   */
+  private static exportColorTokensAsCSS(colorTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+      if (typeof categoryTokens === 'object' && categoryTokens.value) {
+        // Single token
+        css += `${spaces}--color-${category}};\n`;
+      } else if (typeof categoryTokens === 'object') {
+        // Token group
+        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+          if (token && typeof token === 'object' && token.value) {
+            css += `${spaces}--color-${category}-${shade}};\n`;
+          }
+        });
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Exports font tokens as CSS custom properties
+   */
+  private static exportFontTokensAsCSS(fontTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(fontTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        const cssVarName = this.getFontCSSVarName(name, token.type);
+        css += `${spaces}--font-${cssVarName}};\n`;
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Gets the CSS variable name for font tokens
+   */
+  private static getFontCSSVarName(name, 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;
+  }
+
+  /**
+   * Exports spacing tokens as CSS custom properties
+   */
+  private static exportSpacingTokensAsCSS(spacingTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        css += `${spaces}--spacing-${scale}}px;\n`;
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Exports shadow tokens as CSS custom properties
+   */
+  private static exportShadowTokensAsCSS(shadowTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        css += `${spaces}--shadow-${elevation}};\n`;
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Exports transition tokens as CSS custom properties
+   */
+  private static exportTransitionTokensAsCSS(transitionTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        css += `${spaces}--transition-${name}};\n`;
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Exports breakpoint tokens as CSS custom properties
+   */
+  private static exportBreakpointTokensAsCSS(breakpointTokens, indent)= '';
+    const spaces = ' '.repeat(indent);
+
+    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        css += `${spaces}--breakpoint-${name}}px;\n`;
+      }
+    });
+
+    return css;
+  }
+
+  /**
+   * Exports tokens as SCSS variables
+   */
+  private static exportAsSCSS(tokens, options)= '';
+    
+    if (options.includeComments) {
+      scss += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+      scss += `// Generated on).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;
+  }
+
+  /**
+   * Exports color tokens as SCSS variables
+   */
+  private static exportColorTokensAsSCSS(colorTokens)= '\n// Color Tokens\n';
+    
+    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+      if (typeof categoryTokens === 'object' && categoryTokens.value) {
+        // Single token
+        scss += `$color-${category}};\n`;
+      } else if (typeof categoryTokens === 'object') {
+        // Token group
+        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+          if (token && typeof token === 'object' && token.value) {
+            scss += `$color-${category}-${shade}};\n`;
+          }
+        });
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Exports font tokens as SCSS variables
+   */
+  private static exportFontTokensAsSCSS(fontTokens)= '\n// Font Tokens\n';
+    
+    Object.entries(fontTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        const scssVarName = this.getFontSCSSVarName(name, token.type);
+        scss += `$font-${scssVarName}};\n`;
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Gets the SCSS variable name for font tokens
+   */
+  private static getFontSCSSVarName(name, 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;
+  }
+
+  /**
+   * Exports spacing tokens as SCSS variables
+   */
+  private static exportSpacingTokensAsSCSS(spacingTokens)= '\n// Spacing Tokens\n';
+    
+    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        scss += `$spacing-${scale}}px;\n`;
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Exports shadow tokens as SCSS variables
+   */
+  private static exportShadowTokensAsSCSS(shadowTokens)= '\n// Shadow Tokens\n';
+    
+    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        scss += `$shadow-${elevation}};\n`;
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Exports transition tokens as SCSS variables
+   */
+  private static exportTransitionTokensAsSCSS(transitionTokens)= '\n// Transition Tokens\n';
+    
+    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        scss += `$transition-${name}};\n`;
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Exports breakpoint tokens as SCSS variables
+   */
+  private static exportBreakpointTokensAsSCSS(breakpointTokens)= '\n// Breakpoint Tokens\n';
+    
+    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+      if (token && typeof token === 'object' && token.value) {
+        scss += `$breakpoint-${name}}px;\n`;
+      }
+    });
+
+    return scss;
+  }
+
+  /**
+   * Exports tokens as JavaScript object
+   */
+  private static exportAsJS(tokens, options)= options.includeMetadata ? tokens ;
+    let js = '';
+    
+    if (options.includeComments) {
+      js += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+      js += `// Generated on).toISOString()}\n\n`;
+    }
+
+    js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
+    return js;
+  }
+
+  /**
+   * Exports tokens as TypeScript object
+   */
+  private static exportAsTS(tokens, options)= options.includeMetadata ? tokens ;
+    let ts = '';
+    
+    if (options.includeComments) {
+      ts += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
+      ts += `// Generated on).toISOString()}\n\n`;
+    }
+
+    ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
+    ts += `\n`;
+    return ts;
+  }
+}