@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/tokens/gradients.ts

@@ -0,0 +1,154 @@
+/**
+ * Gradient Tokens
+ * 
+ * Centralized gradient system for consistent color gradients.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+
+import { COLOR_TOKENS_LIGHT } from './colors';
+
+export type GradientDirection = 'to-r' | 'to-l' | 'to-t' | 'to-b' | 'to-tr' | 'to-tl' | 'to-br' | 'to-bl';
+export type GradientRole = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+
+export interface GradientToken {
+  value: string;
+  tailwind: string;
+  description: string;
+  from: string;
+  via?: string;
+  to: string;
+}
+
+/**
+ * Gradient Token Factory
+ * Creates gradient tokens with consistent color schemes
+ */
+export class GradientTokenFactory {
+  /**
+   * Create a gradient token
+   */
+  static create(
+    role: GradientRole,
+    direction: GradientDirection = 'to-r'
+  ): GradientToken {
+    const colorMap: Record<GradientRole, { from: string; via?: string; to: string; description: string }> = {
+      primary: {
+        from: COLOR_TOKENS_LIGHT.primary.light.hex,
+        via: COLOR_TOKENS_LIGHT.primary.DEFAULT.hex,
+        to: COLOR_TOKENS_LIGHT.primary.dark.hex,
+        description: 'Primary color gradient',
+      },
+      secondary: {
+        from: COLOR_TOKENS_LIGHT.secondary.light.hex,
+        via: COLOR_TOKENS_LIGHT.secondary.DEFAULT.hex,
+        to: COLOR_TOKENS_LIGHT.secondary.dark.hex,
+        description: 'Secondary color gradient',
+      },
+      success: {
+        from: COLOR_TOKENS_LIGHT.success.light.hex,
+        to: COLOR_TOKENS_LIGHT.success.dark.hex,
+        description: 'Success color gradient',
+      },
+      error: {
+        from: COLOR_TOKENS_LIGHT.error.light.hex,
+        to: COLOR_TOKENS_LIGHT.error.dark.hex,
+        description: 'Error color gradient',
+      },
+      info: {
+        from: COLOR_TOKENS_LIGHT.info.light.hex,
+        to: COLOR_TOKENS_LIGHT.info.dark.hex,
+        description: 'Info color gradient',
+      },
+      warning: {
+        from: COLOR_TOKENS_LIGHT.warning.light.hex,
+        to: COLOR_TOKENS_LIGHT.warning.dark.hex,
+        description: 'Warning color gradient',
+      },
+    };
+
+    const colors = colorMap[role];
+    const directionMap: Record<GradientDirection, string> = {
+      'to-r': 'to right',
+      'to-l': 'to left',
+      'to-t': 'to top',
+      'to-b': 'to bottom',
+      'to-tr': 'to top right',
+      'to-tl': 'to top left',
+      'to-br': 'to bottom right',
+      'to-bl': 'to bottom left',
+    };
+
+    // Build CSS gradient value
+    let gradientValue = `linear-gradient(${directionMap[direction]}, ${colors.from}`;
+    if (colors.via) {
+      gradientValue += `, ${colors.via}`;
+    }
+    gradientValue += `, ${colors.to})`;
+
+    // Build Tailwind classes
+    const tailwindParts: string[] = [];
+    
+    // Direction class
+    tailwindParts.push(`bg-gradient-${direction.replace('to-', '')}`);
+    
+    // Color classes (using from-*, via-*, to-* syntax)
+    // Note: We'll use arbitrary values for custom colors
+    tailwindParts.push(`from-[${colors.from}]`);
+    if (colors.via) {
+      tailwindParts.push(`via-[${colors.via}]`);
+    }
+    tailwindParts.push(`to-[${colors.to}]`);
+
+    return {
+      value: gradientValue,
+      tailwind: tailwindParts.join(' '),
+      description: colors.description,
+      from: colors.from,
+      via: colors.via,
+      to: colors.to,
+    };
+  }
+
+  /**
+   * Convert hex color to approximate Tailwind color class
+   * This is a helper for documentation, actual implementation uses arbitrary values
+   */
+  private static hexToTailwindColor(hex: string): string {
+    // This is a simplified mapping for documentation purposes
+    // In practice, we use arbitrary values like from-[#hex]
+    return hex;
+  }
+}
+
+/**
+ * Pre-defined gradient tokens
+ */
+export const GRADIENT_TOKENS = {
+  primary: GradientTokenFactory.create('primary'),
+  secondary: GradientTokenFactory.create('secondary'),
+  success: GradientTokenFactory.create('success'),
+  error: GradientTokenFactory.create('error'),
+  info: GradientTokenFactory.create('info'),
+  warning: GradientTokenFactory.create('warning'),
+  
+  // Common directions
+  'primary-to-r': GradientTokenFactory.create('primary', 'to-r'),
+  'primary-to-b': GradientTokenFactory.create('primary', 'to-b'),
+  'secondary-to-r': GradientTokenFactory.create('secondary', 'to-r'),
+  'success-to-r': GradientTokenFactory.create('success', 'to-r'),
+  'error-to-r': GradientTokenFactory.create('error', 'to-r'),
+} as const;
+
+/**
+ * Helper function to get gradient token
+ */
+export function getGradient(role: GradientRole, direction?: GradientDirection): GradientToken {
+  return GradientTokenFactory.create(role, direction);
+}
+
+/**
+ * Helper function to get gradient as Tailwind classes
+ */
+export function getGradientClass(role: GradientRole, direction: GradientDirection = 'to-r'): string {
+  return GradientTokenFactory.create(role, direction).tailwind;
+}

