Use Compound primary colors for most actions (#12241)

* 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

res/css/_common.pcss

@@ -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;
     }
 }
 

res/css/components/views/polls/_PollOption.pcss

@@ -52,26 +52,26 @@ limitations under the License.
 .mx_PollOption_winnerIcon {
     height: 12px;
     width: 12px;
-    color: $accent;
+    color: var(--cpd-color-icon-accent-tertiary);
     margin-right: $spacing-4;
     vertical-align: middle;
 }
 
 .mx_PollOption_checked {
-    border-color: $accent;
+    border-color: var(--cpd-color-border-interactive-hovered);
 
     .mx_PollOption_popularityBackground {
         .mx_PollOption_popularityAmount {
-            background-color: $accent;
+            background-color: var(--cpd-color-icon-accent-tertiary);
         }
     }
 
     /* override checked radio button styling to show checkmark instead */
     .mx_StyledRadioButton_checked {
-        input[type="radio"] + div {
+        input[type="radio"]:checked + div {
             border-width: 2px;
-            border-color: $accent;
-            background-color: $accent;
+            border-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: var(--cpd-color-icon-accent-tertiary);
             background-image: url("$(res)/img/element-icons/check-white.svg");
             background-size: 12px;
             background-repeat: no-repeat;

res/css/structures/_SpaceRoomView.pcss

@@ -46,10 +46,10 @@ limitations under the License.
     }
 
     &:hover {
-        border-color: $accent;
+        border-color: var(--cpd-color-bg-interactive-primary-rest);
 
         &::before {
-            background-color: $accent;
+            background-color: var(--cpd-color-icon-primary);
         }
 
         > span {
@@ -212,7 +212,7 @@ limitations under the License.
                         left: 8px;
                         height: 16px;
                         width: 16px;
-                        background: #fff; /* white icon fill */
+                        background: var(--cpd-color-icon-on-solid-primary);
                         mask-size: 16px;
                         mask-image: url("$(res)/img/element-icons/room/invite.svg");
                     }
@@ -293,11 +293,13 @@ limitations under the License.
             }
 
             .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
-                color: $accent;
+                color: var(--cpd-color-text-primary);
+                font-weight: var(--cpd-font-weight-semibold);
+                text-decoration: underline;
 
                 &::before {
                     mask-image: url("$(res)/img/element-icons/room/invite.svg");
-                    background-color: $accent;
+                    background-color: var(--cpd-color-icon-primary);
                 }
             }
         }

res/css/structures/_TabbedView.pcss

@@ -43,12 +43,12 @@ limitations under the License.
     }
 
     .mx_TabbedView_tabLabel_active {
-        background-color: $accent;
-        color: $tab-label-active-fg-color;
+        background-color: var(--cpd-color-bg-action-primary-rest);
+        color: var(--cpd-color-text-on-solid-primary);
     }
 
     .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-        background-color: $tab-label-active-fg-color;
+        background-color: var(--cpd-color-icon-on-solid-primary);
     }
 
     .mx_TabbedView_maskedIcon {

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -21,7 +21,8 @@ limitations under the License.
         list-style: none;
         font-weight: var(--cpd-font-weight-semibold);
         cursor: pointer;
-        color: $accent;
+        color: var(--cpd-color-text-primary);
+        text-decoration: underline;
         width: fit-content;
 
         /* list-style doesn't do it for webkit */

res/css/views/dialogs/_FeedbackDialog.pcss

@@ -60,7 +60,6 @@ limitations under the License.
 
         a,
         .mx_AccessibleButton_kind_link {
-            color: $accent;
             text-decoration: underline;
         }
 
@@ -132,7 +131,7 @@ limitations under the License.
 
         .mx_StyledRadioButton_checked {
             font-size: 24px;
-            border-color: $accent;
+            border-color: var(--cpd-color-bg-action-primary-rest);
         }
 
         &::after {

res/css/views/dialogs/_SpaceSettingsDialog.pcss

@@ -71,7 +71,7 @@ limitations under the License.
 
     .mx_AccessibleButton_hasKind {
         &.mx_AccessibleButton_kind_link {
-            font: var(--cpd-font-body-md-regular);
+            font: var(--cpd-font-body-md-semibold);
             margin: 7px 18px;
 
             &.mx_SettingsTab_showAdvanced {

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -396,7 +396,7 @@ limitations under the License.
                     left: $spacing-8;
                     width: 16px;
                     height: 16px;
-                    background: $accent;
+                    background: var(--cpd-color-icon-primary);
                 }
             }
         }

res/css/views/elements/_AccessibleButton.pcss

@@ -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 {

res/css/views/elements/_ProgressBar.pcss

@@ -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;

res/css/views/elements/_ReplyChain.pcss

@@ -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;

res/css/views/elements/_Slider.pcss

@@ -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 {

res/css/views/elements/_StyledCheckbox.pcss

@@ -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);
     }
 }

res/css/views/elements/_StyledRadioButton.pcss

@@ -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);
 }

res/css/views/room_settings/_AliasSettings.pcss

@@ -16,8 +16,9 @@ limitations under the License.
 
 .mx_AliasSettings_localAddresses {
     cursor: pointer;
-    color: $accent;
+    color: var(--cpd-color-text-primary);
     font-weight: var(--cpd-font-weight-semibold);
+    text-decoration: underline;
     list-style: none;
     width: fit-content;
 

res/css/views/rooms/_EditMessageComposer.pcss

@@ -33,7 +33,7 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: $accent-500;
+            border-color: var(--cpd-color-border-interactive-primary);
         }
     }
 

