From de6e0c8c3df29fe4ba9788a35103377aa21017bd Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 11 May 2023 11:23:42 +0100
Subject: [PATCH] [PM-1643] Tweak search box styling (#4788)

* Set explicit selection foreground/background for header search input

* Modify solarized dark colours for search
---
 apps/browser/src/popup/scss/base.scss      | 8 ++++++++
 apps/browser/src/popup/scss/variables.scss | 6 +++---
 apps/desktop/src/scss/header.scss          | 8 ++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 42b8b1c75ed..c6afee2ce85 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -289,6 +289,14 @@ header {
         color: themed("headerInputColor");
       }
 
+      &::selection {
+        @include themify($themes) {
+          // explicitly set text selection to invert foreground/background
+          background-color: themed("headerInputColor");
+          color: themed("headerInputBackgroundColor");
+        }
+      }
+
       &:focus {
         border-radius: $border-radius;
         outline: none;
diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss
index f2ad42a8cb7..05843a9b351 100644
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -266,10 +266,10 @@ $themes: (
     headerBackgroundColor: $solarizedDarkBase02,
     headerBackgroundHoverColor: $solarizedDarkBase01,
     headerBorderColor: $solarizedDarkBase03,
-    headerInputBackgroundColor: $solarizedDarkBase2,
+    headerInputBackgroundColor: darken($solarizedDarkBase0, 5%),
     headerInputBackgroundFocusColor: $solarizedDarkBase1,
-    headerInputColor: $solarizedDarkBase01,
-    headerInputPlaceholderColor: $solarizedDarkBase00,
+    headerInputColor: $solarizedDarkBase02,
+    headerInputPlaceholderColor: lighten($solarizedDarkBase02, 5%),
     listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
     disabledIconColor: $solarizedDarkBase0,
     disabledBoxOpacity: 0.5,
diff --git a/apps/desktop/src/scss/header.scss b/apps/desktop/src/scss/header.scss
index cf8047efa66..83eb67d014d 100644
--- a/apps/desktop/src/scss/header.scss
+++ b/apps/desktop/src/scss/header.scss
@@ -73,6 +73,14 @@
         color: themed("headerInputColor");
       }
 
+      &::selection {
+        @include themify($themes) {
+          // explicitly set text selection to invert foreground/background
+          background-color: themed("headerInputColor");
+          color: themed("headerInputBackgroundColor");
+        }
+      }
+
       &:focus {
         border-radius: $border-radius;
         outline: none;