Revert "Use Compound primary colors for most actions" (#12264)

* Revert ed5ef023b2

* Update failing snapshots

* Update snapshots after develop merge

res/css/_common.pcss

@@ -562,7 +562,7 @@ legend {
     border-radius: 8px;
     font: var(--cpd-font-body-md-regular);
     color: $button-fg-color;
-    background-color: var(--cpd-color-bg-action-primary-rest);
+    background-color: $accent;
     width: auto;
     padding: 7px;
     padding-left: 1.5em;
@@ -595,8 +595,8 @@ legend {
 
     /* flip colours for the secondary ones */
     font-weight: var(--cpd-font-weight-semibold);
-    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    border: 1px solid currentColor;
-    color: var(--cpd-color-text-primary);
+    color: $accent;
     background-color: transparent;
     font-family: inherit;
 }
@@ -616,9 +616,8 @@ 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: var(--cpd-color-text-on-solid-primary);
+    color: $accent-fg-color;
-    background-color: var(--cpd-color-bg-action-primary-rest);
+    background-color: $accent;
-    border-color: var(--cpd-color-bg-action-primary-rest);
     min-width: 156px;
 }
 
@@ -626,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: var(--cpd-color-bg-critical-primary);
+    background-color: $alert;
-    border: solid 1px var(--cpd-color-bg-critical-primary);
+    border: solid 1px $alert;
-    color: var(--cpd-color-text-on-solid-primary);
+    color: $accent-fg-color;
 }
 
 .mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
-    border: solid 1px var(--cpd-color-border-critical-primary);
+    border: solid 1px $alert;
-    color: var(--cpd-color-text-critical-primary);
+    color: $alert;
 }
 
 .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
@@ -816,9 +815,11 @@ legend {
 }
 
 @define-mixin composerButtonHighLight {
-    background: var(--cpd-color-bg-subtle-primary);
+    /* 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 */
     &::before {
-        background-color: var(--cpd-color-icon-primary) !important;
+        background-color: $accent !important;
     }
 }
 

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

@@ -52,26 +52,26 @@ limitations under the License.
 .mx_PollOption_winnerIcon {
     height: 12px;
     width: 12px;
-    color: var(--cpd-color-icon-accent-tertiary);
+    color: $accent;
     margin-right: $spacing-4;
     vertical-align: middle;
 }
 
 .mx_PollOption_checked {
-    border-color: var(--cpd-color-border-interactive-hovered);
+    border-color: $accent;
 
     .mx_PollOption_popularityBackground {
         .mx_PollOption_popularityAmount {
-            background-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: $accent;
         }
     }
 
     /* override checked radio button styling to show checkmark instead */
     .mx_StyledRadioButton_checked {
-        input[type="radio"]:checked + div {
+        input[type="radio"] + div {
             border-width: 2px;
-            border-color: var(--cpd-color-icon-accent-tertiary);
+            border-color: $accent;
-            background-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: $accent;
             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: var(--cpd-color-bg-interactive-primary-rest);
+        border-color: $accent;
 
         &::before {
-            background-color: var(--cpd-color-icon-primary);
+            background-color: $accent;
         }
 
         > span {
@@ -212,7 +212,7 @@ limitations under the License.
                         left: 8px;
                         height: 16px;
                         width: 16px;
-                        background: var(--cpd-color-icon-on-solid-primary);
+                        background: #fff; /* white icon fill */
                         mask-size: 16px;
                         mask-image: url("$(res)/img/element-icons/room/invite.svg");
                     }
@@ -293,13 +293,11 @@ limitations under the License.
             }
 
             .mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
-                color: var(--cpd-color-text-primary);
+                color: $accent;
-                font-weight: var(--cpd-font-weight-semibold);
-                text-decoration: underline;
 
                 &::before {
                     mask-image: url("$(res)/img/element-icons/room/invite.svg");
-                    background-color: var(--cpd-color-icon-primary);
+                    background-color: $accent;
                 }
             }
         }

res/css/structures/_TabbedView.pcss

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

res/css/views/dialogs/_CreateRoomDialog.pcss

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

res/css/views/dialogs/_FeedbackDialog.pcss

@@ -60,6 +60,7 @@ limitations under the License.
 
         a,
         .mx_AccessibleButton_kind_link {
+            color: $accent;
             text-decoration: underline;
         }
 
@@ -131,7 +132,7 @@ limitations under the License.
 
         .mx_StyledRadioButton_checked {
             font-size: 24px;
-            border-color: var(--cpd-color-bg-action-primary-rest);
+            border-color: $accent;
         }
 
         &::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-semibold);
