From bc2e086d0d084d3d59e27c310039270aa4a53d4d Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Wed, 16 Oct 2024 09:36:55 -0400
Subject: [PATCH] [CL-477] Remove focus styles for readonly input (#11510)

---
 apps/browser/src/popup/scss/misc.scss             |  2 +-
 .../src/form-field/form-field.component.html      | 15 ++++++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss
index 57bd3e010c8..f61d593c43f 100644
--- a/apps/browser/src/popup/scss/misc.scss
+++ b/apps/browser/src/popup/scss/misc.scss
@@ -306,7 +306,7 @@ input[type="password"]::-ms-reveal {
 // contrast against the background, so its inversion is also still readable)
 // and suppress user selection for most elements (to make it more app-like)
 
-::selection {
+:not(bit-form-field input)::selection {
   @include themify($themes) {
     color: themed("backgroundColor");
     background-color: themed("primaryAccentColor");
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index f19a7cf7664..d2771f42465 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -75,20 +75,15 @@
   <div class="tw-w-full tw-relative">
     <label
       class="tw-flex tw-gap-1 tw-text-sm tw-text-muted tw-mb-0 tw-max-w-full"
-      [ngClass]="
-        defaultContentIsFocused() ? 'tw-text-primary-600 tw-font-semibold' : 'tw-text-muted'
-      "
       [attr.for]="input.labelForId"
     >
       <ng-container *ngTemplateOutlet="labelContent"></ng-container>
     </label>
     <div
-      class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-pb-[2px] tw-border-0 tw-border-solid"
+      class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-border-0 tw-border-solid"
       [ngClass]="{
-        'tw-border-secondary-300/50 tw-border-b tw-pb-[3px]':
-          !disableReadOnlyBorder && !defaultContentIsFocused(),
-        'tw-border-transparent tw-pb-[4px]': disableReadOnlyBorder && !defaultContentIsFocused(),
-        'tw-border-b-2 tw-border-primary-600': defaultContentIsFocused(),
+        'tw-border-secondary-300/50 tw-border-b tw-pb-[2px]': !disableReadOnlyBorder,
+        'tw-border-transparent tw-pb-[3px]': disableReadOnlyBorder,
       }"
     >
       <div
@@ -98,7 +93,9 @@
       >
         <ng-container *ngTemplateOutlet="prefixContent"></ng-container>
       </div>
-      <div class="default-content tw-w-full tw-pb-0 tw-relative [&>*]:tw-p-0">
+      <div
+        class="default-content tw-w-full tw-pb-0 tw-relative [&>*]:tw-p-0 [&>*::selection]:tw-bg-primary-700 [&>*::selection]:tw-text-contrast"
+      >
         <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
       </div>
       <div