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

@@ -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);

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

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);