[CL-478] Remove underline on hover for most components (#11477)

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html

@@ -6,7 +6,7 @@
     <div class="tw-flex tw-flex-1">
       <a
         *ngFor="let button of navButtons"
-        class="tw-flex-1 tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 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-flex-1 tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 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"
         [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
         [title]="button.label"
         [routerLink]="button.page"
@@ -20,10 +20,7 @@
           class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
           aria-hidden="true"
         ></i>
-        <span
-          class="tw-truncate tw-max-w-full"
-          [ngClass]="!rla.isActive && 'group-hover:tw-underline'"
-        >
+        <span class="tw-truncate tw-max-w-full">
           {{ button.label }}
         </span>
       </a>

libs/components/src/button/button.component.ts

@@ -23,18 +23,18 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "tw-bg-transparent",
     "tw-border-primary-600",
     "!tw-text-primary-600",
-    "hover:tw-bg-transparent",
-    "hover:tw-border-primary-700",
-    "hover:!tw-text-primary-700",
+    "hover:tw-bg-primary-600",
+    "hover:tw-border-primary-600",
+    "hover:!tw-text-contrast",
     ...focusRing,
   ],
   danger: [
     "tw-bg-transparent",
     "tw-border-danger-600",
     "!tw-text-danger",
-    "hover:tw-bg-transparent",
-    "hover:tw-border-danger-700",
-    "hover:!tw-text-danger-700",
+    "hover:tw-bg-danger-600",
+    "hover:tw-border-danger-600",
+    "hover:!tw-text-contrast",
     ...focusRing,
   ],
   unstyled: [],
@@ -57,7 +57,7 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "tw-border-solid",
       "tw-text-center",
       "tw-no-underline",
-      "hover:tw-underline",
+      "hover:tw-no-underline",
       "focus:tw-outline-none",
       "disabled:tw-bg-secondary-300",
       "disabled:hover:tw-bg-secondary-300",

libs/components/src/chip-select/chip-select.component.html

@@ -4,7 +4,8 @@
   [ngClass]="{
     'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
       selectedOption && !disabled,
-    'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted': !selectedOption && !disabled,
+    'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
+      !selectedOption && !disabled,
     'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
     'tw-border-text-muted': !disabled,
     'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
@@ -26,13 +27,7 @@
   >
     <span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
       <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
-      <span
-        class="tw-truncate"
-        [ngClass]="{
-          'group-hover/chip-select:tw-underline': !selectedOption && !disabled,
-        }"
-        >{{ label }}</span
-      >
+      <span class="tw-truncate">{{ label }}</span>
     </span>
     <i
       *ngIf="!selectedOption"

libs/components/src/menu/menu-item.directive.ts

@@ -19,7 +19,6 @@ export class MenuItemDirective implements FocusableOption {
     "tw-bg-background",
     "tw-text-left",
     "hover:tw-bg-primary-100",
-    "hover:!tw-underline",
     "focus-visible:tw-z-50",
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",
@@ -30,7 +29,6 @@ export class MenuItemDirective implements FocusableOption {
     "active:!tw-ring-offset-0",
     "disabled:!tw-text-muted",
     "disabled:hover:tw-bg-background",
-    "disabled:hover:!tw-no-underline",
     "disabled:tw-cursor-not-allowed",
   ];
   @HostBinding("attr.role") role = "menuitem";

libs/components/src/navigation/nav-item.component.html

@@ -73,7 +73,7 @@
         <!-- The `fvw` class passes focus to `this.focusVisibleWithin$` -->
         <!-- The following `class` field should match the `#isButton` class field below -->
         <a
-          class="fvw tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&>:not(.bwi)]:hover:tw-underline"
+          class="fvw tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
           [routerLink]="route"
           [relativeTo]="relativeTo"
           [attr.aria-label]="ariaLabel || text"
@@ -92,7 +92,7 @@
         <!-- Class field should match `#isAnchor` class field above -->
         <button
           type="button"
-          class="fvw tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&>:not(.bwi)]:hover:tw-underline"
+          class="fvw tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
           (click)="mainContentClicked.emit()"
         >
           <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>

libs/components/src/toggle-group/toggle.component.html

@@ -7,7 +7,7 @@
   (change)="onInputInteraction()"
 />
 <label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
-  <span class="group-hover/toggle:tw-underline tw-line-clamp-2" #labelContent>
+  <span class="tw-line-clamp-2" #labelContent>
     <ng-content></ng-content>
   </span>
   <span class="tw-shrink-0" #bitBadgeContainer [hidden]="!bitBadgeContainerHasChidlren()">

libs/components/src/toggle-group/toggle.component.ts

@@ -66,6 +66,8 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
       "tw-border-r",
       "tw-border-l-0",
       "tw-cursor-pointer",
+      "hover:tw-bg-primary-100",
+
       "group-first-of-type/toggle:tw-border-l",
       "group-first-of-type/toggle:tw-rounded-l-full",
       "group-last-of-type/toggle:tw-rounded-r-full",