Refine styles of controls to match Compound

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: 1px;
     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,24 +627,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,
@@ -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,41 @@ 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_active {
-        background-color: $accent;
+    .mx_TabbedView_tabLabel:hover, .mx_TabbedView_tabLabel_active {
         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.15s;
     }
 }
 
@@ -120,10 +124,14 @@ 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.15s, background-color 0.15s;
 }
 
 .mx_TabbedView_maskedIcon {
@@ -132,7 +140,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);
                 }
             }
         }