paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-11 17:36:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

app_variables: Rename “color” variables that are actually gradients.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2025-02-19 10:00:36 -08:00
committed by Anders Kaseorg
parent 320c7a04ba
commit 3ead4c06f0
3 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/styles/app_variables.css
View File

@@ -594,7 +594,7 @@
--size-color-swatch: 1em; --size-color-swatch: 1em;
--grid-gap-color-swatch: 1em; --grid-gap-color-swatch: 1em;
--padding-color-swatch-list: 0.6666em; --padding-color-swatch-list: 0.6666em;
--color-background-custom-swatch-gradient: conic-gradient( --gradient-custom-swatch: conic-gradient(
from 0deg at 50% 50% in oklch longer hue, from 0deg at 50% 50% in oklch longer hue,
oklch(70% 0.3 0deg) 0%, oklch(70% 0.3 0deg) 0%,
oklch(70% 0.3 0deg) 100% oklch(70% 0.3 0deg) 100%
@@ -1176,36 +1176,36 @@
hsl(0deg 0% 67%) hsl(0deg 0% 67%)
); );
--color-compose-scroll-icon: hsl(0deg 0% 50%); --color-compose-scroll-icon: hsl(0deg 0% 50%);
--color-compose-background-scroll-backward: linear-gradient( --gradient-compose-scroll-backward: linear-gradient(
90deg, 90deg,
light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%, light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%,
light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%, light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
transparent 100% transparent 100%
); );
--color-compose-background-scroll-backward-hover: linear-gradient( --gradient-compose-scroll-backward-hover: linear-gradient(
90deg, 90deg,
light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%, light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%,
light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%, light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
transparent 100% transparent 100%
); );
--color-compose-background-scroll-backward-active: linear-gradient( --gradient-compose-scroll-backward-active: linear-gradient(
90deg, 90deg,
light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%, light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%,
transparent 100% transparent 100%
); );
--color-compose-background-scroll-forward: linear-gradient( --gradient-compose-scroll-forward: linear-gradient(
90deg, 90deg,
transparent 0%, transparent 0%,
light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%, light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65% light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65%
); );
--color-compose-background-scroll-forward-hover: linear-gradient( --gradient-compose-scroll-forward-hover: linear-gradient(
90deg, 90deg,
transparent 0%, transparent 0%,
light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%, light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65% light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65%
); );
--color-compose-background-scroll-forward-active: linear-gradient( --gradient-compose-scroll-forward-active: linear-gradient(
90deg, 90deg,
transparent 0%, transparent 0%,
light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55% light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55%

2
web/styles/color_picker.css
View File

@@ -42,7 +42,7 @@
.custom-color-swatch-icon { .custom-color-swatch-icon {
border-radius: 50%; border-radius: 50%;
background: var(--color-background-custom-swatch-gradient); background: var(--gradient-custom-swatch);
} }
.color-picker-popover .message-header-contents { .color-picker-popover .message-header-contents {

12
web/styles/compose.css
View File

@@ -534,14 +534,14 @@
grid-area: scroller-backward; grid-area: scroller-backward;
justify-content: flex-start; justify-content: flex-start;
border-radius: 0 0 0 3px; border-radius: 0 0 0 3px;
background: var(--color-compose-background-scroll-backward); background: var(--gradient-compose-scroll-backward);
&:hover { &:hover {
background: var(--color-compose-background-scroll-backward-hover); background: var(--gradient-compose-scroll-backward-hover);
} }
&:active { &:active {
background: var(--color-compose-background-scroll-backward-active); background: var(--gradient-compose-scroll-backward-active);
.scroller-backward-icon { .scroller-backward-icon {
/* Subtly shift arrow in scroll direction. */ /* Subtly shift arrow in scroll direction. */
@@ -554,14 +554,14 @@
grid-area: scroller-forward; grid-area: scroller-forward;
justify-content: flex-end; justify-content: flex-end;
border-radius: 0 0 3px; border-radius: 0 0 3px;
background: var(--color-compose-background-scroll-forward); background: var(--gradient-compose-scroll-forward);
&:hover { &:hover {
background: var(--color-compose-background-scroll-forward-hover); background: var(--gradient-compose-scroll-forward-hover);
} }
&:active { &:active {
background: var(--color-compose-background-scroll-forward-active); background: var(--gradient-compose-scroll-forward-active);
.scroller-forward-icon { .scroller-forward-icon {
/* Subtly shift arrow in scroll direction. */ /* Subtly shift arrow in scroll direction. */