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

package/dist/tokens/tokenExporter.js

@@ -1,37 +1,46 @@
-
+import type { ThemeTokens, TokenExportOptions } from './types';
 
 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}`);
+  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, options)= options.includeMetadata ? tokens ;
+  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, options)= '';
+  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).toISOString()} */\n\n`;
+      css += `/* Generated on: ${new Date().toISOString()} */\n\n`;
     }
 
-    css += `;
+    css += `:root {\n`;
     
     // Export color tokens
     if (tokens.tokens.color) {
@@ -70,18 +79,19 @@ export class TokenExporter {
   /**
    * Exports color tokens as CSS custom properties
    */
-  private static exportColorTokensAsCSS(colorTokens, indent)= '';
+  private static exportColorTokensAsCSS(colorTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
       if (typeof categoryTokens === 'object' && categoryTokens.value) {
         // Single token
-        css += `${spaces}--color-${category}};\n`;
+        css += `${spaces}--color-${category}: ${categoryTokens.value};\n`;
       } else if (typeof categoryTokens === 'object') {
         // Token group
-        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
           if (token && typeof token === 'object' && token.value) {
-            css += `${spaces}--color-${category}-${shade}};\n`;
+            css += `${spaces}--color-${category}-${shade}: ${token.value};\n`;
           }
         });
       }
@@ -93,13 +103,14 @@ export class TokenExporter {
   /**
    * Exports font tokens as CSS custom properties
    */
-  private static exportFontTokensAsCSS(fontTokens, indent)= '';
+  private static exportFontTokensAsCSS(fontTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(fontTokens).forEach(([name, token], any]) => {
+    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}};\n`;
+        css += `${spaces}--font-${cssVarName}: ${token.value};\n`;
       }
     });
 
@@ -109,7 +120,8 @@ export class TokenExporter {
   /**
    * Gets the CSS variable name for font tokens
    */
-  private static getFontCSSVarName(name, type)=== 'fontFamily') {
+  private static getFontCSSVarName(name: string, type: string): string {
+    if (type === 'fontFamily') {
       return name;
     }
     if (type === 'fontSize') {
@@ -127,12 +139,13 @@ export class TokenExporter {
   /**
    * Exports spacing tokens as CSS custom properties
    */
-  private static exportSpacingTokensAsCSS(spacingTokens, indent)= '';
+  private static exportSpacingTokensAsCSS(spacingTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--spacing-${scale}}px;\n`;
+        css += `${spaces}--spacing-${scale}: ${token.value}px;\n`;
       }
     });
 
@@ -142,12 +155,13 @@ export class TokenExporter {
   /**
    * Exports shadow tokens as CSS custom properties
    */
-  private static exportShadowTokensAsCSS(shadowTokens, indent)= '';
+  private static exportShadowTokensAsCSS(shadowTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--shadow-${elevation}};\n`;
+        css += `${spaces}--shadow-${elevation}: ${token.value};\n`;
       }
     });
 
@@ -157,12 +171,13 @@ export class TokenExporter {
   /**
    * Exports transition tokens as CSS custom properties
    */
-  private static exportTransitionTokensAsCSS(transitionTokens, indent)= '';
+  private static exportTransitionTokensAsCSS(transitionTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--transition-${name}};\n`;
+        css += `${spaces}--transition-${name}: ${token.value};\n`;
       }
     });
 
@@ -172,12 +187,13 @@ export class TokenExporter {
   /**
    * Exports breakpoint tokens as CSS custom properties
    */
-  private static exportBreakpointTokensAsCSS(breakpointTokens, indent)= '';
+  private static exportBreakpointTokensAsCSS(breakpointTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--breakpoint-${name}}px;\n`;
+        css += `${spaces}--breakpoint-${name}: ${token.value}px;\n`;
       }
     });
 
