recipient_row: Use a dimmed stream color for background.

Following important changes are being made here:
* color_class lib is removed since it not used anywhere now.
* We don't need the `dark_background` class since the background
  color is already adjusted based on color scheme. So, all
  instances of it being used is removed.

web/src/drafts.js

@@ -370,6 +370,7 @@ export function format_draft(draft) {
             draft_id: draft.id,
             is_stream: true,
             stream_name,
+            recipient_bar_color: stream_color.get_recipient_bar_color(draft_stream_color),
             stream_privacy_icon_color:
                 stream_color.get_stream_privacy_icon_color(draft_stream_color),
             topic: draft_topic,

web/src/message_list_view.js

@@ -11,7 +11,6 @@ import render_single_message from "../templates/single_message.hbs";
 
 import * as activity from "./activity";
 import * as blueslip from "./blueslip";
-import * as color_class from "./color_class";
 import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
 import * as condense from "./condense";
@@ -174,9 +173,8 @@ function populate_group_from_message_container(group, message_container) {
     group.is_private = message_container.msg.is_private;
 
     if (group.is_stream) {
-        group.background_color = stream_data.get_color(message_container.msg.stream);
-        group.color_class = color_class.get_css_class(group.background_color);
         const color = stream_data.get_color(message_container.msg.stream);
+        group.recipient_bar_color = stream_color.get_recipient_bar_color(color);
         group.stream_privacy_icon_color = stream_color.get_stream_privacy_icon_color(color);
         group.invite_only = stream_data.is_invite_only_by_stream_name(message_container.msg.stream);
         group.is_web_public = stream_data.is_web_public(message_container.msg.stream_id);
@@ -1558,4 +1556,13 @@ export class MessageListView {
             }
         }
     }
+
+    update_recipient_bar_background_color() {
+        const $table = rows.get_table(this.table_name);
+        const $stream_headers = $table.find(".message_header_stream");
+        for (const stream_header of $stream_headers) {
+            const $stream_header = $(stream_header);
+            stream_color.update_stream_recipient_color($stream_header);
+        }
+    }
 }

web/src/message_lists.js

@@ -17,6 +17,12 @@ export function all_rendered_message_lists() {
     return rendered_message_lists;
 }
 
