From b05f76c29e71f85e77231b0015ce80d5e60fe4e4 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 17 Jul 2023 15:35:29 -0500
Subject: [PATCH] icons: Implement monochrome colors and scaled active state.

---
 web/styles/dark_theme.css |  5 -----
 web/styles/zulip.css      | 30 +++++++++++++++++-------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index e47095275c..3f5fdbf463 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -1376,11 +1376,6 @@
         border-bottom: 1px solid hsl(0deg 0% 100%);
     }
 
-    .star:not(.empty-star),
-    .empty-star:hover {
-        color: hsl(126deg 66% 72% / 75%);
-    }
-
     #bots_lists_navbar .active a {
         color: hsl(0deg 0% 87%);
         background-color: var(--color-background);
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 71c7c62c7b..574c53d927 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -174,6 +174,8 @@ body {
 
     /* Icon colors */
     --color-icon-bot: hsl(180deg 8% 65% / 100%);
+    --color-message-action-visible: hsl(216deg 43% 20% / 50%);
+    --color-message-action-interactive: hsl(216deg 43% 20% / 100%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -231,6 +233,8 @@ body {
 
     /* Icon colors */
     --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%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 100% / 50%);
@@ -1170,6 +1174,7 @@ td.pointer {
 }
 
 .message_controls {
+    font-size: 16px;
     /* This is a bit tricky; we need to reserve space for the message
        controls even when the message isn't hovered, so that hover
        doesn't disturb the layout.  Usually that would be just
@@ -1183,11 +1188,19 @@ td.pointer {
         text-align: center;
         display: inline-block;
         position: relative;
-        color: hsl(0deg 0% 73%);
+        color: var(--color-message-action-visible);
 
         > i {
             vertical-align: middle;
         }
+
+        &:active {
+            scale: 0.92;
+        }
+
+        &:hover {
+            color: var(--color-message-action-interactive);
+        }
     }
 
     .actions_hover {
@@ -1204,12 +1217,6 @@ td.pointer {
         word-wrap: unset;
     }
 
-    > .reaction_button {
-        &:hover {
-            color: hsl(200deg 100% 40%);
-        }
-    }
-
     > .view_read_receipts {
         font-size: 14px;
         height: 16px;
@@ -1224,7 +1231,6 @@ td.pointer {
 
         &:hover {
             cursor: pointer;
-            color: hsl(200deg 100% 40%);
         }
     }
 
@@ -1265,10 +1271,9 @@ td.pointer {
 
     .star_container {
         &:not(.empty-star) {
-            color: hsl(106deg 77% 29%);
-
-            /* Opacity/visibility as though the message is hovered. */
-            opacity: 1 !important;
+            /* Color, opacity, and visibility, as though the message is hovered. */
+            color: var(--color-message-action-interactive);
+            opacity: 1;
             visibility: visible !important;
         }
     }
@@ -1277,7 +1282,6 @@ td.pointer {
 .star {
     &:hover {
         cursor: pointer;
-        color: hsl(153deg 80% 25%);
     }
 }