From da91ebc592eac0c853c38359f4a4cf5b6907cf41 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 16 Sep 2024 11:14:59 -0500
Subject: [PATCH] checkboxes: Render border-color-matched SVGs in light and
 dark modes.

This obviates the need for the buggy use of a brightness filter,
which causes rendering problems on iOS devices and possibly others.
---
 web/images/checkbox-dark-mode.svg | Bin 0 -> 701 bytes
 web/images/checkbox.svg           | Bin 677 -> 700 bytes
 web/styles/app_variables.css      |   8 ++++++--
 web/styles/components.css         |   9 ++++++---
 4 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 web/images/checkbox-dark-mode.svg

diff --git a/web/images/checkbox-dark-mode.svg b/web/images/checkbox-dark-mode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40494abb4590e0182b1d1f4d5e82e32b38963c03
GIT binary patch
literal 701
zcmZuv&5qk35WeRr5WV6t0}M7%oI`s}pP}-4S=(CIiEKB{_USv&v{I#7$S}<JGXtE~
zdoLc}r+IDUux+<vS?>D|yM^o0mqu${GD7}_93Rs-zyA-2A%rq#rMSms9j|jE5m1Wp
zwUL+hBQD=Kcr;Sq9#VWf=Y4$LhDHXTHitO&!}ce-k8%HeWr9JWMMXTMh;#cg#p0#y
z-uvbHV`l9+?wr>mcpkaV<9chm*vQ)w*SOrHJReT|`5?sU)^3A%8>gv}pWgB(b68xN
zF>a|Ua9RqM{pteL&M9AmHPjUd4!zQafy&i|1|nBjsE89p)x}gm#wu3>225zJZT_1K
zAm&-?p6kRDLaa%}WW}J83}wYGkuj4|C0Y_<p!#cPR<43nqGR5*nQkX^ppmuGR9$KV
z=oA5I$8Md5PzRQBzGhi(L#oM<a@<*}g4fBKoYI`v*}$UVbs+8>f;OE2XB?Y(n~ZhE
z<Y3c=vq4p0JzmIxA?1nPk}Dro9SkEZ`ec#?(Hm~H4wU*s_k}cIm5&-paiH;e?&_ag
R_$f=i%98K$lpf{z@C&-#tH1yN

literal 0
HcmV?d00001

diff --git a/web/images/checkbox.svg b/web/images/checkbox.svg
index 006c527a46aa71e268d4df89109dfdfe4f0d1355..6f17bc04452f6814f210908d700edcc69b2be073 100644
GIT binary patch
delta 37
pcmZ3=x`%bb4=DpMP*O<C%*oNsFGx(zEUC0rGSD+K*!X)DBLM2j47UIP

delta 15
WcmdnPx|DUo4`xeC%gsWJs~7<-y#*5h

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 8895022ca6..dcd00b7062 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -929,8 +929,10 @@
     --color-border-zulip-button: hsl(0deg 0% 80%);
     --color-border-zulip-button-interactive: hsl(0deg 0% 60%);
 
-    /* Zulip-style checkbox colors. */
+    /* Zulip-style checkbox values. */
     --color-border-rendered-checkbox: hsl(0deg 0% 0% / 60%);
+    /* The SVG must be adjusted when changing the border color above. */
+    --svg-url-rendered-checkbox: url("../images/checkbox.svg");
 
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 93%);
@@ -1357,8 +1359,10 @@
     --color-border-zulip-button: hsl(0deg 0% 0% / 60%);
     --color-border-zulip-button-interactive: var(--color-border-zulip-button);
 
-    /* Zulip-style checkbox colors. */
+    /* Zulip-style checkbox values. */
     --color-border-rendered-checkbox: hsl(0deg 0% 100% / 40%);
+    /* The SVG must be adjusted when changing the border color above. */
+    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");
 
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
diff --git a/web/styles/components.css b/web/styles/components.css
index ef45040e9f..57092c26f7 100644
--- a/web/styles/components.css
+++ b/web/styles/components.css
@@ -31,15 +31,18 @@
                the light-mode color value here as a fallback. */
             border: 1px solid
                 var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
-
             border-radius: 4px;
-            filter: brightness(0.8);
 
             cursor: pointer;
         }
 
         &:checked ~ .rendered-checkbox {
-            background-image: url("../images/checkbox.svg");
+            /* As with the border color above, we duplicate
+               the light-mode SVG URL value here as a fallback. */
+            background-image: var(
+                --svg-url-rendered-checkbox,
+                url("../images/checkbox.svg")
+            );
             background-size: 85%;
             background-position: 50% 50%;
             background-repeat: no-repeat;