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 9a0a24ae56..6d074f2773 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 a62067243e..98ce66178e 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 deedd2d703..2e661cac95 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 3baeecb3d9..0c474b2c5c 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 9fa8fcd008..a59f8fbf17 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 6b903fd7ff..4b74eb5745 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 56624ac9bd..8592436e75 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 7d48d40fb6..5ec4e38282 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 62744fc4e9..00a570e933 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 c203d12b5d..a3bbd87162 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 aeecf52e6a..63b3d1ed37 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 998d423690..a576969a41 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 67f9435c6d..f32be24fb4 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 25380a74b2..a01cabd6e4 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 664e7ac85e..c9c4346c8e 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 d5462f30af..7d4db48e08 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 d54710f6f3..2378aae2a9 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 347c86f69e..96c67985c9 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 8ae5d312e7..6617e64aad 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 c827248e12..c5c73fa3ad 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 ba6cd4c789..9d3954f8c1 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 a9ce1c8a76..0d13a72c6e 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 f523146348..4964e9c8db 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 502e60cb1f..d145a18655 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 739c5f2d15..7e8c336eeb 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 6846400693..f1d2eb36d4 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 6514d4c4e3..24d7c675a3 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 b853732b53..afea3e1444 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 59330ad5e1..5139b5b9b1 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 412dd8fb3e..cb777defe8 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 1685dd9e16..9dce045261 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 e579ad2313..bdd01674ea 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 ad9e8c7a83..db736e2fe5 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 35d4bfe8f4..d4f2492a1a 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 ec24ef90aa..a954d9a007 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 5ca3f3f50f..dfe188636c 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 ee983ee3a5..3a0da67d18 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 fbee0bb1de..cbf9c2927a 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 80359800e7..b7ec691552 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 cdab9fe054..ed65bbc63d 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 07e319522f..3d684c73cb 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 9c695fe077..dc5484c77c 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 69d40e9016..a5e26c3e69 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 899e7079af..a8587e7604 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 0697e7813a..c16ff4480a 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 8b8d4d9fb5..f8b0504ec9 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 5188d73163..4d4972d9f3 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 5ca3f3f50f..dfe188636c 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 9cdcc4a3b7..90db42b411 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 e4d589c568..791a1f93a2 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 0bba20ad52..b4ab81ebe6 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 670266b413..8c93664911 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 5084f9b122..8d6e089834 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 6e3529dddb..a7c7ecc5b8 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 70f15ccf8f..f51b8eb332 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 5be54c3158..1f64d5efda 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 db7b89c841..29f7adc4dd 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 ddb9667ba6..e1ccd91306 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 f6ec9458db..9d67e199ff 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -562,7 +562,7 @@ legend {
border-radius: 8px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
- background-color: var(--cpd-color-bg-action-primary-rest);
+ background-color: $accent;
width: auto;
padding: 7px;
padding-left: 1.5em;
@@ -595,8 +595,8 @@ legend {
/* flip colours for the secondary ones */
font-weight: var(--cpd-font-weight-semibold);
- border: 1px solid var(--cpd-color-border-interactive-secondary);
- color: var(--cpd-color-text-primary);
+ border: 1px solid currentColor;
+ color: $accent;
background-color: transparent;
font-family: inherit;
}
@@ -616,9 +616,8 @@ legend {
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-action-primary-rest);
- border-color: var(--cpd-color-bg-action-primary-rest);
+ color: $accent-fg-color;
+ background-color: $accent;
min-width: 156px;
}
@@ -626,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: var(--cpd-color-bg-critical-primary);
- border: solid 1px var(--cpd-color-bg-critical-primary);
- color: var(--cpd-color-text-on-solid-primary);
+ background-color: $alert;
+ border: solid 1px $alert;
+ color: $accent-fg-color;
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
- border: solid 1px var(--cpd-color-border-critical-primary);
- color: var(--cpd-color-text-critical-primary);
+ border: solid 1px $alert;
+ color: $alert;
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
@@ -816,9 +815,11 @@ legend {
}
@define-mixin composerButtonHighLight {
- background: var(--cpd-color-bg-subtle-primary);
+ /* TODO: Refactor as this will break for apps that override the accent color */
+ background: var(--cpd-color-green-300);
+ /* make the icon the accent color too */
&::before {
- background-color: var(--cpd-color-icon-primary) !important;
+ background-color: $accent !important;
}
}
diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
index 81301f5646..f8766de6a4 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: var(--cpd-color-icon-accent-tertiary);
+ color: $accent;
margin-right: $spacing-4;
vertical-align: middle;
}
.mx_PollOption_checked {
- border-color: var(--cpd-color-border-interactive-hovered);
+ border-color: $accent;
.mx_PollOption_popularityBackground {
.mx_PollOption_popularityAmount {
- background-color: var(--cpd-color-icon-accent-tertiary);
+ background-color: $accent;
}
}
/* override checked radio button styling to show checkmark instead */
.mx_StyledRadioButton_checked {
- input[type="radio"]:checked + div {
+ input[type="radio"] + div {
border-width: 2px;
- border-color: var(--cpd-color-icon-accent-tertiary);
- background-color: var(--cpd-color-icon-accent-tertiary);
+ border-color: $accent;
+ background-color: $accent;
background-image: url("$(res)/img/element-icons/check-white.svg");
background-size: 12px;
background-repeat: no-repeat;
diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index 50f6fc9278..000781bd97 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -46,10 +46,10 @@ limitations under the License.
}
&:hover {
- border-color: var(--cpd-color-bg-interactive-primary-rest);
+ border-color: $accent;
&::before {
- background-color: var(--cpd-color-icon-primary);
+ background-color: $accent;
}
> span {
@@ -212,7 +212,7 @@ limitations under the License.
left: 8px;
height: 16px;
width: 16px;
- background: var(--cpd-color-icon-on-solid-primary);
+ background: #fff; /* white icon fill */
mask-size: 16px;
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
@@ -293,13 +293,11 @@ limitations under the License.
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
- color: var(--cpd-color-text-primary);
- font-weight: var(--cpd-font-weight-semibold);
- text-decoration: underline;
+ color: $accent;
&::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
- background-color: var(--cpd-color-icon-primary);
+ background-color: $accent;
}
}
}
diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
index 847bea9cba..fd8d6a63ff 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: var(--cpd-color-bg-action-primary-rest);
- color: var(--cpd-color-text-on-solid-primary);
+ background-color: $accent;
+ color: $tab-label-active-fg-color;
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
- background-color: var(--cpd-color-icon-on-solid-primary);
+ background-color: $tab-label-active-fg-color;
}
.mx_TabbedView_maskedIcon {
diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
index 7cbd67d72c..def912f253 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.pcss
+++ b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -21,8 +21,7 @@ limitations under the License.
list-style: none;
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
- color: var(--cpd-color-text-primary);
- text-decoration: underline;
+ color: $accent;
width: fit-content;
/* list-style doesn't do it for webkit */
diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss
index 2a42d16a65..2efc6bc047 100644
--- a/res/css/views/dialogs/_FeedbackDialog.pcss
+++ b/res/css/views/dialogs/_FeedbackDialog.pcss
@@ -60,6 +60,7 @@ limitations under the License.
a,
.mx_AccessibleButton_kind_link {
+ color: $accent;
text-decoration: underline;
}
@@ -131,7 +132,7 @@ limitations under the License.
.mx_StyledRadioButton_checked {
font-size: 24px;
- border-color: var(--cpd-color-bg-action-primary-rest);
+ border-color: $accent;
}
&::after {
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
index 9d4dada646..ca224ba5c7 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-semibold);
+ font: var(--cpd-font-body-md-regular);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index 78346e9b7e..b7198012ab 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: var(--cpd-color-icon-primary);
+ background: $accent;
}
}
}
diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
index 5f8b58dc49..172d8fc053 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-semibold);
+ font: var(--cpd-font-body-md-regular);
border: none; /* override default styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@@ -53,23 +53,21 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_primary_sm {
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-action-primary-rest);
+ color: $button-primary-fg-color;
+ background-color: $accent;
}
&.mx_AccessibleButton_kind_danger_sm {
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-critical-primary);
+ color: $button-danger-fg-color;
+ background-color: $alert;
}
&.mx_AccessibleButton_kind_link_sm {
- color: var(--cpd-color-text-primary);
- text-decoration: underline;
- font-weight: var(--cpd-font-weight-semibold);
+ color: $accent;
}
&.mx_AccessibleButton_kind_confirm_sm {
- background-color: var(--cpd-color-bg-action-primary-rest);
+ background-color: $accent;
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
@@ -77,7 +75,7 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_cancel_sm {
- background-color: var(--cpd-color-bg-critical-primary);
+ background-color: $alert;
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
@@ -101,22 +99,26 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
}
+ &.mx_AccessibleButton_kind_icon_primary,
+ &.mx_AccessibleButton_kind_icon_primary_outline,
+ &.mx_AccessibleButton_kind_primary,
+ &.mx_AccessibleButton_kind_primary_outline {
+ border: 1px solid $accent;
+ }
+
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_primary {
- border: 1px solid var(--cpd-color-bg-action-primary-rest);
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-action-primary-rest);
+ color: $button-primary-fg-color;
+ background-color: $accent;
}
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary_outline {
- border: 1px solid var(--cpd-color-border-interactive-secondary);
- color: var(--cpd-color-text-primary);
+ color: $accent;
}
&.mx_AccessibleButton_kind_secondary {
- color: var(--cpd-color-text-primary);
- text-decoration: underline;
+ color: $accent;
}
&.mx_AccessibleButton_kind_secondary_content {
@@ -124,30 +126,30 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_danger {
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-critical-primary);
+ color: $button-danger-fg-color;
+ background-color: $alert;
&.mx_AccessibleButton_disabled {
- color: var(--cpd-color-text-on-solid-primary);
- background-color: var(--cpd-color-bg-critical-primary);
+ color: $button-danger-disabled-fg-color;
+ background-color: $button-danger-disabled-bg-color;
}
}
&.mx_AccessibleButton_kind_danger_outline {
- color: var(--cpd-color-text-critical-primary);
+ color: $alert;
background-color: transparent;
- border: 1px solid var(--cpd-color-border-critical-primary);
+ border: 1px solid $alert;
&.mx_AccessibleButton_disabled {
- color: var(--cpd-color-text-disabled);
- border-color: var(--cpd-color-border-disabled);
+ color: $button-danger-disabled-bg-color;
+ border-color: $button-danger-disabled-bg-color;
}
}
&.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
- color: var(--cpd-color-text-disabled);
- background-color: var(--cpd-color-bg-subtle-primary);
+ color: $button-danger-disabled-fg-color;
+ background-color: $button-danger-disabled-bg-color;
}
}
@@ -156,19 +158,18 @@ limitations under the License.
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
font-size: inherit;
- font-weight: var(--cpd-font-weight-semibold);
+ font-weight: normal;
line-height: inherit;
padding: 0;
- text-decoration: underline;
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
- color: var(--cpd-color-text-primary);
+ color: $accent;
}
&.mx_AccessibleButton_kind_danger_inline {
- color: var(--cpd-color-text-critical-primary);
+ color: $alert;
}
&.mx_AccessibleButton_kind_content_inline {
diff --git a/res/css/views/elements/_ProgressBar.pcss b/res/css/views/elements/_ProgressBar.pcss
index 636c34bca1..f9b3abef5e 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: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+ border: none;
@mixin ProgressBarBorderRadius 6px;
- @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
+ @mixin ProgressBarColour $accent;
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
transition: width 1s;
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
index 0b8b984a95..55f32e3196 100644
--- a/res/css/views/elements/_ReplyChain.pcss
+++ b/res/css/views/elements/_ReplyChain.pcss
@@ -25,8 +25,6 @@ limitations under the License.
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
color: $secondary-content;
transition: color ease 0.15s;
- font-weight: var(--cpd-font-weight-normal);
- text-decoration: inherit;
&:hover {
color: $primary-content;
diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss
index 2477d542c6..58d4484919 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: var(--cpd-color-bg-action-primary-rest);
+ --active-color: $accent;
--selection-dot-size: 2.4em;
&:disabled {
diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
index 4bda5ef217..f2b0151bfa 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 var(--cpd-color-border-interactive-primary);
+ border: 1px solid $strong-input-border-color;
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: var(--cpd-color-icon-on-solid-primary);
+ background: #ffffff;
}
&:checked + label > .mx_Checkbox_background {
- background: var(--cpd-color-bg-action-primary-rest);
- border-color: var(--cpd-color-bg-action-primary-rest);
+ background: $accent;
+ border-color: $accent;
}
&: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: var(--cpd-color-bg-action-primary-rest);
+ background: $accent;
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
- border-color: var(--cpd-color-bg-action-primary-rest);
+ border-color: $accent;
}
}
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index e250c1d015..5f67a36f81 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: var(--cpd-color-border-interactive-primary);
- $active-radio-circle-color: var(--cpd-color-bg-action-primary-rest);
+ $radio-circle-color: $strong-input-border-color;
+ $active-radio-circle-color: $accent;
position: relative;
display: flex;
@@ -126,5 +126,5 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
- border-color: var(--cpd-color-bg-action-primary-rest);
+ border-color: $accent;
}
diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss
index f813d6d21e..8cd081ebe0 100644
--- a/res/css/views/room_settings/_AliasSettings.pcss
+++ b/res/css/views/room_settings/_AliasSettings.pcss
@@ -16,9 +16,8 @@ limitations under the License.
.mx_AliasSettings_localAddresses {
cursor: pointer;
- color: var(--cpd-color-text-primary);
+ color: $accent;
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 72f7214089..f90207fce4 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: var(--cpd-color-border-interactive-primary);
+ border-color: $accent-500;
}
}
diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss
index 8de0a78fe7..10c82a8474 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%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
+ @mixin composerButton 50%, $accent, $accent-300;
}
.mx_EmojiButton_highlight {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 4e11f64e77..31a1dc5dcb 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)
- var(--cpd-color-bg-action-primary-rest);
+ $accent;
}
}
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index cb42db35ec..b6e97fac39 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%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
+ @mixin composerButton 50%, $accent, $accent-300;
&:last-child {
margin-right: auto;
@@ -199,11 +199,11 @@ limitations under the License.
&.mx_MessageComposer_closeButtonMenu {
&::after {
- background: var(--cpd-color-bg-subtle-primary);
+ background: $accent-300;
}
&::before {
- background-color: var(--cpd-color-icon-primary);
+ background-color: $accent;
z-index: 2;
}
}
@@ -295,7 +295,7 @@ limitations under the License.
width: 32px;
height: 32px;
border-radius: 100%;
- background-color: var(--cpd-color-icon-accent-tertiary);
+ background-color: $accent;
&::before {
position: absolute;
@@ -309,7 +309,7 @@ limitations under the License.
mask-size: contain;
mask-position: center;
- background-color: var(--cpd-color-icon-on-solid-primary);
+ background-color: $button-fg-color;
content: "";
}
}
diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss
index 237ba389e9..d950e6336a 100644
--- a/res/css/views/rooms/_RoomInfoLine.pcss
+++ b/res/css/views/rooms/_RoomInfoLine.pcss
@@ -49,8 +49,6 @@ 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 9aa97561d7..e72fedafef 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: var(--cpd-color-bg-canvas-default);
- border: 6px solid var(--cpd-color-icon-primary);
+ background-color: $secondary-accent-color;
+ border: 6px solid $accent;
pointer-events: none;
}
diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss
index 6ae91c0286..48d891641a 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: var(--cpd-color-bg-action-primary-rest);
+ border-color: $accent;
}
}
@@ -72,7 +72,7 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
- background-color: var(--cpd-color-bg-subtle-secondary);
+ background-color: $accent-200;
}
.mx_EventTile {
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index 14409f55a2..26250d1931 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-semibold);
+ 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 05232da8c5..58d21a4bd2 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: var(--cpd-color-icon-accent-tertiary);
+ background: $accent;
border-radius: 32px;
animation-duration: 300ms;
@@ -75,7 +75,7 @@ limitations under the License.
}
&::after {
- background-color: var(--cpd-color-icon-on-solid-primary);
+ background-color: $background;
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 93ebfa7cc2..299f51ffc0 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: var(--cpd-color-bg-subtle-secondary);
+$event-selected-color: $system;
$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: var(--cpd-color-gray-200);
+$progressbar-bg-color: $system;
$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 12cd95ab85..2883427720 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: var(--cpd-color-gray-200);
+$progressbar-bg-color: $panel-actions;
$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 67c11e2f35..07bbbe533e 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 b7ff2d894d..4c23fa8489 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`] = `