From ee32654723a02d1a842932f1a7a3b6ec6c95f8e0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 8 Nov 2023 12:21:17 -0600
Subject: [PATCH] sidebars: Express heading colors as CSS variables.

---
 web/styles/dark_theme.css |  5 -----
 web/styles/zulip.css      | 12 +++++++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 07ae1aae5b..531d4c1fba 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -445,11 +445,6 @@
         opacity: 0.5;
     }
 
-    .sidebar-title {
-        color: inherit;
-        opacity: 0.75;
-    }
-
     .rendered_markdown button,
     .new-style .button {
         background-color: hsl(0deg 0% 0% / 20%);
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index a0dd0ef9ed..09dd817292 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -254,6 +254,7 @@ body {
     --color-text-item: hsl(0deg 0% 40%);
     --color-text-personal-menu-no-status: hsl(0deg 0% 50%);
     --color-text-personal-menu-some-status: hsl(0deg 0% 40%);
+    --color-text-sidebar-heading: hsl(0deg 0% 43%);
 
     /* Icon colors */
     --color-icon-bot: hsl(180deg 8% 65% / 100%);
@@ -464,6 +465,15 @@ body {
     --color-text-item: hsl(0deg 0% 50%);
     --color-text-personal-menu-no-status: hsl(0deg 0% 100% 35%);
     --color-text-personal-menu-some-status: hsl(0deg 0% 100% 50%);
+    /* 75% opacity of --color-text-default against --color-background.
+       We use color-mix here to avoid defining a separate, compounding
+       `opacity` property, and also to preserve a record of the
+       relationship of the color of sidebar headings to other colors. */
+    --color-text-sidebar-heading: color-mix(
+        in srgb,
+        hsl(0deg 0% 75%) 75%,
+        hsl(0deg 0% 11%)
+    );
 
     /* Icon colors */
     --color-icon-bot: hsl(180deg 5% 50% / 100%);
@@ -1162,7 +1172,7 @@ strong {
 }
 
 .sidebar-title {
-    color: hsl(0deg 0% 43%);
+    color: var(--color-text-sidebar-heading);
     font-size: inherit;
     font-weight: normal;
     display: inline;