import type { CSSProperties } from "react"; /** * Turbopack's Tailwind v4 (Lightning CSS) pipeline silently strips hand-authored * `backdrop-filter`/`-webkit-backdrop-filter` declarations from globals.css classes * in this project (confirmed via computed-style + compiled-stylesheet inspection — * the class survives with every other declaration except backdrop-filter). * Inline styles bypass that pipeline entirely, so every glass-* class gets its * matching blur/saturate re-applied here as a companion inline style. */ export const GLASS_BACKDROP: Record = { "glass-panel": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" }, "chat-header-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" }, "chat-timer-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" }, "chat-timer-badge-glass": { backdropFilter: "blur(10px) saturate(160%)", WebkitBackdropFilter: "blur(10px) saturate(160%)" }, "glass-chat-input": { backdropFilter: "blur(24px) saturate(200%)", WebkitBackdropFilter: "blur(24px) saturate(200%)" }, "glass-panel-strong": { backdropFilter: "blur(24px) saturate(1.4)", WebkitBackdropFilter: "blur(24px) saturate(1.4)" }, "comments-modal-glass": { backdropFilter: "blur(28px) saturate(1.5)", WebkitBackdropFilter: "blur(28px) saturate(1.5)" }, "tab-active-glass": { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" }, "glass-modal-overlay": { backdropFilter: "none", WebkitBackdropFilter: "none" }, "glass-modal-overlay--dark": { backdropFilter: "none", WebkitBackdropFilter: "none" }, "glass-modal-panel": { backdropFilter: "blur(28px) saturate(180%)", WebkitBackdropFilter: "blur(28px) saturate(180%)" }, }; /** Returns the inline backdrop-filter style for a known glass-* class name, merged if multiple apply. */ export function glassBackdropStyle(...classNames: string[]): CSSProperties { return Object.assign({}, ...classNames.map((c) => GLASS_BACKDROP[c]).filter(Boolean)); }