From a6ae7d23f7323a7dadb6455d21436ab0d4f64fc5 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Mon, 7 Jul 2025 11:28:38 -0400
Subject: [PATCH] [CL-686] updated hover states (#15463)

---
 .../platform/popup/layout/popup-tab-navigation.component.html | 2 +-
 libs/components/src/button/button.component.ts                | 4 +---
 libs/components/src/item/item.component.ts                    | 2 +-
 libs/components/src/menu/menu-item.directive.ts               | 2 +-
 libs/components/src/table/row.directive.ts                    | 2 +-
 libs/components/src/toggle-group/toggle.component.ts          | 2 +-
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index 1170725a4b7..0a52518b250 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -7,7 +7,7 @@
       <ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-0">
         <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none tw-relative">
           <button
-            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-px-0.5 tw-py-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 tw-group/tab-nav-btn hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
+            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-px-0.5 tw-py-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 tw-group/tab-nav-btn hover:tw-bg-hover-default tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
             [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
             title="{{ button.label | i18n }}"
             [routerLink]="button.page"
diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index 002b2a9d915..011360db867 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -31,9 +31,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "tw-bg-transparent",
     "tw-border-primary-600",
     "!tw-text-primary-600",
-    "hover:tw-bg-primary-600",
-    "hover:tw-border-primary-600",
-    "hover:!tw-text-contrast",
+    "hover:tw-bg-hover-default",
     ...focusRing,
   ],
   danger: [
diff --git a/libs/components/src/item/item.component.ts b/libs/components/src/item/item.component.ts
index 1846a53f7a2..e1dfd599aac 100644
--- a/libs/components/src/item/item.component.ts
+++ b/libs/components/src/item/item.component.ts
@@ -18,7 +18,7 @@ import { ItemActionComponent } from "./item-action.component";
   providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
   host: {
     class:
-      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
+      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
   },
 })
 export class ItemComponent extends A11yRowDirective {
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index b52bbed2d50..37b68eecd74 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -20,7 +20,7 @@ export class MenuItemDirective implements FocusableOption {
     "tw-border-none",
     "tw-bg-background",
     "tw-text-left",
-    "hover:tw-bg-primary-100",
+    "hover:tw-bg-hover-default",
     "focus-visible:tw-z-50",
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",
diff --git a/libs/components/src/table/row.directive.ts b/libs/components/src/table/row.directive.ts
index 19f3d3f775b..2f76ded65aa 100644
--- a/libs/components/src/table/row.directive.ts
+++ b/libs/components/src/table/row.directive.ts
@@ -25,7 +25,7 @@ export class RowDirective {
       "tw-border-b",
       "tw-border-secondary-300",
       "tw-border-solid",
-      "hover:tw-bg-background-alt",
+      "hover:tw-bg-hover-default",
       "last:tw-border-0",
       this.alignmentClass,
     ];
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index 03bd8e43404..ec0d060f7fa 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -68,7 +68,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
       "tw-border-r",
       "tw-border-l-0",
       "tw-cursor-pointer",
-      "hover:tw-bg-primary-100",
+      "hover:tw-bg-hover-default",
 
       "group-first-of-type/toggle:tw-border-l",
       "group-first-of-type/toggle:tw-rounded-s-full",