res/css/views/rooms/_EmojiButton.pcss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_EmojiButton {
-    @mixin composerButton 50%, $accent, $accent-300;
+    @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
 }
 
 .mx_EmojiButton_highlight {

res/css/views/rooms/_EventTile.pcss

@@ -240,7 +240,7 @@ $left-gutter: 64px;
             > .mx_EventTile_line {
                 /* TODO: ultimately we probably want some transition on here. */
                 box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
-                    $accent;
+                    var(--cpd-color-bg-action-primary-rest);
             }
         }
 

res/css/views/rooms/_MessageComposer.pcss

@@ -191,7 +191,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer_button {
-    @mixin composerButton 50%, $accent, $accent-300;
+    @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
 
     &:last-child {
         margin-right: auto;
@@ -199,11 +199,11 @@ limitations under the License.
 
     &.mx_MessageComposer_closeButtonMenu {
         &::after {
-            background: $accent-300;
+            background: var(--cpd-color-bg-subtle-primary);
         }
 
         &::before {
-            background-color: $accent;
+            background-color: var(--cpd-color-icon-primary);
             z-index: 2;
         }
     }
@@ -295,7 +295,7 @@ limitations under the License.
     width: 32px;
     height: 32px;
     border-radius: 100%;
-    background-color: $accent;
+    background-color: var(--cpd-color-icon-accent-tertiary);
 
     &::before {
         position: absolute;
@@ -309,7 +309,7 @@ limitations under the License.
         mask-size: contain;
         mask-position: center;
 
-        background-color: $button-fg-color;
+        background-color: var(--cpd-color-icon-on-solid-primary);
         content: "";
     }
 }

res/css/views/rooms/_RoomInfoLine.pcss

@@ -49,6 +49,8 @@ limitations under the License.
 
     .mx_RoomInfoLine_members {
         color: inherit;
+        text-decoration: inherit;
+        font-weight: inherit;
 
         &::before {
             content: "·"; /* visual separator */

res/css/views/rooms/_TopUnreadMessagesBar.pcss

@@ -30,8 +30,8 @@ limitations under the License.
     width: 4px;
     height: 4px;
     border-radius: 16px;
-    background-color: $secondary-accent-color;
-    border: 6px solid $accent;
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: 6px solid var(--cpd-color-icon-primary);
     pointer-events: none;
 }
 

res/css/views/settings/_LayoutSwitcher.pcss

@@ -63,7 +63,7 @@ limitations under the License.
         }
 
         &.mx_LayoutSwitcher_RadioButton_selected {
-            border-color: $accent;
+            border-color: var(--cpd-color-bg-action-primary-rest);
         }
     }
 
@@ -72,7 +72,7 @@ limitations under the License.
     }
 
     .mx_StyledRadioButton_checked {
-        background-color: $accent-200;
+        background-color: var(--cpd-color-bg-subtle-secondary);
     }
 
     .mx_EventTile {

res/css/views/settings/_ProfileSettings.pcss

@@ -56,7 +56,7 @@ limitations under the License.
         margin-bottom: $spacing-28;
 
         > .mx_AccessibleButton_kind_link {
-            font: var(--cpd-font-body-md-regular);
+            font: var(--cpd-font-body-md-semibold);
             margin-inline-end: 10px;
         }
     }

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -65,7 +65,7 @@ limitations under the License.
                 content: "";
                 position: absolute;
                 inset: -2px;
-                background: $accent;
+                background: var(--cpd-color-icon-accent-tertiary);
                 border-radius: 32px;
 
                 animation-duration: 300ms;
@@ -75,7 +75,7 @@ limitations under the License.
             }
 
             &::after {
-                background-color: $background;
+                background-color: var(--cpd-color-icon-on-solid-primary);
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;

res/themes/dark/css/_dark.pcss

@@ -76,7 +76,7 @@ $muted-fg-color: $header-panel-text-primary-color;
 $light-fg-color: $header-panel-text-secondary-color;
 $focus-bg-color: $room-highlight-color;
 $info-plinth-bg-color: $header-panel-bg-color;
-$event-selected-color: $system;
+$event-selected-color: var(--cpd-color-bg-subtle-secondary);
 $topleftmenu-color: $primary-content;
 $roomtopic-color: $text-secondary-color;
 $spacePanel-bg-color: rgba(38, 39, 43, 0.82);
@@ -247,7 +247,7 @@ $live-badge-color: #ffffff;
 
 /* One-off colors */
 /* ******************** */
-$progressbar-bg-color: $system;
+$progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #800;
 $event-timestamp-color: $text-secondary-color;

res/themes/light/css/_light.pcss

@@ -312,7 +312,7 @@ $call-light-quaternary-content: #c1c6cd;
 
 /* One-off colors */
 /* ******************** */
-$progressbar-bg-color: $panel-actions;
+$progressbar-bg-color: var(--cpd-color-gray-200);
 $kbd-border-color: $strong-input-border-color;
 $visual-bell-bg-color: #faa;
 $event-timestamp-color: #acacac;

src/components/views/elements/FacePile.tsx

@@ -65,7 +65,7 @@ const FacePile: FC<IProps> = ({
     );
 
     const content = (
-        <AccessibleButton className="mx_FacePile" kind="link_inline" onClick={props.onClick ?? null}>
+        <AccessibleButton className="mx_FacePile" onClick={props.onClick ?? null}>
             <AvatarStack>{pileContents}</AvatarStack>
             {children}
         </AccessibleButton>

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+    class="mx_AccessibleButton mx_FacePile"
     data-state="closed"
     role="button"
     tabindex="0"

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
-    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+    class="mx_AccessibleButton mx_FacePile"
     data-state="closed"
     role="button"
     tabindex="0"