From 7a01469e5f9b5a3a897d323a73ba162cd1b16401 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Thu, 4 Jun 2026 12:00:33 -0500
Subject: [PATCH] refactor(design-system): subtle ember border on nav
 hover/focus (#112)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 styles/globals.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/styles/globals.css b/styles/globals.css
index b9e2387..4c09837 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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.