aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
85 lines (83 loc) • 2.52 kB
JavaScript
/**
* AuraGlass Style Utilities
* Generate token-based style objects for glassmorphism components
*/
/**
* Token values mapped from CSS variables
* These should match the values in tokens.css
*/
const tokens = {
blur: {
none: '0px',
sm: '4px',
md: '8px',
lg: '16px',
xl: '24px'
},
elev: {
0: 'none',
1: '0 2px 8px rgba(0 0 0 / 0.12)',
2: '0 4px 16px rgba(0 0 0 / 0.16)',
3: '0 8px 24px rgba(0 0 0 / 0.20)',
4: '0 12px 32px rgba(0 0 0 / 0.24)',
5: '0 16px 40px rgba(0 0 0 / 0.28)',
6: '0 24px 56px rgba(0 0 0 / 0.32)'
},
radius: {
none: '0px',
sm: '8px',
md: '12px',
lg: '16px',
xl: '20px',
'2xl': '24px',
full: '9999px'
},
transition: {
duration: '250ms',
timing: 'cubic-bezier(0.2, 0, 0, 1)'
},
gradient: {
default: 'linear-gradient(135deg, rgba(255 255 255 / 0.25) 0%, rgba(255 255 255 / 0.15) 50%, rgba(255 255 255 / 0.10) 100%)',
primary: 'linear-gradient(135deg, rgba(255 255 255 / 0.30) 0%, rgba(59 130 246 / 0.20) 50%, rgba(59 130 246 / 0.10) 100%)',
success: 'linear-gradient(135deg, rgba(255 255 255 / 0.30) 0%, rgba(34 197 94 / 0.20) 50%, rgba(34 197 94 / 0.10) 100%)',
warning: 'linear-gradient(135deg, rgba(255 255 255 / 0.30) 0%, rgba(251 191 36 / 0.20) 50%, rgba(251 191 36 / 0.10) 100%)',
danger: 'linear-gradient(135deg, rgba(255 255 255 / 0.30) 0%, rgba(239 68 68 / 0.20) 50%, rgba(239 68 68 / 0.10) 100%)',
info: 'linear-gradient(135deg, rgba(255 255 255 / 0.30) 0%, rgba(14 165 233 / 0.20) 50%, rgba(14 165 233 / 0.10) 100%)'
}
};
/**
* Create a style object for glassmorphism components
* Returns CSSProperties-compatible object
*/
function createGlassStyle(options = {}) {
const {
elev = 2,
variant = 'default',
blur = 'lg',
radius = 'lg',
opacity,
interactive = false,
glow = false
} = options;
const styles = {
position: 'relative',
overflow: 'hidden',
borderRadius: tokens.radius[radius],
boxShadow: tokens.elev[elev],
background: tokens.gradient[variant]
};
if (opacity !== undefined) {
styles.opacity = opacity;
}
if (interactive) {
styles.transition = `all ${tokens.transition.duration} ${tokens.transition.timing}`;
styles.cursor = 'pointer';
styles.willChange = 'transform, box-shadow';
}
if (glow) {
styles.filter = 'drop-shadow(0 0 14px rgba(59 130 246 / 0.30))';
}
return styles;
}
export { createGlassStyle };
//# sourceMappingURL=createGlassStyle.js.map