From b20beda905b3eee1dfa205d9517c811f83deaba2 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 5 Mar 2024 14:22:05 -0600
Subject: [PATCH] emoji_picker: Express colors as CSS variables.

This also adds a previously missing dark-mode background color for
reacted emoji's :focus state in the picker.
---
 web/styles/app_variables.css | 22 ++++++++++++++++++++++
 web/styles/dark_theme.css    | 25 -------------------------
 web/styles/reactions.css     | 28 ++++++++++++++++++++--------
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index af8409e059..cea821ec91 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -426,6 +426,17 @@
     /* Don't define light theme colors for modal here
        since the modal is also used on billing pages and
        this file is not imported on billing pages. */
+
+    /* Emoji-picker colors */
+    --color-background-emoji-picker-popover: hsl(0deg 0% 93%);
+    --color-background-emoji-picker-popover-tab-item-active: hsl(
+        0deg 0% 100% / 20%
+    );
+    --color-background-emoji-picker-emoji-focus: hsl(0deg 0% 93%);
+    --color-box-shadow-emoji-picker-emoji-focus: transparent;
+    --color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%);
+    --color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%);
+    --color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
 }
 
 %dark-theme {
@@ -704,6 +715,17 @@
     --color-exit-button-border: hsl(0deg 0% 0% / 60%);
     --color-exit-button-background: hsl(211deg 29% 14%);
     --color-exit-button-background-interactive: hsl(211deg 29% 17%);
+
+    /* Emoji-picker colors */
+    --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
+    --color-background-emoji-picker-popover-tab-item-active: hsl(
+        0deg 0% 0% / 50%
+    );
+    --color-background-emoji-picker-emoji-focus: hsl(212deg 28% 8% / 75%);
+    --color-box-shadow-emoji-picker-emoji-focus: hsl(0deg 0% 98%);
+    --color-background-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 50%);
+    --color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%);
+    --color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%);
 }
 
 @media screen {
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 3a92645f71..21e169764c 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -520,31 +520,6 @@
         border-color: hsl(0deg 0% 0% / 60%);
     }
 
-    .emoji-picker-popover .emoji-showcase-container,
-    .emoji-picker-popover .emoji-popover .emoji-popover-category-tabs,
-    .emoji-picker-popover .emoji-popover .emoji-popover-top {
-        background-color: hsl(0deg 0% 0% / 20%);
-    }
-
-    .emoji-picker-popover
-        .emoji-popover
-        .emoji-popover-category-tabs
-        .emoji-popover-tab-item.active {
-        background-color: hsl(0deg 0% 0% / 50%);
-    }
-
-    .emoji-popover-emoji {
-        &:focus {
-            background-color: hsl(212deg 28% 8% / 75%);
-            box-shadow: 0 0 1px hsl(0deg 0% 98%);
-        }
-
-        &.reacted {
-            background-color: hsl(0deg 0% 0% / 50%);
-            border-color: hsl(0deg 0% 0% / 90%);
-        }
-    }
-
     .new-style .tab-switcher .ind-tab.selected,
     div.message_content thead,
     .table-striped thead th {
diff --git a/web/styles/reactions.css b/web/styles/reactions.css
index e143f2eda7..14195a01fd 100644
--- a/web/styles/reactions.css
+++ b/web/styles/reactions.css
@@ -191,7 +191,7 @@
             padding: 8px 10px;
             margin-bottom: 0;
 
-            background-color: hsl(0deg 0% 93%);
+            background-color: var(--color-background-emoji-picker-popover);
 
             border-radius: 3px 3px 0 0;
 
@@ -214,7 +214,7 @@
         .emoji-popover-category-tabs {
             /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
             display: flex;
-            background-color: hsl(0deg 0% 93%);
+            background-color: var(--color-background-emoji-picker-popover);
             width: 100%;
             box-sizing: border-box;
             overflow: hidden;
@@ -231,7 +231,9 @@
                 flex-grow: 1;
 
                 &.active {
-                    background-color: hsl(0deg 0% 100% / 20%);
+                    background-color: var(
+                        --color-background-emoji-picker-popover-tab-item-active
+                    );
                 }
             }
         }
@@ -265,17 +267,27 @@
             width: 25px;
 
             &:focus {
-                background-color: hsl(0deg 0% 93%);
+                background-color: var(
+                    --color-background-emoji-picker-emoji-focus
+                );
+                /* Only dark mode takes a box shadow on
+                   the emoji-picker's focused emoji. */
+                box-shadow: 0 0 1px
+                    var(--color-box-shadow-emoji-picker-emoji-focus);
                 outline: none;
             }
 
             &.reacted {
-                background-color: hsl(195deg 50% 95%);
-                border-color: hsl(195deg 52% 79%);
+                background-color: var(
+                    --color-background-emoji-picker-emoji-reacted
+                );
+                border-color: var(--color-border-emoji-picker-emoji-reacted);
             }
 
             &.reacted:focus {
-                background-color: hsl(195deg 55% 88%);
+                background-color: var(
+                    --color-background-emoji-picker-emoji-reacted-focus
+                );
             }
 
             &.hide {
@@ -300,7 +312,7 @@
 
     .emoji-showcase-container {
         position: relative;
-        background-color: hsl(0deg 0% 93%);
+        background-color: var(--color-background-emoji-picker-popover);
         min-height: 44px;
         width: 250px;
         border-radius: 0 0 3px 3px;