From cd0ae56ad4235cc9a4c95c628645c950ef5c93e0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 17 Aug 2023 14:34:27 -0500
Subject: [PATCH] icons: Implement new gold star color and states.

This not only introduces a new gold color that works across light
and dark modes, but it also separates out the hover and focus-
visible styles for stars--regardless of whether a star has been
filled or not.
---
 web/styles/zulip.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 9fcb910766..aae8a899e8 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -178,6 +178,7 @@ body {
     --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%);
+    --color-message-star-action: hsl(41deg 100% 47% / 100%);
 
     /* Message feed loading indicator colors */
     --color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -1222,6 +1223,12 @@ td.pointer {
                 outline: 0;
                 color: var(--color-message-action-interactive);
             }
+
+            /* Separate hover colors for stars */
+            &.star:hover,
+            &.star:focus-visible {
+                color: var(--color-message-star-action);
+            }
         }
 
         .zulip-icon-more-vertical {
@@ -1304,7 +1311,7 @@ td.pointer {
     .star_container {
         &:not(.empty-star) {
             /* Color, opacity, and visibility, as though the message is hovered. */
-            color: var(--color-message-action-interactive);
+            color: var(--color-message-star-action);
             opacity: 1;
             visibility: visible !important;
         }