@shohojdhara/atomix 0.4.8 → 0.5.0

package/scripts/cli/templates/tokens/token-generators.ts

@@ -0,0 +1,1088 @@
+/**
+ * Token Generation Templates (TypeScript)
+ * Design system token generators following W3C DTCG format
+ * 
+ * @module templates/tokens
+ */
+
+import type { CSSProperties } from 'react';
+
+/**
+ * Token category types
+ */
+export type TokenCategory = 
+  | 'color'
+  | 'spacing'
+  | 'typography'
+  | 'shadow'
+  | 'radius'
+  | 'animation'
+  | 'breakpoint'
+  | 'zIndex';
+
+/**
+ * Token format options
+ */
+export type TokenFormat = 'scss' | 'css' | 'json' | 'ts';
+
+/**
+ * Color token configuration
+ */
+export interface ColorTokenConfig {
+  brand?: {
+    primary?: string[];
+    secondary?: string[];
+    accent?: string[];
+  };
+  semantic?: {
+    success?: string;
+    warning?: string;
+    error?: string;
+    info?: string;
+  };
+  neutral?: string[];
+  background?: {
+    light?: string;
+    dark?: string;
+  };
+  text?: {
+    light?: string;
+    dark?: string;
+  };
+  border?: {
+    light?: string;
+    dark?: string;
+  };
+  focus?: {
+    light?: string;
+    dark?: string;
+  };
+}
+
+/**
+ * Spacing token configuration
+ */
+export interface SpacingTokenConfig {
+  baseUnit?: string; // e.g., '0.25rem' (4px)
+  scale?: number[]; // e.g., [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64]
+  componentSpecific?: {
+    buttonPaddingX?: string;
+    buttonPaddingY?: string;
+    cardPadding?: string;
+    modalPadding?: string;
+  };
+  layout?: {
+    containerPadding?: string;
+    gridGap?: string;
+    sectionSpacing?: string;
+  };
+}
+
+/**
+ * Typography token configuration
+ */
+export interface TypographyTokenConfig {
+  fontFamilies?: {
+    sans?: string;
+    serif?: string;
+    mono?: string;
+  };
+  fontSizes?: Record<string, string>; // e.g., { xs: '0.75rem', sm: '0.875rem', ... }
+  lineHeights?: Record<string, number | string>;
+  fontWeights?: Record<string, number>;
+  letterSpacing?: Record<string, string>;
+  headings?: {
+    h1?: { fontSize?: string; lineHeight?: number };
+    h2?: { fontSize?: string; lineHeight?: number };
+    h3?: { fontSize?: string; lineHeight?: number };
+    h4?: { fontSize?: string; lineHeight?: number };
+    h5?: { fontSize?: string; lineHeight?: number };
+    h6?: { fontSize?: string; lineHeight?: number };
+  };
+}
+
+/**
+ * Shadow token configuration
+ */
+export interface ShadowTokenConfig {
+  colors?: {
+    light?: string;
+    dark?: string;
+  };
+  shadows?: Record<string, string>;
+  componentSpecific?: {
+    button?: string;
+    buttonHover?: string;
+    card?: string;
+    dropdown?: string;
+    modal?: string;
+    popover?: string;
+    tooltip?: string;
+  };
+}
+
+/**
+ * Radius token configuration
+ */
+export interface RadiusTokenConfig {
+  baseUnit?: string;
+  scale?: Record<string, string>;
+  componentSpecific?: {
+    button?: string;
+    card?: string;
+    input?: string;
+    badge?: string;
+  };
+}
+
+/**
+ * Animation token configuration
+ */
+export interface AnimationTokenConfig {
+  durations?: Record<string, string>;
+  easings?: Record<string, string>;
+  presets?: {
+    fadeIn?: string;
+    slideInUp?: string;
+    scaleIn?: string;
+    pulse?: string;
+    shimmer?: string;
+  };
+}
+
+/**
+ * Breakpoint token configuration
+ */
+export interface BreakpointTokenConfig {
+  breakpoints?: Record<string, string>;
+  containerMaxWidths?: Record<string, string>;
+}
+
+/**
+ * Z-Index token configuration
+ */
+export interface ZIndexTokenConfig {
+  scale?: Record<string, number>;
+}
+
+/**
+ * Generate color tokens in SCSS format
+ * 
+ * @param config - Color token configuration
+ * @returns SCSS color tokens string
+ */
+export const generateColorTokens = (config: ColorTokenConfig = {}): string => {
+  const {
+    brand = {},
+    semantic = {},
+    neutral = [],
+    background = {},
+    text = {},
+    border = {},
+    focus = {},
+  } = config;
+
+  return `// Custom Color Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Brand Colors
+// Customize these to match your brand identity
+${generateBrandColors(brand)}
+
+// Semantic Colors
+${generateSemanticColors(semantic)}
+
+// Neutral Colors
+${generateNeutralColors(neutral)}
+
+// Background Colors
+${generateBackgroundColors(background)}
+
+// Text Colors
+${generateTextColors(text)}
+
+// Border Colors
+${generateBorderColors(border)}
+
+// Focus Colors
+${generateFocusColors(focus)}
+
+// Export custom colors to override defaults
+$primary: $custom-primary-6 !default;
+$success: $custom-success !default;
+$warning: $custom-warning !default;
+$error: $custom-error !default;
+$info: $custom-info !default;
+
+// Dark mode overrides
+$body-bg-dark: $custom-body-bg-dark !default;
+$body-color-dark: $custom-body-color-dark !default;
+$border-color-dark: $custom-border-color-dark !default;
+`;
+};
+
+/**
+ * Generate spacing tokens in SCSS format
+ * 
+ * @param config - Spacing token configuration
+ * @returns SCSS spacing tokens string
+ */
+export const generateSpacingTokens = (config: SpacingTokenConfig = {}): string => {
+  const {
+    baseUnit = '0.25rem',
+    scale = [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64],
+    componentSpecific = {},
+    layout = {},
+  } = config;
+
+  return `// Custom Spacing Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Base spacing unit (change this to scale all spacing)
+$custom-spacing-base: ${baseUnit} !default; // 4px
+
+// Spacing scale
+${generateSpacingScale(scale)}
+
+// Component-specific spacing
+${generateComponentSpacing(componentSpecific)}
+
+// Layout spacing
+${generateLayoutSpacing(layout)}
+
+// Export to override defaults
+$spacing-sizes: (
+  0: $custom-spacing-0,
+  1: $custom-spacing-1,
+  2: $custom-spacing-2,
+  3: $custom-spacing-3,
+  4: $custom-spacing-4,
+  5: $custom-spacing-5,
+  6: $custom-spacing-6,
+  8: $custom-spacing-8,
+  10: $custom-spacing-10,
+  12: $custom-spacing-12,
+  16: $custom-spacing-16,
+  20: $custom-spacing-20,
+  24: $custom-spacing-24,
+  32: $custom-spacing-32,
+  40: $custom-spacing-40,
+  48: $custom-spacing-48,
+  56: $custom-spacing-56,
+  64: $custom-spacing-64,
+) !default;
+`;
+};
+
+/**
+ * Generate typography tokens in SCSS format
+ * 
+ * @param config - Typography token configuration
+ * @returns SCSS typography tokens string
+ */
+export const generateTypographyTokens = (config: TypographyTokenConfig = {}): string => {
+  const {
+    fontFamilies = {},
+    fontSizes = {},
+    lineHeights = {},
+    fontWeights = {},
+    letterSpacing = {},
+    headings = {},
+  } = config;
+
+  return `// Custom Typography Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Font Families
+${generateFontFamilies(fontFamilies)}
+
+// Font Size Scale
+${generateFontSizes(fontSizes)}
+
+// Line Heights
+${generateLineHeights(lineHeights)}
+
+// Font Weights
+${generateFontWeights(fontWeights)}
+
+// Letter Spacing
+${generateLetterSpacing(letterSpacing)}
+
+// Heading Sizes
+${generateHeadingSizes(headings)}
+
+// Export to override defaults
+$font-family-base: $custom-font-family-sans !default;
+$font-family-monospace: $custom-font-family-mono !default;
+$font-size-base: $custom-font-size-base !default;
+$line-height-base: $custom-line-height-base !default;
+$font-weight-base: $custom-font-weight-normal !default;
+
+// Heading overrides
+$h1-font-size: $custom-h1-font-size !default;
+$h2-font-size: $custom-h2-font-size !default;
+$h3-font-size: $custom-h3-font-size !default;
+$h4-font-size: $custom-h4-font-size !default;
+$h5-font-size: $custom-h5-font-size !default;
+$h6-font-size: $custom-h6-font-size !default;
+`;
+};
+
+/**
+ * Generate shadow tokens in SCSS format
+ * 
+ * @param config - Shadow token configuration
+ * @returns SCSS shadow tokens string
+ */
+export const generateShadowTokens = (config: ShadowTokenConfig = {}): string => {
+  const {
+    colors = {},
+    shadows = {},
+    componentSpecific = {},
+  } = config;
+
+  return `// Custom Box Shadow Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Shadow Colors
+${generateShadowColors(colors)}
+
+// Shadow Scale
+${generateShadowScale(shadows)}
+
+// Component-specific Shadows
+${generateComponentShadows(componentSpecific)}
+
+// Dark mode shadows
+${generateDarkModeShadows()}
+
+// Export to override defaults
+$box-shadow: $custom-shadow-base !default;
+$box-shadow-xs: $custom-shadow-xs !default;
+$box-shadow-sm: $custom-shadow-sm !default;
+$box-shadow-lg: $custom-shadow-lg !default;
+$box-shadow-xl: $custom-shadow-xl !default;
+$box-shadow-inset: $custom-shadow-inner !default;
+
+// Dark mode exports
+$box-shadow-dark: $custom-shadow-base-dark !default;
+$box-shadow-xs-dark: $custom-shadow-xs-dark !default;
+$box-shadow-sm-dark: $custom-shadow-sm-dark !default;
+$box-shadow-lg-dark: $custom-shadow-lg-dark !default;
+$box-shadow-xl-dark: $custom-shadow-xl-dark !default;
+`;
+};
+
+/**
+ * Generate border radius tokens in SCSS format
+ * 
+ * @param config - Radius token configuration
+ * @returns SCSS radius tokens string
+ */
+export const generateRadiusTokens = (config: RadiusTokenConfig = {}): string => {
+  const {
+    baseUnit = '0.25rem',
+    scale = {},
+    componentSpecific = {},
+  } = config;
+
+  return `// Custom Border Radius Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Base radius unit
+$custom-radius-base: ${baseUnit} !default;
+
+// Radius Scale
+${generateRadiusScale(scale)}
+
+// Component-specific Radius
+${generateComponentRadius(componentSpecific)}
+
+// Export to override defaults
+$border-radius-base: $custom-radius-md !default;
+$border-radius-sm: $custom-radius-sm !default;
+$border-radius-lg: $custom-radius-lg !default;
+$border-radius-xl: $custom-radius-xl !default;
+$border-radius-full: $custom-radius-full !default;
+`;
+};
+
+/**
+ * Generate animation tokens in SCSS format
+ * 
+ * @param config - Animation token configuration
+ * @returns SCSS animation tokens string
+ */
+export const generateAnimationTokens = (config: AnimationTokenConfig = {}): string => {
+  const {
+    durations = {},
+    easings = {},
+    presets = {},
+  } = config;
+
+  return `// Custom Animation Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Animation Durations
+${generateAnimationDurations(durations)}
+
+// Easing Functions
+${generateEasings(easings)}
+
+// Animation Presets
+${generateAnimationPresets(presets)}
+
+// Keyframe Definitions
+${generateKeyframes()}
+`;
+};
+
+/**
+ * Generate breakpoint tokens in SCSS format
+ * 
+ * @param config - Breakpoint token configuration
+ * @returns SCSS breakpoint tokens string
+ */
+export const generateBreakpointTokens = (config: BreakpointTokenConfig = {}): string => {
+  const {
+    breakpoints = {},
+    containerMaxWidths = {},
+  } = config;
+
+  return `// Custom Breakpoint Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Responsive Breakpoints
+${generateBreakpoints(breakpoints)}
+
+// Container Max Widths
+${generateContainerMaxWidths(containerMaxWidths)}
+
+// Media Query Mixins
+${generateMediaQueryMixins(breakpoints)}
+`;
+};
+
+/**
+ * Generate z-index tokens in SCSS format
+ * 
+ * @param config - Z-Index token configuration
+ * @returns SCSS z-index tokens string
+ */
+export const generateZIndexTokens = (config: ZIndexTokenConfig = {}): string => {
+  const {
+    scale = {},
+  } = config;
+
+  return `// Custom Z-Index Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+// Z-Index Scale
+${generateZIndexScale(scale)}
+
+// Component Z-Indexes
+$z-index-dropdown: 1000 !default;
+$z-index-sticky: 1020 !default;
+$z-index-fixed: 1030 !default;
+$z-index-modal-backdrop: 1040 !default;
+$z-index-modal: 1050 !default;
+$z-index-popover: 1060 !default;
+$z-index-tooltip: 1070 !default;
+`;
+};
+
+/**
+ * Generate complete design token set in JSON format (W3C DTCG)
+ * 
+ * @param categories - Categories to include
+ * @returns JSON design tokens object
+ */
+export const generateJSONTokens = (categories: TokenCategory[] = []): Record<string, unknown> => {
+  const tokens: Record<string, unknown> = {
+    $schema: 'https://design-tokens.org/schema.json',
+    version: '1.0.0',
+    source: 'Atomix CLI',
+  };
+
+  if (categories.includes('color') || categories.length === 0) {
+    tokens.color = {
+      primary: {
+        1: { value: '#fff9e6', type: 'color' },
+        6: { value: '#ffb800', type: 'color' },
+        10: { value: '#997000', type: 'color' },
+      },
+      semantic: {
+        success: { value: '#22c55e', type: 'color' },
+        warning: { value: '#eab308', type: 'color' },
+        error: { value: '#ef4444', type: 'color' },
+        info: { value: '#3b82f6', type: 'color' },
+      },
+    };
+  }
+
+  if (categories.includes('spacing') || categories.length === 0) {
+    tokens.spacing = {
+      0: { value: '0', type: 'dimension' },
+      1: { value: '0.25rem', type: 'dimension' },
+      2: { value: '0.5rem', type: 'dimension' },
+      4: { value: '1rem', type: 'dimension' },
+      8: { value: '2rem', type: 'dimension' },
+    };
+  }
+
+  return tokens;
+};
+
+/**
+ * Generate CSS custom properties from tokens
+ * 
+ * @param tokens - Token values
+ * @returns CSS custom properties string
+ */
+export const generateCSSTokens = (tokens: Record<string, string>): string => {
+  const cssVars = Object.entries(tokens)
+    .map(([key, value]) => `  --atomix-${key}: ${value};`)
+    .join('\n');
+
+  return `/* CSS Custom Properties */
+/* Generated by Atomix CLI */
+
+:root {
+${cssVars}
+}
+`;
+};
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+const generateBrandColors = (brand: ColorTokenConfig['brand']): string => {
+  const { primary = [], secondary = [], accent = [] } = brand;
+  
+  let output = '';
+  
+  if (primary.length > 0) {
+    output += '$custom-primary-1: ' + (primary[0] || '#fff9e6') + ' !default;\n';
+    output += '$custom-primary-6: ' + (primary[5] || '#ffb800') + ' !default; // Main brand color\n';
+    output += '$custom-primary-10: ' + (primary[9] || '#997000') + ' !default;\n';
+  } else {
+    output += `$custom-primary-1: #fff9e6 !default;
+$custom-primary-2: #fff4cc !default;
+$custom-primary-3: #ffe699 !default;
+$custom-primary-4: #ffd966 !default;
+$custom-primary-5: #ffcc33 !default;
+$custom-primary-6: #ffb800 !default; // Main brand color
+$custom-primary-7: #e6a600 !default;
+$custom-primary-8: #cc9400 !default;
+$custom-primary-9: #b38200 !default;
+$custom-primary-10: #997000 !default;
+`;
+  }
+  
+  return output;
+};
+
+const generateSemanticColors = (semantic: ColorTokenConfig['semantic']): string => {
+  const {
+    success = '#22c55e',
+    warning = '#eab308',
+    error = '#ef4444',
+    info = '#3b82f6',
+  } = semantic;
+
+  return `$custom-success: ${success} !default;
+$custom-warning: ${warning} !default;
+$custom-error: ${error} !default;
+$custom-info: ${info} !default;
+`;
+};
+
+const generateNeutralColors = (neutral: string[]): string => {
+  if (neutral.length === 0) {
+    return `$custom-gray-1: #f9fafb !default;
+$custom-gray-2: #f3f4f6 !default;
+$custom-gray-3: #e5e7eb !default;
+$custom-gray-4: #d1d5db !default;
+$custom-gray-5: #9ca3af !default;
+$custom-gray-6: #6b7280 !default;
+$custom-gray-7: #4b5563 !default;
+$custom-gray-8: #374151 !default;
+$custom-gray-9: #1f2937 !default;
+$custom-gray-10: #111827 !default;
+`;
+  }
+  
+  return neutral.map((color, i) => `$custom-gray-${i + 1}: ${color} !default;`).join('\n') + '\n';
+};
+
+const generateBackgroundColors = (background: ColorTokenConfig['background']): string => {
+  const { light = '#ffffff', dark = '#1f2937' } = background;
+  return `$custom-body-bg: ${light} !default;
+$custom-body-bg-dark: ${dark} !default;
+`;
+};
+
+const generateTextColors = (text: ColorTokenConfig['text']): string => {
+  const { light = '#111827', dark = '#ffffff' } = text;
+  return `$custom-body-color: ${light} !default;
+$custom-body-color-dark: ${dark} !default;
+`;
+};
+
+const generateBorderColors = (border: ColorTokenConfig['border']): string => {
+  const { light = '#e5e7eb', dark = '#4b5563' } = border;
+  return `$custom-border-color: ${light} !default;
+$custom-border-color-dark: ${dark} !default;
+`;
+};
+
+const generateFocusColors = (focus: ColorTokenConfig['focus']): string => {
+  const { light = '#ffcc33', dark = '#ffd966' } = focus;
+  return `$custom-focus-color: ${light} !default;
+$custom-focus-color-dark: ${dark} !default;
+`;
+};
+
+const generateSpacingScale = (scale: number[]): string => {
+  return scale
+    .map((value) => `$custom-spacing-${value}: calc($custom-spacing-base * ${value}) !default; // ${value * 4}px`)
+    .join('\n') + '\n';
+};
+
+const generateComponentSpacing = (componentSpecific: SpacingTokenConfig['componentSpecific']): string => {
+  const {
+    buttonPaddingX = '$custom-spacing-4',
+    buttonPaddingY = '$custom-spacing-2',
+    cardPadding = '$custom-spacing-6',
+    modalPadding = '$custom-spacing-8',
+  } = componentSpecific;
+
+  return `$custom-button-padding-x: ${buttonPaddingX} !default;
+$custom-button-padding-y: ${buttonPaddingY} !default;
+$custom-card-padding: ${cardPadding} !default;
+$custom-modal-padding: ${modalPadding} !default;
+`;
+};
+
+const generateLayoutSpacing = (layout: SpacingTokenConfig['layout']): string => {
+  const {
+    containerPadding = '$custom-spacing-4',
+    gridGap = '$custom-spacing-6',
+    sectionSpacing = '$custom-spacing-16',
+  } = layout;
+
+  return `$custom-container-padding: ${containerPadding} !default;
+$custom-grid-gap: ${gridGap} !default;
+$custom-section-spacing: ${sectionSpacing} !default;
+`;
+};
+
+const generateFontFamilies = (fontFamilies: TypographyTokenConfig['fontFamilies']): string => {
+  const {
+    sans = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    serif = 'Georgia, "Times New Roman", Times, serif',
+    mono = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  } = fontFamilies;
+
+  return `$custom-font-family-sans: ${sans} !default;
+$custom-font-family-serif: ${serif} !default;
+$custom-font-family-mono: ${mono} !default;
+`;
+};
+
+const generateFontSizes = (fontSizes: TypographyTokenConfig['fontSizes']): string => {
+  const defaultSizes: Record<string, string> = {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+  };
+
+  const sizes = { ...defaultSizes, ...fontSizes };
+
+  return Object.entries(sizes)
+    .map(([key, value]) => `$custom-font-size-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateLineHeights = (lineHeights: TypographyTokenConfig['lineHeights']): string => {
+  const {
+    tight = 1.2,
+    base = 1.5,
+    relaxed = 1.75,
+    loose = 2,
+  } = lineHeights;
+
+  return `$custom-line-height-tight: ${tight} !default;
+$custom-line-height-base: ${base} !default;
+$custom-line-height-relaxed: ${relaxed} !default;
+$custom-line-height-loose: ${loose} !default;
+`;
+};
+
+const generateFontWeights = (fontWeights: TypographyTokenConfig['fontWeights']): string => {
+  const defaultWeights: Record<string, number> = {
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    heavy: 800,
+    black: 900,
+  };
+
+  const weights = { ...defaultWeights, ...fontWeights };
+
+  return Object.entries(weights)
+    .map(([key, value]) => `$custom-font-weight-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateLetterSpacing = (letterSpacing: TypographyTokenConfig['letterSpacing']): string => {
+  const {
+    tight = '-0.05em',
+    normal = '0',
+    wide = '0.025em',
+    wider = '0.05em',
+    widest = '0.1em',
+  } = letterSpacing;
+
+  return `$custom-letter-spacing-tight: ${tight} !default;
+$custom-letter-spacing-normal: ${normal} !default;
+$custom-letter-spacing-wide: ${wide} !default;
+$custom-letter-spacing-wider: ${wider} !default;
+$custom-letter-spacing-widest: ${widest} !default;
+`;
+};
+
+const generateHeadingSizes = (headings: TypographyTokenConfig['headings']): string => {
+  const defaultHeadings = {
+    h1: { fontSize: '$custom-font-size-5xl' },
+    h2: { fontSize: '$custom-font-size-4xl' },
+    h3: { fontSize: '$custom-font-size-3xl' },
+    h4: { fontSize: '$custom-font-size-2xl' },
+    h5: { fontSize: '$custom-font-size-xl' },
+    h6: { fontSize: '$custom-font-size-lg' },
+  };
+
+  const mergedHeadings = { ...defaultHeadings, ...headings };
+
+  return Object.entries(mergedHeadings)
+    .map(([key, config]) => `$custom-${key}-font-size: ${(config as { fontSize?: string }).fontSize || '$custom-font-size-' + key} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateShadowColors = (colors: ShadowTokenConfig['colors']): string => {
+  const {
+    light = 'rgba(0, 0, 0, 0.1)',
+    dark = 'rgba(0, 0, 0, 0.2)',
+  } = colors;
+
+  return `$custom-shadow-color: ${light} !default;
+$custom-shadow-color-dark: ${dark} !default;
+`;
+};
+
+const generateShadowScale = (shadows: ShadowTokenConfig['shadows']): string => {
+  const defaultShadows: Record<string, string> = {
+    xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    base: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    md: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    lg: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    xl: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    '2xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    none: 'none',
+  };
+
+  const mergedShadows = { ...defaultShadows, ...shadows };
+
+  return Object.entries(mergedShadows)
+    .map(([key, value]) => `$custom-shadow-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateComponentShadows = (componentSpecific: ShadowTokenConfig['componentSpecific']): string => {
+  const {
+    button = '$custom-shadow-sm',
+    buttonHover = '$custom-shadow-md',
+    card = '$custom-shadow-base',
+    dropdown = '$custom-shadow-lg',
+    modal = '$custom-shadow-xl',
+    popover = '$custom-shadow-lg',
+    tooltip = '$custom-shadow-md',
+  } = componentSpecific;
+
+  return `$custom-button-shadow: ${button} !default;
+$custom-button-shadow-hover: ${buttonHover} !default;
+$custom-card-shadow: ${card} !default;
+$custom-dropdown-shadow: ${dropdown} !default;
+$custom-modal-shadow: ${modal} !default;
+$custom-popover-shadow: ${popover} !default;
+$custom-tooltip-shadow: ${tooltip} !default;
+`;
+};
+
+const generateDarkModeShadows = (): string => {
+  return `$custom-shadow-xs-dark: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !default;
+$custom-shadow-sm-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !default;
+$custom-shadow-base-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !default;
+$custom-shadow-lg-dark: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !default;
+$custom-shadow-xl-dark: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !default;
+`;
+};
+
+const generateRadiusScale = (scale: RadiusTokenConfig['scale']): string => {
+  const defaultScale: Record<string, string> = {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.25rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    full: '9999px',
+    pill: '9999px',
+  };
+
+  const mergedScale = { ...defaultScale, ...scale };
+
+  return Object.entries(mergedScale)
+    .map(([key, value]) => `$custom-radius-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateComponentRadius = (componentSpecific: RadiusTokenConfig['componentSpecific']): string => {
+  const {
+    button = '$custom-radius-md',
+    card = '$custom-radius-lg',
+    input = '$custom-radius-md',
+    badge = '$custom-radius-full',
+  } = componentSpecific;
+
+  return `$custom-button-radius: ${button} !default;
+$custom-card-radius: ${card} !default;
+$custom-input-radius: ${input} !default;
+$custom-badge-radius: ${badge} !default;
+`;
+};
+
+const generateAnimationDurations = (durations: AnimationTokenConfig['durations']): string => {
+  const defaultDurations: Record<string, string> = {
+    instant: '0ms',
+    fast: '150ms',
+    base: '300ms',
+    slow: '500ms',
+    slower: '750ms',
+    durationless: '0ms',
+  };
+
+  const mergedDurations = { ...defaultDurations, ...durations };
+
+  return Object.entries(mergedDurations)
+    .map(([key, value]) => `$custom-duration-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateEasings = (easings: AnimationTokenConfig['easings']): string => {
+  const defaultEasings: Record<string, string> = {
+    linear: 'linear',
+    ease: 'ease',
+    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    smooth: 'cubic-bezier(0.23, 1, 0.32, 1)', // Atomix Ease
+    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+  };
+
+  return Object.entries({ ...defaultEasings, ...easings })
+    .map(([key, value]) => `$custom-easing-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateAnimationPresets = (presets: AnimationTokenConfig['presets']): string => {
+  const defaultPresets = {
+    fadeIn: 'atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth)',
+    slideInUp: 'atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth)',
+    scaleIn: 'atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth)',
+    pulse: 'atomix-pulse 2s var(--atomix-easing-smooth) infinite',
+    shimmer: 'atomix-shimmer 2s linear infinite',
+  };
+
+  const mergedPresets = { ...defaultPresets, ...presets };
+
+  return Object.entries(mergedPresets)
+    .map(([key, value]) => `$custom-animation-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateKeyframes = (): string => {
+  return `@keyframes atomix-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes atomix-slide-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes atomix-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes atomix-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes atomix-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+`;
+};
+
+const generateBreakpoints = (breakpoints: BreakpointTokenConfig['breakpoints']): string => {
+  const defaultBreakpoints: Record<string, string> = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  };
+
+  const mergedBreakpoints = { ...defaultBreakpoints, ...breakpoints };
+
+  return Object.entries(mergedBreakpoints)
+    .map(([key, value]) => `$breakpoint-${key}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+const generateContainerMaxWidths = (containerMaxWidths: BreakpointTokenConfig['containerMaxWidths']): string => {
+  const defaultMaxWidths: Record<string, string> = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  };
+
+  const mergedMaxWidths = { ...defaultMaxWidths, ...containerMaxWidths };
+
+  return `$container-max-widths: (\n  sm: ${mergedMaxWidths.sm || '640px'},\n  md: ${mergedMaxWidths.md || '768px'},\n  lg: ${mergedMaxWidths.lg || '1024px'},\n  xl: ${mergedMaxWidths.xl || '1280px'},\n  '2xl': ${mergedMaxWidths['2xl'] || '1536px'},\n) !default;\n`;
+};
+
+const generateMediaQueryMixins = (breakpoints: BreakpointTokenConfig['breakpoints']): string => {
+  const mergedBreakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    ...breakpoints,
+  };
+
+  return `// Media Query Mixins
+@mixin atomix-media-breakpoint-up($breakpoint) {
+  @if map-has-key($breakpoint-map, $breakpoint) {
+    $min-width: map-get($breakpoint-map, $breakpoint);
+    @media (min-width: $min-width) {
+      @content;
+    }
+  } @else {
+    @warn "Unknown breakpoint: #{$breakpoint}";
+    @content;
+  }
+}
+
+@mixin atomix-media-breakpoint-down($breakpoint) {
+  @if map-has-key($breakpoint-map, $breakpoint) {
+    $max-width: map-get($breakpoint-map, $breakpoint);
+    @media (max-width: $max-width) {
+      @content;
+    }
+  } @else {
+    @warn "Unknown breakpoint: #{$breakpoint}";
+    @content;
+  }
+}
+
+// Breakpoint map for mixins
+$breakpoint-map: (
+  sm: ${mergedBreakpoints.sm},
+  md: ${mergedBreakpoints.md},
+  lg: ${mergedBreakpoints.lg},
+  xl: ${mergedBreakpoints.xl},
+  '2xl': ${mergedBreakpoints['2xl']},
+) !default;
+`;
+};
+
+const generateZIndexScale = (scale: ZIndexTokenConfig['scale']): string => {
+  const defaultScale: Record<string, number> = {
+    hide: -1,
+    base: 0,
+    dropdown: 1000,
+    sticky: 1020,
+    fixed: 1030,
+    modalBackdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070,
+  };
+
+  const mergedScale = { ...defaultScale, ...scale };
+
+  return Object.entries(mergedScale)
+    .map(([key, value]) => `$z-index-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value} !default;`)
+    .join('\n') + '\n';
+};
+
+/**
+ * All token generation functions
+ */
+export const tokenGenerators = {
+  color: generateColorTokens,
+  spacing: generateSpacingTokens,
+  typography: generateTypographyTokens,
+  shadow: generateShadowTokens,
+  radius: generateRadiusTokens,
+  animation: generateAnimationTokens,
+  breakpoint: generateBreakpointTokens,
+  zIndex: generateZIndexTokens,
+  json: generateJSONTokens,
+  css: generateCSSTokens,
+};
+
+/**
+ * Type for token generators object
+ */
+export type TokenGenerators = typeof tokenGenerators;