Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Karl Stolley 2024-09-16 11:14:59 -05:00 committed by Tim Abbott
parent 8741c9e43f
commit da91ebc592
4 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/images/checkbox-dark-mode.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

BIN
web/images/checkbox.svg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 700 B

8
web/styles/app_variables.css
View File

@ -929,8 +929,10 @@
--color-border-zulip-button: hsl(0deg 0% 80%); --color-border-zulip-button: hsl(0deg 0% 80%);
--color-border-zulip-button-interactive: hsl(0deg 0% 60%); --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%); --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 */ /* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 93%); --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: hsl(0deg 0% 0% / 60%);
--color-border-zulip-button-interactive: var(--color-border-zulip-button); --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%); --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 */ /* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%); --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);

9
web/styles/components.css
View File

@ -31,15 +31,18 @@
the light-mode color value here as a fallback. */ the light-mode color value here as a fallback. */
border: 1px solid border: 1px solid
var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%)); var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
border-radius: 4px; border-radius: 4px;
filter: brightness(0.8);
cursor: pointer; cursor: pointer;
} }
&:checked ~ .rendered-checkbox { &: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-size: 85%;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;