From 7bce6361b3eff25be68f3fa023bf91c3b7d9da18 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Tue, 7 Oct 2025 04:11:44 +0000
Subject: [PATCH] css: Do not use non-color values inside light-dark().

Non-color values are not permitted inside light-dark(). This commit
fixes that for --color-invalid-input-box-shadow.
---
 web/styles/app_components.css | 2 +-
 web/styles/app_variables.css  | 5 +++--
 web/styles/compose.css        | 2 +-
 web/styles/input_pill.css     | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 81b0e52b43..c6c07868c4 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1396,7 +1396,7 @@ input.invalid-input {
     border-color: var(--color-invalid-input-border) !important;
 
     &:focus {
-        box-shadow: var(--color-invalid-input-box-shadow);
+        box-shadow: var(--invalid-input-box-shadow);
     }
 }
 
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 9a8f97414c..45f5fd879d 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1019,9 +1019,10 @@
         hsl(3deg 57% 33%),
         hsl(3deg 73% 74%)
     );
+    --invalid-input-box-shadow: 0 0 2px var(--color-invalid-input-box-shadow);
     --color-invalid-input-box-shadow: light-dark(
-        0 0 2px hsl(3deg 57% 33%),
-        0 0 2px hsl(3deg 73% 74%)
+        hsl(3deg 57% 33%),
+        hsl(3deg 73% 74%)
     );
     --color-background-white-box: light-dark(
         hsl(0deg 0% 100%),
diff --git a/web/styles/compose.css b/web/styles/compose.css
index a5ff31a59e..8f7412644d 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -345,7 +345,7 @@
     &:has(.new_message_textarea.invalid),
     &:has(.new_message_textarea.invalid:focus) {
         border-color: var(--color-invalid-input-border);
-        box-shadow: var(--color-invalid-input-box-shadow);
+        box-shadow: var(--invalid-input-box-shadow);
     }
 }
 
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 80e551bf8a..e236fb7e8a 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -232,7 +232,7 @@
 
     &.invalid {
         border-color: var(--color-invalid-input-border);
-        box-shadow: var(--color-invalid-input-box-shadow);
+        box-shadow: var(--invalid-input-box-shadow);
     }
 }