refactor(design): move light response onto chip borders; cut directional drop shadows

varutasu commented

2026-06-04 13:29:27 -04:00

(Migrated from github.com)

Operator feedback 2026-06-04 (after PR #115): "the borders are reflecting the color, not necessarily the drop shadows behind the cards. In fact, you could probably reduce those box shadows quite a bit. At least they shouldn't span the entire edge of the card. Just a subtle bit in the corner."

PR #115's directional drop shadows worked but competed with the body gradient. This PR moves the warm/cool light response onto the chip's 1px border, concentrated in the two corners closest to the matching light sources, and cuts the directional drop shadows entirely.

Technique

Modern gradient-border pattern — four background layers + a transparent border:

background:
  linear-gradient(surface, surface) padding-box,
  radial-gradient(at 0% 100%, warm 0%, transparent 42%) border-box,
  radial-gradient(at 100% 0%, cool 0%, transparent 42%) border-box,
  chip-border-base border-box;
border: 1px solid transparent;

The transparent border exposes the border-box-clipped gradient layers as the visible rim. The surface fill is clipped to padding-box so it doesn't cover the rim.

Token changes

Retired: --edge-light-warm, --edge-light-cool — full-edge directional box-shadows from PR #115.

Added:

--corner-light-warm, --corner-light-cool — plain RGBA colors for radial-gradient consumption. Light: 0.50 warm / 0.38 cool. Dark: 0.68 warm / 0.58 cool (bumped against the deep substrate).
--chip-border-base — faint 135deg white tint so the rest of the rim isn't invisible (sensible chip edge far from either light source).

Application sites

.glass-panel + .glass-panel-strong (picks up DailyEmberWidget, CommandPaletteModal popover, UserMenu dropdown, etc.)
Layout.js nav-chip inline style
TopSearchBar.js inline style

Shadow stacks across all four sites are now just rim-light-inner + elevation-ambient (or elevation-pronounced for strong panels). The body gradient is unchanged — it remains the dominant gradient story per operator's "I want the gradient in the background to be the focus" framing.

CI

113/113 vitest
lint clean (1 pre-existing warning)
build green

Made with Cursor

Operator feedback 2026-06-04 (after PR #115): "the borders are reflecting the color, not necessarily the drop shadows behind the cards. In fact, you could probably reduce those box shadows quite a bit. At least they shouldn't span the entire edge of the card. Just a subtle bit in the corner." PR #115's directional drop shadows worked but competed with the body gradient. This PR moves the warm/cool light response **onto the chip's 1px border**, concentrated in the two corners closest to the matching light sources, and **cuts the directional drop shadows entirely**. ## Technique Modern gradient-border pattern — four background layers + a transparent border: ```css background: linear-gradient(surface, surface) padding-box, radial-gradient(at 0% 100%, warm 0%, transparent 42%) border-box, radial-gradient(at 100% 0%, cool 0%, transparent 42%) border-box, chip-border-base border-box; border: 1px solid transparent; ``` The transparent border exposes the border-box-clipped gradient layers as the visible rim. The surface fill is clipped to padding-box so it doesn't cover the rim. ## Token changes **Retired**: `--edge-light-warm`, `--edge-light-cool` — full-edge directional box-shadows from PR #115. **Added**: - `--corner-light-warm`, `--corner-light-cool` — plain RGBA colors for radial-gradient consumption. Light: 0.50 warm / 0.38 cool. Dark: 0.68 warm / 0.58 cool (bumped against the deep substrate). - `--chip-border-base` — faint 135deg white tint so the rest of the rim isn't invisible (sensible chip edge far from either light source). ## Application sites - `.glass-panel` + `.glass-panel-strong` (picks up DailyEmberWidget, CommandPaletteModal popover, UserMenu dropdown, etc.) - `Layout.js` nav-chip inline style - `TopSearchBar.js` inline style Shadow stacks across all four sites are now just `rim-light-inner + elevation-ambient` (or `elevation-pronounced` for strong panels). The body gradient is unchanged — it remains the dominant gradient story per operator's "I want the gradient in the background to be the focus" framing. ## CI - 113/113 vitest - lint clean (1 pre-existing warning) - build green Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 13:29:30 -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 5:29pm

[vc]: #Wy7zxlUrv43pZxEOtoqflF68RnshR/S6J8cE3+WTyTk=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0VkeXJVV2Z5RGdISGpxR3pNOTNuU1FGcEZoNzMiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1jaGlwLWJvcmRlci1jby0yYjY1ZWUtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC1jaGlwLWJvcmRlci1jby0yYjY1ZWUtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMTYifQ== 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/EdyrUWfyDgHHjqGzM93nSQFpFh73) | [Preview](https://tcg-vault-git-chip-border-co-2b65ee-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-chip-border-co-2b65ee-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 5:29pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=116" 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-04 13:29:39 -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-04 13:30:53 -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/26968358409) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.

refactor(design): move light response onto chip borders; cut directional drop shadows #116

Technique

Token changes

Application sites

CI

Pipeline Health

Build + CI gates

Role reports

Visual Diff