From c2b1c2ca5a5407ca8ca0fc2815b1ef171390c94c Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 7 Apr 2025 15:40:31 -0500
Subject: [PATCH] dark_theme: Clean up success-style main-view banner.

---
 web/styles/app_variables.css | 38 ++++++++++++++++++++++++++++++++++++
 web/styles/compose.css       | 26 +++++++++++++++---------
 web/styles/dark_theme.css    | 31 -----------------------------
 3 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 4de9ed8747..6c6285f436 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -2577,6 +2577,44 @@
         hsl(0deg 52% 18%)
     );
 
+    /* .main-view-banner colors */
+    --color-success-main-view-banner: light-dark(
+        hsl(147deg 57% 25%),
+        hsl(147deg 51% 80%)
+    );
+    --color-background-success-main-view-banner: light-dark(
+        hsl(147deg 43% 92%),
+        hsl(147deg 100% 8%)
+    );
+    --color-border-success-main-view-banner: light-dark(
+        hsl(147deg 57% 25% / 40%),
+        hsl(149deg 48% 52% / 40%)
+    );
+    --color-success-main-view-banner-close-button: light-dark(
+        hsl(147deg 57% 25% / 50%),
+        hsl(147deg 51% 55% / 50%)
+    );
+    --color-success-main-view-banner-close-button-hover: light-dark(
+        hsl(147deg 57% 25%),
+        hsl(147deg 51% 55%)
+    );
+    --color-success-main-view-banner-close-button-active: light-dark(
+        hsl(147deg 57% 25% / 75%),
+        hsl(147deg 51% 55% / 75%)
+    );
+    --color-background-success-main-view-banner-action-button: light-dark(
+        hsl(147deg 57% 25% / 10%),
+        hsl(147deg 51% 55% / 10%)
+    );
+    --color-background-success-main-view-banner-action-button-hover: light-dark(
+        hsl(147deg 57% 25% / 12%),
+        hsl(147deg 51% 55% / 15%)
+    );
+    --color-background-success-main-view-banner-action-button-active: light-dark(
+        hsl(147deg 57% 25% / 15%),
+        hsl(147deg 51% 55% / 20%)
+    );
+
     /* Info density update UI */
     --color-info-density-control-border: light-dark(
         hsl(0deg 0% 0% / 20%),
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 9658ec7b44..6dc9960740 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -834,32 +834,40 @@
     }
 
     &.success {
-        background-color: hsl(147deg 43% 92%);
-        border: 1px solid hsl(147deg 57% 25% / 40%);
-        color: hsl(147deg 57% 25%);
+        background-color: var(--color-background-success-main-view-banner);
+        border: 1px solid var(--color-border-success-main-view-banner);
+        color: var(--color-success-main-view-banner);
 
         .main-view-banner-close-button {
-            color: hsl(147deg 57% 25% / 50%);
+            color: var(--color-success-main-view-banner-close-button);
 
             &:hover {
-                color: hsl(147deg 57% 25%);
+                color: var(--color-success-main-view-banner-close-button-hover);
             }
 
             &:active {
-                color: hsl(147deg 57% 25% / 75%);
+                color: var(
+                    --color-success-main-view-banner-close-button-active
+                );
             }
         }
 
         .main-view-banner-action-button {
-            background-color: hsl(147deg 57% 25% / 10%);
+            background-color: var(
+                --color-background-success-main-view-banner-action-button
+            );
             color: inherit;
 
             &:hover {
-                background-color: hsl(147deg 57% 25% / 12%);
+                background-color: var(
+                    --color-background-success-main-view-banner-action-button-hover
+                );
             }
 
             &:active {
-                background-color: hsl(147deg 57% 25% / 15%);
+                background-color: var(
+                    --color-background-success-main-view-banner-action-button-active
+                );
             }
         }
     }
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 56f1892be9..1f0ba5c0f0 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -86,37 +86,6 @@
             color: hsl(200deg 100% 50%);
         }
 
-        &.success {
-            background-color: hsl(147deg 100% 8%);
-            border-color: hsl(149deg 48% 52% / 40%);
-            color: hsl(147deg 51% 80%);
-
-            .main-view-banner-close-button {
-                color: hsl(147deg 51% 55% / 50%);
-
-                &:hover {
-                    color: hsl(147deg 51% 55%);
-                }
-
-                &:active {
-                    color: hsl(147deg 51% 55% / 75%);
-                }
-            }
-
-            .main-view-banner-action-button {
-                background-color: hsl(147deg 51% 55% / 10%);
-                color: inherit;
-
-                &:hover {
-                    background-color: hsl(147deg 51% 55% / 15%);
-                }
-
-                &:active {
-                    background-color: hsl(147deg 51% 55% / 20%);
-                }
-            }
-        }
-
         &.warning,
         &.warning-style {
             background-color: hsl(53deg 100% 11%);