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

* Revert ed5ef02 * Update failing snapshots * Update snapshots after develop merge
matrix-org · Feb 20, 2024 · 96a33b8 · 96a33b8
1 parent d20e9e4
commit 96a33b8
Show file tree

Hide file tree

Showing 87 changed files with 99 additions and 104 deletions.
diff --git a/....spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/....spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
diff --git a/...er.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/...er.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
diff --git a/...spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
diff --git a/...r.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/...r.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
diff --git a/...-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/...-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
diff --git a/...ed-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/...ed-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
diff --git a/...ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/...ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
diff --git a/...c.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/...c.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
diff --git a/....spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/....spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
diff --git a/...er.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/...er.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
diff --git a/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
diff --git a/...pshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png b/...pshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
diff --git a/...wright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png b/...wright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/registration-linux.png b/playwright/snapshots/register/register.spec.ts/registration-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png
diff --git a/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png b/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png
diff --git a/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
diff --git a/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/...-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/...-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/invite-teammates-dialog-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/invite-teammates-dialog-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
diff --git a/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
diff --git a/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
diff --git a/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
diff --git a/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
diff --git a/...meline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/...meline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
diff --git a/...napshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/...napshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
diff --git a/...napshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/...napshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
diff --git a/...snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/...snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
diff --git a/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
diff --git a/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
diff --git a/...ots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/...ots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png
diff --git a/...s/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/...s/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
diff --git a/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
diff --git a/...onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png b/...onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png
diff --git a/...pec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png b/...pec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png
diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
diff --git a/res/css/_common.pcss b/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);
-    color: var(--cpd-color-text-primary);
+    border: 1px solid currentColor;
+    color: $accent;
     background-color: transparent;
     font-family: inherit;
 }
@@ -616,25 +616,24 @@ 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);
-    background-color: var(--cpd-color-bg-action-primary-rest);
-    border-color: var(--cpd-color-bg-action-primary-rest);
+    color: $accent-fg-color;
+    background-color: $accent;
     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: var(--cpd-color-bg-critical-primary);
-    border: solid 1px var(--cpd-color-bg-critical-primary);
-    color: var(--cpd-color-text-on-solid-primary);
+    background-color: $alert;
+    border: solid 1px $alert;
+    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);
-    color: var(--cpd-color-text-critical-primary);
+    border: solid 1px $alert;
+    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;
     }
 }
 

diff --git a/res/css/components/views/polls/_PollOption.pcss b/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);
-            background-color: var(--cpd-color-icon-accent-tertiary);
+            border-color: $accent;
+            background-color: $accent;
             background-image: url("$(res)/img/element-icons/check-white.svg");
             background-size: 12px;
             background-repeat: no-repeat;

diff --git a/res/css/structures/_SpaceRoomView.pcss b/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);
-                font-weight: var(--cpd-font-weight-semibold);
-                text-decoration: underline;
+                color: $accent;
 
                 &::before {
                     mask-image: url("$(res)/img/element-icons/room/invite.svg");
-                    background-color: var(--cpd-color-icon-primary);
+                    background-color: $accent;
                 }
             }
         }

diff --git a/res/css/structures/_TabbedView.pcss b/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);
-        color: var(--cpd-color-text-on-solid-primary);
+        background-color: $accent;
+        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 {

diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/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);
-        text-decoration: underline;
+        color: $accent;
         width: fit-content;
 
         /* list-style doesn't do it for webkit */

diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/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 {

diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/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 {

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/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;
                 }
             }
         }

diff --git a/res/css/views/elements/_AccessibleButton.pcss b/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,31 +53,29 @@ limitations under the License.
         }
 
         &.mx_AccessibleButton_kind_primary_sm {
-            color: var(--cpd-color-text-on-solid-primary);
-            background-color: var(--cpd-color-bg-action-primary-rest);
+            color: $button-primary-fg-color;
+            background-color: $accent;
         }
 
         &.mx_AccessibleButton_kind_danger_sm {
-            color: var(--cpd-color-text-on-solid-primary);
-            background-color: var(--cpd-color-bg-critical-primary);
+            color: $button-danger-fg-color;
+            background-color: $alert;
         }
 
         &.mx_AccessibleButton_kind_link_sm {
-            color: var(--cpd-color-text-primary);
-            text-decoration: underline;
-            font-weight: var(--cpd-font-weight-semibold);
+            color: $accent;
         }
 
         &.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");
             }
         }
 
         &.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,53 +99,57 @@ 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: var(--cpd-color-text-on-solid-primary);
-        background-color: var(--cpd-color-bg-action-primary-rest);
+        color: $button-primary-fg-color;
+        background-color: $accent;
     }
 
     &.mx_AccessibleButton_kind_icon_primary_outline,
     &.mx_AccessibleButton_kind_primary_outline {
-        border: 1px solid var(--cpd-color-border-interactive-secondary);
-        color: var(--cpd-color-text-primary);
+        color: $accent;
     }
 
     &.mx_AccessibleButton_kind_secondary {
-        color: var(--cpd-color-text-primary);
-        text-decoration: underline;
+        color: $accent;
     }
 
     &.mx_AccessibleButton_kind_secondary_content {
         color: $secondary-content;
     }
 
     &.mx_AccessibleButton_kind_danger {
-        color: var(--cpd-color-text-on-solid-primary);
-        background-color: var(--cpd-color-bg-critical-primary);
+        color: $button-danger-fg-color;
+        background-color: $alert;
 
         &.mx_AccessibleButton_disabled {
-            color: var(--cpd-color-text-on-solid-primary);
-            background-color: var(--cpd-color-bg-critical-primary);
+            color: $button-danger-disabled-fg-color;
+            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);
-            border-color: var(--cpd-color-border-disabled);
+            color: $button-danger-disabled-bg-color;
+            border-color: $button-danger-disabled-bg-color;
         }
     }
 
     &.mx_AccessibleButton_kind_danger_sm {
         &.mx_AccessibleButton_disabled {
-            color: var(--cpd-color-text-disabled);
-            background-color: var(--cpd-color-bg-subtle-primary);
+            color: $button-danger-disabled-fg-color;
+            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 {

diff --git a/res/css/views/elements/_ProgressBar.pcss b/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;

diff --git a/res/css/views/elements/_ReplyChain.pcss b/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;

diff --git a/res/css/views/elements/_Slider.pcss b/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 {