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 `input_pill`. 

This change moves the light and dark theme colors for
`input_pill` to CSS variables.
This commit is contained in:
sanchi-t 2024-09-15 18:53:36 +05:30 committed by Tim Abbott
parent 9b5accdb43
commit aa48a0e3ee
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/app_variables.css
View File

@ -901,6 +901,9 @@
4deg 75% 53% / 15% 4deg 75% 53% / 15%
); );
--color-background-user-pill: hsla(0deg 0% 100% / 85%); --color-background-user-pill: hsla(0deg 0% 100% / 85%);
--color-background-compose-direct-recipient-pill-container: hsl(
0deg 0% 100%
);
/* Inbox view constants - Values from Figma design */ /* Inbox view constants - Values from Figma design */
--height-inbox-search: 26px; --height-inbox-search: 26px;
@ -1423,6 +1426,9 @@
--color-close-deactivated-user-pill: hsl(7deg 100% 74%); --color-close-deactivated-user-pill: hsl(7deg 100% 74%);
--color-background-exit-hover-deactivated-user-pill: hsl(0deg 0% 100% / 7%); --color-background-exit-hover-deactivated-user-pill: hsl(0deg 0% 100% / 7%);
--color-background-user-pill: hsl(0deg 0% 0% / 40%); --color-background-user-pill: hsl(0deg 0% 0% / 40%);
--color-background-compose-direct-recipient-pill-container: hsl(
0deg 0% 0% / 20%
);
/* Inbox view */ /* Inbox view */
--color-background-inbox: var(--color-background); --color-background-inbox: var(--color-background);

4
web/styles/dark_theme.css
View File

@ -386,10 +386,6 @@
border-color: hsl(3deg 73% 74%); border-color: hsl(3deg 73% 74%);
} }
#compose-direct-recipient .pill-container {
background-color: hsl(0deg 0% 0% / 20%);
}
#searchbox { #searchbox {
/* Light theme shows hover mostly through box-shadow, /* Light theme shows hover mostly through box-shadow,
and dark theme shows it mostly through changing color and dark theme shows it mostly through changing color

4
web/styles/input_pill.css
View File

@ -181,7 +181,9 @@
#compose-direct-recipient .pill-container { #compose-direct-recipient .pill-container {
border: 1px solid hsl(0deg 0% 0% / 20%); border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%); background-color: var(
--color-background-compose-direct-recipient-pill-container
);
.input:first-child:empty::before { .input:first-child:empty::before {
content: attr(data-no-recipients-text); content: attr(data-no-recipients-text);