# All files / src/lib glassmorphism.ts

0% Statements 0/22
0% Branches 0/26
0% Functions 0/6
0% Lines 0/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116

     /**
     * Glassmorphism Utility Classes
     * Provides consistent glassmorphism styles across the application
     */

    export const glassClasses = {
      // Modals and dialogs - backdrop-blur-md
      modal: 'bg-slate-900/95 backdrop-blur-md border border-slate-700/50',

      // Cards y Contenedores - backdrop-blur-sm
      card: 'bg-slate-800/30 backdrop-blur-sm border border-slate-700/50',

      // Headers and navigation - backdrop-blur-md
      header: 'bg-slate-900/80 backdrop-blur-md border-b border-slate-700/50',

      // Overlays y Fondos - backdrop-blur-sm
      overlay: 'bg-black/60 backdrop-blur-sm',

      // Elementos Flotantes - backdrop-blur-md
      floating: 'bg-slate-800/50 backdrop-blur-md border border-slate-700/30',

      // Variantes adicionales
      cardDark: 'bg-slate-900/50 backdrop-blur-sm border border-slate-700/50',
      cardLight: 'bg-slate-700/30 backdrop-blur-sm border border-slate-600/50',

      // Para elementos interactivos
      cardHover: 'bg-slate-800/30 backdrop-blur-sm border border-slate-700/50 hover:bg-slate-700/50 transition-all duration-200',

      // Para sidebars
      sidebar: 'bg-slate-900/90 backdrop-blur-md border-r border-slate-700/50',

      // Para dropdowns
      dropdown: 'bg-slate-900/95 backdrop-blur-md border border-slate-700/50 shadow-xl',

      // Para tooltips
      tooltip: 'bg-slate-900/90 backdrop-blur-sm border border-slate-700/50'} as const;

    /**
     * Get glassmorphism class by type
     */
    export function getGlassClass(type: keyof typeof glassClasses): string {
      return glassClasses[type];
    }

    /**
     * Combine glassmorphism class with custom classes
     */
    export function withGlass(type: keyof typeof glassClasses, customClasses?: string): string {
      return `${glassClasses[type]} ${customClasses || ''}`.trim();
    }

    /**
     * Check if element should use glassmorphism based on context
     */
    export function shouldUseGlass(_context: 'modal' | 'card' | 'header' | 'overlay' | 'floating'): boolean {
      // Could add logic here to disable glassmorphism on low-end devices
      // For now, always return true
      return true;
    }

    /**
     * Get appropriate text color for glassmorphism backgrounds
     */
    export function getGlassTextColor(type: keyof typeof glassClasses): string {
      switch (type) {
        case 'modal':
        case 'header':
        case 'sidebar':
        case 'dropdown':
          return 'text-white';
        case 'card':
        case 'cardDark':
        case 'cardLight':
        case 'cardHover':
        case 'floating':
        case 'tooltip':
          return 'text-slate-100';
        case 'overlay':
          return 'text-white';
        default:
          return 'text-white';
      }
    }

    /**
     * Get appropriate secondary text color for glassmorphism backgrounds
     */
    export function getGlassSecondaryTextColor(type: keyof typeof glassClasses): string {
      switch (type) {
        case 'modal':
        case 'header':
        case 'sidebar':
        case 'dropdown':
          return 'text-slate-300';
        case 'card':
        case 'cardDark':
        case 'cardLight':
        case 'cardHover':
        case 'floating':
        case 'tooltip':
          return 'text-slate-400';
        case 'overlay':
          return 'text-slate-200';
        default:
          return 'text-slate-300';
      }
    }

    export function generateGlassGradient(_context: CanvasRenderingContext2D, _width: number, _height: number) {
      // Implementation details omitted for brevity
      // This function is a placeholder for the actual implementation
      // which would use the context to generate a gradient
      // For now, it just returns a string
      return `linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%)`;
    }