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 6d074f2773c..9a0a24ae562 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 98ce66178e0..a62067243e5 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 2e661cac95c..deedd2d703f 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 0c474b2c5cc..3baeecb3d9d 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 a59f8fbf17b..9fa8fcd0084 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 4b74eb57453..6b903fd7ff2 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 8592436e755..56624ac9bd6 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 5ec4e38282e..7d48d40fb6f 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 00a570e9338..62744fc4e93 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 a3bbd871628..c203d12b5d2 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 63b3d1ed370..aeecf52e6ab 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 a576969a412..998d423690f 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 f32be24fb49..67f9435c6de 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 a01cabd6e4a..25380a74b2f 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 c9c4346c8ed..664e7ac85e7 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 9540d32692c..28f9cab795b 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 2378aae2a9d..d54710f6f3b 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 96c67985c99..347c86f69ee 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 6617e64aadc..8ae5d312e7a 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 c5c73fa3ad6..c827248e120 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 9d3954f8c1d..ba6cd4c789b 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 728ed22f71b..a9ce1c8a76f 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 4964e9c8dba..f5231463488 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 d145a186554..502e60cb1f8 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 2cb327d89cc..739c5f2d15b 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 ca7b77112b9..6846400693f 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 24d7c675a3d..6514d4c4e3e 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 afea3e1444f..b853732b531 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 5139b5b9b18..59330ad5e1c 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 f8229c5dd94..412dd8fb3e5 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 7cb26aa5bae..e5d2bef0f7e 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 f4cbbf32930..b8b85cb4484 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 db736e2fe51..ad9e8c7a832 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 d4f2492a1a2..35d4bfe8f45 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 a954d9a007d..ec24ef90aa5 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 dfe188636c1..5ca3f3f50ff 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 3a0da67d18e..ee983ee3a56 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 cbf9c2927a8..fbee0bb1de3 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 b7ec6915524..80359800e72 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 ed65bbc63d6..cdab9fe0540 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 3d684c73cb2..07e319522f1 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 dc5484c77c7..9c695fe077c 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 a5e26c3e690..69d40e90160 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 a8587e76046..899e7079afe 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 c16ff4480ad..0697e7813af 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 f8b0504ec98..8b8d4d9fb54 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 4d4972d9f3c..5188d731635 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 dfe188636c1..5ca3f3f50ff 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 90db42b411e..9cdcc4a3b71 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 791a1f93a20..e4d589c568a 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 b4ab81ebe63..0bba20ad522 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 8c93664911c..670266b413d 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 8d6e0898348..5084f9b1222 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 a7c7ecc5b86..6e3529dddbf 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 f51b8eb3324..70f15ccf8f3 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 1f64d5efda8..5be54c31582 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 29f7adc4dd8..db7b89c8411 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 e1ccd913066..ddb9667ba6d 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 1ab0e8bf5df..a322e3f45b1 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -561,7 +561,7 @@ legend {
border-radius: 8px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
- background-color: $accent;
+ background-color: var(--cpd-color-bg-action-primary-rest);
width: auto;
padding: 7px;
padding-left: 1.5em;
@@ -594,8 +594,8 @@ legend {
/* flip colours for the secondary ones */
font-weight: var(--cpd-font-weight-semibold);
- border: 1px solid currentColor;
- color: $accent;
+ border: 1px solid var(--cpd-color-border-interactive-secondary);
+ color: var(--cpd-color-text-primary);
background-color: transparent;
font-family: inherit;
}
@@ -615,8 +615,9 @@ legend {
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
- color: $accent-fg-color;
- background-color: $accent;
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-action-primary-rest);
+ border-color: var(--cpd-color-bg-action-primary-rest);
min-width: 156px;
}
@@ -624,15 +625,15 @@ legend {
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"].danger {
- background-color: $alert;
- border: solid 1px $alert;
- color: $accent-fg-color;
+ background-color: var(--cpd-color-bg-critical-primary);
+ border: solid 1px var(--cpd-color-bg-critical-primary);
+ color: var(--cpd-color-text-on-solid-primary);
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
- border: solid 1px $alert;
- color: $alert;
+ border: solid 1px var(--cpd-color-border-critical-primary);
+ color: var(--cpd-color-text-critical-primary);
}
.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
@@ -814,11 +815,9 @@ legend {
}
@define-mixin composerButtonHighLight {
- /* TODO: Refactor as this will break for apps that override the accent color */
- background: var(--cpd-color-green-300);
- /* make the icon the accent color too */
+ background: var(--cpd-color-bg-subtle-primary);
&::before {
- background-color: $accent !important;
+ background-color: var(--cpd-color-icon-primary) !important;
}
}
diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
index f8766de6a4d..81301f56464 100644
--- a/res/css/components/views/polls/_PollOption.pcss
+++ b/res/css/components/views/polls/_PollOption.pcss
@@ -52,26 +52,26 @@ limitations under the License.
.mx_PollOption_winnerIcon {
height: 12px;
width: 12px;
- color: $accent;
+ color: var(--cpd-color-icon-accent-tertiary);
margin-right: $spacing-4;
vertical-align: middle;
}
.mx_PollOption_checked {
- border-color: $accent;
+ border-color: var(--cpd-color-border-interactive-hovered);
.mx_PollOption_popularityBackground {
.mx_PollOption_popularityAmount {
- background-color: $accent;
+ background-color: var(--cpd-color-icon-accent-tertiary);
}
}
/* override checked radio button styling to show checkmark instead */
.mx_StyledRadioButton_checked {
- input[type="radio"] + div {
+ input[type="radio"]:checked + div {
border-width: 2px;
- border-color: $accent;
- background-color: $accent;
+ border-color: var(--cpd-color-icon-accent-tertiary);
+ background-color: var(--cpd-color-icon-accent-tertiary);
background-image: url("$(res)/img/element-icons/check-white.svg");
background-size: 12px;
background-repeat: no-repeat;
diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index 000781bd97a..50f6fc92783 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -46,10 +46,10 @@ limitations under the License.
}
&:hover {
- border-color: $accent;
+ border-color: var(--cpd-color-bg-interactive-primary-rest);
&::before {
- background-color: $accent;
+ background-color: var(--cpd-color-icon-primary);
}
> span {
@@ -212,7 +212,7 @@ limitations under the License.
left: 8px;
height: 16px;
width: 16px;
- background: #fff; /* white icon fill */
+ background: var(--cpd-color-icon-on-solid-primary);
mask-size: 16px;
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
@@ -293,11 +293,13 @@ limitations under the License.
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
- color: $accent;
+ color: var(--cpd-color-text-primary);
+ font-weight: var(--cpd-font-weight-semibold);
+ text-decoration: underline;
&::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
- background-color: $accent;
+ background-color: var(--cpd-color-icon-primary);
}
}
}
diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
index fd8d6a63ffc..847bea9cba3 100644
--- a/res/css/structures/_TabbedView.pcss
+++ b/res/css/structures/_TabbedView.pcss
@@ -43,12 +43,12 @@ limitations under the License.
}
.mx_TabbedView_tabLabel_active {
- background-color: $accent;
- color: $tab-label-active-fg-color;
+ background-color: var(--cpd-color-bg-action-primary-rest);
+ color: var(--cpd-color-text-on-solid-primary);
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
- background-color: $tab-label-active-fg-color;
+ background-color: var(--cpd-color-icon-on-solid-primary);
}
.mx_TabbedView_maskedIcon {
diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
index def912f253d..7cbd67d72c8 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.pcss
+++ b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -21,7 +21,8 @@ limitations under the License.
list-style: none;
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
- color: $accent;
+ color: var(--cpd-color-text-primary);
+ text-decoration: underline;
width: fit-content;
/* list-style doesn't do it for webkit */
diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss
index 2efc6bc047c..2a42d16a653 100644
--- a/res/css/views/dialogs/_FeedbackDialog.pcss
+++ b/res/css/views/dialogs/_FeedbackDialog.pcss
@@ -60,7 +60,6 @@ limitations under the License.
a,
.mx_AccessibleButton_kind_link {
- color: $accent;
text-decoration: underline;
}
@@ -132,7 +131,7 @@ limitations under the License.
.mx_StyledRadioButton_checked {
font-size: 24px;
- border-color: $accent;
+ border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
index ca224ba5c75..9d4dada6461 100644
--- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
@@ -71,7 +71,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
&.mx_AccessibleButton_kind_link {
- font: var(--cpd-font-body-md-regular);
+ font: var(--cpd-font-body-md-semibold);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index b7198012ab9..78346e9b7ee 100644
--- a/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -396,7 +396,7 @@ limitations under the License.
left: $spacing-8;
width: 16px;
height: 16px;
- background: $accent;
+ background: var(--cpd-color-icon-primary);
}
}
}
diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
index 172d8fc053f..5f8b58dc49b 100644
--- a/res/css/views/elements/_AccessibleButton.pcss
+++ b/res/css/views/elements/_AccessibleButton.pcss
@@ -42,7 +42,7 @@ limitations under the License.
display: inline-flex;
align-items: center;
justify-content: center;
- font: var(--cpd-font-body-md-regular);
+ font: var(--cpd-font-body-md-semibold);
border: none; /* override default styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@@ -53,21 +53,23 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_primary_sm {
- color: $button-primary-fg-color;
- background-color: $accent;
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_danger_sm {
- color: $button-danger-fg-color;
- background-color: $alert;
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-critical-primary);
}
&.mx_AccessibleButton_kind_link_sm {
- color: $accent;
+ color: var(--cpd-color-text-primary);
+ text-decoration: underline;
+ font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_confirm_sm {
- background-color: $accent;
+ background-color: var(--cpd-color-bg-action-primary-rest);
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
@@ -75,7 +77,7 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_cancel_sm {
- background-color: $alert;
+ background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
@@ -99,26 +101,22 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
}
- &.mx_AccessibleButton_kind_icon_primary,
- &.mx_AccessibleButton_kind_icon_primary_outline,
- &.mx_AccessibleButton_kind_primary,
- &.mx_AccessibleButton_kind_primary_outline {
- border: 1px solid $accent;
- }
-
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_primary {
- color: $button-primary-fg-color;
- background-color: $accent;
+ border: 1px solid var(--cpd-color-bg-action-primary-rest);
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary_outline {
- color: $accent;
+ border: 1px solid var(--cpd-color-border-interactive-secondary);
+ color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_secondary {
- color: $accent;
+ color: var(--cpd-color-text-primary);
+ text-decoration: underline;
}
&.mx_AccessibleButton_kind_secondary_content {
@@ -126,30 +124,30 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_danger {
- color: $button-danger-fg-color;
- background-color: $alert;
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-critical-primary);
&.mx_AccessibleButton_disabled {
- color: $button-danger-disabled-fg-color;
- background-color: $button-danger-disabled-bg-color;
+ color: var(--cpd-color-text-on-solid-primary);
+ background-color: var(--cpd-color-bg-critical-primary);
}
}
&.mx_AccessibleButton_kind_danger_outline {
- color: $alert;
+ color: var(--cpd-color-text-critical-primary);
background-color: transparent;
- border: 1px solid $alert;
+ border: 1px solid var(--cpd-color-border-critical-primary);
&.mx_AccessibleButton_disabled {
- color: $button-danger-disabled-bg-color;
- border-color: $button-danger-disabled-bg-color;
+ color: var(--cpd-color-text-disabled);
+ border-color: var(--cpd-color-border-disabled);
}
}
&.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
- color: $button-danger-disabled-fg-color;
- background-color: $button-danger-disabled-bg-color;
+ color: var(--cpd-color-text-disabled);
+ background-color: var(--cpd-color-bg-subtle-primary);
}
}
@@ -158,18 +156,19 @@ limitations under the License.
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
font-size: inherit;
- font-weight: normal;
+ font-weight: var(--cpd-font-weight-semibold);
line-height: inherit;
padding: 0;
+ text-decoration: underline;
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
- color: $accent;
+ color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_danger_inline {
- color: $alert;
+ color: var(--cpd-color-text-critical-primary);
}
&.mx_AccessibleButton_kind_content_inline {
diff --git a/res/css/views/elements/_ProgressBar.pcss b/res/css/views/elements/_ProgressBar.pcss
index f9b3abef5e6..636c34bca14 100644
--- a/res/css/views/elements/_ProgressBar.pcss
+++ b/res/css/views/elements/_ProgressBar.pcss
@@ -19,10 +19,10 @@ progress.mx_ProgressBar {
width: 60px;
overflow: hidden;
appearance: none;
- border: none;
+ border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
@mixin ProgressBarBorderRadius 6px;
- @mixin ProgressBarColour $accent;
+ @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
transition: width 1s;
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
index 55f32e3196f..0b8b984a95a 100644
--- a/res/css/views/elements/_ReplyChain.pcss
+++ b/res/css/views/elements/_ReplyChain.pcss
@@ -25,6 +25,8 @@ limitations under the License.
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
color: $secondary-content;
transition: color ease 0.15s;
+ font-weight: var(--cpd-font-weight-normal);
+ text-decoration: inherit;
&:hover {
color: $primary-content;
diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss
index 58d44849193..2477d542c64 100644
--- a/res/css/views/elements/_Slider.pcss
+++ b/res/css/views/elements/_Slider.pcss
@@ -26,7 +26,7 @@ limitations under the License.
background: none;
font-size: 1em; /* set base multiplier for em units applied later */
- --active-color: $accent;
+ --active-color: var(--cpd-color-bg-action-primary-rest);
--selection-dot-size: 2.4em;
&:disabled {
diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
index f2b0151bfa9..4bda5ef217b 100644
--- a/res/css/views/elements/_StyledCheckbox.pcss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@@ -42,7 +42,7 @@ limitations under the License.
height: $size;
width: $size;
size: 0.5rem;
- border: 1px solid $strong-input-border-color;
+ border: 1px solid var(--cpd-color-border-interactive-primary);
box-sizing: border-box;
border-radius: $border-radius;
@@ -80,12 +80,12 @@ limitations under the License.
.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
- background: #ffffff;
+ background: var(--cpd-color-icon-on-solid-primary);
}
&:checked + label > .mx_Checkbox_background {
- background: $accent;
- border-color: $accent;
+ background: var(--cpd-color-bg-action-primary-rest);
+ border-color: var(--cpd-color-bg-action-primary-rest);
}
&:checked:disabled + label > .mx_Checkbox_background {
@@ -95,11 +95,11 @@ limitations under the License.
.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
- background: $accent;
+ background: var(--cpd-color-bg-action-primary-rest);
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
- border-color: $accent;
+ border-color: var(--cpd-color-bg-action-primary-rest);
}
}
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index 5f67a36f813..e250c1d0156 100644
--- a/res/css/views/elements/_StyledRadioButton.pcss
+++ b/res/css/views/elements/_StyledRadioButton.pcss
@@ -20,8 +20,8 @@ limitations under the License.
*/
.mx_StyledRadioButton {
- $radio-circle-color: $strong-input-border-color;
- $active-radio-circle-color: $accent;
+ $radio-circle-color: var(--cpd-color-border-interactive-primary);
+ $active-radio-circle-color: var(--cpd-color-bg-action-primary-rest);
position: relative;
display: flex;
@@ -126,5 +126,5 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
- border-color: $accent;
+ border-color: var(--cpd-color-bg-action-primary-rest);
}
diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss
index 8cd081ebe09..f813d6d21ef 100644
--- a/res/css/views/room_settings/_AliasSettings.pcss
+++ b/res/css/views/room_settings/_AliasSettings.pcss
@@ -16,8 +16,9 @@ limitations under the License.
.mx_AliasSettings_localAddresses {
cursor: pointer;
- color: $accent;
+ color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
+ text-decoration: underline;
list-style: none;
width: fit-content;
diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss
index f90207fce4c..72f7214089f 100644
--- a/res/css/views/rooms/_EditMessageComposer.pcss
+++ b/res/css/views/rooms/_EditMessageComposer.pcss
@@ -33,7 +33,7 @@ limitations under the License.
padding: 3px 6px;
&:focus {
- border-color: $accent-500;
+ border-color: var(--cpd-color-border-interactive-primary);
}
}
diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss
index 10c82a84742..8de0a78fe74 100644
--- a/res/css/views/rooms/_EmojiButton.pcss
+++ b/res/css/views/rooms/_EmojiButton.pcss
@@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_EmojiButton {
- @mixin composerButton 50%, $accent, $accent-300;
+ @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
}
.mx_EmojiButton_highlight {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 31a1dc5dcb2..4e11f64e773 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -240,7 +240,7 @@ $left-gutter: 64px;
> .mx_EventTile_line {
/* TODO: ultimately we probably want some transition on here. */
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
- $accent;
+ var(--cpd-color-bg-action-primary-rest);
}
}
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index b6e97fac391..cb42db35ec3 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -191,7 +191,7 @@ limitations under the License.
}
.mx_MessageComposer_button {
- @mixin composerButton 50%, $accent, $accent-300;
+ @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
&:last-child {
margin-right: auto;
@@ -199,11 +199,11 @@ limitations under the License.
&.mx_MessageComposer_closeButtonMenu {
&::after {
- background: $accent-300;
+ background: var(--cpd-color-bg-subtle-primary);
}
&::before {
- background-color: $accent;
+ background-color: var(--cpd-color-icon-primary);
z-index: 2;
}
}
@@ -295,7 +295,7 @@ limitations under the License.
width: 32px;
height: 32px;
border-radius: 100%;
- background-color: $accent;
+ background-color: var(--cpd-color-icon-accent-tertiary);
&::before {
position: absolute;
@@ -309,7 +309,7 @@ limitations under the License.
mask-size: contain;
mask-position: center;
- background-color: $button-fg-color;
+ background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
}
}
diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss
index d950e6336aa..237ba389e92 100644
--- a/res/css/views/rooms/_RoomInfoLine.pcss
+++ b/res/css/views/rooms/_RoomInfoLine.pcss
@@ -49,6 +49,8 @@ limitations under the License.
.mx_RoomInfoLine_members {
color: inherit;
+ text-decoration: inherit;
+ font-weight: inherit;
&::before {
content: "ยท"; /* visual separator */
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
index e72fedafef5..9aa97561d77 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
@@ -30,8 +30,8 @@ limitations under the License.
width: 4px;
height: 4px;
border-radius: 16px;
- background-color: $secondary-accent-color;
- border: 6px solid $accent;
+ background-color: var(--cpd-color-bg-canvas-default);
+ border: 6px solid var(--cpd-color-icon-primary);
pointer-events: none;
}
diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss
index 48d891641a2..6ae91c02863 100644
--- a/res/css/views/settings/_LayoutSwitcher.pcss
+++ b/res/css/views/settings/_LayoutSwitcher.pcss
@@ -63,7 +63,7 @@ limitations under the License.
}
&.mx_LayoutSwitcher_RadioButton_selected {
- border-color: $accent;
+ border-color: var(--cpd-color-bg-action-primary-rest);
}
}
@@ -72,7 +72,7 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
- background-color: $accent-200;
+ background-color: var(--cpd-color-bg-subtle-secondary);
}
.mx_EventTile {
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index 26250d1931f..14409f55a22 100644
--- a/res/css/views/settings/_ProfileSettings.pcss
+++ b/res/css/views/settings/_ProfileSettings.pcss
@@ -56,7 +56,7 @@ limitations under the License.
margin-bottom: $spacing-28;
> .mx_AccessibleButton_kind_link {
- font: var(--cpd-font-body-md-regular);
+ font: var(--cpd-font-body-md-semibold);
margin-inline-end: 10px;
}
}
diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
index 58d21a4bd2e..05232da8c5b 100644
--- a/res/css/views/user-onboarding/_UserOnboardingTask.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
@@ -65,7 +65,7 @@ limitations under the License.
content: "";
position: absolute;
inset: -2px;
- background: $accent;
+ background: var(--cpd-color-icon-accent-tertiary);
border-radius: 32px;
animation-duration: 300ms;
@@ -75,7 +75,7 @@ limitations under the License.
}
&::after {
- background-color: $background;
+ background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
mask-repeat: no-repeat;
mask-position: center;
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index 299f51ffc0b..93ebfa7cc2c 100644
--- a/res/themes/dark/css/_dark.pcss
+++ b/res/themes/dark/css/_dark.pcss
@@ -76,7 +76,7 @@ $muted-fg-color: $header-panel-text-primary-color;
$light-fg-color: $header-panel-text-secondary-color;
$focus-bg-color: $room-highlight-color;
$info-plinth-bg-color: $header-panel-bg-color;
-$event-selected-color: $system;
+$event-selected-color: var(--cpd-color-bg-subtle-secondary);
$topleftmenu-color: $primary-content;
$roomtopic-color: $text-secondary-color;
$spacePanel-bg-color: rgba(38, 39, 43, 0.82);
@@ -247,7 +247,7 @@ $live-badge-color: #ffffff;
/* One-off colors */
/* ******************** */
-$progressbar-bg-color: $system;
+$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #800;
$event-timestamp-color: $text-secondary-color;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index 28834277200..12cd95ab856 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -312,7 +312,7 @@ $call-light-quaternary-content: #c1c6cd;
/* One-off colors */
/* ******************** */
-$progressbar-bg-color: $panel-actions;
+$progressbar-bg-color: var(--cpd-color-gray-200);
$kbd-border-color: $strong-input-border-color;
$visual-bell-bg-color: #faa;
$event-timestamp-color: #acacac;
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 07bbbe533e1..67c11e2f357 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 4c23fa84898..b7ff2d894d6 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`] = `