+            font: var(--cpd-font-body-md-regular);
             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: var(--cpd-color-icon-primary);
+                    background: $accent;
                 }
             }
         }

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-semibold);
+        font: var(--cpd-font-body-md-regular);
         border: none; /* override default <button /> styles */
         word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
 
@@ -53,23 +53,21 @@ limitations under the License.
         }
 
         &.mx_AccessibleButton_kind_primary_sm {
-            color: var(--cpd-color-text-on-solid-primary);
+            color: $button-primary-fg-color;
-            background-color: var(--cpd-color-bg-action-primary-rest);
+            background-color: $accent;
         }
 
         &.mx_AccessibleButton_kind_danger_sm {
-            color: var(--cpd-color-text-on-solid-primary);
+            color: $button-danger-fg-color;
-            background-color: var(--cpd-color-bg-critical-primary);
+            background-color: $alert;
         }
 
         &.mx_AccessibleButton_kind_link_sm {
-            color: var(--cpd-color-text-primary);
+            color: $accent;
-            text-decoration: underline;
-            font-weight: var(--cpd-font-weight-semibold);
         }
 
         &.mx_AccessibleButton_kind_confirm_sm {
-            background-color: var(--cpd-color-bg-action-primary-rest);
+            background-color: $accent;
 
             &::before {
                 mask-image: url("$(res)/img/feather-customised/check.svg");
@@ -77,7 +75,7 @@ limitations under the License.
         }
 
         &.mx_AccessibleButton_kind_cancel_sm {
-            background-color: var(--cpd-color-bg-critical-primary);
+            background-color: $alert;
 
             &::before {
                 mask-image: url("$(res)/img/feather-customised/x.svg");
@@ -101,22 +99,26 @@ 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 {
-        border: 1px solid var(--cpd-color-bg-action-primary-rest);
+        color: $button-primary-fg-color;
-        color: var(--cpd-color-text-on-solid-primary);
+        background-color: $accent;
-        background-color: var(--cpd-color-bg-action-primary-rest);
     }
 
     &.mx_AccessibleButton_kind_icon_primary_outline,
     &.mx_AccessibleButton_kind_primary_outline {
-        border: 1px solid var(--cpd-color-border-interactive-secondary);
+        color: $accent;
-        color: var(--cpd-color-text-primary);
     }
 
     &.mx_AccessibleButton_kind_secondary {
-        color: var(--cpd-color-text-primary);
+        color: $accent;
-        text-decoration: underline;
     }
 
     &.mx_AccessibleButton_kind_secondary_content {
@@ -124,30 +126,30 @@ limitations under the License.
     }
 
     &.mx_AccessibleButton_kind_danger {
-        color: var(--cpd-color-text-on-solid-primary);
+        color: $button-danger-fg-color;
-        background-color: var(--cpd-color-bg-critical-primary);
+        background-color: $alert;
 
         &.mx_AccessibleButton_disabled {
-            color: var(--cpd-color-text-on-solid-primary);
+            color: $button-danger-disabled-fg-color;
-            background-color: var(--cpd-color-bg-critical-primary);
+            background-color: $button-danger-disabled-bg-color;
         }
     }
 
     &.mx_AccessibleButton_kind_danger_outline {
-        color: var(--cpd-color-text-critical-primary);
+        color: $alert;
         background-color: transparent;
-        border: 1px solid var(--cpd-color-border-critical-primary);
+        border: 1px solid $alert;
 
         &.mx_AccessibleButton_disabled {
-            color: var(--cpd-color-text-disabled);
+            color: $button-danger-disabled-bg-color;
-            border-color: var(--cpd-color-border-disabled);
+            border-color: $button-danger-disabled-bg-color;
         }
     }
 
     &.mx_AccessibleButton_kind_danger_sm {
         &.mx_AccessibleButton_disabled {
-            color: var(--cpd-color-text-disabled);
+            color: $button-danger-disabled-fg-color;
-            background-color: var(--cpd-color-bg-subtle-primary);
+            background-color: $button-danger-disabled-bg-color;
         }
     }
 
@@ -156,19 +158,18 @@ limitations under the License.
     &.mx_AccessibleButton_kind_danger_inline,
     &.mx_AccessibleButton_kind_content_inline {
         font-size: inherit;
-        font-weight: var(--cpd-font-weight-semibold);
+        font-weight: normal;
         line-height: inherit;
         padding: 0;
-        text-decoration: underline;
     }
 
     &.mx_AccessibleButton_kind_link,
     &.mx_AccessibleButton_kind_link_inline {
-        color: var(--cpd-color-text-primary);
+        color: $accent;
     }
 
     &.mx_AccessibleButton_kind_danger_inline {
-        color: var(--cpd-color-text-critical-primary);
+        color: $alert;
     }
 
     &.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: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+    border: none;
 
     @mixin ProgressBarBorderRadius 6px;
-    @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
+    @mixin ProgressBarColour $accent;
     @mixin ProgressBarBgColour $progressbar-bg-color;
     ::-webkit-progress-value {
         transition: width 1s;

res/css/views/elements/_ReplyChain.pcss

@@ -25,8 +25,6 @@ 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: var(--cpd-color-bg-action-primary-rest);
+        --active-color: $accent;
         --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 var(--cpd-color-border-interactive-primary);
+            border: 1px solid $strong-input-border-color;
             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: var(--cpd-color-icon-on-solid-primary);
+        background: #ffffff;
     }
 
     &:checked + label > .mx_Checkbox_background {
-        background: var(--cpd-color-bg-action-primary-rest);
+        background: $accent;
-        border-color: var(--cpd-color-bg-action-primary-rest);
+        border-color: $accent;
     }
 
     &: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: var(--cpd-color-bg-action-primary-rest);
+        background: $accent;
     }
 
     &:checked + label > .mx_Checkbox_background {
         background: transparent;
-        border-color: var(--cpd-color-bg-action-primary-rest);
+        border-color: $accent;
     }
 }

res/css/views/elements/_StyledRadioButton.pcss

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

res/css/views/room_settings/_AliasSettings.pcss

@@ -16,9 +16,8 @@ limitations under the License.
 
 .mx_AliasSettings_localAddresses {
     cursor: pointer;
-    color: var(--cpd-color-text-primary);
+    color: $accent;
     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: var(--cpd-color-border-interactive-primary);
+            border-color: $accent-500;
         }
     }
 

