sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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 20:10:07 +00:00
committed by GitHub
parent ee50640075
commit ed5ef023b2
87 changed files with 104 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/_common.pcss
+13 -14
View File
@@ -561,7 +561,7 @@ legend {
border-radius: 8px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
background-color: $accent;
background-color: var(--cpd-color-bg-action-primary-rest);
width: auto;
padding: 7px;
padding-left: 1.5em;
@@ -594,8 +594,8 @@ legend {
/* flip colours for the secondary ones */
font-weight: var(--cpd-font-weight-semibold);
border: 1px solid currentColor;
color: $accent;
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
background-color: transparent;
font-family: inherit;
}
@@ -615,8 +615,9 @@ legend {
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: $accent-fg-color;
background-color: $accent;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
min-width: 156px;
}
@@ -624,15 +625,15 @@ legend {
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: $alert;
border: solid 1px $alert;
color: $accent-fg-color;
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
color: var(--cpd-color-text-on-solid-primary);
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
border: solid 1px $alert;
color: $alert;
border: solid 1px var(--cpd-color-border-critical-primary);
color: var(--cpd-color-text-critical-primary);
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
@@ -814,11 +815,9 @@ legend {
}
@define-mixin composerButtonHighLight {
/* TODO: Refactor as this will break for apps that override the accent color */
background: var(--cpd-color-green-300);
/* make the icon the accent color too */
background: var(--cpd-color-bg-subtle-primary);
&::before {
background-color: $accent !important;
background-color: var(--cpd-color-icon-primary) !important;
}
}