imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Compound primary colors for most actions (#12241)

Browse source 
* Use Compound primary colors for most actions

The "accent" color variable is something we should generally not use anymore: it maps to a Compound text token, which makes its semantics inappropriate for icons and backgrounds, and it clashes with the primary colors present on the Compound components we're now bringing into the app. As discussed with design, we would like to phase out its usage on interactive components in favor of the correct icon and background colors from Compound. This is a best-effort attempt at applying new colors to all the major places that we were previously using "accent": mainly, buttons and form controls are affected.

* Update some more colors

* Update test snapshots

* Fix broken screenshot
This commit is contained in:
Robin 2024-02-13 15:10:07 -05:00 • committed by GitHub
parent ee50640075
commit ed5ef023b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
87 changed files with 104 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

63
res/css/views/elements/_AccessibleButton.pcss
View file

@ -42,7 +42,7 @@ limitations under the License.
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--cpd-font-body-md-regular);
font: var(--cpd-font-body-md-semibold);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@ -53,21 +53,23 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color;
background-color: $accent;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color;
background-color: $alert;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
&.mx_AccessibleButton_kind_link_sm {
color: $accent;
color: var(--cpd-color-text-primary);
text-decoration: underline;
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
background-color: var(--cpd-color-bg-action-primary-rest);
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
@ -75,7 +77,7 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
@ -99,26 +101,22 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent;
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $accent;
border: 1px solid var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary_outline {
color: $accent;
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_secondary {
color: $accent;
color: var(--cpd-color-text-primary);
text-decoration: underline;
}
&.mx_AccessibleButton_kind_secondary_content {
@ -126,30 +124,30 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $alert;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
}
&.mx_AccessibleButton_kind_danger_outline {
color: $alert;
color: var(--cpd-color-text-critical-primary);
background-color: transparent;
border: 1px solid $alert;
border: 1px solid var(--cpd-color-border-critical-primary);
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-disabled);
border-color: var(--cpd-color-border-disabled);
}
}
&.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-disabled);
background-color: var(--cpd-color-bg-subtle-primary);
}
}
@ -158,18 +156,19 @@ limitations under the License.
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
font-size: inherit;
font-weight: normal;
font-weight: var(--cpd-font-weight-semibold);
line-height: inherit;
padding: 0;
text-decoration: underline;
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
color: $accent;
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_danger_inline {
color: $alert;
color: var(--cpd-color-text-critical-primary);
}
&.mx_AccessibleButton_kind_content_inline {

4
res/css/views/elements/_ProgressBar.pcss
View file

@ -19,10 +19,10 @@ progress.mx_ProgressBar {
width: 60px;
overflow: hidden;
appearance: none;
border: none;
border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
@mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour $accent;
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
transition: width 1s;

2
res/css/views/elements/_ReplyChain.pcss
View file

@ -25,6 +25,8 @@ limitations under the License.
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
color: $secondary-content;
transition: color ease 0.15s;
font-weight: var(--cpd-font-weight-normal);
text-decoration: inherit;
&:hover {
color: $primary-content;

2
res/css/views/elements/_Slider.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
background: none;
font-size: 1em; /* set base multiplier for em units applied later */
--active-color: $accent;
--active-color: var(--cpd-color-bg-action-primary-rest);
--selection-dot-size: 2.4em;
&:disabled {

12
res/css/views/elements/_StyledCheckbox.pcss
View file

@ -42,7 +42,7 @@ limitations under the License.
height: $size;
width: $size;
size: 0.5rem;
border: 1px solid $strong-input-border-color;
border: 1px solid var(--cpd-color-border-interactive-primary);
box-sizing: border-box;
border-radius: $border-radius;
@ -80,12 +80,12 @@ limitations under the License.
.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: #ffffff;
background: var(--cpd-color-icon-on-solid-primary);
}
&:checked + label > .mx_Checkbox_background {
background: $accent;
border-color: $accent;
background: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
}
&:checked:disabled + label > .mx_Checkbox_background {
@ -95,11 +95,11 @@ limitations under the License.
.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: $accent;
background: var(--cpd-color-bg-action-primary-rest);
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
border-color: $accent;
border-color: var(--cpd-color-bg-action-primary-rest);
}
}

6
res/css/views/elements/_StyledRadioButton.pcss
View file

@ -20,8 +20,8 @@ limitations under the License.
*/
.mx_StyledRadioButton {
$radio-circle-color: $strong-input-border-color;
$active-radio-circle-color: $accent;
$radio-circle-color: var(--cpd-color-border-interactive-primary);
$active-radio-circle-color: var(--cpd-color-bg-action-primary-rest);
position: relative;
display: flex;
@ -126,5 +126,5 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
border-color: $accent;
border-color: var(--cpd-color-bg-action-primary-rest);
}