refactor(design): tone down card corner-light gradients to ~55% intensity #118

Merged

varutasu merged 1 commit from tone-down-card-corner-lights into main

2026-06-04 15:06:25 -04:00

varutasu commented

2026-06-04 14:18:33 -04:00

(Migrated from github.com)

Summary

Operator feedback after #117: the corner-light gradients on data cards (the `.glass-panel` / `.glass-panel-strong` class) read too vibrant once the pattern was applied broadly to deck cards, stat cards, list cards, modals, dropdowns, etc.

The same intensity works fine on the floating chrome chips (sidebar nav, top header) — there are only two of those per viewport and they should anchor the page as the surfaces "responding" to the background light sources. Data cards tile densely; at full intensity they compete with the chrome and the catch-lights read as noise rather than environmental cue.

This PR splits the tokens into two intensity tiers, keeping the chrome at full intensity and pulling data cards down to ~55%.

Token tiers

Token	Light theme	Dark theme	Surface
`--corner-light-warm`	0.50	0.68	Chrome (full intensity)
`--corner-light-cool`	0.38	0.58	Chrome (full intensity)
`--corner-light-warm-subtle`	0.28	0.38	Data cards (NEW)
`--corner-light-cool-subtle`	0.20	0.32	Data cards (NEW)

`.glass-panel` and `.glass-panel-strong` now consume the `-subtle` variants. Inline `boxShadow` in `components/Layout.js` and `components/ui/TopSearchBar.js` keep referencing the original tokens — no chrome regressions.

No token names removed; any future component that wants the full-intensity chrome treatment can opt in via `--corner-light-{warm,cool}`.

Test plan

`npm run build` — green
`npm run lint` — 0 errors
`npm run test:run` — 113/113 pass
Visual on preview: chrome (sidebar + top header) still has prominent warm-bottom-left / cool-top-right catch lights
Visual on preview: data cards (`/decks`, `/collections`, `/cards`, `/dashboard` stat tiles) show subtler corner highlights that don't dominate the surface

Follow-up to #116 (corner-border-light pass) and #117 (site-wide sweep applying `.glass-panel` broadly). Unblocks the upcoming `unify-glass-panel-gradient-borders` convoy by establishing that data-card surfaces have their own intensity tier.

Made with Cursor

## Summary Operator feedback after #117: the corner-light gradients on data cards (the \`.glass-panel\` / \`.glass-panel-strong\` class) read too vibrant once the pattern was applied broadly to deck cards, stat cards, list cards, modals, dropdowns, etc. The same intensity works fine on the **floating chrome chips** (sidebar nav, top header) — there are only two of those per viewport and they should anchor the page as the surfaces "responding" to the background light sources. **Data cards** tile densely; at full intensity they compete with the chrome and the catch-lights read as noise rather than environmental cue. This PR splits the tokens into two intensity tiers, keeping the chrome at full intensity and pulling data cards down to ~55%. ## Token tiers | Token | Light theme | Dark theme | Surface | |----------------------------------|-------------|------------|--------------------------| | \`--corner-light-warm\` | 0.50 | 0.68 | Chrome (full intensity) | | \`--corner-light-cool\` | 0.38 | 0.58 | Chrome (full intensity) | | \`--corner-light-warm-subtle\` | **0.28** | **0.38** | Data cards (NEW) | | \`--corner-light-cool-subtle\` | **0.20** | **0.32** | Data cards (NEW) | \`.glass-panel\` and \`.glass-panel-strong\` now consume the \`-subtle\` variants. Inline \`boxShadow\` in \`components/Layout.js\` and \`components/ui/TopSearchBar.js\` keep referencing the original tokens — no chrome regressions. No token names removed; any future component that wants the full-intensity chrome treatment can opt in via \`--corner-light-{warm,cool}\`. ## Test plan - [x] \`npm run build\` — green - [x] \`npm run lint\` — 0 errors - [x] \`npm run test:run\` — 113/113 pass - [ ] Visual on preview: chrome (sidebar + top header) still has prominent warm-bottom-left / cool-top-right catch lights - [ ] Visual on preview: data cards (\`/decks\`, \`/collections\`, \`/cards\`, \`/dashboard\` stat tiles) show subtler corner highlights that don't dominate the surface ## Related Follow-up to #116 (corner-border-light pass) and #117 (site-wide sweep applying \`.glass-panel\` broadly). Unblocks the upcoming \`unify-glass-panel-gradient-borders\` convoy by establishing that data-card surfaces have their own intensity tier. Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 14:18:39 -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 6:18pm

[vc]: #d51TVG1VqMgcFtujIOmvwP4CU7oNKTUnWyUX3PyC5oQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0FxZkt3ZXlrWVQ1NUF4OE13VWVWam14Vks3VGkiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC10b25lLWRvd24tY2FyZC1iZDY5ODktcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC10b25lLWRvd24tY2FyZC1iZDY5ODktcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMTgifQ== 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/AqfKweykYT55Ax8MwUeVjmxVK7Ti) | [Preview](https://tcg-vault-git-tone-down-card-bd6989-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-tone-down-card-bd6989-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 6:18pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=118" 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 14:18:44 -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 14:20:05 -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/26970942799) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.