+export function update_recipient_bar_background_color() {
+    for (const msg_list of all_rendered_message_lists()) {
+        msg_list.view.update_recipient_bar_background_color();
+    }
+}
+
 export function initialize() {
     home = new message_list.MessageList({
         table_name: "zhome",

web/src/server_events_dispatch.js

@@ -689,6 +689,7 @@ export function dispatch_normal_event(event) {
                         realm_logo.render();
                     }
                     $("body").fadeIn(300);
+                    message_lists.update_recipient_bar_background_color();
                 }, 300);
             }
             if (event.property === "starred_message_counts") {

web/src/stream_bar.js

@@ -1,6 +1,5 @@
 import $ from "jquery";
 
-import * as color_class from "./color_class";
 import * as stream_data from "./stream_data";
 
 function update_compose_stream_icon(stream_name) {
@@ -34,8 +33,5 @@ export function decorate(stream_name, $element, is_compose) {
     if (is_compose) {
         update_compose_stream_icon(stream_name);
     }
-    $element
-        .css("background-color", color)
-        .removeClass("dark_background")
-        .addClass(color_class.get_css_class(color));
+    $element.css("background-color", color);
 }

web/src/stream_color.js

@@ -1,12 +1,33 @@
 import {colord, extend} from "colord";
+import lchPlugin from "colord/plugins/lch";
+import mixPlugin from "colord/plugins/mix";
 import $ from "jquery";
 
-import * as color_class from "./color_class";
 import {$t} from "./i18n";
+import * as message_lists from "./message_lists";
 import * as message_view_header from "./message_view_header";
+import * as overlays from "./overlays";
+import * as row from "./rows";
+import * as settings_data from "./settings_data";
+import * as stream_data from "./stream_data";
 import * as stream_settings_ui from "./stream_settings_ui";
 
-extend([lchPlugin]);
+extend([lchPlugin, mixPlugin]);
+
+export function update_stream_recipient_color($stream_header) {
+    if ($stream_header.length) {
+        const stream_id = Number.parseInt($($stream_header).attr("data-stream-id"), 10);
+        const stream_name = stream_data.maybe_get_stream_name(stream_id);
+        if (!stream_name) {
+            return;
+        }
+        const stream_color = stream_data.get_color(stream_name);
+        const recipient_bar_color = get_recipient_bar_color(stream_color);
+        $stream_header
+            .find(".message-header-contents")
+            .css("background-color", recipient_bar_color);
+    }
+}
 
 export function get_stream_privacy_icon_color(color) {
     // LCH stands for Lightness, Chroma, and Hue.
@@ -22,28 +43,23 @@ export function get_stream_privacy_icon_color(color) {
     return colord(color).toHex();
 }
 
+export function get_recipient_bar_color(color) {
+    // Mixes 50% of color to 40% of white (light theme) / black (dark theme).
+    const using_dark_theme = settings_data.using_dark_theme();
+    color = get_stream_privacy_icon_color(color);
+    return colord(using_dark_theme ? "#000000" : "#ffffff")
+        .mix(color, using_dark_theme ? 0.5 : 0.4)
+        .toHex();
+}
 
+function update_table_message_recipient_stream_color(table, stream_name, recipient_bar_color) {
     const $stream_labels = table.find(".stream_label");
-
     for (const label of $stream_labels) {
         const $label = $(label);
         if ($label.text().trim() === stream_name) {
-            const $messages = $label.closest(".recipient_row").children(".message_row");
-            $messages
-                .children(".messagebox")
-                .css(
-                    "box-shadow",
-                    "inset 2px 0px 0px 0px " + style + ", -1px 0px 0px 0px " + style,
-                );
-            $messages
-                .children(".date_row")
-                .css(
-                    "box-shadow",
-                    "inset 2px 0px 0px 0px " + style + ", -1px 0px 0px 0px " + style,
-                );
-            $label.css({background: style, "border-left-color": style});
-            $label.removeClass("dark_background");
-            $label.addClass(color_class.get_css_class(color));
+            $label
+                .closest(".message_header_stream .message-header-contents")
+                .css({background: recipient_bar_color});
         }
     }
 }
@@ -55,10 +71,20 @@ function update_stream_privacy_color(id, color) {
     $(`.stream-privacy-modified-color-${CSS.escape(id)}`).css("color", color);
 }
 
-function update_historical_message_color(stream_name, color) {
-    update_table_stream_color($(".focused_table"), stream_name, color);
-    if ($(".focused_table").attr("id") !== "#zhome") {
-        update_table_stream_color($("#zhome"), stream_name, color);
+function update_message_recipient_color(stream_name, color) {
+    const recipient_color = get_recipient_bar_color(color);
+    for (const msg_list of message_lists.all_rendered_message_lists()) {
+        const $table = row.get_table(msg_list.table_name);
+        update_table_message_recipient_stream_color($table, stream_name, recipient_color);
+    }
+
+    // Update color for drafts if open.
+    if (overlays.drafts_open()) {
+        update_table_message_recipient_stream_color(
+            $(".drafts-container"),
+            stream_name,
+            recipient_color,
+        );
     }
 }
 
@@ -107,7 +133,7 @@ export function update_stream_color(sub, color) {
         )}'] .large-icon`,
     ).css("color", color);
 
-    update_historical_message_color(sub.name, color);
+    update_message_recipient_color(sub.name, color);
     update_stream_privacy_color(stream_id, color);
     message_view_header.colorize_message_view_header();
 }

web/src/stream_list.js

@@ -8,7 +8,6 @@ import render_stream_subheader from "../templates/streams_subheader.hbs";
 import render_subscribe_to_more_streams from "../templates/subscribe_to_more_streams.hbs";
 
 import * as blueslip from "./blueslip";
-import * as color_class from "./color_class";
 import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
 import * as keydown_util from "./keydown_util";
@@ -325,7 +324,6 @@ function build_stream_sidebar_li(sub) {
         color: sub.color,
         pin_to_top: sub.pin_to_top,
     };
-    args.dark_background = color_class.get_css_class(args.color);
     const $list_item = $(render_stream_sidebar_row(args));
     return $list_item;
 }
@@ -385,12 +383,10 @@ export function redraw_stream_privacy(sub) {
     }
 
     const $div = $li.find(".stream-privacy");
-    const dark_background = color_class.get_css_class(sub.color);
 
     const args = {
         invite_only: sub.invite_only,
         is_web_public: sub.is_web_public,
-        dark_background,
     };
 
     const html = render_stream_privacy(args);

web/styles/dark_theme.css

@@ -315,12 +315,6 @@
         border-color: hsl(0deg 0% 0% / 20%);
     }
 
