rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(design-system): spotlight-only hover — drop floating-chip tint, tone down gradient #111

Merged
varutasu merged 1 commit from redesign-v2-spotlight-only-hover into main 2026-06-04 12:57:10 -04:00
Conversation 3 Commits 1 Files changed 1 +17 -28
1 changed files with 17 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit a3191cbe2e - Show all commits

45
styles/globals.css
View file

@ -430,39 +430,28 @@ body {
} }
/* Navigation Accessibility Enhancements */ /* Navigation Accessibility Enhancements */
/* Nav-item hover/focus — refined again 2026-06-04 (spotlight-hover /* Nav-item hover/focus — third pass 2026-06-04. Operator feedback
refinement, second pass). Operator feedback after the first after the spotlight landed (PR #110): "remove the shading around
refinement: the rgba(0.08) base tint was too subtle ("it's hard the hover that makes it feel like it's floating" + "the gradient
to see which one you're hovering"). Bumped the base tint to a is a little too bold." Two changes from the prior pass:
stronger ember alpha AND layered a mouse-tracking radial spotlight 1) Dropped the base background-color tint on the host. With the
on top via a ::before pseudo-element driven by --mouse-x / bg-tint gone, the item no longer reads as a "floating chip"
--mouse-y CSS custom properties. The properties are written by a against the sidebar — just the radial spotlight remains,
single delegated mousemove listener attached at the Layout level which feels like light pooling under the cursor rather than
(see components/Layout.js) — no per-item React handler needed. a state-color rectangle. Text color shift to --text-primary
The ::before is positioned with `inset: 0` and pointer-events stays as the secondary affordance (and for AA contrast on the
disabled so clicks pass through to the underlying Link. label).
Existing `.nav-item-hover` is also covered (same selector group) 2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/
so the explicit hover-only items in NavigationContent inherit 10%. Dark: 40%/22% → 26%/12%. Same shape, gentler glow. */
the spotlight without separate JSX wiring. */
.nav-item:hover, .nav-item:hover,
.nav-item-bottom:hover, .nav-item-bottom:hover,
.nav-item-hover:hover, .nav-item-hover:hover,
.nav-item:focus-within, .nav-item:focus-within,
.nav-item-bottom:focus-within, .nav-item-bottom:focus-within,
.nav-item-hover:focus-within { .nav-item-hover:focus-within {
background-color: rgba(216, 67, 21, 0.18) !important;
color: var(--text-primary) !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. /* Mouse-tracking radial spotlight on every hoverable nav surface.
The radial-gradient is positioned via the --mouse-x / --mouse-y The radial-gradient is positioned via the --mouse-x / --mouse-y
CSS variables that Layout's delegated mousemove handler writes CSS variables that Layout's delegated mousemove handler writes
@ -489,8 +478,8 @@ body {
border-radius: inherit; border-radius: inherit;
background: radial-gradient( background: radial-gradient(
circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 140, 30, 0.35) 0%, rgba(255, 140, 30, 0.22) 0%,
rgba(216, 67, 21, 0.18) 35%, rgba(216, 67, 21, 0.10) 35%,
transparent 70% transparent 70%
); );
opacity: 0; opacity: 0;
@ -512,8 +501,8 @@ body {
[data-theme="dark"] .nav-item-hover::before { [data-theme="dark"] .nav-item-hover::before {
background: radial-gradient( background: radial-gradient(
circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 160, 70, 0.40) 0%, rgba(255, 160, 70, 0.26) 0%,
rgba(255, 110, 0, 0.22) 35%, rgba(255, 110, 0, 0.12) 35%,
transparent 70% transparent 70%
); );
} }