aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
90 lines • 3.5 kB
TypeScript
/**
* @deprecated Use createGlassStyle() from glassMixins instead
* This file contains hardcoded glass foundation values that bypass our unified token system.
* Migrate to: createGlassStyle({ intent, elevation, tier })
*
* AURA GLASS - FOUNDATION ARCHITECTURE (DEPRECATED)
*
* This module provides the architectural foundation for all glassmorphism components.
* Components MUST use these utilities to ensure consistent, visible glass effects.
*/
import { CSSProperties } from 'react';
export declare const GLASS_FOUNDATION: {
readonly opacity: {
readonly subtle: 0.25;
readonly min: 0.25;
readonly standard: 0.3;
readonly strong: 0.4;
readonly bold: 0.5;
};
readonly blur: {
readonly subtle: "blur(8px)";
readonly standard: "blur(16px)";
readonly strong: "blur(24px)";
readonly intense: "blur(32px)";
};
readonly enhancements: {
readonly saturate: "saturate(180%)";
readonly brightness: "brightness(1.15)";
readonly contrast: "contrast(1.08)";
};
readonly borders: {
readonly subtle: "rgba(255, 255, 255, 0.2)";
readonly standard: "rgba(255, 255, 255, 0.3)";
readonly strong: "rgba(255, 255, 255, 0.4)";
readonly bold: "rgba(255, 255, 255, 0.5)";
};
readonly shadows: {
readonly subtle: "0 8px 32px rgba(0, 0, 0, 0.15)";
readonly standard: "0 12px 40px rgba(0, 0, 0, 0.2)";
readonly strong: "0 16px 48px rgba(0, 0, 0, 0.25)";
readonly bold: "0 20px 56px rgba(0, 0, 0, 0.3)";
};
};
export type GlassFoundationLevel = 'subtle' | 'standard' | 'strong' | 'bold';
export type GlassBlurLevel = 'subtle' | 'standard' | 'strong' | 'intense';
/**
* @deprecated Use createGlassStyle() instead
* @example createGlassStyle({ intent: 'neutral', elevation: 'level2', tier: 'high' })
*
* Core foundation mixin - ALL components must use this as their base
*/
export declare function createGlassFoundation(level?: GlassFoundationLevel, blurLevel?: GlassBlurLevel): CSSProperties;
/**
* Extended foundation mixin - allows components to enhance the foundation
*/
export declare function extendGlassFoundation(baseLevel?: GlassFoundationLevel, extensions?: Partial<{
opacity: number;
blur: string;
background: string;
border: string;
borderRadius: string;
boxShadow: string;
additionalFilters: string[];
}>): CSSProperties;
/**
* Legacy CSS-in-JS helper retained for backward compatibility.
* Generates a CSS string representation of the glass foundation styles.
*/
export declare function injectGlassFoundation(level?: GlassFoundationLevel, blurLevel?: GlassBlurLevel): string;
/**
* Additional legacy helper for template-literal based styling systems.
*/
export declare function glassFoundationCSS(level?: GlassFoundationLevel, blurLevel?: GlassBlurLevel): string;
/**
* Validate that a component's glass values meet foundation requirements
*/
export declare function validateGlassFoundation(styles: {
background?: string;
backdropFilter?: string;
opacity?: number;
}): boolean;
/**
* Storybook mode enhancements
*/
export declare function enhanceForStorybookMode(foundation: CSSProperties, mode?: 'studio' | 'showcase'): CSSProperties;
/**
* Performance-optimized foundation for mobile/low-power devices
*/
export declare function createOptimizedGlassFoundation(level?: GlassFoundationLevel): CSSProperties;
//# sourceMappingURL=glassFoundation.d.ts.map