refactor(design-system): redesign-v2 — bolder hover + mouse-tracking spotlight + active gradient #110

Merged

varutasu merged 1 commit from redesign-v2-spotlight-hover into main

2026-06-04 12:52:11 -04:00

varutasu commented

2026-06-04 12:49:55 -04:00

(Migrated from github.com)

Three refinements from operator feedback after PR #109:

Active state — subtle gradient. Kept the 1px ember border + ember text. Added a 135deg linear-gradient at 14% → 6% alpha (18% → 8% dark) so the active item has visible warmth without going back to the heavy pill we walked away from.
Hover base tint bolder. `rgba(0.08)` → `rgba(0.18)` light, `rgba(0.10)` → `rgba(0.22)` dark. Per your feedback: "hard to see which one you're hovering."
Mouse-tracking radial spotlight. New `::before` pseudo-element on `.nav-item` / `.nav-item-bottom` / `.nav-item-hover`. Radial-gradient positioned via `--mouse-x` / `--mouse-y` CSS custom properties, written by a single delegated `mousemove` listener at the document level in Layout.js. Spotlight fades in/out on hover/focus via opacity transition. `pointer-events: none` so it never blocks clicks.

Why a delegated listener (not React onMouseMove)

NavigationContent has 10+ nav-item render paths. Attaching React handlers everywhere is brittle and prop-drilly. One `document.addEventListener('mousemove')` + `event.target.closest('.nav-item, ...')` handles all surfaces uniformly; `closest()` returns `null` for non-nav events so the listener cost is negligible.

Reduced-motion users: the opacity fade is collapsed by the existing global `prefers-reduced-motion` sweep. The positional gradient update is not an animation, so it stays per WCAG SC 2.3.3.
The `::before` is `pointer-events: none` and content is z-indexed above it — no interaction or screen-reader interference.

Tests

`npm run test:run`: 113/113
`npm run lint`: clean
`npm run build`: green

Made with Cursor

Three refinements from operator feedback after PR #109: 1. **Active state — subtle gradient.** Kept the 1px ember border + ember text. Added a 135deg linear-gradient at 14% → 6% alpha (18% → 8% dark) so the active item has visible warmth without going back to the heavy pill we walked away from. 2. **Hover base tint bolder.** \`rgba(0.08)\` → \`rgba(0.18)\` light, \`rgba(0.10)\` → \`rgba(0.22)\` dark. Per your feedback: "hard to see which one you're hovering." 3. **Mouse-tracking radial spotlight.** New \`::before\` pseudo-element on \`.nav-item\` / \`.nav-item-bottom\` / \`.nav-item-hover\`. Radial-gradient positioned via \`--mouse-x\` / \`--mouse-y\` CSS custom properties, written by a single delegated \`mousemove\` listener at the document level in Layout.js. Spotlight fades in/out on hover/focus via opacity transition. \`pointer-events: none\` so it never blocks clicks. ## Why a delegated listener (not React onMouseMove) NavigationContent has 10+ nav-item render paths. Attaching React handlers everywhere is brittle and prop-drilly. One \`document.addEventListener('mousemove')\` + \`event.target.closest('.nav-item, ...')\` handles all surfaces uniformly; \`closest()\` returns \`null\` for non-nav events so the listener cost is negligible. ## A11y - Reduced-motion users: the opacity fade is collapsed by the existing global \`prefers-reduced-motion\` sweep. The positional gradient update is not an animation, so it stays per WCAG SC 2.3.3. - The \`::before\` is \`pointer-events: none\` and content is z-indexed above it — no interaction or screen-reader interference. ## Tests - \`npm run test:run\`: **113/113** - \`npm run lint\`: clean - \`npm run build\`: green Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 12:49:58 -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 4:50pm

[vc]: #wIdms2m/ME+9Jy3riHb4pU8jCEZB8ObOthpJ2Y+WaME=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzZtcFZSb2pOTFdnZ2pWZm0xd3BkNDZrTU5YTDEiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1zcC0yYjUwMzYtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1zcC0yYjUwMzYtcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMTAifQ== 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/6mpVRojNLWggjVfm1wpd46kMNXL1) | [Preview](https://tcg-vault-git-redesign-v2-sp-2b5036-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-sp-2b5036-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 4:50pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=110" 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 12:50:09 -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 12:51:20 -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/26966270542) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.