Refine styles of controls to match Compound (#12299)

This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.

res/css/_common.pcss

@@ -501,23 +501,34 @@ legend {
 }
 
 @define-mixin customisedCancelButton {
-    mask: url("$(res)/img/cancel.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
-    background-color: $dialog-close-fg-color;
     cursor: pointer;
-    position: unset;
-    width: unset;
-    height: unset;
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border-radius: 14px;
+    background-color: var(--cpd-color-bg-subtle-secondary);
+
+    &:hover {
+        background-color: var(--cpd-color-bg-subtle-primary);
+    }
+
+    &::before {
+        content: "";
+        width: 28px;
+        height: 28px;
+        position: absolute;
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 20px;
+        background-color: var(--cpd-color-icon-secondary);
+    }
 }
 
 .mx_Dialog_cancelButton {
     @mixin customisedCancelButton;
-    width: 18px;
-    height: 18px;
     position: absolute;
-    top: 10px;
+    top: 4px;
     right: 0;
 }
 
@@ -559,10 +570,10 @@ legend {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
     border: 0px;
-    border-radius: 8px;
+    border-radius: 24px;
     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;
@@ -595,8 +606,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;
 }
@@ -616,8 +627,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;
 }
 
@@ -625,15 +637,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,
@@ -815,11 +827,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

@@ -30,37 +30,42 @@ limitations under the License.
     position: absolute;
 
     .mx_TabbedView_tabLabels {
-        width: 170px;
-        max-width: 170px;
+        width: 220px;
+        max-width: 220px;
         position: fixed;
         margin: 0; /* Remove the default value */
         padding: 0; /* Remove the default value */
     }
 
     .mx_TabbedView_tabPanel {
-        margin-left: 240px; /* 170px sidebar + 70px padding */
+        margin-left: 280px; /* 220px sidebar + 60px padding */
         flex-direction: column;
     }
 
+    .mx_TabbedView_tabLabel:hover,
     .mx_TabbedView_tabLabel_active {
-        background-color: $accent;
         color: $tab-label-active-fg-color;
+
+        .mx_TabbedView_maskedIcon::before {
+            background-color: var(--cpd-color-icon-primary);
+        }
     }
 
-    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-        background-color: $tab-label-active-fg-color;
+    .mx_TabbedView_tabLabel_active {
+        background-color: var(--cpd-color-bg-subtle-secondary);
     }
 
     .mx_TabbedView_maskedIcon {
-        width: 16px;
-        height: 16px;
-        margin-right: 16px;
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-3x);
     }
 
     .mx_TabbedView_maskedIcon::before {
-        mask-size: 16px;
-        width: 16px;
-        height: 16px;
+        mask-size: 20px;
+        width: 20px;
+        height: 20px;
+        transition: background-color 0.1s;
     }
 }
 
@@ -120,10 +125,16 @@ limitations under the License.
     align-items: center;
     vertical-align: text-top;
     cursor: pointer;
-    padding: 8px;
-    border-radius: 8px;
-    font-size: $font-13px;
+    padding-block: var(--cpd-space-2x);
+    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
+    box-sizing: border-box;
+    min-block-size: 40px;
+    border-radius: 24px;
+    font: var(--cpd-font-body-md-medium);
     position: relative;
+    transition:
+        color 0.1s,
+        background-color 0.1s;
 }
 
 .mx_TabbedView_maskedIcon {
@@ -132,7 +143,7 @@ limitations under the License.
 
 .mx_TabbedView_maskedIcon::before {
     display: inline-block;
-    background-color: $icon-button-color;
+    background-color: var(--cpd-color-icon-secondary);
     mask-repeat: no-repeat;
     mask-position: center;
     content: "";

res/css/structures/auth/_CompleteSecurity.pcss

@@ -35,8 +35,6 @@ limitations under the License.
 
 .mx_CompleteSecurity_skip {
     @mixin customisedCancelButton;
-    width: 18px;
-    height: 18px;
     position: absolute;
     right: 24px;
 }

res/css/views/dialogs/_CompoundDialog.pcss

@@ -44,13 +44,10 @@ limitations under the License.
 
         .mx_CompoundDialog_cancelButton {
             @mixin customisedCancelButton;
-            width: 20px;
-            height: 20px;
-
-            /* Align with middle of title, 34px from right edge */
+            /* Align with middle of title, 30px from right edge */
             position: absolute;
-            top: 34px;
-            right: 34px;
+            top: 30px;
+            right: 30px;
         }
     }
 

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/_JoinRuleDropdown.pcss

@@ -19,10 +19,6 @@ limitations under the License.
     font: var(--cpd-font-body-md-regular);
     color: $primary-content;
 
-    .mx_Dropdown_input {
-        border: 1px solid $input-border-color;
-    }
-
     .mx_Dropdown_option {
         font: var(--cpd-font-body-md-regular);
         line-height: $font-32px;

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

@@ -38,11 +38,11 @@ limitations under the License.
     &.mx_AccessibleButton_hasKind {
         padding: 7px 18px;
         text-align: center;
-        border-radius: 8px;
+        border-radius: 24px;
         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-subtle);
 
         &.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/_Dropdown.pcss

@@ -27,8 +27,8 @@ limitations under the License.
     display: flex;
     align-items: center;
     position: relative;
-    border-radius: 4px;
-    border: 1px solid $strong-input-border-color;
+    border-radius: 8px;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
     font: var(--cpd-font-body-sm-regular);
     user-select: none;
 }

res/css/views/elements/_Field.pcss

@@ -22,17 +22,17 @@ limitations under the License.
     min-width: 0;
     position: relative;
     margin: 1em 0;
-    border-radius: 4px;
+    border-radius: 8px;
     transition: border-color 0.25s;
-    border: 1px solid $input-border-color;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field_prefix {
-    border-right: 1px solid $input-border-color;
+    border-right: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field_postfix {
-    border-left: 1px solid $input-border-color;
+    border-left: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field input,
@@ -42,7 +42,7 @@ limitations under the License.
     border: none;
     /* Even without a border here, we still need this avoid overlapping the rounded */
     /* corners on the field above. */
-    border-radius: 4px;
+    border-radius: 8px;
     padding: 8px 9px;
     color: $primary-content;
     background-color: $background;
@@ -102,6 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     background-color: transparent;
     font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-secondary);
     transform: translateY(0);
     position: absolute;
     left: 0px;

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,26 +80,27 @@ 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-accent-rest);
+        border-color: var(--cpd-color-bg-accent-rest);
     }
 
     &:checked:disabled + label > .mx_Checkbox_background {
-        opacity: 0.5;
+        background: var(--cpd-color-bg-action-primary-disabled);
+        border-color: var(--cpd-color-bg-action-primary-disabled);
     }
 }
 
 .mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
     & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
