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

refactor(design-system): subtle ember border on nav hover/focus #112

Merged
varutasu merged 1 commit from redesign-v2-hover-border into main 2026-06-04 13:00:33 -04:00
Conversation 3 Commits 1 Files changed 1 +19
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
styles/globals.css
View file

@ -443,6 +443,15 @@ body {
label). label).
2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/ 2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/
10%. Dark: 40%/22% → 26%/12%. Same shape, gentler glow. */ 10%. Dark: 40%/22% → 26%/12%. Same shape, gentler glow. */
/* Hover/focus also surfaces a subtle 1px ember border so the
hit-target of the chip is unambiguous even when the cursor is
near an edge (operator feedback after PR #111: the spotlight-only
hover hid the exact bounds of the interactive surface). The
border is 28% alpha — distinctly visible but lighter than the
active state's full-saturation ember border so the two states
remain readable side-by-side (hover < active). Implemented via
box-shadow inset rather than border: 1px to avoid the 1px layout
shift a real border would cause when toggling on hover. */
.nav-item:hover, .nav-item:hover,
.nav-item-bottom:hover, .nav-item-bottom:hover,
.nav-item-hover:hover, .nav-item-hover:hover,
@ -450,6 +459,16 @@ body {
.nav-item-bottom:focus-within, .nav-item-bottom:focus-within,
.nav-item-hover:focus-within { .nav-item-hover:focus-within {
color: var(--text-primary) !important; color: var(--text-primary) !important;
box-shadow: inset 0 0 0 1px rgba(216, 67, 21, 0.28) !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 {
box-shadow: inset 0 0 0 1px rgba(255, 138, 80, 0.34) !important;
} }
/* Mouse-tracking radial spotlight on every hoverable nav surface. /* Mouse-tracking radial spotlight on every hoverable nav surface.