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/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png index 488132b30f..d3c8961391 100644 Binary files a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png and b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png differ diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png index 0135b0a66e..8d3d371dcc 100644 Binary files a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png and b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-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..fb63492564 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-dm-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png index 663505b4c5..07b7a02ed3 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-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..427b8228f5 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/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png index d06d9e8164..4c1bec3fa9 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-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..300b7e011a 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/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png index 73deb5b929..58a97c40b7 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png index d5348395c8..c4b69dd6e6 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-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..52193fdcc5 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 7d4db48e08..ab9fdb2bf6 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..3bfc6affca 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..30436d0abc 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/right-panel/file-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png index 38592f9b67..e4f6313c97 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png differ diff --git a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png index ee3bd0348b..7d8884dc4d 100644 Binary files a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png differ diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png index 7d4e21e240..e53470df87 100644 Binary files a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png and b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-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..bf7be29b02 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 bb2672fa02..13d3c5b7d3 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/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png index f757c18d09..7162ce0e3c 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-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 7e8c336eeb..cc8eb610e8 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 f1d2eb36d4..5950cb28b1 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..e864d3962c 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..a94f93b33c 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..ef7536d455 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 cb777defe8..d3b002a5fa 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 156c46d6f3..e112e5edfa 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 7d41e49704..6e03d93862 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/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index 3b9781553d..747bf1b5d1 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-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..8ea537d424 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..2ee588be13 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..27425c6326 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..02fec4dee6 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..629435b639 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..497fd62e78 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..3255574339 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..c9feb4ef4a 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..8d5fd4adcb 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..83d022391e 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..431953837a 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..02fec4dee6 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..8d1a239a1d 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..502d4e64df 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..d221eea7d0 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..b9aa65ab58 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..3761779af0 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..9236c30efa 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..b495f35733 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..297f35e215 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..ea1fa63bde 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..9d9b431b0c 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 9d67e199ff..c6b5e14c5b 100644 --- a/res/css/_common.pcss +++ b/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; } } 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..191c554405 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/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: ""; diff --git a/res/css/structures/auth/_CompleteSecurity.pcss b/res/css/structures/auth/_CompleteSecurity.pcss index 4c3602ac26..ef8c82cbc8 100644 --- a/res/css/structures/auth/_CompleteSecurity.pcss +++ b/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; } diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index 70ba1f8c10..3675678ed9 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/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; } } 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/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss index 6df937816e..da0796edea 100644 --- a/res/css/views/dialogs/_JoinRuleDropdown.pcss +++ b/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; 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..236cd03abf 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/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 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 { diff --git a/res/css/views/elements/_Dropdown.pcss b/res/css/views/elements/_Dropdown.pcss index 28e96f0146..4bc7860806 100644 --- a/res/css/views/elements/_Dropdown.pcss +++ b/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; } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 02b0e482b5..149ea054f6 100644 --- a/res/css/views/elements/_Field.pcss +++ b/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; 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..66cc13279b 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,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); } } diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss index 5f67a36f81..360dc2f55d 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-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); } diff --git a/res/css/views/elements/_ToggleSwitch.pcss b/res/css/views/elements/_ToggleSwitch.pcss index 099be7e8ef..c18444c0b8 100644 --- a/res/css/views/elements/_ToggleSwitch.pcss +++ b/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; } diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index ae5b1ac2c5..41552ac578 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/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"); } } diff --git a/res/css/views/right_panel/_VerificationPanel.pcss b/res/css/views/right_panel/_VerificationPanel.pcss index ee8dd6ecfc..ff080e8cb6 100644 --- a/res/css/views/right_panel/_VerificationPanel.pcss +++ b/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; 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..d26c2b5bfe 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-accent-tertiary); pointer-events: none; } diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 48d891641a..571b9a1cf1 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-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 { diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss index 26250d1931..5caff1f2c0 100644 --- a/res/css/views/settings/_ProfileSettings.pcss +++ b/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
above the buttons */
margin-bottom: $spacing-28;
-
- > .mx_AccessibleButton_kind_link {
- font: var(--cpd-font-body-md-regular);
- 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/css/views/voip/_DialPadContextMenu.pcss b/res/css/views/voip/_DialPadContextMenu.pcss
index e6e5d227b9..322fb633e5 100644
--- a/res/css/views/voip/_DialPadContextMenu.pcss
+++ b/res/css/views/voip/_DialPadContextMenu.pcss
@@ -37,8 +37,6 @@ limitations under the License.
.mx_DialPadContextMenu_cancel {
@mixin customisedCancelButton;
float: right;
- width: 14px;
- height: 14px;
}
.mx_DialPadContextMenu_header:focus-within {
diff --git a/res/css/views/voip/_DialPadModal.pcss b/res/css/views/voip/_DialPadModal.pcss
index 949a9a2a2e..93071c8c7c 100644
--- a/res/css/views/voip/_DialPadModal.pcss
+++ b/res/css/views/voip/_DialPadModal.pcss
@@ -47,8 +47,6 @@ limitations under the License.
.mx_DialPadModal_cancel {
@mixin customisedCancelButton;
float: right;
- width: 14px;
- height: 14px;
margin-right: 16px;
}
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index 299f51ffc0..eb37ab743a 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);
@@ -155,7 +155,7 @@ $roomtile-default-badge-bg-color: $input-darker-fg-color;
/* Tabbed views */
/* ******************** */
-$tab-label-fg-color: $primary-content;
+$tab-label-fg-color: $secondary-content;
$tab-label-active-fg-color: $primary-content;
/* ******************** */
@@ -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-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss
index ed345a28ec..140fec60c7 100644
--- a/res/themes/light-custom/css/_custom.pcss
+++ b/res/themes/light-custom/css/_custom.pcss
@@ -68,12 +68,10 @@ $roomlist-bg-color: var(--roomlist-background-color);
$message-action-bar-fg-color: var(--timeline-text-color);
$primary-content: var(--timeline-text-color);
$roomtopic-color: var(--timeline-text-color-50pct);
-$tab-label-fg-color: var(--timeline-text-color);
/* was #212121 */
$topleftmenu-color: var(--timeline-text-color);
/* was #45474a */
$dialog-title-fg-color: var(--timeline-text-color);
-$tab-label-fg-color: var(--timeline-text-color);
/* was #4e5054 */
$authpage-lang-color: var(--timeline-text-color);
/* was #232f32 */
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index 2883427720..a201adbc44 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -219,8 +219,8 @@ $e2e-warning-color-light: var(--cpd-color-red-300);
/* Tabbed views */
/* ******************** */
-$tab-label-fg-color: $dialog-title-fg-color;
-$tab-label-active-fg-color: $background;
+$tab-label-fg-color: $secondary-content;
+$tab-label-active-fg-color: $primary-content;
/* ******************** */
/* Buttons */
@@ -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