From d33b9ec58d844f52ca475e42bff1365cce0fcbf5 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 29 Jan 2024 15:58:33 -0500
Subject: [PATCH] [CL-156][CL-176] update bit-nav-item styles (#7712)

* remove secondary-300 color redefinition

* add nav-item hover styles

* use inset focus-visible ring
---
 libs/components/src/layout/layout.component.html       | 3 +--
 libs/components/src/navigation/nav-item.component.html | 2 +-
 libs/components/src/navigation/nav-item.component.ts   | 4 +++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index 050113d11a0..0b97aa75617 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -19,8 +19,7 @@
       variant === 'secondary' && {
         '--color-text-alt2': 'var(--color-text-main)',
         '--color-background-alt3': 'var(--color-secondary-100)',
-        '--color-background-alt4': 'var(--color-secondary-300)',
-        '--color-secondary-300': 'var(--color-secondary-500)'
+        '--color-background-alt4': 'var(--color-secondary-300)'
       }
     "
     class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 056074baaec..9b66d11d5e5 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -1,7 +1,7 @@
 <div
   class="tw-relative"
   [ngClass]="[
-    showActiveStyles ? 'tw-bg-background-alt4' : 'tw-bg-background-alt3',
+    showActiveStyles ? 'tw-bg-background-alt4' : 'tw-bg-background-alt3 hover:tw-bg-primary-300/60',
     fvwStyles$ | async
   ]"
 >
diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts
index 4b7c0a29706..bce13e097d5 100644
--- a/libs/components/src/navigation/nav-item.component.ts
+++ b/libs/components/src/navigation/nav-item.component.ts
@@ -42,7 +42,9 @@ export class NavItemComponent extends NavBaseComponent {
    */
   protected focusVisibleWithin$ = new BehaviorSubject(false);
   protected fvwStyles$ = this.focusVisibleWithin$.pipe(
-    map((value) => (value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-text-alt2" : "")),
+    map((value) =>
+      value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-inset tw-ring-text-alt2" : "",
+    ),
   );
   @HostListener("focusin", ["$event.target"])
   onFocusIn(target: HTMLElement) {