compose: Add muted, hover styles for recipient row.

web/styles/compose.css

@@ -1221,6 +1221,88 @@ textarea.new_message_textarea {
     width: 100%;
 }
 
+/* We want transitions to run only on user interactions with
+   the mouse, once the compose box is open. Any keyboard
+   interactions (e.g., Shift-Tabbing from the compose textarea
+   to the topic box) show instant changes, so we don't need to
+   accommodate them here. */
+#compose.compose-box-open:hover {
+    .muted-recipient-row {
+        #compose_select_recipient_widget,
+        #compose_recipient_box {
+            transition: 250ms ease;
+            transition-delay: 150ms;
+            transition-property: background-color, border-color;
+        }
+
+        &#compose-recipient {
+            .decorated-channel-name,
+            .zulip-icon-chevron-down,
+            .conversation-arrow,
+            #stream_message_recipient_topic {
+                transition: 250ms ease;
+                transition-delay: 150ms;
+                transition-property: opacity;
+            }
+        }
+    }
+}
+
+/* For now, we're restricting muted recipient-row styles
+   to stream topics only, as restyling DM pills will
+   will take additional work. */
+.muted-recipient-row:not(.compose-recipient-direct-selected) {
+    &#compose-recipient {
+        .decorated-channel-name,
+        .conversation-arrow,
+        #stream_message_recipient_topic {
+            opacity: 0.9;
+        }
+
+        .zulip-icon-chevron-down {
+            opacity: 0;
+        }
+    }
+
+    #compose_select_recipient_widget,
+    #compose_recipient_box {
+        background-color: transparent;
+        border-color: transparent;
+
+        /* We don't want to trigger the recipient-box-wide hover
+           effects when someone is just hovering the new-topic
+           button. */
+        &:not(:has(#recipient_box_clear_topic_button:hover)):hover {
+            background-color: var(
+                --color-compose-recipient-box-background-color
+            );
+            border-color: var(--color-compose-recipient-box-border-color);
+            opacity: 1;
+
+            .decorated-channel-name,
+            .zulip-icon-chevron-down,
+            .conversation-arrow,
+            #stream_message_recipient_topic {
+                opacity: 1;
+            }
+        }
+
+        #recipient_box_clear_topic_button:hover {
+            opacity: 1;
+        }
+    }
+
+    #compose_select_recipient_widget.widget-open {
+        background-color: var(--color-background-dropdown-widget-button);
+        border-color: var(--color-compose-recipient-box-border-color);
+
+        .decorated-channel-name,
+        .zulip-icon-chevron-down {
+            opacity: 1;
+        }
+    }
+}
+
 .compose-send-or-save-button {
     border-radius: 4px;
     border: 0;