User reported after PR #98 ("backdrop-filter now applies") that the
dashboard glass panels still looked identical to solid cards. Browser
CDP diagnostic on production found the root cause: the .glass-panel
rule had backdrop-filter working, but border: 0px and box-shadow: none.
Why both were missing:
1) `border: 1px solid var(--rim-light-outer)` — the --rim-light-outer
token is a complete box-shadow declaration (`0 0 0 1px #2d181014`),
NOT a color value. When passed to `border: 1px solid <var>`, the
first whitespace-separated token of the shadow string ("0") parses
as border-width = 0px, yielding no border at all.
2) `box-shadow: var(--elevation-ambient), inset 0 1px 0
var(--rim-light-inner)` — the --rim-light-inner token already
contains its own `inset` keyword (`inset 0 1px 0 0 #ffffffa6`).
Wrapping it in another `inset 0 1px 0 ...` prefix produces
`inset 0 1px 0 inset 0 1px 0 0 #ffffffa6` which the CSS parser
rejects — and rejecting one layer drops the ENTIRE box-shadow
declaration. That's why `getComputedStyle().boxShadow === 'none'`.
Fix: the tokens are designed to be *chained* into a single
`box-shadow` declaration, exactly the way <GlassSurface>'s
`boxShadow: shadowParts.join(', ')` composes them (see
components/ui/GlassSurface.js lines 5-15). Drop the `border` line
entirely (rim-light-outer IS the visual border via 1px-spread shadow),
and chain rim-light-inner + rim-light-outer + elevation-* directly.
Verified by `npm run build` — compiled CSS now has all three:
- background
- backdrop-filter (+ -webkit- prefix from autoprefixer)
- box-shadow with all 4 layers correctly chained
This will produce a visible: top inset rim highlight, dark hairline
outer ring, soft ambient drop shadow — i.e. an actual glass card.
Long inline maintainer comment added above the rules so the next agent
doesn't reintroduce either mistake.
Co-authored-by: Cursor <cursoragent@cursor.com>
1b5db44b7e