@@ -187,11 +203,12 @@ export class TokenExporter {
   /**
    * Exports tokens as SCSS variables
    */
-  private static exportAsSCSS(tokens, options)= '';
+  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).toISOString()}\n\n`;
+      scss += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     // Export color tokens
@@ -230,17 +247,18 @@ export class TokenExporter {
   /**
    * Exports color tokens as SCSS variables
    */
-  private static exportColorTokensAsSCSS(colorTokens)= '\n// Color Tokens\n';
+  private static exportColorTokensAsSCSS(colorTokens: any): string {
+    let scss = '\n// Color Tokens\n';
     
-    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
       if (typeof categoryTokens === 'object' && categoryTokens.value) {
         // Single token
-        scss += `$color-${category}};\n`;
+        scss += `$color-${category}: ${categoryTokens.value};\n`;
       } else if (typeof categoryTokens === 'object') {
         // Token group
-        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
           if (token && typeof token === 'object' && token.value) {
-            scss += `$color-${category}-${shade}};\n`;
+            scss += `$color-${category}-${shade}: ${token.value};\n`;
           }
         });
       }
@@ -252,12 +270,13 @@ export class TokenExporter {
   /**
    * Exports font tokens as SCSS variables
    */
-  private static exportFontTokensAsSCSS(fontTokens)= '\n// Font Tokens\n';
+  private static exportFontTokensAsSCSS(fontTokens: any): string {
+    let scss = '\n// Font Tokens\n';
     
-    Object.entries(fontTokens).forEach(([name, token], any]) => {
+    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}};\n`;
+        scss += `$font-${scssVarName}: ${token.value};\n`;
       }
     });
 
@@ -267,7 +286,8 @@ export class TokenExporter {
   /**
    * Gets the SCSS variable name for font tokens
    */
-  private static getFontSCSSVarName(name, type)=== 'fontFamily') {
+  private static getFontSCSSVarName(name: string, type: string): string {
+    if (type === 'fontFamily') {
       return name;
     }
     if (type === 'fontSize') {
@@ -285,11 +305,12 @@ export class TokenExporter {
   /**
    * Exports spacing tokens as SCSS variables
    */
-  private static exportSpacingTokensAsSCSS(spacingTokens)= '\n// Spacing Tokens\n';
+  private static exportSpacingTokensAsSCSS(spacingTokens: any): string {
+    let scss = '\n// Spacing Tokens\n';
     
-    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$spacing-${scale}}px;\n`;
+        scss += `$spacing-${scale}: ${token.value}px;\n`;
       }
     });
 
@@ -299,11 +320,12 @@ export class TokenExporter {
   /**
    * Exports shadow tokens as SCSS variables
    */
-  private static exportShadowTokensAsSCSS(shadowTokens)= '\n// Shadow Tokens\n';
+  private static exportShadowTokensAsSCSS(shadowTokens: any): string {
+    let scss = '\n// Shadow Tokens\n';
     
-    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$shadow-${elevation}};\n`;
+        scss += `$shadow-${elevation}: ${token.value};\n`;
       }
     });
 
@@ -313,11 +335,12 @@ export class TokenExporter {
   /**
    * Exports transition tokens as SCSS variables
    */
-  private static exportTransitionTokensAsSCSS(transitionTokens)= '\n// Transition Tokens\n';
+  private static exportTransitionTokensAsSCSS(transitionTokens: any): string {
+    let scss = '\n// Transition Tokens\n';
     
-    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$transition-${name}};\n`;
+        scss += `$transition-${name}: ${token.value};\n`;
       }
     });
 
@@ -327,11 +350,12 @@ export class TokenExporter {
   /**
    * Exports breakpoint tokens as SCSS variables
    */
-  private static exportBreakpointTokensAsSCSS(breakpointTokens)= '\n// Breakpoint Tokens\n';
+  private static exportBreakpointTokensAsSCSS(breakpointTokens: any): string {
+    let scss = '\n// Breakpoint Tokens\n';
     
-    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$breakpoint-${name}}px;\n`;
+        scss += `$breakpoint-${name}: ${token.value}px;\n`;
       }
     });
 
