Use Compound primary colors for most actions

res/css/_common.pcss

@@ -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,24 +615,25 @@ 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;
 }
 
 .mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .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,7 +293,9 @@ 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");

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/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,29 +53,31 @@ 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");
             }
         }
 
         &.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");
@@ -100,56 +102,56 @@ limitations under the License.
     }
 
     &.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_primary {
+        border: 1px solid var(--cpd-color-bg-action-primary-rest);
     }
 
     &.mx_AccessibleButton_kind_icon_primary,
     &.mx_AccessibleButton_kind_primary {
-        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_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 {
         color: $secondary-content;
     }
 
     &.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 +160,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/_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);
     }
 }