UNPKG

aura-glass

Version:

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

1,074 lines (1,073 loc) 54.5 kB
export type PersonaId = 'auraglass-default'; export type PersonaMode = 'light' | 'dark'; export interface AuraPersona { $schema?: string; metadata: { id: PersonaId; displayName: string; description?: string; version: string; modes: PersonaMode[]; }; colors: Record<string, any>; typography: Record<string, any>; spacing: Record<string, any>; motion: Record<string, any>; glass: Record<string, any>; } export interface AuraTokensManifest { version?: string; description?: string; personas: AuraPersona[]; } export declare const auraTokens: { readonly version: "1.0.0"; readonly description: "AuraGlass canonical design token manifest"; readonly personas: [{ readonly metadata: { readonly id: "auraglass-default"; readonly displayName: "AuraGlass Default"; readonly description: "Baseline AuraGlass persona with light and dark modes driven by canonical design tokens."; readonly version: "2.1.0"; readonly modes: ["light", "dark"]; }; readonly colors: { readonly global: { readonly "background-base": "#0f172a"; readonly "background-surface": "rgba(15, 23, 42, 0.85)"; readonly "background-glass": "rgba(255, 255, 255, 0.08)"; readonly "border-strong": "rgba(255, 255, 255, 0.35)"; readonly "border-soft": "rgba(255, 255, 255, 0.18)"; readonly "text-primary": "#f8fafc"; readonly "text-secondary": "rgba(248, 250, 252, 0.7)"; readonly "text-tertiary": "rgba(248, 250, 252, 0.5)"; readonly accent: "#6366f1"; }; readonly semantic: { readonly primary: "#6366f1"; readonly success: "#22c55e"; readonly warning: "#f59e0b"; readonly danger: "#ef4444"; readonly info: "#0ea5e9"; readonly neutral: "#64748b"; }; readonly personas: { readonly light: { readonly background: "#f8fafc"; readonly foreground: "#0f172a"; readonly muted: "#e2e8f0"; readonly "muted-foreground": "#475569"; readonly highlight: "rgba(99, 102, 241, 0.12)"; readonly "glass-surface": "rgba(255, 255, 255, 0.6)"; readonly "glass-border": "rgba(15, 23, 42, 0.12)"; readonly "glass-shadow": "0 8px 32px rgba(15, 23, 42, 0.12)"; }; readonly dark: { readonly background: "#020617"; readonly foreground: "#e2e8f0"; readonly muted: "#1e293b"; readonly "muted-foreground": "#94a3b8"; readonly highlight: "rgba(99, 102, 241, 0.2)"; readonly "glass-surface": "rgba(15, 23, 42, 0.65)"; readonly "glass-border": "rgba(148, 163, 184, 0.22)"; readonly "glass-shadow": "0 12px 40px rgba(15, 23, 42, 0.45)"; }; }; }; readonly typography: { readonly families: { readonly sans: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; readonly mono: "'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace"; }; readonly scale: { readonly display: { readonly fontSize: "3.5rem"; readonly lineHeight: "1.05"; readonly tracking: "-0.04em"; }; readonly headline: { readonly fontSize: "2.5rem"; readonly lineHeight: "1.1"; readonly tracking: "-0.02em"; }; readonly title: { readonly fontSize: "1.75rem"; readonly lineHeight: "1.2"; readonly tracking: "-0.01em"; }; readonly subtitle: { readonly fontSize: "1.25rem"; readonly lineHeight: "1.4"; readonly tracking: "0em"; }; readonly body: { readonly fontSize: "1rem"; readonly lineHeight: "1.6"; readonly tracking: "0em"; }; readonly caption: { readonly fontSize: "0.875rem"; readonly lineHeight: "1.4"; readonly tracking: "0em"; }; readonly label: { readonly fontSize: "0.75rem"; readonly lineHeight: "1.2"; readonly tracking: "0.05em"; }; }; readonly weights: { readonly thin: 100; readonly light: 300; readonly regular: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; readonly extrabold: 800; }; readonly lineHeights: { readonly tight: "1.2"; readonly normal: "1.5"; readonly relaxed: "1.75"; }; }; readonly spacing: { readonly scale: { readonly "0": "0"; readonly "1": "0.25rem"; readonly "2": "0.5rem"; readonly "3": "0.75rem"; readonly "4": "1rem"; readonly "5": "1.25rem"; readonly "6": "1.5rem"; readonly "8": "2rem"; readonly "10": "2.5rem"; readonly "12": "3rem"; readonly "16": "4rem"; }; readonly radii: { readonly xs: "0.25rem"; readonly sm: "0.375rem"; readonly md: "0.5rem"; readonly lg: "0.75rem"; readonly xl: "1rem"; readonly pill: "999px"; }; readonly gaps: { readonly dense: "0.5rem"; readonly relaxed: "1rem"; readonly loose: "1.5rem"; }; }; readonly motion: { readonly durations: { readonly instant: "50ms"; readonly fast: "150ms"; readonly normal: "250ms"; readonly slow: "450ms"; }; readonly easings: { readonly standard: "cubic-bezier(0.2, 0.8, 0.2, 1)"; readonly emphasized: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly decelerate: "cubic-bezier(0.0, 0, 0.2, 1)"; readonly accelerate: "cubic-bezier(0.4, 0, 1, 1)"; }; readonly stagger: { readonly micro: "25ms"; readonly regular: "50ms"; readonly macro: "100ms"; }; readonly keyframes: { readonly glassFade: { readonly steps: readonly [{ readonly at: "0%"; readonly properties: { readonly opacity: "0"; readonly transform: "translateY(8px) scale(0.98)"; }; }, { readonly at: "100%"; readonly properties: { readonly opacity: "1"; readonly transform: "translateY(0) scale(1)"; }; }]; }; readonly pulseGlow: { readonly steps: readonly [{ readonly at: "0%"; readonly properties: { readonly "box-shadow": "0 0 0 0 rgba(99, 102, 241, 0.6)"; }; }, { readonly at: "70%"; readonly properties: { readonly "box-shadow": "0 0 0 12px rgba(99, 102, 241, 0)"; }; }, { readonly at: "100%"; readonly properties: { readonly "box-shadow": "0 0 0 0 rgba(99, 102, 241, 0)"; }; }]; }; }; }; readonly glass: { readonly intents: readonly ["neutral", "primary", "success", "warning", "danger", "info"]; readonly elevations: readonly ["level1", "level2", "level3", "level4", "level5"]; readonly surfaces: { readonly neutral: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%)"; readonly overlay: "rgba(255,255,255,0.08)"; }; readonly border: { readonly color: "rgba(255,255,255,0.4)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(0,0,0,0.15)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(148,163,184,0.15) 100%)"; }; readonly border: { readonly color: "rgba(255,255,255,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(255,255,255,0.2)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(15,23,42,0.2)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(99,102,241,0.15) 100%)"; }; readonly border: { readonly color: "rgba(255,255,255,0.55)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(255,255,255,0.25)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(15,23,42,0.25)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(99,102,241,0.22) 100%)"; }; readonly border: { readonly color: "rgba(255,255,255,0.6)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(255,255,255,0.3)"; readonly spread: 1; readonly blur: 16; }; readonly outerShadow: { readonly color: "rgba(15,23,42,0.3)"; readonly x: 0; readonly y: 16; readonly blur: 40; readonly spread: 0; }; readonly noiseOpacity: 0.1; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level5: { readonly backdropBlur: { readonly px: 24; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(99,102,241,0.28) 100%)"; }; readonly border: { readonly color: "rgba(255,255,255,0.65)"; readonly width: 3; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(255,255,255,0.35)"; readonly spread: 2; readonly blur: 20; }; readonly outerShadow: { readonly color: "rgba(15,23,42,0.35)"; readonly x: 0; readonly y: 20; readonly blur: 48; readonly spread: 0; }; readonly noiseOpacity: 0.12; readonly highlightOpacity: 0.3; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; }; readonly primary: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(99,102,241,0.3) 0%, rgba(59,130,246,0.22) 100%)"; }; readonly border: { readonly color: "rgba(99,102,241,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(99,102,241,0.15)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(99,102,241,0.4) 0%, rgba(59,130,246,0.28) 100%)"; }; readonly border: { readonly color: "rgba(99,102,241,0.6)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(99,102,241,0.22)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(59,130,246,0.2)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(99,102,241,0.48) 0%, rgba(59,130,246,0.34) 100%)"; }; readonly border: { readonly color: "rgba(99,102,241,0.7)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(99,102,241,0.25)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(59,130,246,0.24)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(99,102,241,0.56) 0%, rgba(59,130,246,0.4) 100%)"; }; readonly border: { readonly color: "rgba(99,102,241,0.78)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(99,102,241,0.28)"; readonly spread: 1; readonly blur: 16; }; readonly outerShadow: { readonly color: "rgba(59,130,246,0.28)"; readonly x: 0; readonly y: 16; readonly blur: 40; readonly spread: 0; }; readonly noiseOpacity: 0.1; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level5: { readonly backdropBlur: { readonly px: 24; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(99,102,241,0.64) 0%, rgba(59,130,246,0.45) 100%)"; }; readonly border: { readonly color: "rgba(99,102,241,0.85)"; readonly width: 3; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(99,102,241,0.32)"; readonly spread: 2; readonly blur: 20; }; readonly outerShadow: { readonly color: "rgba(59,130,246,0.32)"; readonly x: 0; readonly y: 20; readonly blur: 48; readonly spread: 0; }; readonly noiseOpacity: 0.12; readonly highlightOpacity: 0.3; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; }; readonly success: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(34,197,94,0.25) 0%, rgba(22,163,74,0.18) 100%)"; }; readonly border: { readonly color: "rgba(34,197,94,0.4)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(34,197,94,0.12)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(34,197,94,0.32) 0%, rgba(22,163,74,0.24) 100%)"; }; readonly border: { readonly color: "rgba(34,197,94,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(34,197,94,0.2)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(34,197,94,0.16)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(34,197,94,0.4) 0%, rgba(22,163,74,0.28) 100%)"; }; readonly border: { readonly color: "rgba(34,197,94,0.6)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(34,197,94,0.24)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(34,197,94,0.2)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(34,197,94,0.48) 0%, rgba(22,163,74,0.34) 100%)"; }; readonly border: { readonly color: "rgba(34,197,94,0.7)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(34,197,94,0.28)"; readonly spread: 1; readonly blur: 16; }; readonly outerShadow: { readonly color: "rgba(34,197,94,0.24)"; readonly x: 0; readonly y: 16; readonly blur: 40; readonly spread: 0; }; readonly noiseOpacity: 0.1; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level5: { readonly backdropBlur: { readonly px: 24; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(34,197,94,0.56) 0%, rgba(22,163,74,0.4) 100%)"; }; readonly border: { readonly color: "rgba(34,197,94,0.78)"; readonly width: 3; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(34,197,94,0.32)"; readonly spread: 2; readonly blur: 20; }; readonly outerShadow: { readonly color: "rgba(34,197,94,0.28)"; readonly x: 0; readonly y: 20; readonly blur: 48; readonly spread: 0; }; readonly noiseOpacity: 0.12; readonly highlightOpacity: 0.3; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; }; readonly warning: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(245,158,11,0.28) 0%, rgba(254,215,88,0.18) 100%)"; }; readonly border: { readonly color: "rgba(245,158,11,0.4)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(245,158,11,0.12)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(245,158,11,0.35) 0%, rgba(254,215,88,0.24) 100%)"; }; readonly border: { readonly color: "rgba(245,158,11,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(245,158,11,0.22)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(245,158,11,0.16)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(245,158,11,0.44) 0%, rgba(254,215,88,0.3) 100%)"; }; readonly border: { readonly color: "rgba(245,158,11,0.6)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(245,158,11,0.26)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(245,158,11,0.2)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(245,158,11,0.52) 0%, rgba(254,215,88,0.36) 100%)"; }; readonly border: { readonly color: "rgba(245,158,11,0.68)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(245,158,11,0.3)"; readonly spread: 1; readonly blur: 16; }; readonly outerShadow: { readonly color: "rgba(245,158,11,0.24)"; readonly x: 0; readonly y: 16; readonly blur: 40; readonly spread: 0; }; readonly noiseOpacity: 0.1; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; readonly level5: { readonly backdropBlur: { readonly px: 24; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(245,158,11,0.6) 0%, rgba(254,215,88,0.42) 100%)"; }; readonly border: { readonly color: "rgba(245,158,11,0.75)"; readonly width: 3; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(245,158,11,0.34)"; readonly spread: 2; readonly blur: 20; }; readonly outerShadow: { readonly color: "rgba(245,158,11,0.28)"; readonly x: 0; readonly y: 20; readonly blur: 48; readonly spread: 0; }; readonly noiseOpacity: 0.12; readonly highlightOpacity: 0.3; readonly text: { readonly primary: "rgba(15,23,42,0.95)"; readonly secondary: "rgba(15,23,42,0.75)"; }; }; }; readonly danger: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(239,68,68,0.28) 0%, rgba(248,113,113,0.18) 100%)"; }; readonly border: { readonly color: "rgba(239,68,68,0.4)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(239,68,68,0.12)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(239,68,68,0.36) 0%, rgba(248,113,113,0.24) 100%)"; }; readonly border: { readonly color: "rgba(239,68,68,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(239,68,68,0.22)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(239,68,68,0.16)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(239,68,68,0.44) 0%, rgba(248,113,113,0.3) 100%)"; }; readonly border: { readonly color: "rgba(239,68,68,0.6)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(239,68,68,0.26)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(239,68,68,0.2)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(239,68,68,0.52) 0%, rgba(248,113,113,0.36) 100%)"; }; readonly border: { readonly color: "rgba(239,68,68,0.68)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(239,68,68,0.3)"; readonly spread: 1; readonly blur: 16; }; readonly outerShadow: { readonly color: "rgba(239,68,68,0.24)"; readonly x: 0; readonly y: 16; readonly blur: 40; readonly spread: 0; }; readonly noiseOpacity: 0.1; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level5: { readonly backdropBlur: { readonly px: 24; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(239,68,68,0.6) 0%, rgba(248,113,113,0.42) 100%)"; }; readonly border: { readonly color: "rgba(239,68,68,0.75)"; readonly width: 3; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(239,68,68,0.34)"; readonly spread: 2; readonly blur: 20; }; readonly outerShadow: { readonly color: "rgba(239,68,68,0.28)"; readonly x: 0; readonly y: 20; readonly blur: 48; readonly spread: 0; }; readonly noiseOpacity: 0.12; readonly highlightOpacity: 0.3; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; }; readonly info: { readonly level1: { readonly backdropBlur: { readonly px: 8; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(14,165,233,0.28) 0%, rgba(56,189,248,0.18) 100%)"; }; readonly border: { readonly color: "rgba(14,165,233,0.4)"; readonly width: 1; readonly style: "solid"; }; readonly outerShadow: { readonly color: "rgba(14,165,233,0.12)"; readonly x: 0; readonly y: 4; readonly blur: 16; readonly spread: 0; }; readonly noiseOpacity: 0.03; readonly highlightOpacity: 0.15; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level2: { readonly backdropBlur: { readonly px: 12; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(14,165,233,0.36) 0%, rgba(56,189,248,0.24) 100%)"; }; readonly border: { readonly color: "rgba(14,165,233,0.5)"; readonly width: 1; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(14,165,233,0.22)"; readonly spread: 0; readonly blur: 8; }; readonly outerShadow: { readonly color: "rgba(14,165,233,0.16)"; readonly x: 0; readonly y: 8; readonly blur: 24; readonly spread: 0; }; readonly noiseOpacity: 0.05; readonly highlightOpacity: 0.2; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level3: { readonly backdropBlur: { readonly px: 16; }; readonly surface: { readonly base: "linear-gradient(135deg, rgba(14,165,233,0.44) 0%, rgba(56,189,248,0.3) 100%)"; }; readonly border: { readonly color: "rgba(14,165,233,0.6)"; readonly width: 2; readonly style: "solid"; }; readonly innerGlow: { readonly color: "rgba(14,165,233,0.26)"; readonly spread: 1; readonly blur: 12; }; readonly outerShadow: { readonly color: "rgba(14,165,233,0.2)"; readonly x: 0; readonly y: 12; readonly blur: 32; readonly spread: 0; }; readonly noiseOpacity: 0.08; readonly highlightOpacity: 0.25; readonly text: { readonly primary: "rgba(248,250,252,0.98)"; readonly secondary: "rgba(248,250,252,0.78)"; }; }; readonly level4: { readonly backdropBlur: { readonly px: 20; };