paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

subscriptions: Use light-dark() instead of dark_theme.css for stream-row.

Browse Source 
Fixes part of #35881.

We extract out relevant colors from dark_theme.css for .stream-row and
.group-row and place them in light-dark(). We also transform all these
colors for .group-row and .stream-row into variables.

We use the alpha value for hsl() colors as a stand-in for the opacity we
were defining in dark_theme.css.
This commit is contained in:
Shubham Padia
2025-09-29 14:15:21 +00:00
committed by Tim Abbott
parent 567e8f369e
commit de2126d240
3 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/styles/app_variables.css
View File

@@ -1028,6 +1028,24 @@
hsl(0deg 0% 0% / 20%)
);
--color-background-grey-box: light-dark(#f5f5f5, hsl(0deg 0% 0% / 20%));
--color-stream-group-row-checked-icon: hsl(240deg 96% 68%);
--color-stream-group-row-checked-icon-hover: hsl(240deg 41% 50%);
--color-stream-group-row-checked-icon-disabled: light-dark(
hsl(240deg 96% 68% / 100%),
hsl(240deg 96% 68% / 50%)
);
--color-stream-group-row-plus-icon: light-dark(
hsl(0deg 0% 72%),
hsl(218deg 14% 33%)
);
--color-stream-group-row-plus-icon-hover: light-dark(
hsl(0deg 0% 27%),
hsl(230deg 11% 67%)
);
--color-stream-group-row-plus-icon-disabled: light-dark(
hsl(0deg 0% 87% / 100%),
hsl(218deg 14% 33% / 50%)
);
/* Recent view */
--recent-view-max-avatars: 4;

24
web/styles/dark_theme.css
View File

@@ -140,30 +140,6 @@
}
}
.group-row.active,
.stream-row.active {
background-color: hsl(0deg 0% 0% / 20%);
}
.stream-row,
.group-row {
/* This is for coluring the plus sign SVGs in stream-list UI */
/* public */
.check:not(.checked) .sub-unsub-icon {
color: hsl(218deg 14% 33%);
}
/* private */
.disabled .sub-unsub-icon {
opacity: 0.5;
}
/* public :hover */
.check:not(.checked, .disabled):hover .sub-unsub-icon {
color: hsl(230deg 11% 67%);
}
}
#recent_view_table {
.zulip-icon-user {
opacity: 0.7;

20
web/styles/subscriptions.css
View File

@@ -756,7 +756,7 @@ h4.user_group_setting_subsection_title {
/* This color is used in .subscriber-check-icon of the help
center to make the icon color same as the web app. Do change
the color there when changing the color here */
color: hsl(0deg 0% 72%);
color: var(--color-stream-group-row-plus-icon);
font-size: 1.0938em; /* 70% of 1.5625em */
&.hide {
@@ -765,7 +765,7 @@ h4.user_group_setting_subsection_title {
}
&.checked:hover .sub-unsub-icon {
color: hsl(240deg 41% 50%);
color: var(--color-stream-group-row-checked-icon-hover);
}
&.not-direct-member {
@@ -776,10 +776,12 @@ h4.user_group_setting_subsection_title {
&.disabled {
&:not(.checked) .sub-unsub-icon {
color: hsl(0deg 0% 87%);
/* Change opacity to 50% in dark mode */
color: var(--color-stream-group-row-plus-icon-disabled);
}
.sub-unsub-icon {
color: var(--color-stream-group-row-checked-icon-disabled);
cursor: not-allowed;
}
}
@@ -806,7 +808,12 @@ h4.user_group_setting_subsection_title {
/* This color is used in .subscriber-check-icon of the help
center to make the icon color same as the web app. Do change
the color there when changing the color here */
color: hsl(240deg 96% 68%);
color: var(--color-stream-group-row-checked-icon);
}
.check:not(.checked, .disabled):hover .sub-unsub-icon,
&.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
color: var(--color-stream-group-row-plus-icon-hover);
}
.icon {
@@ -894,11 +901,6 @@ h4.user_group_setting_subsection_title {
background-color: var(--color-active-row-modal);
}
.check:not(.checked, .disabled):hover .sub-unsub-icon,
&.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
color: hsl(0deg 0% 27%);
}
&::selection,
.icon .hashtag::selection {
background-color: transparent;