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 9a0a24ae562..6d074f2773c 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 a62067243e5..98ce66178e0 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 deedd2d703f..2e661cac95c 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 3baeecb3d9d..0c474b2c5cc 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 9fa8fcd0084..a59f8fbf17b 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 6b903fd7ff2..4b74eb57453 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 56624ac9bd6..8592436e755 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 7d48d40fb6f..5ec4e38282e 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 62744fc4e93..00a570e9338 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 c203d12b5d2..a3bbd871628 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 aeecf52e6ab..63b3d1ed370 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 998d423690f..a576969a412 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 67f9435c6de..f32be24fb49 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 25380a74b2f..a01cabd6e4a 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 664e7ac85e7..c9c4346c8ed 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 d5462f30afd..7d4db48e080 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 d54710f6f3b..2378aae2a9d 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 347c86f69ee..96c67985c99 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 8ae5d312e7a..6617e64aadc 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 c827248e120..c5c73fa3ad6 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 ba6cd4c789b..9d3954f8c1d 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 a9ce1c8a76f..0d13a72c6e6 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 f5231463488..4964e9c8dba 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 502e60cb1f8..d145a186554 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 739c5f2d15b..7e8c336eeb2 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 6846400693f..f1d2eb36d42 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 6514d4c4e3e..24d7c675a3d 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 b853732b531..afea3e1444f 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 59330ad5e1c..5139b5b9b18 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 412dd8fb3e5..cb777defe85 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 1685dd9e161..9dce045261a 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 e579ad23138..bdd01674eaa 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 ad9e8c7a832..db736e2fe51 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 35d4bfe8f45..d4f2492a1a2 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 ec24ef90aa5..a954d9a007d 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 5ca3f3f50ff..dfe188636c1 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 ee983ee3a56..3a0da67d18e 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 fbee0bb1de3..cbf9c2927a8 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 80359800e72..b7ec6915524 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 cdab9fe0540..ed65bbc63d6 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 07e319522f1..3d684c73cb2 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 9c695fe077c..dc5484c77c7 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 69d40e90160..a5e26c3e690 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 899e7079afe..a8587e76046 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 0697e7813af..c16ff4480ad 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 8b8d4d9fb54..f8b0504ec98 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 5188d731635..4d4972d9f3c 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 5ca3f3f50ff..dfe188636c1 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 9cdcc4a3b71..90db42b411e 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 e4d589c568a..791a1f93a20 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 0bba20ad522..b4ab81ebe63 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 670266b413d..8c93664911c 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 5084f9b1222..8d6e0898348 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 6e3529dddbf..a7c7ecc5b86 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 70f15ccf8f3..f51b8eb3324 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 5be54c31582..1f64d5efda8 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 db7b89c8411..29f7adc4dd8 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 ddb9667ba6d..e1ccd913066 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 f6ec9458dba..9d67e199ff1 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 81301f56464..f8766de6a4d 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 50f6fc92783..000781bd97a 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 847bea9cba3..fd8d6a63ffc 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 7cbd67d72c8..def912f253d 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 2a42d16a653..2efc6bc047c 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 9d4dada6461..ca224ba5c75 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 78346e9b7ee..b7198012ab9 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 5f8b58dc49b..172d8fc053f 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 636c34bca14..f9b3abef5e6 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 0b8b984a95a..55f32e3196f 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 2477d542c64..58d44849193 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 4bda5ef217b..f2b0151bfa9 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 e250c1d0156..5f67a36f813 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 f813d6d21ef..8cd081ebe09 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 72f7214089f..f90207fce4c 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 8de0a78fe74..10c82a84742 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 4e11f64e773..31a1dc5dcb2 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 cb42db35ec3..b6e97fac391 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 237ba389e92..d950e6336aa 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 9aa97561d77..e72fedafef5 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 6ae91c02863..48d891641a2 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 14409f55a22..26250d1931f 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 05232da8c5b..58d21a4bd2e 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 93ebfa7cc2c..299f51ffc0b 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 12cd95ab856..28834277200 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 67c11e2f357..07bbbe533e1 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 b7ff2d894d6..4c23fa84898 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`] = `