@@ -341,12 +365,13 @@ export class TokenExporter {
   /**
    * Exports tokens as JavaScript object
    */
-  private static exportAsJS(tokens, options)= options.includeMetadata ? tokens ;
+  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).toISOString()}\n\n`;
+      js += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
@@ -356,16 +381,17 @@ export class TokenExporter {
   /**
    * Exports tokens as TypeScript object
    */
-  private static exportAsTS(tokens, options)= options.includeMetadata ? tokens ;
+  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).toISOString()}\n\n`;
+      ts += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
-    ts += `\n`;
+    ts += `export type Tokens = typeof tokens;\n`;
     return ts;
   }
 }

package/dist/tokens/tokenGenerator.esm.js

@@ -1,17 +1,20 @@
-
-
+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),
-      version,
-      tokens),
-        font),
-        spacing),
-        shadow),
-        transition)
+  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)
       }
     };
   }
@@ -19,7 +22,8 @@ export class TokenGenerator {
   /**
    * Generates color tokens from theme colors
    */
-  private static generateColorTokens(colors])= {};
+  private static generateColorTokens(colors: CompleteThemeConfig['colors']): TokenGroup {
+    const colorTokens: TokenGroup = {};
 
     // Primary colors
     if (colors.primary) {
@@ -62,17 +66,18 @@ export class TokenGenerator {
   /**
    * Creates a color group from a color scale
    */
-  private static createColorGroup(colorScale, semantic])= {};
+  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,
+          type: 'color',
           semantic,
-          description} color - ${shade} shade`,
-          category,
-          tags, shade]
+          description: `${semantic} color - ${shade} shade`,
+          category: 'color',
+          tags: [semantic, shade]
         } as ColorToken;
       }
     });
@@ -83,56 +88,57 @@ export class TokenGenerator {
   /**
    * Generates font tokens from theme fonts
    */
-  private static generateFontTokens(fonts])= {};
+  private static generateFontTokens(fonts: CompleteThemeConfig['fonts']): TokenGroup {
+    const fontTokens: TokenGroup = {};
 
     // Font families
     if (fonts.primary) {
       fontTokens.primary = {
-        value,
-        type,
-        description,
-        category,
-        tags, 'font']
+        value: fonts.primary.family,
+        type: 'fontFamily',
+        description: 'Primary font family',
+        category: 'typography',
+        tags: ['primary', 'font']
       } as FontToken;
     }
 
     if (fonts.secondary) {
       fontTokens.secondary = {
-        value,
-        type,
-        description,
-        category,
-        tags, 'font']
+        value: fonts.secondary.family,
+        type: 'fontFamily',
+        description: 'Secondary font family',
+        category: 'typography',
+        tags: ['secondary', 'font']
       } as FontToken;
     }
 
     if (fonts.display) {
       fontTokens.display = {
-        value,
-        type,
-        description,
-        category,
-        tags, 'font']
+        value: fonts.display.family,
+        type: 'fontFamily',
+        description: 'Display font family',
+        category: 'typography',
+        tags: ['display', 'font']
       } as FontToken;
     }
 
     if (fonts.body) {
       fontTokens.body = {
-        value,
-        type,
-        description,
-        category,
-        tags, 'font']
+        value: fonts.body.family,
+        type: 'fontFamily',
+        description: 'Body font family',
+        category: 'typography',
+        tags: ['body', 'font']
       } as FontToken;
     }
 
     if (fonts.mono) {
       fontTokens.mono = {
-        value,
-        type,
-        description,
-        category,
-        tags, 'font']
+        value: fonts.mono.family,
+        type: 'fontFamily',
+        description: 'Monospace font family',
+        category: 'typography',
+        tags: ['mono', 'font']
       } as FontToken;
     }
 
@@ -141,10 +147,10 @@ export class TokenGenerator {
       Object.entries(fonts.primary.sizes).forEach(([size, value]) => {
         fontTokens[`size-${size}`] = {
           value,
-          type,
-          description}`,
-          category,
-          tags, 'size', size]
+          type: 'fontSize',
+          description: `Font size - ${size}`,
+          category: 'typography',
+          tags: ['font', 'size', size]
         } as FontToken;
       });
     }
