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

compose: Bring colors into variablized concord.

This commit is contained in:
Karl Stolley 2024-10-30 11:56:00 -05:00 committed by Tim Abbott
parent 3fe1e554a6
commit 9231c97454
4 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/styles/app_variables.css
View File

@ -671,6 +671,20 @@
--color-compose-send-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-recipient-box-text-color: inherit;
--color-compose-recipient-box-background-color: hsl(0deg 0% 100%);
/* Because of how the background color is assigned on
recipient-row elements, we need here to mix down the
border color from the compose text area,
--color-message-content-container-border,
with the compose box's background color,
--color-compose-box-background. */
--color-compose-recipient-box-border-color: color-mix(
in srgb,
hsl(0deg 0% 0%) 10%,
hsl(232deg 20% 92%)
);
--color-compose-recipient-box-has-focus: hsl(0deg 0% 57%);
--color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
--color-compose-collapsed-reply-button-area-background-interactive: var(
--color-compose-collapsed-reply-button-area-background
@ -1192,6 +1206,10 @@
--color-compose-send-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-recipient-box-text-color: inherit;
--color-compose-recipient-box-background-color: hsl(0deg 0% 0% / 20%);
--color-compose-recipient-box-border-color: hsl(0deg 0% 0% / 80%);
--color-compose-recipient-box-has-focus: hsl(0deg 0% 100% / 27%);
--color-compose-collapsed-reply-button-area-background: hsl(
0deg 0% 0% / 20%
);

11
web/styles/compose.css
View File

@ -904,16 +904,16 @@ textarea.new_message_textarea {
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
flex: 1 1 0;
border: 1px solid hsl(0deg 0% 0% / 20%);
border: 1px solid var(--color-compose-recipient-box-border-color);
border-radius: 3px;
transition: border-color 0.2s ease;
background: hsl(0deg 0% 100%);
background: var(--color-compose-recipient-box-background-color);
/* Give the recipient box, a `<div>`, the
correct styles when focus is in the
#stream_message_recipient_topic `<input>` */
&:focus-within {
border-color: hsl(0deg 0% 67%);
border-color: var(--color-compose-recipient-box-has-focus);
}
#stream_message_recipient_topic,
@ -973,6 +973,11 @@ textarea.new_message_textarea {
#compose_select_recipient_widget {
width: auto;
outline: none;
/* We override the component-level colors to
ensure concord with the topic box. */
color: var(--color-compose-recipient-box-text-color);
background-color: var(--color-compose-recipient-box-background-color);
border-color: var(--color-compose-recipient-box-border-color);
&.dropdown-widget-button {
padding: 0 6px;

3
web/styles/dark_theme.css
View File

@ -345,8 +345,7 @@
#custom-expiration-time-input,
#organization-permissions .dropdown-widget-button,
#organization-settings .dropdown-widget-button,
#stream-advanced-configurations .dropdown-widget-button,
#compose_recipient_box {
#stream-advanced-configurations .dropdown-widget-button {
background-color: hsl(0deg 0% 0% / 20%);
border-color: hsl(0deg 0% 0% / 60%);
color: inherit;

6
web/styles/input_pill.css
View File

@ -180,7 +180,7 @@
}
#compose-direct-recipient .pill-container {
border: 1px solid hsl(0deg 0% 0% / 20%);
border: 1px solid var(--color-compose-recipient-box-border-color);
background-color: var(
--color-background-compose-direct-recipient-pill-container
);
@ -194,6 +194,10 @@
content: attr(data-some-recipients-text);
opacity: 0.5;
}
&:has(.input:focus) {
border-color: var(--color-compose-recipient-box-has-focus);
}
}
#invitee_emails_container .pill-container {