aura-glass/dist/esm/core/mixins/glowEffects.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

// Glow effects mixin
const glowEffects = {
  subtle: '0 0 10px rgba(255, 255, 255, 0.1)',
  light: '0 0 20px rgba(255, 255, 255, 0.2)',
  standard: '0 0 30px rgba(255, 255, 255, 0.3)',
  strong: '0 0 40px rgba(255, 255, 255, 0.4)',
  intense: '0 0 50px rgba(255, 255, 255, 0.5)'
};
const createGlowEffect = (config = {}) => {
  const {
    color = 'var(--glass-white)',
    intensity = 'standard',
    size = 30,
    spread = 0,
    blur = size,
    animated = false,
    animationDuration = 2000,
    pulsing = false,
    pulseSpeed = 2000
  } = config;
  // Convert hex to rgba if needed
  const glowColor = color.startsWith('#') ? hexToRgba(color, 0.3) : color;
  const baseStyles = {
    boxShadow: `0 0 ${blur}px ${spread}px ${glowColor}`,
    filter: `drop-shadow(0 0 ${blur / 2}px ${glowColor})`
  };
  if (animated || pulsing) {
    baseStyles.animation = pulsing ? `glow-pulse ${pulseSpeed}ms ease-in-out infinite alternate` : `glow-animate ${animationDuration}ms ease-in-out infinite`;
  }
  return baseStyles;
};
// Helper function to convert hex to rgba
const hexToRgba = (hex, alpha) => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
// Predefined glow colors
const glowColors = {
  white: 'var(--glass-white)',
  blue: 'var(--glass-color-primary)',
  indigo: '#6366f1',
  purple: '#8b5cf6',
  pink: '#ec4899',
  red: 'var(--glass-color-danger)',
  orange: '#f97316',
  amber: 'var(--glass-color-warning)',
  yellow: '#eab308',
  lime: '#84cc16',
  green: '#22c55e',
  emerald: 'var(--glass-color-success)',
  teal: '#14b8a6',
  cyan: '#06b6d4',
  sky: '#0ea5e9',
  gray: 'var(--glass-gray-500)'
};
// Preset glow effects
const glowPresets = {
  primary: {
    color: glowColors.blue,
    intensity: 'standard',
    animated: true
  },
  secondary: {
    color: glowColors.gray,
    intensity: 'light',
    animated: false
  },
  success: {
    color: glowColors.green,
    intensity: 'light',
    pulsing: true
  },
  warning: {
    color: glowColors.amber,
    intensity: 'standard',
    pulsing: true
  },
  error: {
    color: glowColors.red,
    intensity: 'strong',
    pulsing: true,
    pulseSpeed: 1000
  },
  info: {
    color: glowColors.cyan,
    intensity: 'light',
    animated: true
  }
};
// Specific glow effects for different elements
createGlowEffect(glowPresets.primary);
createGlowEffect(glowPresets.success);
createGlowEffect(glowPresets.error);
createGlowEffect({
  color: glowColors.white
});
createGlowEffect({
  color: glowColors.purple
});
createGlowEffect({
  color: glowColors.orange
});
// CSS keyframes for glow animations (to be injected into global styles)
const glowKeyframes = `
  @keyframes glow-animate {
    0% { filter: drop-shadow(0 0 5px currentColor); }
    50% { filter: drop-shadow(0 0 20px currentColor); }
    100% { filter: drop-shadow(0 0 5px currentColor); }
  }

  @keyframes glow-pulse {
    0% { box-shadow: 0 0 5px currentColor; }
    100% { box-shadow: 0 0 25px currentColor; }
  }

  @keyframes rainbow-glow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }

  @keyframes dual-glow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
  }
`;
// Utility to inject glow keyframes
const injectGlowKeyframes = () => {
  const styleId = 'aura-glass-glow-keyframes';
  if (document.getElementById(styleId)) {
    return; // Already injected
  }
  const style = document.createElement('style');
  style.id = styleId;
  style.textContent = glowKeyframes;
  document.head.appendChild(style);
};

export { createGlowEffect, glowColors, glowEffects, glowKeyframes, glowPresets, injectGlowKeyframes };
//# sourceMappingURL=glowEffects.js.map