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

Browse source 
Operator feedback after PR #111: with only the radial spotlight on
hover, the exact bounds of the interactive surface were unclear —
especially near the edges. Added a subtle 1px ember box-shadow
inset on hover and focus-within (covers .nav-item, .nav-item-bottom,
.nav-item-hover).

Implementation:
- Light: rgba(216, 67, 21, 0.28) — visible but lighter than the
  active state's full-saturation ember border (so hover < active
  remains readable side-by-side).
- Dark: rgba(255, 138, 80, 0.34) — slightly hotter ember +
  bumped alpha for eye-perception correction against deep navy.
- box-shadow inset rather than `border: 1px solid` to avoid the
  1px layout shift a real border would cause on toggle.

Tests:
- npm run test:run: 113/113
- npm run lint: clean
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Randall Stillwell 2026-06-04 11:58:16 -05:00
parent c2c4d869a1
commit cdb3d6da34
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).
2) Toned down the radial-gradient alphas. Light: 35%/18% → 22%/
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-bottom:hover,
.nav-item-hover:hover,
@ -450,6 +459,16 @@ body {
.nav-item-bottom:focus-within,
.nav-item-hover:focus-within {
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.