From a3191cbe2ec3e02cccdf22a9466c8e56f73d9241 Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Thu, 4 Jun 2026 11:54:52 -0500 Subject: [PATCH] =?UTF-8?q?refactor(design-system):=20spotlight-only=20hov?= =?UTF-8?q?er=20=E2=80=94=20drop=20floating-chip=20tint,=20tone=20down=20g?= =?UTF-8?q?radient?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Operator feedback after PR #110: "remove the shading around the hover that makes it feel like it's floating" + "the gradient is a little too bold." Two surgical changes to styles/globals.css. 1. Dropped the base background-color tint on .nav-item:hover / .nav-item-bottom:hover / .nav-item-hover:hover (and the matching focus-within selectors, light + dark variants). With the rectangle tint gone, the item no longer reads as a floating chip against the sidebar — only the mouse-tracking radial spotlight remains on hover, which reads as light pooling under the cursor rather than a state-color block. The color: var(--text-primary) shift stays as the secondary affordance + for label AA contrast. 2. Toned down the radial-gradient alphas in the ::before: - Light center: 0.35 → 0.22 (-37%) - Light midpoint: 0.18 → 0.10 (-44%) - Dark center: 0.40 → 0.26 (-35%) - Dark midpoint: 0.22 → 0.12 (-45%) Same 120px radius, same shape, gentler glow. Tests: - npm run test:run: 113/113 - npm run lint: clean (1 pre-existing unused-disable warning) - npm run build: green Co-authored-by: Cursor --- styles/globals.css | 45 +++++++++++++++++---------------------------- 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/styles/globals.css b/styles/globals.css index a02eef9..b9e2387 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -430,39 +430,28 @@ body { } /* Navigation Accessibility Enhancements */ -/* Nav-item hover/focus — refined again 2026-06-04 (spotlight-hover - refinement, second pass). Operator feedback after the first - refinement: the rgba(0.08) base tint was too subtle ("it's hard - to see which one you're hovering"). Bumped the base tint to a - stronger ember alpha AND layered a mouse-tracking radial spotlight - on top via a ::before pseudo-element driven by --mouse-x / - --mouse-y CSS custom properties. The properties are written by a - single delegated mousemove listener attached at the Layout level - (see components/Layout.js) — no per-item React handler needed. - The ::before is positioned with `inset: 0` and pointer-events - disabled so clicks pass through to the underlying Link. - Existing `.nav-item-hover` is also covered (same selector group) - so the explicit hover-only items in NavigationContent inherit - the spotlight without separate JSX wiring. */ +/* Nav-item hover/focus — third pass 2026-06-04. Operator feedback + after the spotlight landed (PR #110): "remove the shading around + the hover that makes it feel like it's floating" + "the gradient + is a little too bold." Two changes from the prior pass: + 1) Dropped the base background-color tint on the host. With the + bg-tint gone, the item no longer reads as a "floating chip" + against the sidebar — just the radial spotlight remains, + which feels like light pooling under the cursor rather than + a state-color rectangle. Text color shift to --text-primary + stays as the secondary affordance (and for AA contrast on the + label). + 2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/ + 10%. Dark: 40%/22% → 26%/12%. Same shape, gentler glow. */ .nav-item:hover, .nav-item-bottom:hover, .nav-item-hover:hover, .nav-item:focus-within, .nav-item-bottom:focus-within, .nav-item-hover:focus-within { - background-color: rgba(216, 67, 21, 0.18) !important; color: var(--text-primary) !important; } -[data-theme="dark"] .nav-item:hover, -[data-theme="dark"] .nav-item-bottom:hover, -[data-theme="dark"] .nav-item-hover:hover, -[data-theme="dark"] .nav-item:focus-within, -[data-theme="dark"] .nav-item-bottom:focus-within, -[data-theme="dark"] .nav-item-hover:focus-within { - background-color: rgba(255, 138, 80, 0.22) !important; -} - /* Mouse-tracking radial spotlight on every hoverable nav surface. The radial-gradient is positioned via the --mouse-x / --mouse-y CSS variables that Layout's delegated mousemove handler writes @@ -489,8 +478,8 @@ body { border-radius: inherit; background: radial-gradient( circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), - rgba(255, 140, 30, 0.35) 0%, - rgba(216, 67, 21, 0.18) 35%, + rgba(255, 140, 30, 0.22) 0%, + rgba(216, 67, 21, 0.10) 35%, transparent 70% ); opacity: 0; @@ -512,8 +501,8 @@ body { [data-theme="dark"] .nav-item-hover::before { background: radial-gradient( circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), - rgba(255, 160, 70, 0.40) 0%, - rgba(255, 110, 0, 0.22) 35%, + rgba(255, 160, 70, 0.26) 0%, + rgba(255, 110, 0, 0.12) 35%, transparent 70% ); } -- 2.45.2