From 0a861e5ee018151a90ad3907b1e20dadd3a1e9a2 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Fri, 13 Sep 2024 14:29:33 -0400
Subject: [PATCH] [CL-404] Switch to primary-600 for all focus indicators
 (#11015)

---
 .../popup-tab-navigation.component.html       |  2 +-
 libs/components/src/badge/badge.directive.ts  |  2 +-
 .../components/src/button/button.component.ts |  2 +-
 .../src/checkbox/checkbox.component.ts        |  2 +-
 .../chip-select/chip-select.component.html    |  2 +-
 .../form-control/form-control.component.html  |  2 +-
 .../src/form-field/form-field.component.html  |  2 +-
 .../src/form-field/form-field.component.ts    |  6 +++---
 .../src/icon-button/icon-button.component.ts  | 20 +++++++++----------
 libs/components/src/input/input.directive.ts  |  8 ++++----
 libs/components/src/item/item.component.html  |  2 +-
 .../src/menu/menu-item.directive.ts           |  2 +-
 .../src/radio-button/radio-input.component.ts |  2 +-
 13 files changed, 27 insertions(+), 27 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 a0ff252c6c2..fd386bb0f06 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
@@ -6,7 +6,7 @@
     <div class="tw-flex tw-flex-1">
       <a
         *ngFor="let button of navButtons"
-        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 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-500"
+        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 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"
diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts
index b2f0637bf8d..212ddf48191 100644
--- a/libs/components/src/badge/badge.directive.ts
+++ b/libs/components/src/badge/badge.directive.ts
@@ -49,7 +49,7 @@ export class BadgeDirective implements FocusableElement {
       "focus-visible:tw-outline-none",
       "focus-visible:tw-ring-2",
       "focus-visible:tw-ring-offset-2",
-      "focus-visible:tw-ring-primary-500",
+      "focus-visible:tw-ring-primary-600",
       "disabled:tw-bg-secondary-300",
       "disabled:hover:tw-bg-secondary-300",
       "disabled:tw-border-secondary-300",
diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index 037aedd12d7..cc4b048d071 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -6,7 +6,7 @@ import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstrac
 const focusRing = [
   "focus-visible:tw-ring-2",
   "focus-visible:tw-ring-offset-2",
-  "focus-visible:tw-ring-primary-500",
+  "focus-visible:tw-ring-primary-600",
   "focus-visible:tw-z-10",
 ];
 
diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 5933036cc25..ef57d3d5cd3 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -39,7 +39,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     // if it exists, the parent form control handles focus
     "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
     "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-500",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
 
     "disabled:tw-cursor-auto",
     "disabled:tw-border",
diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index 1d377e5cb98..cc4e5038d74 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -7,7 +7,7 @@
     'tw-bg-transparent hover:tw-bg-background-alt !tw-text-muted': !selectedOption && !disabled,
     'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
     'tw-border-text-muted': !disabled,
-    'tw-ring-2 tw-ring-primary-700 tw-ring-offset-1': focusVisibleWithin(),
+    'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
   }"
 >
   <!-- Primary button -->
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index ef26b1c6c04..c2270ab79a6 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -1,5 +1,5 @@
 <label
-  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-500"
+  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
   [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
 >
   <ng-content></ng-content>
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 84dec196340..61f98ce6581 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -89,7 +89,7 @@
           !disableReadOnlyBorder && !defaultContentIsFocused(),
         'tw-border-b-2 tw-border-transparent tw-pb-[4px]':
           disableReadOnlyBorder && !defaultContentIsFocused(),
-        'tw-border-b-2 tw-border-primary-500': defaultContentIsFocused(),
+        'tw-border-b-2 tw-border-primary-600': defaultContentIsFocused(),
       }"
     >
       <div
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index fd0d62bdda3..d8bd498e4f0 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -48,15 +48,15 @@ export class BitFormFieldComponent implements AfterContentChecked {
     const groupClasses = [
       this.input.hasError
         ? "group-hover/bit-form-field:tw-border-danger-700"
-        : "group-hover/bit-form-field:tw-border-primary-500",
+        : "group-hover/bit-form-field:tw-border-primary-600",
       // the next 2 selectors override the above hover selectors when the input (or text area) is non-interactive (i.e. readonly, disabled)
       "group-has-[input:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
       "group-has-[textarea:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
       "group-focus-within/bit-form-field:tw-outline-none",
       shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-2" : "",
-      shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-primary-500" : "",
+      shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-primary-600" : "",
       shouldFocusBorderAppear
-        ? "group-focus-within/bit-form-field:group-hover/bit-form-field:tw-border-primary-500"
+        ? "group-focus-within/bit-form-field:group-hover/bit-form-field:tw-border-primary-600"
         : "",
     ];
 
diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts
index c1b808cf583..9318186d3ea 100644
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -41,8 +41,8 @@ const styles: Record<IconButtonType, string[]> = {
     "!tw-text-main",
     "tw-border-transparent",
     "hover:tw-bg-transparent-hover",
-    "hover:tw-border-primary-500",
-    "focus-visible:before:tw-ring-primary-500",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:!tw-text-secondary-300",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
@@ -53,8 +53,8 @@ const styles: Record<IconButtonType, string[]> = {
     "!tw-text-muted",
     "tw-border-transparent",
     "hover:tw-bg-transparent-hover",
-    "hover:tw-border-primary-500",
-    "focus-visible:before:tw-ring-primary-500",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:!tw-text-secondary-300",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
@@ -64,9 +64,9 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-bg-primary-600",
     "!tw-text-contrast",
     "tw-border-primary-600",
-    "hover:tw-bg-primary-500",
-    "hover:tw-border-primary-500",
-    "focus-visible:before:tw-ring-primary-500",
+    "hover:tw-bg-primary-600",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:tw-opacity-60",
     "disabled:hover:tw-border-primary-600",
     "disabled:hover:tw-bg-primary-600",
@@ -78,7 +78,7 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-border-text-muted",
     "hover:!tw-text-contrast",
     "hover:tw-bg-text-muted",
-    "focus-visible:before:tw-ring-primary-500",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:tw-opacity-60",
     "disabled:hover:tw-border-text-muted",
     "disabled:hover:tw-bg-transparent",
@@ -91,8 +91,8 @@ const styles: Record<IconButtonType, string[]> = {
     "tw-border-transparent",
     "hover:!tw-text-danger-600",
     "hover:tw-bg-transparent",
-    "hover:tw-border-primary-500",
-    "focus-visible:before:tw-ring-primary-500",
+    "hover:tw-border-primary-600",
+    "focus-visible:before:tw-ring-primary-600",
     "disabled:!tw-text-secondary-300",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index 294d1717ded..6141967e3f6 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -128,15 +128,15 @@ export class BitInputDirective implements BitFormFieldControl {
       "tw-py-2",
       "tw-rounded-lg",
       // Hover
-      this.hasError ? "hover:tw-border-danger-700" : "hover:tw-border-primary-500",
+      this.hasError ? "hover:tw-border-danger-700" : "hover:tw-border-primary-600",
       // Focus
-      "focus:hover:tw-border-primary-500",
+      "focus:hover:tw-border-primary-600",
       "disabled:tw-bg-secondary-100",
       "disabled:hover:tw-border-secondary-500",
-      "focus:tw-border-primary-500",
+      "focus:tw-border-primary-600",
       "focus:tw-ring-1",
       "focus:tw-ring-inset",
-      "focus:tw-ring-primary-500",
+      "focus:tw-ring-primary-600",
       "focus:tw-z-10",
     ];
   }
diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index 68afb0bbb54..99c181a068c 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -2,7 +2,7 @@
   class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.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 tw-mb-1.5"
   [ngClass]="
     focusVisibleWithin()
-      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-700 tw-border-transparent'
+      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
       : 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
   "
 >
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index d162e484e9d..2c69b0784c5 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -25,7 +25,7 @@ export class MenuItemDirective implements FocusableOption {
     "focus-visible:tw-ring-2",
     "focus-visible:tw-rounded-lg",
     "focus-visible:tw-ring-inset",
-    "focus-visible:tw-ring-primary-500",
+    "focus-visible:tw-ring-primary-600",
     "active:!tw-ring-0",
     "active:!tw-ring-offset-0",
     "disabled:!tw-text-muted",
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index 573f240a263..425f70454b0 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -37,7 +37,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     // if it exists, the parent form control handles focus
     "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
     "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-500",
+    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
 
     "before:tw-content-['']",
     "before:tw-transition",