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

css: Refactor theme colors for widgets. 

This change moves the light and dark theme colors for todo
and poll widget to CSS variables.
This commit is contained in:
sanchi-t 2024-09-15 19:12:53 +05:30
parent 63a7c9061b
commit 4618252f24
3 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/styles/app_variables.css
View File

@ -689,6 +689,17 @@
--color-text-url-hover: hsl(200deg 100% 25%);
--color-text-settings-field-hint: hsl(0deg 0% 57%);
/* Widgets colors */
--color-todo-checkbox-border: hsl(156deg 28% 70%);
--color-todo-checkbox-border-hover: hsl(156deg 30% 50%);
--color-todo-checkbox-background-checked: hsl(156deg 41% 40%);
--color-todo-checkbox-outline-focus: hsl(0deg 0% 100% / 0%);
--color-poll-vote-text: hsl(156deg 41% 40%);
--color-poll-vote-border: hsl(156deg 28% 70%);
--color-poll-vote-border-hover: hsl(156deg 30% 50%);
--color-poll-vote-background-focus: hsl(156deg 41% 90%);
--color-poll-names-text: hsl(0deg 0% 45%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
--color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@ -1140,6 +1151,17 @@
--color-text-url-hover: hsl(200deg 79% 66%);
--color-text-settings-field-hint: hsl(0deg 0% 52%);
/* Widgets colors */
--color-todo-checkbox-border: hsl(185deg 40% 45%);
--color-todo-checkbox-border-hover: hsl(185deg 40% 35%);
--color-todo-checkbox-background-checked: hsl(185deg 40% 45%);
--color-todo-checkbox-outline-focus: hsl(0deg 0% 100% / 0%);
--color-poll-vote-text: hsl(185deg 35% 65%);
--color-poll-vote-border: hsl(185deg 35% 35%);
--color-poll-vote-border-hover: hsl(185deg 40% 40%);
--color-poll-vote-background-focus: hsl(185deg 40% 35%);
--color-poll-names-text: hsl(236deg 15% 70%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
--color-border-rendered-markdown-table: hsl(0deg 0% 33%);

19
web/styles/dark_theme.css
View File

@ -923,25 +923,16 @@
/* Widgets: Poll */
.poll-widget {
.poll-vote {
color: hsl(185deg 35% 65%);
border-color: hsl(185deg 35% 35%);
&:hover {
color: hsl(185deg 50% 70%);
border-color: hsl(185deg 40% 40%);
background-color: hsl(185deg 20% 20%);
}
&:focus {
color: hsl(185deg 50% 65%);
border-color: hsl(185deg 40% 50%);
background-color: hsl(185deg 40% 35%);
}
}
.poll-names {
color: hsl(236deg 15% 70%);
}
}
/* Widgets: Todo */
@ -949,21 +940,11 @@
& label.checkbox {
& input[type="checkbox"] {
~ .custom-checkbox {
border-color: hsl(185deg 40% 45%);
opacity: 0.7;
}
&:hover ~ .custom-checkbox {
background-color: hsl(185deg 20% 20%);
border-color: hsl(185deg 40% 35%);
}
&:checked ~ .custom-checkbox {
background-color: hsl(185deg 40% 45%);
}
&:focus ~ .custom-checkbox {
outline-color: hsl(0deg 0% 100% / 0%);
}
}
}

18
web/styles/widgets.css
View File

@ -70,7 +70,7 @@
line-height: 0.8;
font-size: 1.3rem;
text-align: center;
border: 2px solid hsl(156deg 28% 70%);
border: 2px solid var(--color-todo-checkbox-border);
border-radius: 4px;
filter: brightness(1);
@ -83,7 +83,7 @@
background-size: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: hsl(156deg 41% 40%);
background-color: var(--color-todo-checkbox-background-checked);
border: 2px solid hsl(156deg 41% 40%);
}
@ -93,11 +93,11 @@
}
&:hover ~ .custom-checkbox {
border-color: hsl(156deg 30% 50%);
border-color: var(--color-todo-checkbox-border-hover);
}
&:focus ~ .custom-checkbox {
outline-color: hsl(0deg 0% 100% / 0%);
outline-color: var(--color-todo-checkbox-outline-focus);
}
}
}
@ -164,8 +164,8 @@
}
.poll-vote {
color: hsl(156deg 41% 40%);
border-color: hsl(156deg 28% 70%);
color: var(--color-poll-vote-text);
border-color: var(--color-poll-vote-border);
border-style: solid;
font-weight: 600;
border-radius: 3px;
@ -175,17 +175,17 @@
background-color: var(--color-background-widget-button);
&:hover {
border-color: hsl(156deg 30% 50%);
border-color: var(--color-poll-vote-border-hover);
}
&:focus {
outline: 0;
background-color: hsl(156deg 41% 90%);
background-color: var(--color-poll-vote-background-focus);
}
}
.poll-names {
color: hsl(0deg 0% 45%);
color: var(--color-poll-names-text);
/* Aim for 50% of the flexbox for voting names,
but also shrink modestly (.5) adjacent a long
option. */