[CL-686] updated hover states (#15463)

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"

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-bg-hover-default",
-    "hover:tw-border-primary-600",
-    "hover:!tw-text-contrast",
     ...focusRing,
   ],
   danger: [

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 {

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",

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,
     ];

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",