Glass

1export const glassBase =
2  "backdrop-blur-2xl backdrop-saturate-150 bg-gradient-to-br from-white/[0.10] via-white/[0.06] to-white/[0.02] dark:from-white/[0.14] dark:via-white/[0.09] dark:to-white/[0.04] border border-white/[0.10] dark:border-white/[0.12] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_24px_0_rgba(255,255,255,0.04),0_8px_32px_0_rgba(0,0,0,0.12)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_24px_0_rgba(255,255,255,0.03),0_8px_32px_0_rgba(0,0,0,0.35)]";
3 
4export const glassInteractive =
5  "transition duration-300 ease-out hover:from-white/[0.15] hover:via-white/[0.10] hover:to-white/[0.05] dark:hover:from-white/[0.20] dark:hover:via-white/[0.14] dark:hover:to-white/[0.08] hover:border-white/[0.18] dark:hover:border-white/[0.22] hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.30),inset_0_0_32px_0_rgba(255,255,255,0.06),0_12px_40px_0_rgba(0,0,0,0.16)] dark:hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_32px_0_rgba(255,255,255,0.05),0_12px_40px_0_rgba(0,0,0,0.45)] hover:scale-[1.01] active:scale-[0.99] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100";
6 
7export const rounded = "rounded-[32px]";
8 
9export const textOnGlass = "text-gray-900/90 dark:text-white/95 font-medium";
10 
11export const focusRing =
12  "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-500/40 dark:focus-visible:ring-blue-400/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
13 
14// Gradient 1px edge (lit from the top) — defined in packages/index.css
15export const glassEdge = "glass-edge";
16 
17// Subtle film grain over the surface — defined in packages/index.css
18export const glassNoise = "glass-noise";
19 
20export const glass = `${glassBase} ${glassEdge} ${glassNoise} ${rounded} ${textOnGlass} relative overflow-hidden`;