fix(design-system): unblock body hearth gradient + boost intensity #101

Merged

varutasu merged 1 commit from layout-transparent-and-bolder-hearth into main

2026-06-04 10:39:29 -04:00

varutasu commented

2026-06-04 10:36:41 -04:00

(Migrated from github.com)

Why this exists

You reported after PR #100 that the design still looks unchanged. CDP diagnostic on the live page found the smoking gun: the Layout's root <div> was painted with style={{ backgroundColor: 'var(--bg-primary)' }} — a 1118×984 opaque warm-white rectangle directly on top of the body. The body gradient was painting (computed style confirmed) but no pixel of it reached the screen.

This means every PR in this chain was correct CSS but invisible: #97 (panels), #98 (backdrop-filter), #99 (box-shadow composition), #100 (gradient) all landed and were defeated by the same opaque parent.

Fix part 1 — remove the opaque parent

Layout.js:610 drops the style={{ backgroundColor: 'var(--bg-primary)' }}. The desktop sidebar (738–744) and mobile drawer (630–640) already paint their own translucent glass backgrounds; the main content area was already transparent. So removing the opaque parent only affects the previously-covered body gradient, which now shows through.

Fix part 2 — boost gradient intensity

PR #100's 8% / 6% radials were imperceptible even when visible. Boosted to:

28% ember at bottom-left (the seat of the fire)
18% ember at bottom-right (keeps wide displays balanced)
16% gold top-right (smoke catching last light)
Third linear-gradient stop so the vertical wash ramps visibly cooler-top → warmer-bottom

Dark theme gets proportional bumps (32% / 18% / 14% ember+purple mix).

Tests

npm run build green
npm run lint clean
npm run test:run 104/104 pass — no Layout test asserts the root bg, so the regression-lock holds (Sign-in CTA, no maintainer email leak, etc.)

Test plan

CI green
After promote, hard-refresh deckhearth.com/dashboard — should now show a clearly visible warm ember glow at the bottom-left, secondary embers at bottom-right, gold accent at top-right, and visibly translucent glass surfaces showing the gradient distortion through their blur

Made with Cursor

## Why this exists You reported after PR #100 that the design still looks unchanged. CDP diagnostic on the live page found the smoking gun: the Layout's root `<div>` was painted with `style={{ backgroundColor: 'var(--bg-primary)' }}` — a 1118×984 opaque warm-white rectangle directly on top of the body. The body gradient was painting (computed style confirmed) but no pixel of it reached the screen. This means every PR in this chain was correct CSS but invisible: #97 (panels), #98 (backdrop-filter), #99 (box-shadow composition), #100 (gradient) all landed and were defeated by the same opaque parent. ## Fix part 1 — remove the opaque parent `Layout.js:610` drops the `style={{ backgroundColor: 'var(--bg-primary)' }}`. The desktop sidebar (738–744) and mobile drawer (630–640) already paint their own translucent glass backgrounds; the main content area was already transparent. So removing the opaque parent only affects the previously-covered body gradient, which now shows through. ## Fix part 2 — boost gradient intensity PR #100's 8% / 6% radials were imperceptible even when visible. Boosted to: - **28% ember** at bottom-left (the seat of the fire) - **18% ember** at bottom-right (keeps wide displays balanced) - **16% gold** top-right (smoke catching last light) - Third linear-gradient stop so the vertical wash ramps visibly cooler-top → warmer-bottom Dark theme gets proportional bumps (32% / 18% / 14% ember+purple mix). ## Tests - `npm run build` green - `npm run lint` clean - `npm run test:run` 104/104 pass — no Layout test asserts the root bg, so the regression-lock holds (Sign-in CTA, no maintainer email leak, etc.) ## Test plan - [ ] CI green - [ ] After promote, hard-refresh `deckhearth.com/dashboard` — should now show a clearly visible warm ember glow at the bottom-left, secondary embers at bottom-right, gold accent at top-right, and visibly translucent glass surfaces showing the gradient distortion through their blur Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 10:36:45 -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:36pm

[vc]: #YhFjT8XQAVbkKeTveCphCFoEdcZ3EiJiFpe2FuLwb30=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWxheW91dC10cmFuc3BhLWNkNjhkZi1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC9DcTdyd1RuNlpYNlJhZ3ZYWGp0U0ZtRmkxWnpWIiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtbGF5b3V0LXRyYW5zcGEtY2Q2OGRmLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMDEifQ== 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/Cq7rwTn6ZX6RagvXXjtSFmFi1ZzV) | [Preview](https://tcg-vault-git-layout-transpa-cd68df-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-layout-transpa-cd68df-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 2:36pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=101" 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 10:36:59 -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 10:38:12 -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/26958699257) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.