From a764c15bcbb13117aa0da8f8eb73b2880ed87bb0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 15 Sep 2023 11:20:00 -0500
Subject: [PATCH] icons: Express global filter icons as colors.

---
 web/styles/left_sidebar.css | 8 ++++----
 web/styles/zulip.css        | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index b54b117dee..3dfcdf1f72 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -58,6 +58,10 @@ $before_unread_count_padding: 3px;
     }
 }
 
+#global_filters .filter-icon i {
+    color: var(--color-global-filter-icon);
+}
+
 #stream_filters,
 #global_filters {
     margin-right: 12px;
@@ -542,10 +546,6 @@ li.active-sub-filter {
         margin-top: 1px !important;
     }
 
-    & i {
-        opacity: 0.7;
-    }
-
     .zulip-icon-inbox {
         font-size: 14px;
         top: 2px;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 5db7c42eed..ec274fa764 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -181,6 +181,9 @@ body {
     --color-message-action-visible: hsl(216deg 43% 20% / 50%);
     --color-message-action-interactive: hsl(216deg 43% 20% / 100%);
     --color-message-star-action: hsl(41deg 100% 47% / 100%);
+    /* The gray on the filter icons is the same as
+       what's set on ul.filters, but with 70% opacity. */
+    --color-global-filter-icon: hsl(0deg 0% 20% / 70%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -260,6 +263,7 @@ body {
     --color-icon-bot: hsl(180deg 5% 50% / 100%);
     --color-message-action-visible: hsl(217deg 41% 90% / 50%);
     --color-message-action-interactive: hsl(217deg 41% 90% / 100%);
+    --color-global-filter-icon: hsl(0deg 0% 100% / 56%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 100% / 50%);