-    .dark .message_label_clickable.stream_label,
-    .dark .stream_label,
-    .stream_label {
-        color: hsl(212deg 28% 18%);
-    }
-
     .new-style label.checkbox input[type="checkbox"] ~ span {
         border-color: hsl(0deg 0% 100% / 40%);
     }
@@ -344,9 +338,6 @@
         color: inherit;
     }
 
-    .dark_background a,
-    a.dark_background:hover,
-    .dark_background,
     .message_reactions .message_reaction_count,
     .message_reactions .reaction_button i,
     .message_reactions:hover .message_reaction + .reaction_button {
@@ -372,13 +363,6 @@
         }
     }
 
-    /* do not turn the .message_header .stream_label text dark on hover because they're
-       on a dark background, and don't change the dark labels dark either. */
-    .message_header:not(.dark_background)
-        a.stream_label:not(.dark_background):hover {
-        color: hsl(212deg 28% 18%);
-    }
-
     .message_header {
         box-shadow: 0 -1px 0 0 hsl(212deg 28% 18%);
     }

web/styles/zulip.css

@@ -1456,18 +1456,6 @@ td.pointer {
     visibility: visible;
 }
 
-/* Brighten text because of the dark background */
-.dark_background a,
-.dark_background a:hover,
-a.dark_background:hover,
-.dark_background {
-    color: hsl(0deg 0% 100%) !important;
-}
-
-.dark_background a.message_label_clickable:hover {
-    color: hsl(200deg 99% 60%);
-}
-
 .small {
     font-size: 80%;
 }

web/templates/draft.hbs

@@ -2,14 +2,13 @@
     <div class="draft-info-box" tabindex="0">
         {{#if is_stream}}
         <div class="message_header message_header_stream">
-            <div class="message-header-contents">
+            <div class="message-header-contents" style="background: {{recipient_bar_color}};">
                 <div class="message_label_clickable stream_label">
                     <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
                         {{> stream_privacy}}
                     </span>
                     {{stream_name}}
                 </div>
-
                 <span class="stream_topic">
                     <div class="message_label_clickable narrows_by_topic">
                         {{topic}}
@@ -20,7 +19,7 @@
             </div>
         </div>
         {{else}}
-        <div class="message_header message_header_private_message dark_background">
+        <div class="message_header message_header_private_message">
             <div class="message-header-contents">
                 <div class="message_label_clickable stream_label">
                     {{t "You and {recipients}" }}

web/templates/recipient_row.hbs

@@ -1,9 +1,8 @@
 {{#if is_stream}}
-<div class="message_header message_header_stream right_part">
-    <div class="message-header-contents">
+<div class="message_header message_header_stream right_part" data-stream-id="{{stream_id}}">
+    <div class="message-header-contents" style="background: {{recipient_bar_color}};">
         {{! stream link }}
-        <a class="message_label_clickable narrows_by_recipient stream_label {{color_class}}"
-          style="background: {{background_color}}; border-left-color: {{background_color}};"
+        <a class="message_label_clickable narrows_by_recipient stream_label"
           href="{{stream_url}}"
           title="{{t 'Narrow to stream "{display_recipient}"' }}">
             <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
@@ -75,7 +74,7 @@
     </div>
 </div>
 {{else}}
-<div class="message_header message_header_private_message dark_background">
+<div class="message_header message_header_private_message">
     <div class="message-header-contents">
         <a class="message_label_clickable narrows_by_recipient stream_label"
           href="{{pm_with_url}}"

web/tests/dispatch.test.js

@@ -80,6 +80,7 @@ mock_esm("../src/giphy");
 
 const electron_bridge = set_global("electron_bridge", {});
 
+message_lists.update_recipient_bar_background_color = noop;
 message_lists.current = {
     rerender_view: noop,
     data: {