aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
484 lines • 13.4 kB
TypeScript
/**
* token-lint-ignore-file: canonical token definitions are allowed to use raw values.
*
* AuraGlass Canonical Token Schema - SINGLE SOURCE OF TRUTH
*
* This is the ONLY authoritative source for all glassmorphism values.
* All other systems MUST consume these tokens.
*
* Requirements:
* - No blur values below 2px on high tier
* - All alpha values >= 0.08 (visible)
* - All text colors meet WCAG AA contrast (4.5:1)
* - No undefined/empty values allowed
*/
export type GlassElevation = "level1" | "level2" | "level3" | "level4" | "level5";
export type GlassIntent = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
export type QualityTier = "auto" | "low" | "medium" | "high";
export interface GlassSurfaceSpec {
backdropBlur: {
px: number;
};
surface: {
base: string;
overlay?: string;
};
border: {
color: string;
width: number;
style: "solid" | "dashed" | "none";
};
innerGlow?: {
color: string;
spread: number;
blur: number;
};
outerShadow?: {
color: string;
x: number;
y: number;
blur: number;
spread: number;
};
noiseOpacity?: number;
highlightOpacity?: number;
text: {
primary: string;
secondary: string;
};
}
export interface GlassPerformanceSpec {
blurMultiplier: number;
opacityMultiplier: number;
animationSpeedMultiplier: number;
renderQuality: "low" | "medium" | "high";
}
export interface AuraGlassTokens {
surfaces: Record<GlassIntent, Record<GlassElevation, GlassSurfaceSpec>>;
motion: {
defaultMs: number;
enterMs: number;
exitMs: number;
};
radii: {
sm: number;
md: number;
lg: number;
xl: number;
pill: number;
};
gaps: {
xs: number;
sm: number;
md: number;
lg: number;
};
}
export declare const AURA_GLASS: AuraGlassTokens;
/**
* Performance tier configurations
*
* CRITICAL: Glass is never disabled - only reduced in intensity
*/
export declare const PERFORMANCE_TIERS: {
readonly high: {
readonly blurMultiplier: 1;
readonly shadowMultiplier: 1;
readonly saturateMultiplier: 1;
readonly enableGlow: true;
readonly enableNoise: true;
};
readonly medium: {
readonly blurMultiplier: 0.75;
readonly shadowMultiplier: 0.8;
readonly saturateMultiplier: 0.9;
readonly enableGlow: true;
readonly enableNoise: false;
};
readonly low: {
readonly blurMultiplier: 0.5;
readonly shadowMultiplier: 0.6;
readonly saturateMultiplier: 0.8;
readonly enableGlow: false;
readonly enableNoise: false;
};
readonly auto: {
readonly blurMultiplier: 1;
readonly shadowMultiplier: 1;
readonly saturateMultiplier: 1;
readonly enableGlow: true;
readonly enableNoise: true;
};
};
/**
* Utility functions for consuming tokens
*/
export declare const glassTokenUtils: {
/**
* Get surface specification for intent and elevation
*/
getSurface: (intent: GlassIntent, elevation: GlassElevation) => GlassSurfaceSpec;
/**
* Get performance-adjusted blur value
*/
getPerformanceBlur: (baseBlur: number, tier: QualityTier) => number;
/**
* Validate contrast ratio for text over surface
*/
validateTextContrast: (textColor: string, surfaceColor: string) => boolean;
/**
* Generate CSS backdrop-filter string
*/
buildBackdropFilter: (blur: number, tier: QualityTier) => string;
/**
* Build complete surface styles from token specification
*/
buildSurfaceStyles: (intent: GlassIntent, elevation: GlassElevation, tier?: QualityTier) => {
background: string;
backgroundColor: string | undefined;
backdropFilter: string;
WebkitBackdropFilter: string;
border: string;
borderRadius: string;
boxShadow: string;
color: string;
transition: string;
position: "relative";
transform: string;
};
};
export default AURA_GLASS;
export declare const glassTokens: {
elevation: {
level1: {
boxShadow: string;
zIndex: number;
};
level2: {
boxShadow: string;
zIndex: number;
};
level3: {
boxShadow: string;
zIndex: number;
};
level4: {
boxShadow: string;
zIndex: number;
};
};
backdrop: {
none: string;
subtle: string;
medium: string;
strong: string;
intense: string;
};
gradients: {
primary: string;
secondary: string;
primaryRadial: string;
mesh: string;
iridescent: string;
rainbow: string;
};
border: {
primary: string;
secondary: string;
subtle: string;
gradient: {
rainbow: string;
};
};
surface: {
primary: string;
secondary: string;
success: string;
warning: string;
error: string;
dark: string;
darkSubtle: string;
};
noise: {
subtle: string;
};
glow: {
primary: string;
secondary: string;
success: string;
warning: string;
error: string;
};
};
export declare const glassUtils: {
/**
* Get surface specification for intent and elevation
*/
getSurface: (intent: GlassIntent, elevation: GlassElevation) => GlassSurfaceSpec;
/**
* Get performance-adjusted blur value
*/
getPerformanceBlur: (baseBlur: number, tier: QualityTier) => number;
/**
* Validate contrast ratio for text over surface
*/
validateTextContrast: (textColor: string, surfaceColor: string) => boolean;
/**
* Generate CSS backdrop-filter string
*/
buildBackdropFilter: (blur: number, tier: QualityTier) => string;
/**
* Build complete surface styles from token specification
*/
buildSurfaceStyles: (intent: GlassIntent, elevation: GlassElevation, tier?: QualityTier) => {
background: string;
backgroundColor: string | undefined;
backdropFilter: string;
WebkitBackdropFilter: string;
border: string;
borderRadius: string;
boxShadow: string;
color: string;
transition: string;
position: "relative";
transform: string;
};
};
/**
* ========================================
* LIQUID GLASS EXTENSIONS - Apple Parity
* ========================================
*
* Extended tokens for Liquid Glass material system
* Provides dynamic material properties, environmental adaptation,
* and enhanced visual effects to match Apple's implementation.
*/
export type LiquidGlassMaterial = "standard" | "liquid";
export type MaterialVariant = "regular" | "clear";
export type TintMode = "auto" | "light" | "dark" | "adaptive";
export type SheenIntensity = 0 | 1 | 2 | 3;
export interface LiquidGlassSurfaceSpec extends GlassSurfaceSpec {
ior: number;
thickness: number;
sheen: SheenIntensity;
variant: MaterialVariant;
tintMode: TintMode;
adaptiveOpacity: {
min: number;
max: number;
};
contrastGuard: {
enabled: boolean;
minRatio: number;
};
motionSensitivity: number;
microInteractions: boolean;
refraction: {
enabled: boolean;
intensity: number;
};
reflection: {
enabled: boolean;
intensity: number;
};
parallax: {
enabled: boolean;
depth: number;
};
}
export interface LiquidGlassTokens extends AuraGlassTokens {
material: {
ior: {
glass: 1.52;
crystal: 1.76;
liquid: 1.33;
diamond: 2.42;
};
thickness: {
hairline: 1;
thin: 2;
medium: 4;
thick: 6;
ultra: 8;
};
sheen: {
none: 0;
subtle: 1;
medium: 2;
intense: 3;
};
};
variants: {
regular: {
opacity: {
base: 0.85;
hover: 0.9;
active: 0.95;
};
blur: {
multiplier: 1.0;
};
contrast: {
minRatio: 4.5;
};
};
clear: {
opacity: {
base: 0.65;
hover: 0.75;
active: 0.85;
};
blur: {
multiplier: 1.2;
};
contrast: {
minRatio: 7.0;
};
};
};
tinting: {
auto: {
lightThreshold: 0.6;
contrastBoost: 0.15;
saturationAdjust: 0.1;
};
adaptive: {
samplingRadius: 32;
updateThrottle: 100;
transitionDuration: 200;
};
};
motionFluency: {
hover: {
duration: 120;
easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
};
press: {
duration: 80;
easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
};
focus: {
duration: 150;
easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
};
scroll: {
sensitivity: 0.3;
maxShift: 2;
};
tilt: {
sensitivity: 0.1;
maxTilt: 1;
};
ambient: {
duration: 4000;
intensity: 0.05;
};
};
performance: {
ultra: {
enableRefraction: true;
enableReflection: true;
enableParallax: true;
enableMicroInteractions: true;
sampleRate: 60;
};
high: {
enableRefraction: true;
enableReflection: true;
enableParallax: false;
enableMicroInteractions: true;
sampleRate: 60;
};
balanced: {
enableRefraction: true;
enableReflection: false;
enableParallax: false;
enableMicroInteractions: true;
sampleRate: 30;
};
efficient: {
enableRefraction: false;
enableReflection: false;
enableParallax: false;
enableMicroInteractions: false;
sampleRate: 30;
};
};
}
/**
* LIQUID GLASS CANONICAL TOKENS
* Extended version of AURA_GLASS with Liquid Glass properties
*/
export declare const LIQUID_GLASS: LiquidGlassTokens;
/**
* Enhanced utility functions for Liquid Glass
*/
export declare const liquidGlassUtils: {
/**
* Get Liquid Glass material specification
*/
getLiquidSurface: (intent: GlassIntent, elevation: GlassElevation, material?: LiquidGlassMaterial, variant?: MaterialVariant) => LiquidGlassSurfaceSpec;
/**
* Calculate backdrop luminance for content-aware tinting
*/
sampleBackdropLuminance: (element: HTMLElement) => number;
/**
* Generate content-aware tint color based on backdrop
*/
generateAdaptiveTint: (backdropLuminance: number, intent?: GlassIntent) => string;
/**
* Build complete Liquid Glass styles with environmental adaptation
*/
buildLiquidGlassStyles: (intent: GlassIntent, elevation: GlassElevation, material?: LiquidGlassMaterial, variant?: MaterialVariant, performanceLevel?: keyof LiquidGlassTokens["performance"]) => {
background: string;
transition: string;
boxShadow: string;
willChange: string;
contain: string;
backgroundColor: string | undefined;
backdropFilter: string;
WebkitBackdropFilter: string;
border: string;
borderRadius: string;
color: string;
position: "relative";
transform: string;
};
/**
* Validate contrast compliance for Liquid Glass
*/
validateLiquidContrast: (intent: GlassIntent, variant: MaterialVariant, backdropLuminance: number) => boolean;
/**
* Get surface specification for intent and elevation
*/
getSurface: (intent: GlassIntent, elevation: GlassElevation) => GlassSurfaceSpec;
/**
* Get performance-adjusted blur value
*/
getPerformanceBlur: (baseBlur: number, tier: QualityTier) => number;
/**
* Validate contrast ratio for text over surface
*/
validateTextContrast: (textColor: string, surfaceColor: string) => boolean;
/**
* Generate CSS backdrop-filter string
*/
buildBackdropFilter: (blur: number, tier: QualityTier) => string;
/**
* Build complete surface styles from token specification
*/
buildSurfaceStyles: (intent: GlassIntent, elevation: GlassElevation, tier?: QualityTier) => {
background: string;
backgroundColor: string | undefined;
backdropFilter: string;
WebkitBackdropFilter: string;
border: string;
borderRadius: string;
boxShadow: string;
color: string;
transition: string;
position: "relative";
transform: string;
};
};
//# sourceMappingURL=glass.d.ts.map