@@ -153,11 +159,11 @@ export class TokenGenerator {
     if (fonts.primary?.weights) {
       fonts.primary.weights.forEach((weight, index) => {
         fontTokens[`weight-${index}`] = {
-          value,
-          type,
-          description}`,
-          category,
-          tags, 'weight', weight.toString()]
+          value: weight,
+          type: 'fontWeight',
+          description: `Font weight - ${weight}`,
+          category: 'typography',
+          tags: ['font', 'weight', weight.toString()]
         } as FontToken;
       });
     }
@@ -167,10 +173,10 @@ export class TokenGenerator {
       Object.entries(fonts.primary.lineHeights).forEach(([height, value]) => {
         fontTokens[`line-height-${height}`] = {
           value,
-          type,
-          description}`,
-          category,
-          tags, 'line-height', height]
+          type: 'lineHeight',
+          description: `Line height - ${height}`,
+          category: 'typography',
+          tags: ['font', 'line-height', height]
         } as FontToken;
       });
     }
@@ -180,10 +186,10 @@ export class TokenGenerator {
       Object.entries(fonts.primary.letterSpacing).forEach(([spacing, value]) => {
         fontTokens[`letter-spacing-${spacing}`] = {
           value,
-          type,
-          description}`,
-          category,
-          tags, 'letter-spacing', spacing]
+          type: 'letterSpacing',
+          description: `Letter spacing - ${spacing}`,
+          category: 'typography',
+          tags: ['font', 'letter-spacing', spacing]
         } as FontToken;
       });
     }
@@ -194,17 +200,18 @@ export class TokenGenerator {
   /**
    * Generates spacing tokens from theme spacing
    */
-  private static generateSpacingTokens(spacing])= {};
+  private static generateSpacingTokens(spacing: CompleteThemeConfig['spacing']): TokenGroup {
+    const spacingTokens: TokenGroup = {};
 
     if (spacing) {
       Object.entries(spacing).forEach(([scale, value]) => {
         spacingTokens[scale] = {
           value,
-          type,
-          unit,
-          description}`,
-          category,
-          tags, 'layout', scale]
+          type: 'spacing',
+          unit: 'px',
+          description: `Spacing scale - ${scale}`,
+          category: 'layout',
+          tags: ['spacing', 'layout', scale]
         } as SpacingToken;
       });
     }
@@ -215,17 +222,18 @@ export class TokenGenerator {
   /**
    * Generates shadow tokens from theme shadows
    */
-  private static generateShadowTokens(shadows])= {};
+  private static generateShadowTokens(shadows: CompleteThemeConfig['shadows']): TokenGroup {
+    const shadowTokens: TokenGroup = {};
 
     if (shadows) {
       Object.entries(shadows).forEach(([elevation, value]) => {
         shadowTokens[elevation] = {
           value,
-          type,
-          elevation,
-          description} elevation`,
-          category,
-          tags, 'elevation', elevation]
+          type: 'shadow',
+          elevation: elevation as 'low' | 'medium' | 'high',
+          description: `Shadow - ${elevation} elevation`,
+          category: 'effects',
+          tags: ['shadow', 'elevation', elevation]
         } as ShadowToken;
       });
     }
@@ -236,17 +244,18 @@ export class TokenGenerator {
   /**
    * Generates transition tokens from theme transitions
    */
-  private static generateTransitionTokens(transitions])= {};
+  private static generateTransitionTokens(transitions: CompleteThemeConfig['transitions']): TokenGroup {
+    const transitionTokens: TokenGroup = {};
 
     if (transitions) {
       Object.entries(transitions).forEach(([name, value]) => {
         transitionTokens[name] = {
           value,
-          type,
-          easing),
-          description}`,
-          category,
-          tags, 'animation', name]
+          type: 'transition',
+          easing: this.detectEasing(value),
+          description: `Transition - ${name}`,
+          category: 'animation',
+          tags: ['transition', 'animation', name]
         } as TransitionToken;
       });
     }
@@ -257,7 +266,7 @@ export class TokenGenerator {
   /**
    * Detects easing function from transition value
    */
-  private static detectEasing(transition)] {
+  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';