package/src/ui/tokens/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Design Tokens Index
+ * 
+ * Centralized exports for all design tokens.
+ */
+
+// Colors
+export * from './colors';
+export { COLOR_TOKENS, COLOR_TOKENS_LIGHT, COLOR_TOKENS_DARK, getColor, getColorClass } from './colors';
+
+// Spacing
+export * from './spacing';
+export { SPACING_TOKENS, getSpacing, getSpacingClass } from './spacing';
+
+// Typography
+export * from './typography';
+export { TYPOGRAPHY_TOKENS, FONT_FAMILY_TOKENS, FONT_WEIGHT_TOKENS, getTypography, getTypographyClasses } from './typography';
+
+// Shadows
+export * from './shadows';
+export { SHADOW_TOKENS, getShadow, getShadowClass } from './shadows';
+
+// Radius
+export * from './radius';
+export { RADIUS_TOKENS, getRadius, getRadiusClass } from './radius';
+
+// Borders
+export * from './borders';
+export { BORDER_TOKENS, getBorder, getBorderWidthClass, getBorderStyleClass, getBorderClasses } from './borders';
+
+// Breakpoints
+export * from './breakpoints';
+export { BREAKPOINT_TOKENS, getBreakpoint, getMediaQuery } from './breakpoints';
+
+// Animations
+export * from './animations';
+export { ANIMATION_TOKENS, getAnimation, getAnimationClass, getTransitionClass } from './animations';
+
+// Z-Index
+export * from './z-index';
+export { Z_INDEX_TOKENS, getZIndex, getZIndexClass } from './z-index';
+
+// Opacity
+export * from './opacity';
+export { OPACITY_TOKENS, getOpacity, getOpacityClass } from './opacity';
+
+// Gradients
+export * from './gradients';
+export { GRADIENT_TOKENS, getGradient, getGradientClass } from './gradients';
+
+// Sidebar (specific tokens)
+export * from './sidebar';
+export { SIDEBAR_TOKENS, getNestedIndentClass } from './sidebar';
+
+// Tokens Factory
+export * from './tokens.factory';
+export { TokensFactory, defaultTokensFactory, createTokenSet } from './tokens.factory';

package/src/ui/tokens/opacity.ts

