compose: Bring colors into variablized concord.

web/styles/app_variables.css

@@ -671,6 +671,20 @@
     --color-compose-send-control-button-focus-shadow: var(
         --color-compose-send-button-focus-shadow
     );
+    --color-compose-recipient-box-text-color: inherit;
+    --color-compose-recipient-box-background-color: hsl(0deg 0% 100%);
+    /* Because of how the background color is assigned on
+       recipient-row elements, we need here to mix down the
+       border color from the compose text area,
+       --color-message-content-container-border,
+       with the compose box's background color,
+       --color-compose-box-background. */
+    --color-compose-recipient-box-border-color: color-mix(
+        in srgb,
+        hsl(0deg 0% 0%) 10%,
+        hsl(232deg 20% 92%)
+    );
+    --color-compose-recipient-box-has-focus: hsl(0deg 0% 57%);
     --color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
     --color-compose-collapsed-reply-button-area-background-interactive: var(
         --color-compose-collapsed-reply-button-area-background
@@ -1192,6 +1206,10 @@
     --color-compose-send-control-button-focus-shadow: var(
         --color-compose-send-button-focus-shadow
     );
+    --color-compose-recipient-box-text-color: inherit;
+    --color-compose-recipient-box-background-color: hsl(0deg 0% 0% / 20%);
+    --color-compose-recipient-box-border-color: hsl(0deg 0% 0% / 80%);
+    --color-compose-recipient-box-has-focus: hsl(0deg 0% 100% / 27%);
     --color-compose-collapsed-reply-button-area-background: hsl(
         0deg 0% 0% / 20%
     );

web/styles/compose.css

@@ -904,16 +904,16 @@ textarea.new_message_textarea {
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: stretch;
     flex: 1 1 0;
-    border: 1px solid hsl(0deg 0% 0% / 20%);
+    border: 1px solid var(--color-compose-recipient-box-border-color);
     border-radius: 3px;
     transition: border-color 0.2s ease;
-    background: hsl(0deg 0% 100%);
+    background: var(--color-compose-recipient-box-background-color);
 
     /* Give the recipient box, a `<div>`, the
        correct styles when focus is in the
        #stream_message_recipient_topic `<input>` */
     &:focus-within {
-        border-color: hsl(0deg 0% 67%);
+        border-color: var(--color-compose-recipient-box-has-focus);
     }
 
     #stream_message_recipient_topic,
@@ -973,6 +973,11 @@ textarea.new_message_textarea {
 #compose_select_recipient_widget {
     width: auto;
     outline: none;
+    /* We override the component-level colors to
+       ensure concord with the topic box. */
+    color: var(--color-compose-recipient-box-text-color);
+    background-color: var(--color-compose-recipient-box-background-color);
+    border-color: var(--color-compose-recipient-box-border-color);
 
     &.dropdown-widget-button {
         padding: 0 6px;

web/styles/dark_theme.css

@@ -345,8 +345,7 @@
     #custom-expiration-time-input,
     #organization-permissions .dropdown-widget-button,
     #organization-settings .dropdown-widget-button,
-    #stream-advanced-configurations .dropdown-widget-button,
+    #stream-advanced-configurations .dropdown-widget-button {
-    #compose_recipient_box {
         background-color: hsl(0deg 0% 0% / 20%);
         border-color: hsl(0deg 0% 0% / 60%);
         color: inherit;

web/styles/input_pill.css

@@ -180,7 +180,7 @@
 }
 
 #compose-direct-recipient .pill-container {
-    border: 1px solid hsl(0deg 0% 0% / 20%);
+    border: 1px solid var(--color-compose-recipient-box-border-color);
     background-color: var(
         --color-background-compose-direct-recipient-pill-container
     );
@@ -194,6 +194,10 @@
         content: attr(data-some-recipients-text);
         opacity: 0.5;
     }
+
+    &:has(.input:focus) {
+        border-color: var(--color-compose-recipient-box-has-focus);
+    }
 }
 
 #invitee_emails_container .pill-container {