29 lines
2.1 KiB
TypeScript
29 lines
2.1 KiB
TypeScript
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<string, CSSProperties> = {
|
|
"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));
|
|
}
|