@@ -0,0 +1,107 @@
+/**
+ * Opacity Tokens
+ * 
+ * Centralized opacity system for consistent transparency values.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+
+export type OpacityValue = 0 | 5 | 10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 95 | 100;
+
+export interface OpacityToken {
+  value: OpacityValue;
+  decimal: number;
+  tailwind: string;
+  description: string;
+}
+
+/**
+ * Opacity Token Factory
+ * Creates opacity tokens with consistent values
+ */
+export class OpacityTokenFactory {
+  /**
+   * Create an opacity token
+   */
+  static create(value: OpacityValue): OpacityToken {
+    const decimal = value / 100;
+    
+    const descriptionMap: Record<OpacityValue, string> = {
+      0: 'Fully transparent',
+      5: 'Very light overlay',
+      10: 'Light overlay',
+      20: 'Subtle overlay',
+      25: 'Quarter opacity',
+      30: 'Light background',
+      40: 'Semi-transparent',
+      50: 'Half opacity',
+      60: 'Semi-opaque',
+      70: 'Mostly opaque',
+      75: 'Three-quarter opacity',
+      80: 'High opacity',
+      90: 'Very high opacity',
+      95: 'Nearly opaque',
+      100: 'Fully opaque',
+    };
+
+    // Map to Tailwind classes
+    const tailwindMap: Record<OpacityValue, string> = {
+      0: 'opacity-0',
+      5: 'opacity-5',
+      10: 'opacity-10',
+      20: 'opacity-20',
+      25: 'opacity-25',
+      30: 'opacity-30',
+      40: 'opacity-40',
+      50: 'opacity-50',
+      60: 'opacity-60',
+      70: 'opacity-70',
+      75: 'opacity-75',
+      80: 'opacity-80',
+      90: 'opacity-90',
+      95: 'opacity-95',
+      100: 'opacity-100',
+    };
+
+    return {
+      value,
+      decimal,
+      tailwind: tailwindMap[value],
+      description: descriptionMap[value],
+    };
+  }
+}
+
+/**
+ * Pre-defined opacity tokens
+ */
+export const OPACITY_TOKENS = {
+  transparent: OpacityTokenFactory.create(0),
+  '5': OpacityTokenFactory.create(5),
+  '10': OpacityTokenFactory.create(10),
+  '20': OpacityTokenFactory.create(20),
+  '25': OpacityTokenFactory.create(25),
+  '30': OpacityTokenFactory.create(30),
+  '40': OpacityTokenFactory.create(40),
+  '50': OpacityTokenFactory.create(50),
+  '60': OpacityTokenFactory.create(60),
+  '70': OpacityTokenFactory.create(70),
+  '75': OpacityTokenFactory.create(75),
+  '80': OpacityTokenFactory.create(80),
+  '90': OpacityTokenFactory.create(90),
+  '95': OpacityTokenFactory.create(95),
+  opaque: OpacityTokenFactory.create(100),
+} as const;
+
+/**
+ * Helper function to get opacity token
+ */
+export function getOpacity(value: OpacityValue): OpacityToken {
+  return OpacityTokenFactory.create(value);
+}
+
+/**
+ * Helper function to get opacity as Tailwind class
+ */
+export function getOpacityClass(value: OpacityValue): string {
+  return OpacityTokenFactory.create(value).tailwind;
+}

package/src/ui/tokens/radius.ts

@@ -0,0 +1,107 @@
+/**
+ * Border Radius Tokens
+ * 
+ * Centralized border radius system for consistent rounded corners.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+
+export type RadiusSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+
+export interface RadiusToken {
+  value: number;
+  rem: string;
+  px: string;
+  tailwind: string;
+  description: string;
+}
+
+/**
+ * Radius Token Factory
+ * Creates radius tokens with consistent values
+ */
+export class RadiusTokenFactory {
+  /**
+   * Create a radius token
+   */
+  static create(size: RadiusSize): RadiusToken {
+    const radiusMap: Record<RadiusSize, { px: number; tailwind: string; description: string }> = {
+      none: {
+        px: 0,
+        tailwind: 'rounded-none',
+        description: 'No border radius',
+      },
+      sm: {
+        px: 2,
+        tailwind: 'rounded-sm',
+        description: 'Small radius (2px) for subtle rounding',
+      },
+      md: {
+        px: 6,
+        tailwind: 'rounded-md',
+        description: 'Medium radius (6px) for buttons and inputs',
+      },
+      lg: {
+        px: 8,
+        tailwind: 'rounded-lg',
+        description: 'Large radius (8px) for cards and containers',
+      },
+      xl: {
+        px: 12,
+        tailwind: 'rounded-xl',
+        description: 'Extra large radius (12px) for prominent elements',
+      },
+      '2xl': {
+        px: 16,
+        tailwind: 'rounded-2xl',
+        description: '2X large radius (16px) for large containers',
+      },
+      '3xl': {
+        px: 24,
+        tailwind: 'rounded-3xl',
+        description: '3X large radius (24px) for very large containers',
+      },
+      full: {
+        px: 9999,
+        tailwind: 'rounded-full',
+        description: 'Full radius for circular elements',
+      },
+    };
+
+    const config = radiusMap[size];
+    return {
+      value: config.px,
+      rem: `${config.px / 16}rem`,
+      px: `${config.px}px`,
+      tailwind: config.tailwind,
+      description: config.description,
+    };
+  }
+}
+
+/**
+ * Pre-defined radius tokens
+ */
+export const RADIUS_TOKENS = {
+  none: RadiusTokenFactory.create('none'),
+  sm: RadiusTokenFactory.create('sm'),
+  md: RadiusTokenFactory.create('md'),
+  lg: RadiusTokenFactory.create('lg'),
+  xl: RadiusTokenFactory.create('xl'),
+  '2xl': RadiusTokenFactory.create('2xl'),
+  '3xl': RadiusTokenFactory.create('3xl'),
+  full: RadiusTokenFactory.create('full'),
+} as const;
+
+/**
+ * Helper function to get radius token
+ */
+export function getRadius(size: keyof typeof RADIUS_TOKENS): RadiusToken {
+  return RADIUS_TOKENS[size];
+}
+
+/**
+ * Helper function to get radius as Tailwind class
+ */
+export function getRadiusClass(size: keyof typeof RADIUS_TOKENS): string {
+  return RADIUS_TOKENS[size].tailwind;
+}

