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

css: Refactor theme colors for app_components.

Browse Source 
This change moves the light and dark theme colors for
`app_components` to CSS variables.
This commit is contained in:
sanchi-t
2024-09-24 20:27:58 +05:30
committed by Tim Abbott
parent a8e809e63f
commit 19ba94b946
3 changed files with 36 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/styles/app_components.css
View File

@@ -413,7 +413,7 @@ input.settings_text_input {
space around its viewbox in SVG. */
.clear_search_button {
&:hover {
color: hsl(0deg 0% 0%);
color: var(--color-text-clear-search-button-hover);
}
&:disabled {
@@ -431,7 +431,7 @@ input.settings_text_input {
text-align: center;
padding-top: 8px;
padding-left: 4px;
color: hsl(0deg 0% 80%);
color: var(--color-text-clear-search-button);
text-shadow: none;
outline: none !important;
box-shadow: none;
@@ -552,8 +552,8 @@ input.settings_text_input {
.invite-stream-notice {
position: relative;
display: block;
background-color: hsl(46deg 63% 95%);
border: 1px solid hsl(49deg 20% 84%);
background-color: var(--color-background-tip);
border: 1px solid var(--color-border-tip);
border-radius: 4px;
padding: 10px;
font-size: 1rem;
@@ -702,7 +702,8 @@ input.settings_text_input {
&:focus {
background-color: hsl(240deg 41% 50%);
box-shadow: 0 1px 4px 0 hsl(235deg 18% 7%);
box-shadow: 0 1px 4px 0
var(--color-box-shadow-animated-purple-button-focus);
outline: none;
}
@@ -715,17 +716,17 @@ input.settings_text_input {
.color_animated_button {
display: flex;
justify-content: center;
background-color: hsl(0deg 0% 90%);
background-color: var(--color-background-animated-button);
color: hsl(0deg 0% 0%);
border-radius: 4px;
.color-animated-button-text {
color: hsl(0deg 0% 0%);
color: var(--color-animated-button-text);
}
&:hover {
cursor: pointer;
background-color: hsl(240deg 96% 68%);
background-color: var(--color-background-animated-button-hover);
color: hsl(0deg 0% 100%);
.color-animated-button-text {
@@ -1144,9 +1145,9 @@ input.settings_text_input {
}
.dropdown-widget-button {
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background-dropdown-widget-button);
padding: 4px 6px;
border: 1px solid hsl(0deg 0% 80%);
border: 1px solid var(--color-border-dropdown-widget-button);
border-radius: 4px;
display: flex;
align-items: center;

24
web/styles/app_variables.css
View File

@@ -624,6 +624,12 @@
--color-text-sidebar-base: hsl(0deg 0% 0%);
--color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%);
--color-request-progress-status-alert-text: hsl(0deg 0% 20%);
--color-background-tip: hsl(46deg 63% 95%);
--color-border-tip: hsl(49deg 20% 84%);
--color-box-shadow-animated-purple-button-focus: hsl(235deg 18% 7%);
--color-background-animated-button: hsl(0deg 0% 90%);
--color-animated-button-text: hsl(0deg 0% 0%);
--color-background-animated-button-hover: hsl(240deg 96% 68%);
/* Recent view */
--color-border-recent-view-row: hsl(0deg 0% 87%);
@@ -722,6 +728,8 @@
--color-text-url: hsl(200deg 100% 40%);
--color-text-url-hover: hsl(200deg 100% 25%);
--color-text-settings-field-hint: hsl(0deg 0% 57%);
--color-text-clear-search-button: hsl(0deg 0% 80%);
--color-text-clear-search-button-hover: hsl(0deg 0% 0%);
/* Demo Organization colors */
--color-text-settings-demo-organization-warning: hsl(4deg 58% 33%);
@@ -731,6 +739,10 @@
200deg 100% 25%
);
/* Widgets colors */
--color-border-dropdown-widget-button: hsl(0deg 0% 80%);
--color-background-dropdown-widget-button: hsl(0deg 0% 100%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
--color-border-rendered-markdown-table: hsl(0deg 0% 80%);
@@ -1109,6 +1121,12 @@
--color-text-sidebar-base: hsl(0deg 0% 100%);
--color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%);
--color-request-progress-status-alert-text: hsl(236deg 33% 90%);
--color-background-tip: hsl(46deg 28% 38% / 27%);
--color-border-tip: hsl(49deg 38% 46%);
--color-box-shadow-animated-purple-button-focus: hsl(0deg 0% 100% / 66.6%);
--color-background-animated-button: hsl(211deg 29% 14%);
--color-animated-button-text: hsl(0deg 0% 100%);
--color-background-animated-button-hover: hsl(240deg 96% 68%);
/* Recent view */
--color-border-recent-view-row: hsl(0deg 0% 0% / 20%);
@@ -1211,6 +1229,8 @@
--color-text-sidebar-action-heading-hover: hsl(240deg 100% 90%);
--color-text-url-hover: hsl(200deg 79% 66%);
--color-text-settings-field-hint: hsl(0deg 0% 52%);
--color-text-clear-search-button: hsl(236deg 33% 80%);
--color-text-clear-search-button-hover: hsl(0deg 0% 100%);
/* Demo Organization colors */
--color-text-settings-demo-organization-warning: hsl(3deg 73% 80%);
@@ -1221,6 +1241,10 @@
200deg 79% 66%
);
/* Widgets colors */
--color-border-dropdown-widget-button: hsl(0deg 0% 0% / 60%);
--color-background-dropdown-widget-button: hsl(0deg 0% 0% / 20%);
/* Markdown colors */
--color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
--color-border-rendered-markdown-table: hsl(0deg 0% 33%);

28
web/styles/dark_theme.css
View File

@@ -384,11 +384,6 @@
box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
}
.dropdown-widget-button {
border-color: hsl(0deg 0% 0% / 60%);
background-color: hsl(0deg 0% 0% / 20%);
}
& select option {
background-color: var(--color-background);
color: hsl(236deg 33% 90%);
@@ -511,18 +506,10 @@
}
.narrow_to_compose_recipients,
.clear_search_button,
.clear_search_button:focus,
.clear_search_button:active,
.clear_search_button:disabled:hover,
.close {
color: hsl(236deg 33% 80%);
}
.clear_search_button:hover {
color: hsl(0deg 0% 100%);
}
.zoom-in {
#topics_header {
background-color: var(--color-background);
@@ -668,8 +655,6 @@
.tip,
.invite-stream-notice {
color: inherit;
background-color: hsl(46deg 28% 38% / 27%);
border: 1px solid hsl(49deg 38% 46%);
}
#request-progress-status-banner {
@@ -863,21 +848,10 @@
outline-color: hsl(0deg 0% 67%);
}
.animated-purple-button:focus {
box-shadow: 0 1px 4px 0 hsl(0deg 0% 100% / 66.6%);
}
.color_animated_button {
background-color: hsl(211deg 29% 14%);
.zulip-icon,
.color-animated-button-text {
.zulip-icon {
color: hsl(0deg 0% 100%);
}
&:hover {
background-color: hsl(240deg 96% 68%);
}
}
/* Widgets: Poll */