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
TypeScript
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;
};