package/src/ui/tokens/shadows.ts

@@ -0,0 +1,92 @@
+/**
+ * Shadow Tokens
+ * 
+ * Centralized shadow system for consistent elevation and depth.
+ * Uses Factory Pattern for type-safe token creation.
+ */
+
+export type ShadowSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner';
+
+export interface ShadowToken {
+  value: string;
+  tailwind: string;
+  description: string;
+}
+
+/**
+ * Shadow Token Factory
+ * Creates shadow tokens with consistent values
+ */
+export class ShadowTokenFactory {
+  /**
+   * Create a shadow token
+   */
+  static create(size: ShadowSize): ShadowToken {
+    const shadowMap: Record<ShadowSize, { value: string; tailwind: string; description: string }> = {
+      none: {
+        value: 'none',
+        tailwind: 'shadow-none',
+        description: 'No shadow',
+      },
+      sm: {
+        value: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        tailwind: 'shadow-sm',
+        description: 'Small shadow for subtle elevation',
+      },
+      md: {
+        value: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        tailwind: 'shadow-md',
+        description: 'Medium shadow for cards and elevated elements',
+      },
+      lg: {
+        value: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        tailwind: 'shadow-lg',
+        description: 'Large shadow for modals and dropdowns',
+      },
+      xl: {
+        value: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        tailwind: 'shadow-xl',
+        description: 'Extra large shadow for prominent modals',
+      },
+      '2xl': {
+        value: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+        tailwind: 'shadow-2xl',
+        description: '2X large shadow for maximum elevation',
+      },
+      inner: {
+        value: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        tailwind: 'shadow-inner',
+        description: 'Inner shadow for inset elements',
+      },
+    };
+
+    return shadowMap[size];
+  }
+}
+
+/**
+ * Pre-defined shadow tokens
+ */
+export const SHADOW_TOKENS = {
+  none: ShadowTokenFactory.create('none'),
+  sm: ShadowTokenFactory.create('sm'),
+  md: ShadowTokenFactory.create('md'),
+  lg: ShadowTokenFactory.create('lg'),
+  xl: ShadowTokenFactory.create('xl'),
+  '2xl': ShadowTokenFactory.create('2xl'),
+  inner: ShadowTokenFactory.create('inner'),
+} as const;
+
+/**
+ * Helper function to get shadow token
+ */
+export function getShadow(size: keyof typeof SHADOW_TOKENS): ShadowToken {
+  return SHADOW_TOKENS[size];
+}
+
+/**
+ * Helper function to get shadow as Tailwind class
+ */
+export function getShadowClass(size: keyof typeof SHADOW_TOKENS): string {
+  return SHADOW_TOKENS[size].tailwind;
+}

package/src/ui/tokens/tokens.factory.ts

@@ -9,6 +9,13 @@ import { SpacingTokenFactory, type SpacingScale, type SpacingToken } from './spa
 import { TypographyTokenFactory, type TypographyToken, type FontSize, type LineHeight, type FontWeight } from './typography';
 import { ColorTokenFactory, type ColorRole, type SemanticColor, LightColorStrategy, DarkColorStrategy } from './colors';
 import { BreakpointTokenFactory, type BreakpointName, type BreakpointToken } from './breakpoints';
+import { ShadowTokenFactory, type ShadowSize, type ShadowToken } from './shadows';
+import { RadiusTokenFactory, type RadiusSize, type RadiusToken } from './radius';
+import { BorderTokenFactory, type BorderWidth, type BorderToken } from './borders';
+import { AnimationTokenFactory, type AnimationDuration, type EasingFunction, type AnimationToken } from './animations';
+import { ZIndexTokenFactory, type ZIndexLayer, type ZIndexToken } from './z-index';
+import { OpacityTokenFactory, type OpacityValue, type OpacityToken } from './opacity';
+import { GradientTokenFactory, type GradientRole, type GradientDirection, type GradientToken } from './gradients';
 
 export type ThemeMode = 'light' | 'dark';
 