-        background: $accent;
+        background: var(--cpd-color-bg-accent-rest);
     }
 
     &:checked + label > .mx_Checkbox_background {
         background: transparent;
-        border-color: $accent;
+        border-color: var(--cpd-color-bg-accent-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-accent-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-accent-rest);
 }

res/css/views/elements/_ToggleSwitch.pcss

@@ -17,33 +17,42 @@ limitations under the License.
 .mx_ToggleSwitch {
     --ToggleSwitch-min-width: $font-44px;
 
-    transition: background-color 0.2s ease-out 0.1s;
+    transition:
+        background-color 0.2s ease-out 0.1s,
+        border-color 0.2s ease-out 0.1s;
 
     width: $font-44px;
     height: $font-20px;
     border-radius: 1.5rem;
     padding: 2px;
 
-    background-color: $background;
-    border: 1px solid $strong-input-border-color;
-    opacity: 0.5;
+    background-color: var(--cpd-color-bg-canvas-disabled);
+    border: 1px solid var(--cpd-color-border-disabled);
+    cursor: not-allowed;
 
-    &[aria-disabled="true"] {
-        cursor: not-allowed;
+    &.mx_ToggleSwitch_enabled {
+        cursor: pointer;
+        background-color: var(--cpd-color-bg-canvas-default);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
+
+        &.mx_ToggleSwitch_on {
+            background-color: var(--cpd-color-bg-accent-rest);
+            border-color: var(--cpd-color-bg-accent-rest);
+        }
+
+        > .mx_ToggleSwitch_ball {
+            background-color: var(--cpd-color-icon-secondary);
+        }
     }
-}
 
-.mx_ToggleSwitch_enabled {
-    cursor: pointer;
-    opacity: 1;
-}
+    &.mx_ToggleSwitch_on {
+        background-color: var(--cpd-color-bg-action-primary-disabled);
+        border-color: var(--cpd-color-bg-action-primary-disabled);
 
-.mx_ToggleSwitch.mx_ToggleSwitch_on {
-    background-color: $inverted-bg-color;
-
-    > .mx_ToggleSwitch_ball {
-        left: calc(100% - $font-20px);
-        background-color: $background;
+        > .mx_ToggleSwitch_ball {
+            left: calc(100% - $font-20px);
+            background-color: var(--cpd-color-icon-on-solid-primary);
+        }
     }
 }
 
@@ -52,7 +61,9 @@ limitations under the License.
     width: $font-20px;
     height: $font-20px;
     border-radius: $font-20px;
-    background-color: $togglesw-ball-color;
-    transition: left 0.15s ease-out 0.1s;
+    background-color: var(--cpd-color-bg-action-primary-disabled);
+    transition:
+        left 0.15s ease-out 0.1s,
+        background-color 0.15s ease-out 0.1s;
     left: 0;
 }

res/css/views/right_panel/_BaseCard.pcss

@@ -179,6 +179,7 @@ limitations under the License.
         left: 0;
         mask-repeat: no-repeat;
         mask-position: center;
+        mask-size: 20px;
         background-color: var(--cpd-color-icon-secondary);
     }
 }
@@ -195,7 +196,7 @@ limitations under the License.
 .mx_BaseCard_close {
     order: 999; /* always last */
     &::before {
-        mask-image: url("$(res)/img/icons-close.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     }
 }
 

res/css/views/right_panel/_VerificationPanel.pcss

@@ -49,9 +49,6 @@ limitations under the License.
 
     .mx_EncryptionPanel_cancel {
         @mixin customisedCancelButton;
-        width: 14px;
-        height: 14px;
-        background-color: $settings-subsection-fg-color;
         position: absolute;
         z-index: 100;
         top: 14px;

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-accent-tertiary);
     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-accent-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

@@ -52,12 +52,9 @@ limitations under the License.
     }
 
     .mx_ProfileSettings_buttons {
+        display: flex;
+        gap: var(--cpd-space-4x);
         margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
         margin-bottom: $spacing-28;
-
-        > .mx_AccessibleButton_kind_link {
-            font: var(--cpd-font-body-md-regular);
-            margin-inline-end: 10px;
-        }
     }
 }