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

varutasu commented

2026-06-03 22:35:49 -04:00

(Migrated from github.com)

Why this exists

After PR #97 promoted, you reported https://deckhearth.com/dashboard still showed flat warm panels. Browser CDP diagnostic confirmed: the deployed .glass-panel rule has the background and border, but no backdrop-filter declaration at all. Without blur the translucent overlay just lets the body color show through nearly-fully — looks identical to a solid panel.

Root cause — two compounding Lightning CSS (Next 16 default optimizer) quirks

backdrop-filter: blur(var(--X)) saturate(var(--Y)) is silently stripped. Lightning CSS doesn't understand var() references nested inside function arguments. Tailwind's own .backdrop-blur-* utilities survive because they wrap the entire blur(...) expression in a single CSS var (--tw-backdrop-blur), not the radius value alone. Same exact bug already emptied .mobile-nav-backdrop in production at some earlier point — getComputedStyle confirms the rule has no backdrop-filter either.
Identical-value duplicate prefix triggers a buggy de-dup. When backdrop-filter and -webkit-backdrop-filter are both written with byte-identical values, Lightning CSS de-duplicates and keeps only the -webkit- form. Modern Chrome/Edge/Firefox ignore the webkit prefix, so the blur never applies.

Fix

Switch to literal values: blur(12px) saturate(180%) instead of blur(var(--glass-blur-mid)) saturate(var(--glass-saturate)). The --glass-blur-* tokens stay in :root for the <GlassSurface> JSX primitive (inline style={{ backdropFilter: ... }} is unaffected by Lightning CSS).
Write only the unprefixed backdrop-filter and let Lightning CSS's autoprefixer add the -webkit- based on browserslist (ios_saf <18 still needs it).

Verified locally with npm run build:

```css
.glass-panel {
background-color: var(--glass-surface-mid);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid var(--rim-light-outer);
box-shadow: var(--elevation-ambient), inset 0 1px 0 var(--rim-light-inner);
}
```

Both forms present, modern unprefixed wins de-dup.

Note added to source

The CSS now has a maintainer comment above the two utility classes documenting both quirks so the next agent doesn't reintroduce the bug.

Test plan

CI green
After promote, hard-refresh https://deckhearth.com/dashboard — stat cards / recent-lists card should now actually blur the background.

Made with Cursor

## Why this exists After PR #97 promoted, you reported `https://deckhearth.com/dashboard` still showed flat warm panels. Browser CDP diagnostic confirmed: the deployed `.glass-panel` rule has the background and border, but **no `backdrop-filter` declaration at all**. Without blur the translucent overlay just lets the body color show through nearly-fully — looks identical to a solid panel. ## Root cause — two compounding Lightning CSS (Next 16 default optimizer) quirks 1. **`backdrop-filter: blur(var(--X)) saturate(var(--Y))` is silently stripped.** Lightning CSS doesn't understand `var()` references nested inside function arguments. Tailwind's own `.backdrop-blur-*` utilities survive because they wrap the *entire* `blur(...)` expression in a single CSS var (`--tw-backdrop-blur`), not the radius value alone. Same exact bug already emptied `.mobile-nav-backdrop` in production at some earlier point — `getComputedStyle` confirms the rule has no `backdrop-filter` either. 2. **Identical-value duplicate prefix triggers a buggy de-dup.** When `backdrop-filter` and `-webkit-backdrop-filter` are both written with byte-identical values, Lightning CSS de-duplicates and keeps **only** the `-webkit-` form. Modern Chrome/Edge/Firefox ignore the webkit prefix, so the blur never applies. ## Fix - Switch to **literal values**: `blur(12px) saturate(180%)` instead of `blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))`. The `--glass-blur-*` tokens stay in `:root` for the `<GlassSurface>` JSX primitive (inline `style={{ backdropFilter: ... }}` is unaffected by Lightning CSS). - Write only the **unprefixed** `backdrop-filter` and let Lightning CSS's autoprefixer add the `-webkit-` based on browserslist (ios_saf <18 still needs it). Verified locally with `npm run build`: \`\`\`css .glass-panel { background-color: var(--glass-surface-mid); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid var(--rim-light-outer); box-shadow: var(--elevation-ambient), inset 0 1px 0 var(--rim-light-inner); } \`\`\` Both forms present, modern unprefixed wins de-dup. ## Note added to source The CSS now has a maintainer comment above the two utility classes documenting both quirks so the next agent doesn't reintroduce the bug. ## Test plan - [ ] CI green - [ ] After promote, hard-refresh `https://deckhearth.com/dashboard` — stat cards / recent-lists card should now actually blur the background. Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-03 22:35:52 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 2:36am

[vc]: #zB942uZPVtuCmHT8G8ITHeA6yxCRYfSrdU0H3bByp0E=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0NDWG9IaEY4UUxXQzE1dGRWVFZjZG84Q3ZtWDkiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1maXgtZ2xhc3MtcGFuZS0yNDE1NjEtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC1maXgtZ2xhc3MtcGFuZS0yNDE1NjEtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifX1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj05OCJ9 The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/CCXoHhF8QLWC15tdVTVcdo8CvmX9) | [Preview](https://tcg-vault-git-fix-glass-pane-241561-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-fix-glass-pane-241561-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 2:36am | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=98" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-03 22:35:58 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-03 22:37:02 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26926675449) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.