paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 22:43:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

input_pill: Move input pill styles to app_variables.css.

Browse Source 
This prep commit consolidates the input pill styles into
`app_variables.css` and uses the light-dark notation for the color
variables to avoid specificity issues that arose from `dark_theme.css`.
This commit is contained in:
Sayam Samal
2025-07-09 15:00:30 +05:30
committed by Tim Abbott
parent f4ec5f9741
commit a4dd8e515d
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/app_variables.css
View File

@@ -1860,7 +1860,7 @@
hsl(0deg 0% 100% / 85%), hsl(0deg 0% 100% / 85%),
hsl(0deg 0% 0% / 40%) hsl(0deg 0% 0% / 40%)
); );
--color-background-compose-direct-recipient-pill-container: light-dark( --color-background-pill-container: light-dark(
hsl(0deg 0% 100%), hsl(0deg 0% 100%),
hsl(0deg 0% 0% / 20%) hsl(0deg 0% 0% / 20%)
); );
@@ -1868,6 +1868,10 @@
hsl(0deg 0% 93%), hsl(0deg 0% 93%),
hsl(0deg 0% 0% / 20%) hsl(0deg 0% 0% / 20%)
); );
--color-border-pill-container: light-dark(
hsl(0deg 0% 0% / 15%),
hsl(0deg 0% 0% / 60%)
);
/* Inbox view constants - Values from Figma design */ /* Inbox view constants - Values from Figma design */
--width-inbox-search: 29.0625em; /* 465px / 16px em */ --width-inbox-search: 29.0625em; /* 465px / 16px em */

1
web/styles/dark_theme.css
View File

@@ -107,7 +107,6 @@
textarea, textarea,
select, select,
.pill-container,
.user-status-content-wrapper, .user-status-content-wrapper,
.custom-time-input-value, .custom-time-input-value,
#organization-permissions .dropdown-widget-button, #organization-permissions .dropdown-widget-button,

7
web/styles/input_pill.css
View File

@@ -4,8 +4,10 @@
flex-wrap: wrap; flex-wrap: wrap;
min-width: 0; min-width: 0;
background-color: var(--color-background-pill-container);
padding: var(--outer-spacing-input-pill-container); padding: var(--outer-spacing-input-pill-container);
border: 1px solid hsl(0deg 0% 0% / 15%); border: 1px solid var(--color-border-pill-container);
border-radius: 4px; border-radius: 4px;
align-items: center; align-items: center;
@@ -236,9 +238,6 @@
#compose-direct-recipient .pill-container { #compose-direct-recipient .pill-container {
border: 1px solid var(--color-compose-recipient-box-border-color); border: 1px solid var(--color-compose-recipient-box-border-color);
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);