@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/tokens/tokenExporter.ts

@@ -0,0 +1,397 @@
+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 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`;
+    }
+
+    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;
+  }
+
+  /**
+   * 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`;
+          }
+        });
+      }
+    });
+
+    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;
+    }
+    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: 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`;
+    }
+
+    // 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: 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;
+  }
+
+  /**
+   * 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;
+    }
+    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: 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`;
+    }
+
+    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`;
+    }
+
+    ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
+    ts += `export type Tokens = typeof tokens;\n`;
+    return ts;
+  }
+}

package/src/tokens/tokenGenerator.ts

@@ -0,0 +1,276 @@
+import type { CompleteThemeConfig } from '../themes/types';
+import type { ThemeTokens, TokenGroup, ColorToken, FontToken, SpacingToken, ShadowToken, TransitionToken } from './types';
+
+export class TokenGenerator {
+  /**
+   * Generates design tokens from a complete theme configuration
+   */
+  static generateTokens(themeConfig: CompleteThemeConfig): ThemeTokens {
+    return {
+      theme: themeConfig.meta.name,
+      version: themeConfig.meta.version || '1.0.0',
+      tokens: {
+        color: this.generateColorTokens(themeConfig.colors),
+        font: this.generateFontTokens(themeConfig.fonts),
+        spacing: this.generateSpacingTokens(themeConfig.spacing),
+        shadow: this.generateShadowTokens(themeConfig.shadows),
+        transition: this.generateTransitionTokens(themeConfig.transitions)
+      }
+    };
+  }
+
+  /**
+   * Generates color tokens from theme colors
+   */
+  private static generateColorTokens(colors: CompleteThemeConfig['colors']): TokenGroup {
+    const colorTokens: TokenGroup = {};
+
+    // Primary colors
+    if (colors.primary) {
+      colorTokens.primary = this.createColorGroup(colors.primary, 'primary');
+    }
+
+    // Secondary colors
+    if (colors.secondary) {
+      colorTokens.secondary = this.createColorGroup(colors.secondary, 'secondary');
+    }
+
+    // Neutral colors
+    if (colors.neutral) {
+      colorTokens.neutral = this.createColorGroup(colors.neutral, 'neutral');
+    }
+
+    // Surface colors
+    if (colors.surface) {
+      colorTokens.surface = this.createColorGroup(colors.surface, 'neutral');
+    }
+
+    // Text colors
+    if (colors.text) {
+      colorTokens.text = this.createColorGroup(colors.text, 'neutral');
+    }
+
+    // Interactive colors
+    if (colors.interactive) {
+      colorTokens.interactive = this.createColorGroup(colors.interactive, 'neutral');
+    }
+
+    // Semantic colors
+    if (colors.semantic) {
+      colorTokens.semantic = this.createColorGroup(colors.semantic, 'neutral');
+    }
+
+    return colorTokens;
+  }
+
+  /**
+   * Creates a color group from a color scale
+   */
+  private static createColorGroup(colorScale: any, semantic: ColorToken['semantic']): TokenGroup {
+    const group: TokenGroup = {};
+    
+    Object.entries(colorScale).forEach(([shade, value]) => {
+      if (typeof value === 'string') {
+        group[shade] = {
+          value,
+          type: 'color',
+          semantic,
+          description: `${semantic} color - ${shade} shade`,
+          category: 'color',
+          tags: [semantic, shade]
+        } as ColorToken;
+      }
+    });
+
+    return group;
+  }
+
+  /**
+   * Generates font tokens from theme fonts
+   */
+  private static generateFontTokens(fonts: CompleteThemeConfig['fonts']): TokenGroup {
+    const fontTokens: TokenGroup = {};
+
+    // Font families
+    if (fonts.primary) {
+      fontTokens.primary = {
+        value: fonts.primary.family,
+        type: 'fontFamily',
+        description: 'Primary font family',
+        category: 'typography',
+        tags: ['primary', 'font']
+      } as FontToken;
+    }
+
+    if (fonts.secondary) {
+      fontTokens.secondary = {
+        value: fonts.secondary.family,
+        type: 'fontFamily',
+        description: 'Secondary font family',
+        category: 'typography',
+        tags: ['secondary', 'font']
+      } as FontToken;
+    }
+
+    if (fonts.display) {
+      fontTokens.display = {
+        value: fonts.display.family,
+        type: 'fontFamily',
+        description: 'Display font family',
+        category: 'typography',
+        tags: ['display', 'font']
+      } as FontToken;
+    }
+
+    if (fonts.body) {
+      fontTokens.body = {
+        value: fonts.body.family,
+        type: 'fontFamily',
+        description: 'Body font family',
+        category: 'typography',
+        tags: ['body', 'font']
+      } as FontToken;
+    }
+
+    if (fonts.mono) {
+      fontTokens.mono = {
+        value: fonts.mono.family,
+        type: 'fontFamily',
+        description: 'Monospace font family',
+        category: 'typography',
+        tags: ['mono', 'font']
+      } as FontToken;
+    }
+
+    // Font sizes (from primary font)
+    if (fonts.primary?.sizes) {
+      Object.entries(fonts.primary.sizes).forEach(([size, value]) => {
+        fontTokens[`size-${size}`] = {
+          value,
+          type: 'fontSize',
+          description: `Font size - ${size}`,
+          category: 'typography',
+          tags: ['font', 'size', size]
+        } as FontToken;
+      });
+    }
+
+    // Font weights (from primary font)
+    if (fonts.primary?.weights) {
+      fonts.primary.weights.forEach((weight, index) => {
+        fontTokens[`weight-${index}`] = {
+          value: weight,
+          type: 'fontWeight',
+          description: `Font weight - ${weight}`,
+          category: 'typography',
+          tags: ['font', 'weight', weight.toString()]
+        } as FontToken;
+      });
+    }
+
+    // Line heights (from primary font)
+    if (fonts.primary?.lineHeights) {
+      Object.entries(fonts.primary.lineHeights).forEach(([height, value]) => {
+        fontTokens[`line-height-${height}`] = {
+          value,
+          type: 'lineHeight',
+          description: `Line height - ${height}`,
+          category: 'typography',
+          tags: ['font', 'line-height', height]
+        } as FontToken;
+      });
+    }
+
+    // Letter spacing (from primary font)
+    if (fonts.primary?.letterSpacing) {
+      Object.entries(fonts.primary.letterSpacing).forEach(([spacing, value]) => {
+        fontTokens[`letter-spacing-${spacing}`] = {
+          value,
+          type: 'letterSpacing',
+          description: `Letter spacing - ${spacing}`,
+          category: 'typography',
+          tags: ['font', 'letter-spacing', spacing]
+        } as FontToken;
+      });
+    }
+
+    return fontTokens;
+  }
+
+  /**
+   * Generates spacing tokens from theme spacing
+   */
+  private static generateSpacingTokens(spacing: CompleteThemeConfig['spacing']): TokenGroup {
+    const spacingTokens: TokenGroup = {};
+
+    if (spacing) {
+      Object.entries(spacing).forEach(([scale, value]) => {
+        spacingTokens[scale] = {
+          value,
+          type: 'spacing',
+          unit: 'px',
+          description: `Spacing scale - ${scale}`,
+          category: 'layout',
+          tags: ['spacing', 'layout', scale]
+        } as SpacingToken;
+      });
+    }
+
+    return spacingTokens;
+  }
+
+  /**
+   * Generates shadow tokens from theme shadows
+   */
+  private static generateShadowTokens(shadows: CompleteThemeConfig['shadows']): TokenGroup {
+    const shadowTokens: TokenGroup = {};
+
+    if (shadows) {
+      Object.entries(shadows).forEach(([elevation, value]) => {
+        shadowTokens[elevation] = {
+          value,
+          type: 'shadow',
+          elevation: elevation as 'low' | 'medium' | 'high',
+          description: `Shadow - ${elevation} elevation`,
+          category: 'effects',
+          tags: ['shadow', 'elevation', elevation]
+        } as ShadowToken;
+      });
+    }
+
+    return shadowTokens;
+  }
+
+  /**
+   * Generates transition tokens from theme transitions
+   */
+  private static generateTransitionTokens(transitions: CompleteThemeConfig['transitions']): TokenGroup {
+    const transitionTokens: TokenGroup = {};
+
+    if (transitions) {
+      Object.entries(transitions).forEach(([name, value]) => {
+        transitionTokens[name] = {
+          value,
+          type: 'transition',
+          easing: this.detectEasing(value),
+          description: `Transition - ${name}`,
+          category: 'animation',
+          tags: ['transition', 'animation', name]
+        } as TransitionToken;
+      });
+    }
+
+    return transitionTokens;
+  }
+
+  /**
+   * Detects easing function from transition value
+   */
+  private static detectEasing(transition: string): TransitionToken['easing'] {
+    if (transition.includes('ease-in-out')) return 'ease-in-out';
+    if (transition.includes('ease-in')) return 'ease-in';
+    if (transition.includes('ease-out')) return 'ease-out';
+    if (transition.includes('linear')) return 'linear';
+    return undefined;
+  }
+}