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

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

import { glassTokenUtils, AURA_GLASS } from '../../tokens/glass.js';

/**
 * SINGLE PUBLIC API - Creates glass styles from canonical tokens
 *
 * This is the ONLY way to create glass styles going forward.
 * All other methods are deprecated.
 */
function createGlassStyle(opts = {}) {
  const {
    intent = 'neutral',
    elevation = 'level2',
    tier = 'high',
    interactive = false,
    hoverLift = false,
    focusRing = false,
    press = false
  } = opts;
  // Get the base styles from canonical tokens
  const styles = glassTokenUtils.buildSurfaceStyles(intent, elevation, tier);
  if (!styles.backdropFilter) {
    const surface = glassTokenUtils.getSurface(intent, elevation);
    const fallbackFilter = glassTokenUtils.buildBackdropFilter(surface.backdropBlur.px, tier);
    styles.backdropFilter = fallbackFilter;
    styles.WebkitBackdropFilter = fallbackFilter;
  }
  if (!styles.background) {
    const surface = glassTokenUtils.getSurface(intent, elevation);
    styles.background = surface.surface.base;
  }
  // Add interactive enhancements if requested
  if (interactive) {
    styles.cursor = 'pointer';
    styles.userSelect = 'none';
    // Interactive surfaces get slightly enhanced shadows by default
    if (styles.boxShadow && styles.boxShadow !== 'none') {
      styles.transition = `all ${AURA_GLASS.motion.defaultMs}ms ease-out, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
    }
  }
  // Add hover lift capability (transform applied via CSS :hover)
  if (hoverLift) {
    styles.transition = `${styles.transition || 'all 200ms ease-out'}, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
  }
  // Add focus ring capability (applied via CSS :focus-visible)
  if (focusRing) {
    // The actual focus ring is applied via CSS, but we ensure transitions are smooth
    styles.transition = `${styles.transition || 'all 200ms ease-out'}, box-shadow ${AURA_GLASS.motion.defaultMs}ms ease-out`;
  }
  // Add press effect capability (applied via CSS :active)
  if (press) {
    // The actual press effect is applied via CSS, but we ensure transitions are smooth
    styles.transition = `${styles.transition || 'all 200ms ease-out'}, transform ${AURA_GLASS.motion.defaultMs}ms ease-out`;
  }
  return styles;
}
/**
 * DEPRECATED: Legacy hover mixin
 * @deprecated Use CSS :hover with createGlassStyle({ hoverLift: true })
 */
function createGlassHoverMixin(options = {}) {
  console.warn('[AuraGlass] createGlassHoverMixin is deprecated. Use CSS :hover with hoverLift option.');
  return {
    transform: 'translateY(-2px) scale(1.01)',
    boxShadow: '0 12px 40px rgba(0,0,0,0.3)'
  };
}
/**
 * DEPRECATED: Legacy focus mixin
 * @deprecated Use CSS :focus-visible with createGlassStyle({ focusRing: true })
 */
function createGlassFocusMixin(options = {}) {
  console.warn('[AuraGlass] createGlassFocusMixin is deprecated. Use CSS :focus-visible with focusRing option.');
  return {
    outline: 'none',
    boxShadow: '0 0 0 3px var(--glass-color-primary, 0.3)'
  };
}
/**
 * DEPRECATED: Legacy disabled mixin
 * @deprecated Use CSS :disabled with reduced opacity
 */
function createGlassDisabledMixin() {
  console.warn('[AuraGlass] createGlassDisabledMixin is deprecated. Use CSS :disabled with opacity: 0.6.');
  return {
    opacity: 0.6,
    cursor: 'not-allowed',
    pointerEvents: 'none'
  };
}
/**
 * Utility: Generate CSS custom properties for dynamic theming
 * This creates CSS variables that can be overridden at runtime
 */
function generateGlassThemeVariables(options = {}) {
  const {
    intent = 'neutral',
    elevation = 'level2'
  } = options;
  const surface = glassTokenUtils.getSurface(intent, elevation);
  return {
    '--glass-surface': surface.surface.base,
    '--glass-border-color': surface.border.color,
    '--glass-border-width': `${surface.border.width}px`,
    '--glass-blur': `${surface.backdropBlur.px}px`,
    '--glass-text-primary': surface.text.primary,
    '--glass-text-secondary': surface.text.secondary,
    '--glass-shadow': surface.outerShadow ? `${surface.outerShadow.x}px ${surface.outerShadow.y}px ${surface.outerShadow.blur}px ${surface.outerShadow.spread}px ${surface.outerShadow.color}` : 'none',
    '--glass-radius': `${AURA_GLASS.radii.md}px`,
    '--glass-transition': `all ${AURA_GLASS.motion.defaultMs}ms ease-out`
  };
}
/**
 * Utility: Create responsive glass styles for different screen sizes
 *
 * Returns CSS properties optimized for different performance tiers
 * based on typical device capabilities.
 */
function createResponsiveGlassStyle(mobile, tablet, desktop) {
  return {
    // Mobile: use low tier for better performance
    mobile: createGlassStyle({
      ...mobile,
      tier: 'low'
    }),
    // Tablet: use medium tier for balanced experience  
    tablet: createGlassStyle({
      ...tablet,
      tier: 'medium'
    }),
    // Desktop: use high tier for full experience
    desktop: createGlassStyle({
      ...desktop,
      tier: 'high'
    })
  };
}

export { createGlassDisabledMixin, createGlassFocusMixin, createGlassHoverMixin, createGlassStyle, createResponsiveGlassStyle, generateGlassThemeVariables };
//# sourceMappingURL=glassMixins.js.map