@@ -17,6 +24,13 @@ export interface TokenSet {
   typography: Record<string, TypographyToken>;
   colors: Record<ColorRole, SemanticColor>;
   breakpoints: Record<BreakpointName, BreakpointToken>;
+  shadows: Record<string, ShadowToken>;
+  radius: Record<string, RadiusToken>;
+  borders: Record<string, BorderToken>;
+  animations: Record<string, AnimationToken>;
+  zIndex: Record<string, ZIndexToken>;
+  opacity: Record<string, OpacityToken>;
+  gradients: Record<string, GradientToken>;
 }
 
 /**
@@ -59,6 +73,55 @@ export class TokensFactory {
     return BreakpointTokenFactory.create(name);
   }
 
+  /**
+   * Create shadow token
+   */
+  createShadow(size: ShadowSize): ShadowToken {
+    return ShadowTokenFactory.create(size);
+  }
+
+  /**
+   * Create radius token
+   */
+  createRadius(size: RadiusSize): RadiusToken {
+    return RadiusTokenFactory.create(size);
+  }
+
+  /**
+   * Create border token
+   */
+  createBorder(width: BorderWidth): BorderToken {
+    return BorderTokenFactory.create(width);
+  }
+
+  /**
+   * Create animation token
+   */
+  createAnimation(duration: AnimationDuration, easing?: EasingFunction): AnimationToken {
+    return AnimationTokenFactory.create(duration, easing);
+  }
+
+  /**
+   * Create z-index token
+   */
+  createZIndex(layer: ZIndexLayer): ZIndexToken {
+    return ZIndexTokenFactory.create(layer);
+  }
+
+  /**
+   * Create opacity token
+   */
+  createOpacity(value: OpacityValue): OpacityToken {
+    return OpacityTokenFactory.create(value);
+  }
+
+  /**
+   * Create gradient token
+   */
+  createGradient(role: GradientRole, direction?: GradientDirection): GradientToken {
+    return GradientTokenFactory.create(role, direction);
+  }
+
   /**
    * Create complete token set for a theme
    */
@@ -91,6 +154,67 @@ export class TokensFactory {
         xl: this.createBreakpoint('xl'),
         '2xl': this.createBreakpoint('2xl'),
       },
+      shadows: {
+        none: this.createShadow('none'),
+        sm: this.createShadow('sm'),
+        md: this.createShadow('md'),
+        lg: this.createShadow('lg'),
+        xl: this.createShadow('xl'),
+        '2xl': this.createShadow('2xl'),
+        inner: this.createShadow('inner'),
+      },
+      radius: {
+        none: this.createRadius('none'),
+        sm: this.createRadius('sm'),
+        md: this.createRadius('md'),
+        lg: this.createRadius('lg'),
+        xl: this.createRadius('xl'),
+        '2xl': this.createRadius('2xl'),
+        '3xl': this.createRadius('3xl'),
+        full: this.createRadius('full'),
+      },
+      borders: {
+        none: this.createBorder('none'),
+        thin: this.createBorder('thin'),
+        base: this.createBorder('base'),
+        medium: this.createBorder('medium'),
+        thick: this.createBorder('thick'),
+      },
+      animations: {
+        fast: this.createAnimation('fast'),
+        base: this.createAnimation('base'),
+        slow: this.createAnimation('slow'),
+        slower: this.createAnimation('slower'),
+      },
+      zIndex: {
+        base: this.createZIndex('base'),
+        dropdown: this.createZIndex('dropdown'),
+        sticky: this.createZIndex('sticky'),
+        fixed: this.createZIndex('fixed'),
+        'modal-backdrop': this.createZIndex('modal-backdrop'),
+        modal: this.createZIndex('modal'),
+        popover: this.createZIndex('popover'),
+        tooltip: this.createZIndex('tooltip'),
+        toast: this.createZIndex('toast'),
+      },
+      opacity: {
+        transparent: this.createOpacity(0),
+        '5': this.createOpacity(5),
+        '10': this.createOpacity(10),
+        '25': this.createOpacity(25),
+        '50': this.createOpacity(50),
+        '75': this.createOpacity(75),
+        '90': this.createOpacity(90),
+        opaque: this.createOpacity(100),
+      },
+      gradients: {
+        primary: this.createGradient('primary'),
+        secondary: this.createGradient('secondary'),
+        success: this.createGradient('success'),
+        error: this.createGradient('error'),
+        info: this.createGradient('info'),
+        warning: this.createGradient('warning'),
+      },
     };
   }