rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(design-system): glass-panel rules now actually apply backdrop-filter #98

Merged
varutasu merged 1 commit from fix-glass-panel-backdrop-stripped into main 2026-06-03 22:38:38 -04:00
Conversation 3 Commits 1 Files changed 1 +15 -4
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
styles/globals.css
View file

@ -439,18 +439,29 @@ body {
from Tailwind (the class itself doesn't set border-radius from Tailwind (the class itself doesn't set border-radius
because consumers vary between rounded-xl and rounded-2xl). because consumers vary between rounded-xl and rounded-2xl).
============================================================ */ ============================================================ */
/* IMPORTANT — backdrop-filter quirks with Next.js 16's Lightning CSS:
1) `backdrop-filter: blur(var(--X)) saturate(var(--Y))` is silently
stripped from the compiled CSS (same root cause that emptied
`.mobile-nav-backdrop` in production). Use LITERAL values.
2) Writing both `backdrop-filter` and `-webkit-backdrop-filter` with
identical values triggers Lightning CSS's de-dup; it keeps only the
`-webkit-` form which Chrome/Edge/Firefox ignore. Write only the
unprefixed `backdrop-filter` and let Lightning CSS's autoprefixer
add the vendor prefix per browserslist (it does for ios_saf <18).
If the blur radii ever need to change, change them here AND in the
matching --glass-blur-* tokens (kept for `<GlassSurface>` JSX consumers
which set `backdropFilter` via inline style — those are unaffected by
the Lightning CSS optimizer). */
.glass-panel { .glass-panel {
background-color: var(--glass-surface-mid); background-color: var(--glass-surface-mid);
backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate)); backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(var(--glass-blur-mid)) saturate(var(--glass-saturate));
border: 1px solid var(--rim-light-outer); border: 1px solid var(--rim-light-outer);
box-shadow: var(--elevation-ambient), inset 0 1px 0 var(--rim-light-inner); box-shadow: var(--elevation-ambient), inset 0 1px 0 var(--rim-light-inner);
} }
.glass-panel-strong { .glass-panel-strong {
background-color: var(--glass-surface-high); background-color: var(--glass-surface-high);
backdrop-filter: blur(var(--glass-blur-high)) saturate(var(--glass-saturate)); backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(var(--glass-blur-high)) saturate(var(--glass-saturate));
border: 1px solid var(--rim-light-outer); border: 1px solid var(--rim-light-outer);
box-shadow: var(--elevation-pronounced), inset 0 1px 0 var(--rim-light-inner); box-shadow: var(--elevation-pronounced), inset 0 1px 0 var(--rim-light-inner);
} }