From aa48a0e3ee0e33cc4ad115f90ec0ced0836fc432 Mon Sep 17 00:00:00 2001
From: sanchi-t <ssharmas10662@gmail.com>
Date: Sun, 15 Sep 2024 18:53:36 +0530
Subject: [PATCH] css: Refactor theme colors for `input_pill`.

This change moves the light and dark theme colors for
`input_pill` to CSS variables.
---
 web/styles/app_variables.css | 6 ++++++
 web/styles/dark_theme.css    | 4 ----
 web/styles/input_pill.css    | 4 +++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index f12345f245..25191a4c81 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -901,6 +901,9 @@
         4deg 75% 53% / 15%
     );
     --color-background-user-pill: hsla(0deg 0% 100% / 85%);
+    --color-background-compose-direct-recipient-pill-container: hsl(
+        0deg 0% 100%
+    );
 
     /* Inbox view constants - Values from Figma design */
     --height-inbox-search: 26px;
@@ -1423,6 +1426,9 @@
     --color-close-deactivated-user-pill: hsl(7deg 100% 74%);
     --color-background-exit-hover-deactivated-user-pill: hsl(0deg 0% 100% / 7%);
     --color-background-user-pill: hsl(0deg 0% 0% / 40%);
+    --color-background-compose-direct-recipient-pill-container: hsl(
+        0deg 0% 0% / 20%
+    );
 
     /* Inbox view */
     --color-background-inbox: var(--color-background);
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index c41aa2198a..114b57c7fe 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -386,10 +386,6 @@
         border-color: hsl(3deg 73% 74%);
     }
 
-    #compose-direct-recipient .pill-container {
-        background-color: hsl(0deg 0% 0% / 20%);
-    }
-
     #searchbox {
         /* Light theme shows hover mostly through box-shadow,
           and dark theme shows it mostly through changing color
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index ecfb66ba11..3900e52fee 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -181,7 +181,9 @@
 
 #compose-direct-recipient .pill-container {
     border: 1px solid hsl(0deg 0% 0% / 20%);
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(
+        --color-background-compose-direct-recipient-pill-container
+    );
 
     .input:first-child:empty::before {
         content: attr(data-no-recipients-text);