diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
index 6d074f2773..9a0a24ae56 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
index 98ce66178e..a62067243e 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
index 2e661cac95..deedd2d703 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
index 0c474b2c5c..3baeecb3d9 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
index a59f8fbf17..9fa8fcd008 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
index 4b74eb5745..6b903fd7ff 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
index 8592436e75..56624ac9bd 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
index 5ec4e38282..7d48d40fb6 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
index 00a570e933..62744fc4e9 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
index a3bbd87162..c203d12b5d 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ
diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
index 63b3d1ed37..aeecf52e6a 100644
Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ
diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
index a576969a41..998d423690 100644
Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png differ
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
index f32be24fb4..67f9435c6d 100644
Binary files a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png and b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png differ
diff --git a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png
index a01cabd6e4..25380a74b2 100644
Binary files a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png and b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png differ
diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png
index c9c4346c8e..664e7ac85e 100644
Binary files a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png differ
diff --git a/playwright/snapshots/register/register.spec.ts/registration-linux.png b/playwright/snapshots/register/register.spec.ts/registration-linux.png
index 9540d32692..28f9cab795 100644
Binary files a/playwright/snapshots/register/register.spec.ts/registration-linux.png and b/playwright/snapshots/register/register.spec.ts/registration-linux.png differ
diff --git a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png
index 2378aae2a9..d54710f6f3 100644
Binary files a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png and b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png differ
diff --git a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png
index 96c67985c9..347c86f69e 100644
Binary files a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png differ
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
index 6617e64aad..8ae5d312e7 100644
Binary files a/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png and b/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png differ
diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
index c5c73fa3ad..c827248e12 100644
Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png differ
diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
index 9d3954f8c1..ba6cd4c789 100644
Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
index 728ed22f71..a9ce1c8a76 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png
index 4964e9c8db..f523146348 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-11-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png
index d145a18655..502e60cb1f 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/font-slider-21-linux.png differ
diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index 2cb327d89c..739c5f2d15 100644
Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
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
index ca7b77112b..6846400693 100644
Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png differ
diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index 24d7c675a3..6514d4c4e3 100644
Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png
index afea3e1444..b853732b53 100644
Binary files a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png differ
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
index 5139b5b9b1..59330ad5e1 100644
Binary files a/playwright/snapshots/spaces/spaces.spec.ts/invite-teammates-dialog-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/invite-teammates-dialog-linux.png differ
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
index f8229c5dd9..412dd8fb3e 100644
Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png differ
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
index 7cb26aa5ba..e5d2bef0f7 100644
Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ
diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
index f4cbbf3293..b8b85cb448 100644
Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
index db736e2fe5..ad9e8c7a83 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
index d4f2492a1a..35d4bfe8f4 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
index a954d9a007..ec24ef90aa 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
index dfe188636c..5ca3f3f50f 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
index 3a0da67d18..ee983ee3a5 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
index cbf9c2927a..fbee0bb1de 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
index b7ec691552..80359800e7 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
index ed65bbc63d..cdab9fe054 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ
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
index 3d684c73cb..07e319522f 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
index dc5484c77c..9c695fe077 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ
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
index a5e26c3e69..69d40e9016 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ
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
index a8587e7604..899e7079af 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
index c16ff4480a..0697e7813a 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
index f8b0504ec9..8b8d4d9fb5 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
index 4d4972d9f3..5188d73163 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ
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
index dfe188636c..5ca3f3f50f 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
index 90db42b411..9cdcc4a3b7 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
index 791a1f93a2..e4d589c568 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png
index b4ab81ebe6..0bba20ad52 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png
index 8c93664911..670266b413 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
index 8d6e089834..5084f9b122 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
index a7c7ecc5b8..6e3529dddb 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
index f51b8eb332..70f15ccf8f 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ
diff --git a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png
index 1f64d5efda..5be54c3158 100644
Binary files a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png and b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png differ
diff --git a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png
index 29f7adc4dd..db7b89c841 100644
Binary files a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png and b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-page-is-shown-and-preference-exists-1-linux.png differ
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
index e1ccd91306..ddb9667ba6 100644
Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 1ab0e8bf5d..a322e3f45b 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -561,7 +561,7 @@ legend {
border-radius: 8px;
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;
@@ -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,8 +615,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;
}
@@ -624,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: $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;
}
}
diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
index f8766de6a4..81301f5646 100644
--- 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: $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;
diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index 000781bd97..50f6fc9278 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/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);
}
}
}
diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
index fd8d6a63ff..847bea9cba 100644
--- 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: $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 {
diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
index def912f253..7cbd67d72c 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.pcss
+++ b/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 */
diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss
index 2efc6bc047..2a42d16a65 100644
--- a/res/css/views/dialogs/_FeedbackDialog.pcss
+++ b/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 {
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
index ca224ba5c7..9d4dada646 100644
--- 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-regular);
+ font: var(--cpd-font-body-md-semibold);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index b7198012ab..78346e9b7e 100644
--- 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: $accent;
+ background: var(--cpd-color-icon-primary);
}
}
}
diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
index 172d8fc053..5f8b58dc49 100644
--- 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-regular);
+ font: var(--cpd-font-body-md-semibold);
border: none; /* override default 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-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 +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 {
diff --git a/res/css/views/elements/_ProgressBar.pcss b/res/css/views/elements/_ProgressBar.pcss
index f9b3abef5e..636c34bca1 100644
--- 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: 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;
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
index 55f32e3196..0b8b984a95 100644
--- a/res/css/views/elements/_ReplyChain.pcss
+++ b/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;
diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss
index 58d4484919..2477d542c6 100644
--- 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: $accent;
+ --active-color: var(--cpd-color-bg-action-primary-rest);
--selection-dot-size: 2.4em;
&:disabled {
diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
index f2b0151bfa..4bda5ef217 100644
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/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);
}
}
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index 5f67a36f81..e250c1d015 100644
--- a/res/css/views/elements/_StyledRadioButton.pcss
+++ b/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-action-primary-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-action-primary-rest);
}
diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss
index 8cd081ebe0..f813d6d21e 100644
--- a/res/css/views/room_settings/_AliasSettings.pcss
+++ b/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;
diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss
index f90207fce4..72f7214089 100644
--- a/res/css/views/rooms/_EditMessageComposer.pcss
+++ b/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);
}
}
diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss
index 10c82a8474..8de0a78fe7 100644
--- a/res/css/views/rooms/_EmojiButton.pcss
+++ b/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 {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 31a1dc5dcb..4e11f64e77 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/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);
}
}
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index b6e97fac39..cb42db35ec 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/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: "";
}
}
diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss
index d950e6336a..237ba389e9 100644
--- a/res/css/views/rooms/_RoomInfoLine.pcss
+++ b/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 */
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
index e72fedafef..9aa97561d7 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss
+++ b/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-primary);
pointer-events: none;
}
diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss
index 48d891641a..6ae91c0286 100644
--- a/res/css/views/settings/_LayoutSwitcher.pcss
+++ b/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-action-primary-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 {
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index 26250d1931..14409f55a2 100644
--- a/res/css/views/settings/_ProfileSettings.pcss
+++ b/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-regular);
+ font: var(--cpd-font-body-md-semibold);
margin-inline-end: 10px;
}
}
diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
index 58d21a4bd2..05232da8c5 100644
--- a/res/css/views/user-onboarding/_UserOnboardingTask.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
@@ -65,7 +65,7 @@ limitations under the License.
content: "";
position: absolute;
inset: -2px;
- background: $accent;
+ background: var(--cpd-color-icon-accent-tertiary);
border-radius: 32px;
animation-duration: 300ms;
@@ -75,7 +75,7 @@ limitations under the License.
}
&::after {
- background-color: $background;
+ background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
mask-repeat: no-repeat;
mask-position: center;
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index 299f51ffc0..93ebfa7cc2 100644
--- a/res/themes/dark/css/_dark.pcss
+++ b/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: $system;
+$event-selected-color: var(--cpd-color-bg-subtle-secondary);
$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: $system;
+$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #800;
$event-timestamp-color: $text-secondary-color;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index 2883427720..12cd95ab85 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -312,7 +312,7 @@ $call-light-quaternary-content: #c1c6cd;
/* One-off colors */
/* ******************** */
-$progressbar-bg-color: $panel-actions;
+$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #faa;
$event-timestamp-color: #acacac;
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 07bbbe533e..67c11e2f35 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -65,7 +65,7 @@ const FacePile: FC = ({
);
const content = (
-
+
{pileContents}
{children}
diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 4c23fa8489..b7ff2d894d 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -3,7 +3,7 @@
exports[` renders with a tooltip 1`] = `
renders 1`] = `