res/css/views/rooms/_EmojiButton.pcss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_EmojiButton {
-    @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
+    @mixin composerButton 50%, $accent, $accent-300;
 }
 
 .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)
-                    var(--cpd-color-bg-action-primary-rest);
+                    $accent;
             }
         }
 

res/css/views/rooms/_MessageComposer.pcss

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

res/css/views/rooms/_RoomInfoLine.pcss

@@ -49,8 +49,6 @@ 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: var(--cpd-color-bg-canvas-default);
+    background-color: $secondary-accent-color;
-    border: 6px solid var(--cpd-color-icon-primary);
+    border: 6px solid $accent;
     pointer-events: none;
 }
 

res/css/views/settings/_LayoutSwitcher.pcss

@@ -63,7 +63,7 @@ limitations under the License.
         }
 
         &.mx_LayoutSwitcher_RadioButton_selected {
-            border-color: var(--cpd-color-bg-action-primary-rest);
+            border-color: $accent;
         }
     }
 
@@ -72,7 +72,7 @@ limitations under the License.
     }
 
     .mx_StyledRadioButton_checked {
-        background-color: var(--cpd-color-bg-subtle-secondary);
+        background-color: $accent-200;
     }
 
     .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-semibold);
+            font: var(--cpd-font-body-md-regular);
             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: var(--cpd-color-icon-accent-tertiary);
+                background: $accent;
                 border-radius: 32px;
 
                 animation-duration: 300ms;
@@ -75,7 +75,7 @@ limitations under the License.
             }
 
             &::after {
-                background-color: var(--cpd-color-icon-on-solid-primary);
+                background-color: $background;
                 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: var(--cpd-color-bg-subtle-secondary);
+$event-selected-color: $system;
 $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: var(--cpd-color-gray-200);
+$progressbar-bg-color: $system;
 $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: var(--cpd-color-gray-200);
+$progressbar-bg-color: $panel-actions;
 $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" onClick={props.onClick ?? null}>
+        <AccessibleButton className="mx_FacePile" kind="link_inline" 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"
+    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
     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"
+    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
     data-state="closed"
     role="button"
     tabindex="0"