From 49a2bdd7e4c5dd9b29de6036a573d23f84cbac21 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Jul 2026 11:10:57 +0100 Subject: [PATCH] Replace legacy `$spacing-X` vars with Compound Design Tokens (#34380) * Replace legacy `$spacing-X` vars with Compound Design Tokens * Remove unused font size vars * Use calc to get negative spacing vars --- apps/web/res/css/_common.pcss | 9 ++- apps/web/res/css/_components.pcss | 1 - apps/web/res/css/_font-sizes.pcss | 4 -- apps/web/res/css/_spacing.pcss | 30 -------- .../views/beacon/_BeaconListItem.pcss | 6 +- .../views/beacon/_BeaconStatus.pcss | 6 +- .../views/beacon/_BeaconStatusTooltip.pcss | 2 +- .../views/beacon/_BeaconViewDialog.pcss | 6 +- .../views/beacon/_DialogOwnBeaconStatus.pcss | 8 +-- .../views/beacon/_DialogSidebar.pcss | 4 +- .../beacon/_LeftPanelLiveShareWarning.pcss | 2 +- .../views/beacon/_OwnBeaconStatus.pcss | 2 +- .../views/beacon/_ShareLatestLocation.pcss | 2 +- .../dialogs/polls/_PollDetailHeader.pcss | 2 +- .../views/dialogs/polls/_PollListItem.pcss | 4 +- .../dialogs/polls/_PollListItemEnded.pcss | 10 +-- .../views/elements/_FilterDropdown.pcss | 12 ++-- .../views/elements/_FilterTabGroup.pcss | 2 +- .../components/views/elements/_LearnMore.pcss | 2 +- .../views/location/_EnableLiveShare.pcss | 10 +-- .../views/location/_LiveDurationDropdown.pcss | 2 +- .../components/views/location/_MapError.pcss | 10 +-- .../views/location/_MapFallback.pcss | 2 +- .../views/location/_ShareDialogButtons.pcss | 6 +- .../components/views/location/_ShareType.pcss | 14 ++-- .../views/location/_ZoomButtons.pcss | 6 +- .../views/messages/_MBeaconBody.pcss | 4 +- .../shared/_MediaProcessingError.pcss | 2 +- .../components/views/polls/_PollOption.pcss | 4 +- .../devices/_DeviceDetailHeading.pcss | 8 +-- .../settings/devices/_DeviceDetails.pcss | 16 ++--- .../settings/devices/_DeviceSecurityCard.pcss | 8 +-- .../views/settings/devices/_DeviceTile.pcss | 8 +-- .../settings/devices/_DeviceTypeIcon.pcss | 8 +-- .../settings/devices/_FilteredDeviceList.pcss | 10 +-- .../devices/_FilteredDeviceListHeader.pcss | 6 +- .../devices/_SecurityRecommendations.pcss | 2 +- .../settings/shared/_SettingsSubsection.pcss | 6 +- .../shared/_SettingsSubsectionHeading.pcss | 2 +- apps/web/res/css/compound/_SuccessDialog.pcss | 6 +- .../css/structures/_AutocompleteInput.pcss | 14 ++-- .../web/res/css/structures/_ErrorMessage.pcss | 2 +- apps/web/res/css/structures/_ViewSource.pcss | 8 +-- apps/web/res/css/views/auth/_AuthBody.pcss | 30 ++++---- apps/web/res/css/views/auth/_LoginWithQR.pcss | 26 +++---- apps/web/res/css/views/beta/_BetaCard.pcss | 24 +++---- .../res/css/views/dialogs/_ExportDialog.pcss | 2 +- .../res/css/views/dialogs/_InviteDialog.pcss | 32 ++++----- .../dialogs/_RoomSettingsDialogBridges.pcss | 8 +-- .../css/views/dialogs/_SpotlightDialog.pcss | 68 +++++++++---------- .../css/views/dialogs/_VerifyEMailDialog.pcss | 4 +- .../security/_CreateSecretStorageDialog.pcss | 2 +- .../css/views/directory/_NetworkDropdown.pcss | 14 ++-- .../elements/_GenericEventListSummary.pcss | 6 +- .../res/css/views/elements/_ServerPicker.pcss | 2 +- .../css/views/location/_LocationPicker.pcss | 8 +-- .../res/css/views/messages/_CallEvent.pcss | 10 +-- .../css/views/messages/_LegacyCallEvent.pcss | 20 +++--- .../css/views/messages/_MImageReplyBody.pcss | 8 +-- .../res/css/views/messages/_MPollBody.pcss | 6 +- .../views/polls/pollHistory/_PollHistory.pcss | 2 +- .../polls/pollHistory/_PollHistoryList.pcss | 12 ++-- .../res/css/views/right_panel/_BaseCard.pcss | 2 +- .../views/right_panel/_ExtensionsCard.pcss | 2 +- .../views/right_panel/_RoomSummaryCard.pcss | 4 +- .../css/views/right_panel/_ThreadPanel.pcss | 6 +- .../css/views/right_panel/_TimelineCard.pcss | 4 +- .../res/css/views/right_panel/_UserInfo.pcss | 4 +- apps/web/res/css/views/rooms/_EventTile.pcss | 50 +++++++------- .../res/css/views/rooms/_ReplyPreview.pcss | 4 +- .../res/css/views/rooms/_RoomPreviewCard.pcss | 24 +++---- .../wysiwyg_composer/components/_Editor.pcss | 6 +- .../components/_LinkModal.pcss | 4 +- .../css/views/settings/_FontScalingPanel.pcss | 2 +- .../css/views/settings/_ImageSizePanel.pcss | 2 +- .../views/settings/_IntegrationManager.pcss | 2 +- .../css/views/settings/_Notifications.pcss | 2 +- .../views/settings/_RoomProfileSettings.pcss | 8 +-- .../settings/_SetIntegrationManager.pcss | 2 +- .../css/views/settings/_SettingsFieldset.pcss | 2 +- .../views/settings/_SpellCheckLanguages.pcss | 2 +- .../views/settings/tabs/_SettingsSection.pcss | 4 +- .../css/views/settings/tabs/_SettingsTab.pcss | 6 +- .../tabs/room/_SecurityRoomSettingsTab.pcss | 4 +- .../tabs/user/_KeyboardUserSettingsTab.pcss | 6 +- .../tabs/user/_SecurityUserSettingsTab.pcss | 6 +- code_style.md | 3 +- 87 files changed, 343 insertions(+), 380 deletions(-) delete mode 100644 apps/web/res/css/_spacing.pcss diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss index 99c3a3ea65..06d27758a9 100644 --- a/apps/web/res/css/_common.pcss +++ b/apps/web/res/css/_common.pcss @@ -11,15 +11,14 @@ Please see LICENSE files in the repository root for full details. @import "./_font-sizes.pcss"; @import "./_animations.pcss"; -@import "./_spacing.pcss"; :root { --container-border-width: 8px; --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */ --transition-short: 0.1s; --transition-standard: 0.3s; - --buttons-dialog-gap-row: $spacing-8; - --buttons-dialog-gap-column: $spacing-8; + --buttons-dialog-gap-row: var(--cpd-space-2x); + --buttons-dialog-gap-column: var(--cpd-space-2x); --MBody-border-radius: 8px; --EventTileBubble_margin-block: 10px; --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */ @@ -532,7 +531,7 @@ legend { } .mx_Dialog_buttons { - margin-top: $spacing-20; + margin-top: var(--cpd-space-5x); margin-inline-start: auto; text-align: right; @@ -872,7 +871,7 @@ legend { font-weight: var(--cpd-font-weight-semibold); white-space: nowrap; position: relative; - padding: 0 $spacing-12 0 $spacing-8; + padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x); } @define-mixin ThreadSummaryIcon { diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss index f1496fd595..b22e1f1dca 100644 --- a/apps/web/res/css/_components.pcss +++ b/apps/web/res/css/_components.pcss @@ -2,7 +2,6 @@ @import "./_animations.pcss"; @import "./_common.pcss"; @import "./_font-sizes.pcss"; -@import "./_spacing.pcss"; @import "./components/views/beacon/_BeaconListItem.pcss"; @import "./components/views/beacon/_BeaconStatus.pcss"; @import "./components/views/beacon/_BeaconStatusTooltip.pcss"; diff --git a/apps/web/res/css/_font-sizes.pcss b/apps/web/res/css/_font-sizes.pcss index 98ebf28af0..d7fdbce92d 100644 --- a/apps/web/res/css/_font-sizes.pcss +++ b/apps/web/res/css/_font-sizes.pcss @@ -24,7 +24,6 @@ Please see LICENSE files in the repository root for full details. */ $font-1px: 0.0625rem; $font-8px: 0.5rem; -$font-9px: 0.5625rem; $font-10px: 0.625rem; $font-10-4px: 0.6275rem; $font-11px: 0.6875rem; /* Compound equivalent: --cpd-font-size-body-xs */ @@ -37,17 +36,14 @@ $font-17px: 1.0625rem; /* Compound equivalent: --cpd-font-size-body-lg */ $font-18px: 1.125rem; $font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */ $font-22px: 1.375rem; -$font-23px: 1.4375rem; $font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */ $font-25px: 1.5625rem; $font-26px: 1.625rem; $font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */ -$font-29px: 1.8125rem; $font-30px: 1.875rem; $font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */ $font-34px: 2.125rem; $font-35px: 2.1875rem; -$font-39px: 2.4375rem; $font-42px: 2.625rem; $font-44px: 2.75rem; $font-48px: 3rem; diff --git a/apps/web/res/css/_spacing.pcss b/apps/web/res/css/_spacing.pcss deleted file mode 100644 index 5887204c31..0000000000 --- a/apps/web/res/css/_spacing.pcss +++ /dev/null @@ -1,30 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2022 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -/* SCSS variables representing a range of standard lengths. - * - * Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are - * effectively equivalent to using hardcoded values. - * - * In future, we plan to introduce variables named according to their purpose rather than their size. Additionally, - * we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have - * `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font - * sizes, for which see the `$font-px` variables). - */ -$spacing-2: 2px; -$spacing-4: 4px; -$spacing-8: 8px; -$spacing-12: 12px; -$spacing-16: 16px; -$spacing-20: 20px; -$spacing-24: 24px; -$spacing-28: 28px; -$spacing-32: 32px; -$spacing-40: 40px; -$spacing-48: 48px; -$spacing-64: 64px; diff --git a/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss b/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss index 9b3d0dd88f..018cfe9f07 100644 --- a/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss +++ b/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: row; align-items: flex-start; - padding: $spacing-12 0; + padding: var(--cpd-space-3x) 0; border-bottom: 1px solid $system; @@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details. flex: 0 0; box-sizing: border-box; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); border: 2px solid $location-live-color; border-radius: 50%; } @@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details. .mx_BeaconListItem_status { /* override beacon status padding */ padding: 0 !important; - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); .mx_BeaconStatus_label { font-weight: var(--cpd-font-weight-semibold); diff --git a/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss index 52d27bea61..ecdccf7a1b 100644 --- a/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss +++ b/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss @@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details. justify-content: flex-start; box-sizing: border-box; - padding: $spacing-8; + padding: var(--cpd-space-2x); color: var(--color); font-size: $font-12px; @@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details. width: 32px; flex: 0 0 32px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); } .mx_BeaconStatus_description { @@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details. flex-direction: column; line-height: $font-14px; - padding-right: $spacing-8; + padding-right: var(--cpd-space-2x); white-space: nowrap; overflow: hidden; diff --git a/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss b/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss index 8b5ef93eb1..be788be4b9 100644 --- a/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss +++ b/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss @@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details. max-width: 150px; height: 38px; box-sizing: content-box; - padding-top: $spacing-8; + padding-top: var(--cpd-space-2x); } .mx_BeaconStatusTooltip_inner { diff --git a/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss b/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss index 8883aa4f09..2766642b5c 100644 --- a/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss +++ b/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss @@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details. .mx_BeaconViewDialog_mapFallbackMessage { color: $secondary-content; - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } .mx_BeaconViewDialog_viewListButton { position: absolute; - top: $spacing-24; - left: $spacing-24; + top: var(--cpd-space-6x); + left: var(--cpd-space-6x); } diff --git a/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss index b9b02c284e..aca0a2b3f4 100644 --- a/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss +++ b/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. .mx_DialogOwnBeaconStatus { position: absolute; - bottom: $spacing-32; + bottom: var(--cpd-space-8x); width: 300px; margin-left: -150px; left: 50%; @@ -23,14 +23,14 @@ Please see LICENSE files in the repository root for full details. border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; - padding: 0 $spacing-12; + padding: 0 var(--cpd-space-3x); } .mx_DialogOwnBeaconStatus_avatarIcon { flex: 0 0; height: 32px; width: 32px; - margin: $spacing-8 0 $spacing-8 0; + margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0; } .mx_DialogOwnBeaconStatus_avatar { @@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details. border: 2px solid $location-live-color; border-radius: 50%; - margin: $spacing-8 0 $spacing-8 0; + margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0; } .mx_DialogOwnBeaconStatus_status { diff --git a/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss b/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss index 7c882c2da8..a7d46dcf64 100644 --- a/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss +++ b/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss @@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details. flex-direction: column; box-sizing: border-box; - padding: $spacing-16; + padding: var(--cpd-space-4x); background-color: $background; box-shadow: 0px 4px 4px $menu-box-shadow-color; @@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details. justify-content: space-between; flex: 0 0; - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); color: $primary-content; diff --git a/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss b/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss index 4a8fce98f6..f9ce30203a 100644 --- a/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss +++ b/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss @@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details. width: 100%; box-sizing: border-box; - padding: $spacing-4; + padding: var(--cpd-space-1x); text-align: center; background-color: $accent; diff --git a/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss index 331c404d1d..b06148feba 100644 --- a/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss +++ b/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ .mx_OwnBeaconStatus_button { - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); } .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { diff --git a/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss b/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss index ada69fddc1..4ae7794d3e 100644 --- a/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss +++ b/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss @@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details. /* override copyable text style to make compact */ .mx_CopyableText_copyButton { height: 13px; - margin-left: $spacing-8 !important; + margin-left: var(--cpd-space-2x) !important; position: relative; top: -1px; width: 13px; diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss index 56c11740ef..ed19d8de78 100644 --- a/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss +++ b/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss @@ -14,6 +14,6 @@ Please see LICENSE files in the repository root for full details. .mx_PollDetailHeader_icon { height: 16px; width: 16px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); vertical-align: middle; } diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss index cd24c75937..8417b0ca20 100644 --- a/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss +++ b/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss @@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details. display: grid; justify-content: left; align-items: center; - gap: $spacing-8; + gap: var(--cpd-space-2x); grid-template-columns: auto auto auto; grid-template-rows: auto; cursor: pointer; @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. height: 14px; width: 14px; color: $quaternary-content; - padding-left: $spacing-8; + padding-left: var(--cpd-space-2x); } .mx_PollListItem_question { diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss index 2eb7a185ac..b46102fe1b 100644 --- a/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss +++ b/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss @@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details. display: grid; justify-content: left; align-items: center; - gap: $spacing-8; + gap: var(--cpd-space-2x); grid-template-columns: min-content 1fr min-content; grid-template-rows: auto; } @@ -31,7 +31,7 @@ Please see LICENSE files in the repository root for full details. height: 14px; width: 14px; color: $quaternary-content; - padding-left: $spacing-8; + padding-left: var(--cpd-space-2x); } .mx_PollListItemEnded_date { @@ -47,11 +47,11 @@ Please see LICENSE files in the repository root for full details. .mx_PollListItemEnded_answers { display: grid; - gap: $spacing-8; - margin-top: $spacing-12; + gap: var(--cpd-space-2x); + margin-top: var(--cpd-space-3x); } .mx_PollListItemEnded_voteCount { /* 6px to match PollOption padding */ - margin: $spacing-8 0 0 6px; + margin: var(--cpd-space-2x) 0 0 6px; } diff --git a/apps/web/res/css/components/views/elements/_FilterDropdown.pcss b/apps/web/res/css/components/views/elements/_FilterDropdown.pcss index 5385a614cc..98af15e151 100644 --- a/apps/web/res/css/components/views/elements/_FilterDropdown.pcss +++ b/apps/web/res/css/components/views/elements/_FilterDropdown.pcss @@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details. .mx_FilterDropdown { .mx_Dropdown_menu { - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); left: unset; - right: -$spacing-12; + right: calc(-1 * var(--cpd-space-3x)); width: 232px; - padding: $spacing-12; + padding: var(--cpd-space-3x); border: 1px solid $quinary-content; border-radius: 8px; @@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details. position: relative; width: 100%; box-sizing: border-box; - padding: $spacing-8 0 $spacing-8 $spacing-20; + padding: var(--cpd-space-2x) 0 var(--cpd-space-2x) var(--cpd-space-5x); font-size: $font-12px; line-height: $font-15px; @@ -59,7 +59,7 @@ Please see LICENSE files in the repository root for full details. height: 14px; width: 14px; position: absolute; - top: $spacing-8; + top: var(--cpd-space-2x); left: 0; } @@ -70,5 +70,5 @@ Please see LICENSE files in the repository root for full details. .mx_FilterDropdown_optionDescription { color: $secondary-content; - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); } diff --git a/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss b/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss index e2b2aba265..cf801d737d 100644 --- a/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss +++ b/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. .mx_FilterTabGroup { color: $primary-content; label { - margin-right: $spacing-12; + margin-right: var(--cpd-space-3x); cursor: pointer; span { display: inline-block; diff --git a/apps/web/res/css/components/views/elements/_LearnMore.pcss b/apps/web/res/css/components/views/elements/_LearnMore.pcss index e6fb16ec65..aa3e4a78fc 100644 --- a/apps/web/res/css/components/views/elements/_LearnMore.pcss +++ b/apps/web/res/css/components/views/elements/_LearnMore.pcss @@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details. */ .mx_LearnMore_button { - margin-left: $spacing-4; + margin-left: var(--cpd-space-1x); } diff --git a/apps/web/res/css/components/views/location/_EnableLiveShare.pcss b/apps/web/res/css/components/views/location/_EnableLiveShare.pcss index 9e56fa8dc5..d9273e6623 100644 --- a/apps/web/res/css/components/views/location/_EnableLiveShare.pcss +++ b/apps/web/res/css/components/views/location/_EnableLiveShare.pcss @@ -13,13 +13,13 @@ Please see LICENSE files in the repository root for full details. justify-content: flex-end; align-items: center; - padding: $spacing-32 $spacing-16; + padding: var(--cpd-space-8x) var(--cpd-space-4x); text-align: center; box-sizing: border-box; } .mx_EnableLiveShare_heading { - padding-top: $spacing-24; + padding-top: var(--cpd-space-6x); } .mx_EnableLiveShare_icon { @@ -28,13 +28,13 @@ Please see LICENSE files in the repository root for full details. } .mx_EnableLiveShare_description { - padding: 0 $spacing-24; - margin-bottom: $spacing-32; + padding: 0 var(--cpd-space-6x); + margin-bottom: var(--cpd-space-8x); line-height: $font-20px; } .mx_EnableLiveShare_button { - margin-top: $spacing-32; + margin-top: var(--cpd-space-8x); height: 48px; width: 100%; } diff --git a/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss b/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss index fa29291877..163d035cca 100644 --- a/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss +++ b/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss @@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details. */ .mx_LiveDurationDropdown { - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } diff --git a/apps/web/res/css/components/views/location/_MapError.pcss b/apps/web/res/css/components/views/location/_MapError.pcss index 61227f75a3..1dca427a46 100644 --- a/apps/web/res/css/components/views/location/_MapError.pcss +++ b/apps/web/res/css/components/views/location/_MapError.pcss @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ .mx_MapError { - padding: 100px $spacing-32 0; + padding: 100px var(--cpd-space-8x) 0; text-align: center; --mx-map-error-icon-color: $secondary-content; @@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details. justify-content: center; align-items: center; - padding: $spacing-24; + padding: var(--cpd-space-6x); background-color: $panels; font-size: $font-12px; line-height: $font-16px; @@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MapError_heading { - padding-top: $spacing-8; + padding-top: var(--cpd-space-2x); /* override h3 heading size */ font-size: inherit !important; font-weight: normal !important; @@ -44,11 +44,11 @@ Please see LICENSE files in the repository root for full details. } .mx_MapError_message { - margin: $spacing-16 0 $spacing-32; + margin: var(--cpd-space-4x) 0 var(--cpd-space-8x); } .mx_MapError_heading { - padding-top: $spacing-24; + padding-top: var(--cpd-space-6x); } .mx_MapError_icon { diff --git a/apps/web/res/css/components/views/location/_MapFallback.pcss b/apps/web/res/css/components/views/location/_MapFallback.pcss index 160480ff25..adb4a32983 100644 --- a/apps/web/res/css/components/views/location/_MapFallback.pcss +++ b/apps/web/res/css/components/views/location/_MapFallback.pcss @@ -32,6 +32,6 @@ Please see LICENSE files in the repository root for full details. .mx_MapFallback_icon { width: 65px; - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); color: $quaternary-content; } diff --git a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss index 1c1d379f89..4ee0b8372c 100644 --- a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss +++ b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss @@ -22,7 +22,7 @@ button.mx_ShareDialogButtons_button { text-align: center; color: $secondary-content; position: absolute; - top: $spacing-16; + top: var(--cpd-space-4x); &:hover, &:focus { @@ -30,11 +30,11 @@ button.mx_ShareDialogButtons_button { } &.left { - left: $spacing-16; + left: var(--cpd-space-4x); } &.right { - right: $spacing-16; + right: var(--cpd-space-4x); } } diff --git a/apps/web/res/css/components/views/location/_ShareType.pcss b/apps/web/res/css/components/views/location/_ShareType.pcss index fd99be3317..c4fae70b01 100644 --- a/apps/web/res/css/components/views/location/_ShareType.pcss +++ b/apps/web/res/css/components/views/location/_ShareType.pcss @@ -13,22 +13,22 @@ Please see LICENSE files in the repository root for full details. justify-content: flex-start; align-items: center; - padding: 60px $spacing-12 $spacing-32; + padding: 60px var(--cpd-space-3x) var(--cpd-space-8x); color: $primary-content; .mx_ShareType_wrapper_options { display: flex; flex-direction: column; - row-gap: $spacing-12; + row-gap: var(--cpd-space-3x); width: 100%; - margin-top: $spacing-12; + margin-top: var(--cpd-space-3x); .mx_ShareType_option { display: flex; align-items: center; justify-content: flex-start; - padding: $spacing-8 $spacing-20; + padding: var(--cpd-space-2x) var(--cpd-space-5x); background: none; border: 1px solid $quinary-content; @@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details. .mx_ShareType_badge { height: 60px; width: 60px; - margin-bottom: $spacing-20; + margin-bottom: var(--cpd-space-5x); background-color: $accent; border-radius: 50%; border: 14px solid $accent; @@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details. } .mx_ShareType_heading { - padding-bottom: $spacing-32; + padding-bottom: var(--cpd-space-8x); text-align: center; } @@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details. height: 40px; width: 40px; box-sizing: border-box; - margin-right: $spacing-12; + margin-right: var(--cpd-space-3x); flex: 0 0 40px; border-width: 2px; border-style: solid; diff --git a/apps/web/res/css/components/views/location/_ZoomButtons.pcss b/apps/web/res/css/components/views/location/_ZoomButtons.pcss index bb7d72e4e8..5de7e9271c 100644 --- a/apps/web/res/css/components/views/location/_ZoomButtons.pcss +++ b/apps/web/res/css/components/views/location/_ZoomButtons.pcss @@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details. .mx_ZoomButtons { position: absolute; - bottom: $spacing-32; - right: $spacing-24; + bottom: var(--cpd-space-8x); + right: var(--cpd-space-6x); display: flex; flex-direction: column; - row-gap: $spacing-8; + row-gap: var(--cpd-space-2x); .mx_ZoomButtons_button { $ZoomButtons_button-size: 24px; diff --git a/apps/web/res/css/components/views/messages/_MBeaconBody.pcss b/apps/web/res/css/components/views/messages/_MBeaconBody.pcss index 054db68fea..50edf92ce0 100644 --- a/apps/web/res/css/components/views/messages/_MBeaconBody.pcss +++ b/apps/web/res/css/components/views/messages/_MBeaconBody.pcss @@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details. .mx_MBeaconBody_withoutMapInfoLastUpdated { /* 48px lines up with icon in BeaconStatus */ - margin-top: -$spacing-8; - padding: 0 $spacing-8 $spacing-8 48px; + margin-top: calc(-1 * var(--cpd-space-2x)); + padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 48px; color: $tertiary-content; font-size: $font-10px; diff --git a/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss b/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss index 39bbbde389..0342157415 100644 --- a/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss +++ b/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss @@ -7,6 +7,6 @@ Please see LICENSE files in the repository root for full details. */ .mx_MediaProcessingError_Icon { - margin-right: $spacing-4; + margin-right: var(--cpd-space-1x); vertical-align: text-top; } diff --git a/apps/web/res/css/components/views/polls/_PollOption.pcss b/apps/web/res/css/components/views/polls/_PollOption.pcss index 2691cd90cb..df64e4d96a 100644 --- a/apps/web/res/css/components/views/polls/_PollOption.pcss +++ b/apps/web/res/css/components/views/polls/_PollOption.pcss @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. height: 12px; width: 12px; color: var(--cpd-color-icon-accent-tertiary); - margin-right: $spacing-4; + margin-right: var(--cpd-space-1x); vertical-align: middle; } @@ -105,7 +105,7 @@ Please see LICENSE files in the repository root for full details. margin-right: 12px; border-radius: 8px; background-color: $system; - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); .mx_PollOption_popularityAmount { width: 0%; diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss index 82b19b9ff1..93fc1cd8b2 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss @@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details. .mx_DeviceDetailHeading_renameForm { display: grid; - gap: $spacing-16; + gap: var(--cpd-space-4x); justify-content: left; grid-template-columns: 100%; } @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. .mx_DeviceDetailHeading_renameFormButtons { display: flex; flex-direction: row; - gap: $spacing-8; + gap: var(--cpd-space-2x); .mx_Spinner { width: auto; @@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details. .mx_DeviceDetailHeading_renameFormInput { /* override field styles */ - margin: 0 0 $spacing-4 0 !important; + margin: 0 0 var(--cpd-space-1x) 0 !important; } .mx_DeviceDetailHeading_renameFormHeading { @@ -46,6 +46,6 @@ Please see LICENSE files in the repository root for full details. .mx_DeviceDetailHeading_renameFormError { color: $alert; - padding-right: $spacing-4; + padding-right: var(--cpd-space-1x); display: block; } diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss index 4b311d1c7c..1550c6a2cd 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss @@ -11,19 +11,19 @@ Please see LICENSE files in the repository root for full details. flex-direction: column; box-sizing: border-box; - margin-top: $spacing-16; - padding: $spacing-24; + margin-top: var(--cpd-space-4x); + padding: var(--cpd-space-6x); border-radius: 8px; border: 1px solid $quinary-content; } .mx_DeviceDetails_section { - padding-bottom: $spacing-20; - margin-bottom: $spacing-20; + padding-bottom: var(--cpd-space-5x); + margin-bottom: var(--cpd-space-5x); border-bottom: 1px solid $quinary-content; display: grid; - gap: $spacing-24; + gap: var(--cpd-space-6x); justify-content: left; grid-template-columns: 100%; @@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details. font-size: $font-12px; color: $secondary-content; line-height: $font-14px; - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); } } @@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details. } td { - padding-top: $spacing-8; + padding-top: var(--cpd-space-2x); } .mxDeviceDetails_metadataLabel { @@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: row; align-items: center; - gap: $spacing-4; + gap: var(--cpd-space-1x); } .mx_DeviceDetails_pushNotifications { diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index 7ac20c076f..1451841429 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details. align-items: flex-start; box-sizing: border-box; - padding: $spacing-16; + padding: var(--cpd-space-4x); border: 1px solid $quinary-content; border-radius: 8px; @@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details. display: flex; align-items: center; justify-content: center; - margin-right: $spacing-16; + margin-right: var(--cpd-space-4x); border-radius: 8px; height: 40px; @@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details. flex: 1 1; } .mx_DeviceSecurityCard_heading { - margin: 0 0 $spacing-4 0; + margin: 0 0 var(--cpd-space-1x) 0; } .mx_DeviceSecurityCard_description { margin: 0; @@ -62,5 +62,5 @@ Please see LICENSE files in the repository root for full details. } .mx_DeviceSecurityCard_actions { - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); } diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss index 07ee70792d..0fbe7f549b 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss @@ -22,20 +22,20 @@ Please see LICENSE files in the repository root for full details. } .mx_DeviceTile_metadata { - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); font: var(--cpd-font-body-sm-regular); color: $secondary-content; } .mx_DeviceTile_inactiveIcon { height: 14px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); vertical-align: middle; } .mx_DeviceTile_actions { display: grid; - gap: $spacing-8; + gap: var(--cpd-space-2x); grid-auto-flow: column; - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); } diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index 0d459b3473..8f0e8841ad 100644 --- a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss @@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details. .mx_DeviceTypeIcon { flex: 0 0 auto; position: relative; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); /* creates space for verification icon to overlap */ - padding: 0 $spacing-8 $spacing-8 0; + padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 0; } .mx_DeviceTypeIcon_deviceIconWrapper { @@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details. width: 40px; box-sizing: border-box; - border: $spacing-8 solid var(--background-color); + border: var(--cpd-space-2x) solid var(--background-color); border-radius: 50%; color: var(--icon-color); background-color: var(--background-color); @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. height: 24px; width: 24px; box-sizing: border-box; - padding: $spacing-4; + padding: var(--cpd-space-1x); border: 1px solid $quinary-content; border-radius: 50%; diff --git a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss index 06f5a80b65..572c4baaf6 100644 --- a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss +++ b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss @@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details. .mx_FilteredDeviceList_list { list-style-type: none; display: grid; - gap: $spacing-16; + gap: var(--cpd-space-4x); margin: 0; - padding: 0 $spacing-16; + padding: 0 var(--cpd-space-4x); } .mx_FilteredDeviceList_listItem { @@ -26,13 +26,13 @@ Please see LICENSE files in the repository root for full details. } .mx_FilteredDeviceList_securityCard { - margin-bottom: $spacing-32; + margin-bottom: var(--cpd-space-8x); } .mx_FilteredDeviceList_noResults { width: 100%; text-align: center; - margin-bottom: $spacing-32; + margin-bottom: var(--cpd-space-8x); } .mx_FilteredDeviceList_headerButton { @@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details. /* override inline button styling */ display: flex !important; flex-direction: row; - gap: $spacing-8; + gap: var(--cpd-space-2x); } .mx_FilteredDeviceList_deviceDetails { diff --git a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss index eb50e097c1..c23ef7dba1 100644 --- a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss +++ b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss @@ -11,12 +11,12 @@ Please see LICENSE files in the repository root for full details. flex-direction: row; align-items: center; box-sizing: border-box; - gap: $spacing-16; + gap: var(--cpd-space-4x); width: 100%; height: 48px; - padding: 0 $spacing-16; - margin-bottom: $spacing-32; + padding: 0 var(--cpd-space-4x); + margin-bottom: var(--cpd-space-8x); background-color: $panels; border-radius: 8px; diff --git a/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss b/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss index 20c9343cda..19acc7dd64 100644 --- a/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss +++ b/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss @@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details. */ .mx_SecurityRecommendations_spacing { - height: $spacing-16; + height: var(--cpd-space-4x); } diff --git a/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss index 77ed0f9f82..6e7a5f7afd 100644 --- a/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SettingsSubsection_description { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); } .mx_SettingsSubsection_text { @@ -44,14 +44,14 @@ Please see LICENSE files in the repository root for full details. /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */ grid-template-columns: minmax(0, 1fr); justify-items: flex-start; - margin-top: $spacing-24; + margin-top: var(--cpd-space-6x); summary { color: $accent; } details[open] { summary { - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); } } diff --git a/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss index eab923faa2..a156aa3b80 100644 --- a/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss +++ b/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss @@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: row; - gap: $spacing-8; + gap: var(--cpd-space-2x); } .mx_SettingsSubsectionHeading_heading { diff --git a/apps/web/res/css/compound/_SuccessDialog.pcss b/apps/web/res/css/compound/_SuccessDialog.pcss index 951eceda99..54f7e4789f 100644 --- a/apps/web/res/css/compound/_SuccessDialog.pcss +++ b/apps/web/res/css/compound/_SuccessDialog.pcss @@ -10,11 +10,11 @@ Please see LICENSE files in the repository root for full details. text-align: center; .mx_Icon { - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } .mx_Dialog_header { - margin: 0 0 $spacing-16; + margin: 0 0 var(--cpd-space-4x); padding: 0; } @@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details. .mx_Dialog_content { color: $secondary-content; - margin: 0 0 $spacing-40; + margin: 0 0 var(--cpd-space-10x); } .mx_Dialog_buttons { diff --git a/apps/web/res/css/structures/_AutocompleteInput.pcss b/apps/web/res/css/structures/_AutocompleteInput.pcss index 1505026424..2e69622c5a 100644 --- a/apps/web/res/css/structures/_AutocompleteInput.pcss +++ b/apps/web/res/css/structures/_AutocompleteInput.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. } .mx_AutocompleteInput_search_icon { - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); fill: $secondary-content; } @@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details. resize: none; /* `!important` is required to bypass global input styles. */ margin: 0 !important; - padding: $spacing-8 9px; + padding: var(--cpd-space-2x) 9px; border: none !important; color: $primary-content !important; font-weight: normal !important; @@ -55,15 +55,15 @@ Please see LICENSE files in the repository root for full details. .mx_AutocompleteInput_editor_selection { display: flex; - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); } .mx_AutocompleteInput_editor_selection_pill { display: flex; align-items: center; border-radius: 12px; - padding-left: $spacing-8; - padding-right: $spacing-8; + padding-left: var(--cpd-space-2x); + padding-right: var(--cpd-space-2x); background-color: $username-variant1-color; color: #ffffff; font-size: $font-12px; @@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details. .mx_AutocompleteInput_suggestion { display: flex; align-items: center; - padding: $spacing-8; + padding: var(--cpd-space-2x); cursor: pointer; > * { @@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details. } .mx_AutocompleteInput_suggestion_title { - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); } .mx_AutocompleteInput_suggestion_description { diff --git a/apps/web/res/css/structures/_ErrorMessage.pcss b/apps/web/res/css/structures/_ErrorMessage.pcss index aaf2dc3b51..75516b2407 100644 --- a/apps/web/res/css/structures/_ErrorMessage.pcss +++ b/apps/web/res/css/structures/_ErrorMessage.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. color: $alert; display: flex; font-size: $font-12px; - gap: $spacing-8; + gap: var(--cpd-space-2x); line-height: 1.2em; min-height: 2.4em; } diff --git a/apps/web/res/css/structures/_ViewSource.pcss b/apps/web/res/css/structures/_ViewSource.pcss index b01f8de8bd..952aa6be14 100644 --- a/apps/web/res/css/structures/_ViewSource.pcss +++ b/apps/web/res/css/structures/_ViewSource.pcss @@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details. .mx_ViewSource_header { border-bottom: 1px solid $quinary-content; - padding-bottom: $spacing-12; - margin-bottom: $spacing-12; + padding-bottom: var(--cpd-space-3x); + margin-bottom: var(--cpd-space-3x); font-family: monospace; .mx_CopyableText { @@ -30,11 +30,11 @@ Please see LICENSE files in the repository root for full details. font-size: $font-17px; font-weight: 400; color: $primary-content; - margin-top: $spacing-12; + margin-top: var(--cpd-space-3x); } .mx_ViewSource_details { - margin-top: $spacing-12; + margin-top: var(--cpd-space-3x); } .mx_CopyableText_border { diff --git a/apps/web/res/css/views/auth/_AuthBody.pcss b/apps/web/res/css/views/auth/_AuthBody.pcss index dcff439107..43dd151012 100644 --- a/apps/web/res/css/views/auth/_AuthBody.pcss +++ b/apps/web/res/css/views/auth/_AuthBody.pcss @@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details. h1 { font-size: $font-24px; font-weight: var(--cpd-font-weight-semibold); - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); color: $authpage-primary-color; } @@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details. } .mx_AuthBody_text { - margin-bottom: $spacing-48; + margin-bottom: var(--cpd-space-12x); margin-top: 0; } @@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details. .mx_Login_submit { height: 32px; - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); } .mx_ErrorMessage { @@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details. min-height: 600px; h1 { - margin: $spacing-24 0; + margin: var(--cpd-space-6x) 0; } .mx_AuthBody_button-container { @@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details. } .mx_Login_submit { - margin: 0 0 $spacing-16; + margin: 0 0 var(--cpd-space-4x); } .mx_AuthBody_text { - margin-bottom: $spacing-32; + margin-bottom: var(--cpd-space-8x); p { - margin: 0 0 $spacing-8; + margin: 0 0 var(--cpd-space-2x); } } .mx_AuthBody_sign-in-instead-button { font-weight: var(--cpd-font-weight-semibold); - padding: $spacing-4; + padding: var(--cpd-space-1x); } .mx_AuthBody_fieldRow { - margin-bottom: $spacing-24; + margin-bottom: var(--cpd-space-6x); } .mx_AccessibleButton.mx_AccessibleButton_hasKind { @@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details. align-items: center; color: $secondary-content; display: flex; - gap: $spacing-8; + gap: var(--cpd-space-2x); } .mx_AuthBody_resend-button { @@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details. border-radius: 8px; color: $accent; display: flex; - gap: $spacing-4; - padding: $spacing-4; + gap: var(--cpd-space-1x); + padding: var(--cpd-space-1x); &:hover { background-color: $system; @@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details. text-align: center; .mx_AuthBody_paddedFooter_title { - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); font-size: $font-15px; line-height: $font-24px; @@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details. } .mx_AuthBody_paddedFooter_subtitle { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); font-size: $font-10px; line-height: $font-14px; } @@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SSOButtons + .mx_AuthBody_changeFlow { - margin-top: $spacing-24; + margin-top: var(--cpd-space-6x); } .mx_AuthBody_spinner { diff --git a/apps/web/res/css/views/auth/_LoginWithQR.pcss b/apps/web/res/css/views/auth/_LoginWithQR.pcss index 9efaf61e80..9649f51d24 100644 --- a/apps/web/res/css/views/auth/_LoginWithQR.pcss +++ b/apps/web/res/css/views/auth/_LoginWithQR.pcss @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. .mx_LoginWithQRSection p { margin-top: 0; - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } .mx_LoginWithQRSection { @@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details. } .mx_LoginWithQRSection .mx_AccessibleButton svg { - margin-right: $spacing-12; + margin-right: var(--cpd-space-3x); } .mx_LoginWithQR_dialog .mx_Dialog { @@ -42,12 +42,12 @@ Please see LICENSE files in the repository root for full details. } h2 { - margin-top: $spacing-24; + margin-top: var(--cpd-space-6x); } .mx_LoginWithQR_qrWrapper { display: flex; - padding: $spacing-28 0; + padding: var(--cpd-space-7x) 0; .mx_Spinner { /* Match the size of the QR code to prevent jumps */ @@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details. .mx_LoginWithQR_confirmationDigits { text-align: center; - margin: $spacing-48 auto; + margin: var(--cpd-space-12x) auto; font-weight: var(--cpd-font-weight-semibold); font-size: $font-24px; color: $primary-content; @@ -66,8 +66,8 @@ Please see LICENSE files in the repository root for full details. .mx_LoginWithQR_confirmationAlert { border: 1px solid $quaternary-content; - border-radius: $spacing-8; - padding: $spacing-8; + border-radius: var(--cpd-space-2x); + padding: var(--cpd-space-2x); line-height: 1.5em; display: flex; @@ -128,14 +128,14 @@ Please see LICENSE files in the repository root for full details. .mx_LoginWithQR_heading { display: flex; - gap: $spacing-12; + gap: var(--cpd-space-3x); align-items: center; } .mx_LoginWithQR_BackButton { - height: $spacing-28; - border-radius: $spacing-28; - padding: $spacing-4; + height: var(--cpd-space-7x); + border-radius: var(--cpd-space-7x); + padding: var(--cpd-space-1x); box-sizing: border-box; background-color: var(--cpd-color-bg-subtle-secondary); svg { @@ -166,7 +166,7 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: column; align-items: center; - gap: $spacing-16; + gap: var(--cpd-space-4x); margin-top: var(--cpd-space-6x); .mx_AccessibleButton { @@ -177,7 +177,7 @@ Please see LICENSE files in the repository root for full details. } .mx_QRCode { - border-radius: $spacing-8; + border-radius: var(--cpd-space-2x); display: flex; justify-content: center; } diff --git a/apps/web/res/css/views/beta/_BetaCard.pcss b/apps/web/res/css/views/beta/_BetaCard.pcss index c5d0253861..5197e035e4 100644 --- a/apps/web/res/css/views/beta/_BetaCard.pcss +++ b/apps/web/res/css/views/beta/_BetaCard.pcss @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ .mx_BetaCard { - padding: $spacing-24; + padding: var(--cpd-space-6x); background-color: $panels; border-radius: 8px; box-sizing: border-box; @@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details. .mx_BetaCard_columns { display: flex; flex-flow: wrap; - gap: $spacing-20; + gap: var(--cpd-space-5x); justify-content: center; .mx_BetaCard_columns_description { @@ -27,11 +27,11 @@ Please see LICENSE files in the repository root for full details. font-size: $font-18px; line-height: $font-22px; color: $primary-content; - margin: $spacing-4 0 14px; + margin: var(--cpd-space-1x) 0 14px; display: flex; align-items: center; - column-gap: $spacing-12; + column-gap: var(--cpd-space-3x); } .mx_BetaCard_caption { @@ -42,8 +42,8 @@ Please see LICENSE files in the repository root for full details. .mx_BetaCard_buttons { display: flex; flex-wrap: wrap-reverse; - gap: $spacing-12; - margin: $spacing-20 auto 0; + gap: var(--cpd-space-3x); + margin: var(--cpd-space-5x) auto 0; .mx_AccessibleButton { padding: 7px 40px; @@ -58,17 +58,17 @@ Please see LICENSE files in the repository root for full details. } .mx_BetaCard_refreshWarning { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); font-size: $font-10px; text-align: center; } .mx_BetaCard_faq { - margin-top: $spacing-20; + margin-top: var(--cpd-space-5x); font: var(--cpd-font-body-xs-regular); > h4 { - margin: $spacing-12 0 0; + margin: var(--cpd-space-3x) 0 0; } > p { @@ -92,13 +92,13 @@ Please see LICENSE files in the repository root for full details. .mx_BetaCard_relatedSettings { .mx_SettingsFlag { - margin: $spacing-16 0 0; + margin: var(--cpd-space-4x) 0 0; font-size: $font-15px; line-height: $font-24px; color: $primary-content; .mx_SettingsFlag_microcopy { - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); font: var(--cpd-font-body-sm-regular); } } @@ -107,7 +107,7 @@ Please see LICENSE files in the repository root for full details. .mx_BetaCard_betaPill { background-color: $accent-alt; - padding: $spacing-4 10px; + padding: var(--cpd-space-1x) 10px; border-radius: 8px; text-transform: uppercase; font-size: $font-12px; diff --git a/apps/web/res/css/views/dialogs/_ExportDialog.pcss b/apps/web/res/css/views/dialogs/_ExportDialog.pcss index cda2fab55f..3accbc0590 100644 --- a/apps/web/res/css/views/dialogs/_ExportDialog.pcss +++ b/apps/web/res/css/views/dialogs/_ExportDialog.pcss @@ -79,5 +79,5 @@ Please see LICENSE files in the repository root for full details. } .mx_ExportDialog_attachments-checkbox { - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); } diff --git a/apps/web/res/css/views/dialogs/_InviteDialog.pcss b/apps/web/res/css/views/dialogs/_InviteDialog.pcss index cc737c9611..be31bbce96 100644 --- a/apps/web/res/css/views/dialogs/_InviteDialog.pcss +++ b/apps/web/res/css/views/dialogs/_InviteDialog.pcss @@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details. } .mx_InviteDialog_transferWrapper .mx_Dialog { - padding-bottom: $spacing-16; + padding-bottom: var(--cpd-space-4x); } .mx_InviteDialog_addressBar { @@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details. flex-direction: row; /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */ /* for the user section gets weird. */ - margin: $spacing-8 45px 0 0; + margin: var(--cpd-space-2x) 45px 0 0; .mx_InviteDialog_editor { flex: 1; @@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details. } .mx_InviteDialog_section { - padding-bottom: $spacing-4; + padding-bottom: var(--cpd-space-1x); .mx_InviteDialog_section_showMore { margin: 7px 18px; @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. } .mx_InviteDialog_section_hidden_suggestions_disclaimer { - padding: $spacing-8 0 $spacing-16 0; + padding: var(--cpd-space-2x) 0 var(--cpd-space-4x) 0; font: var(--cpd-font-body-md-regular); > span { @@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details. border-top: 1px solid $input-border-color; > h3 { - margin: $spacing-12 0; + margin: var(--cpd-space-3x) 0; font-size: $font-12px; color: $muted-fg-color; font-weight: bold; @@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details. } .mx_InviteDialog_addressBar { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); } input[type="checkbox"] { - margin-inline-end: $spacing-8; + margin-inline-end: var(--cpd-space-2x); } } .mx_InviteDialog_userSections { overflow-y: auto; - padding: 0 45px $spacing-4 0; + padding: 0 45px var(--cpd-space-1x) 0; } .mx_InviteDialog_helpText { @@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details. .mx_InviteDialog_dialPad { width: 224px; - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); margin-inline: auto; .mx_InviteDialog_dialPadField { @@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details. } .mx_DialPad { - row-gap: $spacing-16; + row-gap: var(--cpd-space-4x); column-gap: 48px; margin-inline: auto; } } .mx_InviteDialog_transferConsultConnect { - padding-top: $spacing-16; + padding-top: var(--cpd-space-4x); /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width, * then compensate with padding */ - padding-inline: $spacing-24; - margin-inline: calc(-1 * $spacing-24); + padding-inline: var(--cpd-space-6x); + margin-inline: calc(-1 * var(--cpd-space-6x)); border-top: 1px solid $quinary-content; display: flex; @@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details. .mx_InviteDialog_tile { cursor: pointer; display: grid; - gap: $spacing-8 $spacing-12; + gap: var(--cpd-space-2x) var(--cpd-space-3x); align-items: center; &.mx_InviteDialog_tile--inviterError { grid-template-columns: max-content auto; /* max-content = avatar width */ - margin-bottom: $spacing-24; + margin-bottom: var(--cpd-space-6x); &:last-child { margin-bottom: 0; @@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details. .mx_InviteDialog_oneThreepid { font-size: $font-12px; - margin: $spacing-8 0; + margin: var(--cpd-space-2x) 0; } diff --git a/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss index 5633130b64..be05b16384 100644 --- a/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss +++ b/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss @@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details. &.mx_RoomSettingsDialog_BridgeList_listItem { display: flex; flex-wrap: wrap; - gap: $spacing-8; + gap: var(--cpd-space-2x); padding: 5px; - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); /* border-style around each bridge list item */ border-width: 1px 1px; @@ -71,11 +71,11 @@ Please see LICENSE files in the repository root for full details. .mx_RoomSettingsDialog_column_data_details, .mx_RoomSettingsDialog_column_data_metadata { - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); } .mx_RoomSettingsDialog_column_data_metadata li { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); } .mx_RoomSettingsDialog_column_data_protocolName { diff --git a/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss b/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss index dcb2247688..2e92e4d6dd 100644 --- a/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss @@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details. #mx_SpotlightDialog_keyboardPrompt { position: absolute; - padding: $spacing-8; + padding: var(--cpd-space-2x); border-radius: 8px; background-color: $background; top: -60px; /* relative to the top of the modal */ @@ -36,8 +36,8 @@ Please see LICENSE files in the repository root for full details. kbd { display: inline-block; - padding: 2px $spacing-4; - margin: 0 $spacing-4; + padding: 2px var(--cpd-space-1x); + margin: 0 var(--cpd-space-1x); border-radius: 6px; background-color: $quinary-content; vertical-align: middle; @@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details. margin: 0; border: none; border-radius: 8px 8px 0 0; - padding: $spacing-12 $spacing-16; + padding: var(--cpd-space-3x) var(--cpd-space-4x); border-bottom: 1px solid $system; > .mx_SpotlightDialog_filter { @@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details. align-content: center; align-items: center; border-radius: 8px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); background-color: $quinary-content; vertical-align: middle; color: $primary-content; position: relative; - padding: $spacing-4 $spacing-8 $spacing-4 37px; + padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px; > svg { color: $secondary-content; width: 18px; height: 18px; position: absolute; - left: $spacing-8; + left: var(--cpd-space-2x); top: 50%; transform: translateY(-50%); } @@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details. padding: 1px; background: $system; border-radius: 8px; - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); text-align: center; line-height: 16px; color: $secondary-content; @@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details. flex-grow: 0; width: unset; height: unset; - margin-left: $spacing-16; + margin-left: var(--cpd-space-4x); } &:not(:focus-within) + #mx_SpotlightDialog_content { @@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details. #mx_SpotlightDialog_content { height: 100%; overflow-y: auto; - padding: $spacing-16; + padding: var(--cpd-space-4x); ul { padding: 0; @@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details. } > h4 { - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); } .mx_SpotlightDialog_sectionHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); .mx_SpotlightDialog_options { display: flex; - gap: $spacing-4; + gap: var(--cpd-space-1x); } } & + .mx_SpotlightDialog_section { - margin-top: $spacing-24; + margin-top: var(--cpd-space-6x); } } @@ -201,7 +201,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_option { - padding: $spacing-4; + padding: var(--cpd-space-1x); color: $primary-content; font-size: $font-12px; line-height: $font-15px; @@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details. text-align: center; .mx_DecoratedRoomAvatar { - margin: 0 9px $spacing-4; /* maintain centering */ + margin: 0 9px var(--cpd-space-1x); /* maintain centering */ } & + .mx_SpotlightDialog_option { - margin-left: $spacing-16; + margin-left: var(--cpd-space-4x); } } } @@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details. .mx_SpotlightDialog_option { --mx_SpotlightDialog_option_selectedBgColor: $system; - padding: 6px $spacing-4; + padding: 6px var(--cpd-space-1x); font-size: $font-15px; line-height: $font-24px; color: $primary-content; @@ -249,20 +249,20 @@ Please see LICENSE files in the repository root for full details. align-items: flex-start; .mx_AccessibleButton { - padding: $spacing-4 $spacing-20; - margin: 2px $spacing-4; + padding: var(--cpd-space-1x) var(--cpd-space-5x); + margin: 2px var(--cpd-space-1x); } .mx_SpotlightDialog_enterPrompt { margin-top: 9px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); } } > .mx_SpotlightDialog_metaspaceResult, > .mx_DecoratedRoomAvatar, > .mx_BaseAvatar { - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); width: 24px; height: 24px; flex-shrink: 0; @@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: row; line-height: $font-24px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); .mx_SpotlightDialog_result_publicRoomName { color: $primary-content; @@ -294,7 +294,7 @@ Please see LICENSE files in the repository root for full details. .mx_SpotlightDialog_result_publicRoomAlias { color: $tertiary-content; font-size: $font-12px; - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); overflow: hidden; text-overflow: ellipsis; } @@ -313,7 +313,7 @@ Please see LICENSE files in the repository root for full details. } .mx_NotificationBadge { - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); } .mx_SpotlightDialog_option--menu, @@ -356,17 +356,17 @@ Please see LICENSE files in the repository root for full details. .mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog_createRoom { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); .mx_AccessibleButton { position: relative; margin: 0; - padding: 3px $spacing-8 3px $spacing-28; + padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x); svg { display: block; position: absolute; - left: $spacing-8; + left: var(--cpd-space-2x); width: 16px; height: 16px; color: var(--cpd-color-icon-primary); @@ -376,7 +376,7 @@ Please see LICENSE files in the repository root for full details. .mx_SpotlightDialog_otherSearches { .mx_SpotlightDialog_option { - padding-left: $spacing-32; + padding-left: var(--cpd-space-8x); position: relative; svg { @@ -384,7 +384,7 @@ Please see LICENSE files in the repository root for full details. width: 24px; height: 24px; position: absolute; - left: $spacing-4; + left: var(--cpd-space-1x); top: 50%; transform: translateY(-50%); } @@ -397,8 +397,8 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_result_details { - margin-left: $spacing-8; - margin-right: $spacing-8; + margin-left: var(--cpd-space-2x); + margin-right: var(--cpd-space-2x); color: $tertiary-content; font-size: $font-12px; line-height: $font-15px; @@ -415,7 +415,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_enterPrompt { - padding: 2px $spacing-4; + padding: 2px var(--cpd-space-1x); /* To avoid any styling inherent with elements */ font-family: inherit; font-weight: inherit; @@ -424,7 +424,7 @@ Please see LICENSE files in the repository root for full details. color: $tertiary-content; border-radius: 6px; background-color: $quinary-content; - margin-right: $spacing-4; + margin-right: var(--cpd-space-1x); display: none; } diff --git a/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss b/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss index 876962bfd9..36ec6ea7e6 100644 --- a/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss +++ b/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss @@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details. .mx_Dialog { color: $primary-content; font: var(--cpd-font-body-md-regular); - padding: $spacing-24 $spacing-24 $spacing-16; + padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-4x); text-align: center; /* !important override compound */ width: 485px !important; @@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details. .mx_AuthBody_did-not-receive { justify-content: center; - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); } .mx_Dialog_cancelButton { diff --git a/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss index b056e959b8..dc592c20f3 100644 --- a/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss +++ b/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss @@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details. padding: 56px; /* 80px from design - 24px wrapper padding */ .mx_Dialog_title { - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } } diff --git a/apps/web/res/css/views/directory/_NetworkDropdown.pcss b/apps/web/res/css/views/directory/_NetworkDropdown.pcss index f728c05091..bf2c6ed323 100644 --- a/apps/web/res/css/views/directory/_NetworkDropdown.pcss +++ b/apps/web/res/css/views/directory/_NetworkDropdown.pcss @@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details. .mx_NetworkDropdown_wrapper .mx_ContextualMenu { .mx_GenericDropdownMenu_Option { &.mx_GenericDropdownMenu_Option--header { - padding-top: $spacing-12; - padding-bottom: $spacing-4; + padding-top: var(--cpd-space-3x); + padding-bottom: var(--cpd-space-1x); min-width: 160px; } &.mx_GenericDropdownMenu_Option--item { - padding-top: $spacing-4; - padding-bottom: $spacing-4; + padding-top: var(--cpd-space-1x); + padding-bottom: var(--cpd-space-1x); > .mx_GenericDropdownMenu_Option--label span:first-child { font-weight: normal; @@ -30,15 +30,15 @@ Please see LICENSE files in the repository root for full details. color: $primary-content; span:not(:first-child) { - margin-left: $spacing-4; + margin-left: var(--cpd-space-1x); color: $secondary-content; } } } .mx_GenericDropdownMenu_divider { - margin-top: $spacing-4; - margin-bottom: $spacing-4; + margin-top: var(--cpd-space-1x); + margin-bottom: var(--cpd-space-1x); & + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label { font-size: $font-15px; diff --git a/apps/web/res/css/views/elements/_GenericEventListSummary.pcss b/apps/web/res/css/views/elements/_GenericEventListSummary.pcss index 68cc250a71..fe681e5363 100644 --- a/apps/web/res/css/views/elements/_GenericEventListSummary.pcss +++ b/apps/web/res/css/views/elements/_GenericEventListSummary.pcss @@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details. position: relative; .mx_GenericEventListSummary_avatars { - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); } .mx_GenericEventListSummary_spacer { @@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details. } &[data-layout="group"] { - margin-top: $spacing-8; + margin-top: var(--cpd-space-2x); } &[data-layout="bubble"] { @@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details. .mx_MatrixChat_useCompactLayout & { font-size: $font-13px; - margin-top: $spacing-4; + margin-top: var(--cpd-space-1x); .mx_EventTile_line { line-height: 1.25; diff --git a/apps/web/res/css/views/elements/_ServerPicker.pcss b/apps/web/res/css/views/elements/_ServerPicker.pcss index 0244673a35..9603418715 100644 --- a/apps/web/res/css/views/elements/_ServerPicker.pcss +++ b/apps/web/res/css/views/elements/_ServerPicker.pcss @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. .mx_ServerPicker { margin-bottom: 14px; - padding-bottom: $spacing-16; + padding-bottom: var(--cpd-space-4x); border-bottom: 1px solid rgb(141, 151, 165, 0.2); display: grid; grid-template-columns: auto min-content; diff --git a/apps/web/res/css/views/location/_LocationPicker.pcss b/apps/web/res/css/views/location/_LocationPicker.pcss index c103f7d68a..6abceb2208 100644 --- a/apps/web/res/css/views/location/_LocationPicker.pcss +++ b/apps/web/res/css/views/location/_LocationPicker.pcss @@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details. .maplibregl-ctrl.maplibregl-ctrl-group, .maplibregl-ctrl.maplibregl-ctrl-attrib { - margin-right: $spacing-16; + margin-right: var(--cpd-space-4x); } .maplibregl-ctrl.maplibregl-ctrl-group { @@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details. flex: 0; width: 100%; box-sizing: border-box; - padding: $spacing-16; + padding: var(--cpd-space-4x); display: flex; flex-direction: column; justify-content: stretch; @@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details. .mx_LocationPicker_pinText { position: absolute; - top: $spacing-16; + top: var(--cpd-space-4x); width: 100%; box-sizing: border-box; text-align: center; @@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details. span { box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15); border-radius: 8px; - padding: $spacing-8; + padding: var(--cpd-space-2x); background-color: $background; color: $primary-content; diff --git a/apps/web/res/css/views/messages/_CallEvent.pcss b/apps/web/res/css/views/messages/_CallEvent.pcss index 1733fd8638..0f837c660c 100644 --- a/apps/web/res/css/views/messages/_CallEvent.pcss +++ b/apps/web/res/css/views/messages/_CallEvent.pcss @@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details. border-radius: 8px; display: flex; - gap: $spacing-8; + gap: var(--cpd-space-2x); > .mx_BaseAvatar, > .mx_Icon { @@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details. > .mx_Icon { padding: 0; - margin: $spacing-4 0; + margin: var(--cpd-space-1x) 0; color: $secondary-content; } @@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details. color: $secondary-content; width: 16px; height: 16px; - margin-right: $spacing-8; + margin-right: var(--cpd-space-2x); } .mx_CallEvent_active .mx_CallEvent_title { @@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details. .mx_CallEvent_columns { flex-grow: 1; display: flex; - gap: $spacing-12; + gap: var(--cpd-space-3x); align-items: center; justify-content: space-between; } @@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details. .mx_TimelineCard .mx_CallEvent_columns { flex-direction: column; align-items: flex-start; - gap: $spacing-8; + gap: var(--cpd-space-2x); } .mx_CallEvent_details { diff --git a/apps/web/res/css/views/messages/_LegacyCallEvent.pcss b/apps/web/res/css/views/messages/_LegacyCallEvent.pcss index 16905485b6..a2d8558766 100644 --- a/apps/web/res/css/views/messages/_LegacyCallEvent.pcss +++ b/apps/web/res/css/views/messages/_LegacyCallEvent.pcss @@ -16,11 +16,11 @@ Please see LICENSE files in the repository root for full details. flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: $spacing-4 0; + gap: var(--cpd-space-1x) 0; position: relative; - margin: $spacing-4 0; - padding: $spacing-12 $spacing-24; + margin: var(--cpd-space-1x) 0; + padding: var(--cpd-space-3x) var(--cpd-space-6x); box-sizing: border-box; background-color: $dark-panel-bg-color; border-radius: 8px; @@ -47,14 +47,14 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_info_basic { display: flex; flex-direction: column; - gap: $spacing-4; + gap: var(--cpd-space-1x); margin-left: 10px; /* To match mx_LegacyCallEvent */ margin-right: 10px; min-width: 0; .mx_LegacyCallEvent_sender { font-weight: var(--cpd-font-weight-semibold); - margin-bottom: $spacing-4; + margin-bottom: var(--cpd-space-1x); overflow: hidden; white-space: nowrap; @@ -74,14 +74,14 @@ Please see LICENSE files in the repository root for full details. align-items: center; color: $secondary-content; font-size: $font-12px; - gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */ + gap: var(--cpd-space-3x); /* See mx_IncomingLegacyCallToast_buttons */ margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */ word-break: break-word; max-width: fit-content; .mx_LegacyCallEvent_content_button { @mixin LegacyCallButton; - padding: 0 $spacing-12; + padding: 0 var(--cpd-space-3x); font-size: inherit; } @@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details. &.mx_LegacyCallEvent_narrow { flex-direction: column; align-items: unset; - gap: $spacing-4 $spacing-16; + gap: var(--cpd-space-1x) var(--cpd-space-4x); height: unset; min-width: 290px; @@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_wrapper { .mx_LegacyCallEvent { &.mx_LegacyCallEvent_narrow { - gap: $spacing-8 $spacing-4; + gap: var(--cpd-space-2x) var(--cpd-space-1x); } } } @@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details. .mx_IRCLayout { .mx_LegacyCallEvent_wrapper { .mx_LegacyCallEvent { - margin-inline-start: $spacing-4; /* display green line */ + margin-inline-start: var(--cpd-space-1x); /* display green line */ } } } diff --git a/apps/web/res/css/views/messages/_MImageReplyBody.pcss b/apps/web/res/css/views/messages/_MImageReplyBody.pcss index e8c2c4047d..af058b6437 100644 --- a/apps/web/res/css/views/messages/_MImageReplyBody.pcss +++ b/apps/web/res/css/views/messages/_MImageReplyBody.pcss @@ -10,9 +10,9 @@ Please see LICENSE files in the repository root for full details. .mx_MStickerBody_wrapper { .mx_MImageBody_banner { position: absolute; - bottom: $spacing-4; - left: $spacing-4; - padding: $spacing-4; + bottom: var(--cpd-space-1x); + left: var(--cpd-space-1x); + padding: var(--cpd-space-1x); border-radius: var(--MBody-border-radius); font-size: $font-15px; user-select: none; @@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details. .mx_MImageReplyBody { display: flex; - column-gap: $spacing-4; + column-gap: var(--cpd-space-1x); .mx_MImageBody_thumbnail_container { flex: 1; diff --git a/apps/web/res/css/views/messages/_MPollBody.pcss b/apps/web/res/css/views/messages/_MPollBody.pcss index b30807dd59..a507307c76 100644 --- a/apps/web/res/css/views/messages/_MPollBody.pcss +++ b/apps/web/res/css/views/messages/_MPollBody.pcss @@ -47,7 +47,7 @@ $poll-max-width: 550px; .mx_Spinner { flex: 0; - margin-left: $spacing-8; + margin-left: var(--cpd-space-2x); } } } @@ -59,7 +59,7 @@ $poll-max-width: 550px; .mx_MPollBody_allOptions { display: grid; - gap: $spacing-16; - margin-bottom: $spacing-8; + gap: var(--cpd-space-4x); + margin-bottom: var(--cpd-space-2x); max-width: $poll-max-width; } diff --git a/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss b/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss index ee28f01b65..8dd626347c 100644 --- a/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss +++ b/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss @@ -15,5 +15,5 @@ Please see LICENSE files in the repository root for full details. } .mx_PollHistory_header.mx_Heading_h2 { - margin-bottom: $spacing-16; + margin-bottom: var(--cpd-space-4x); } diff --git a/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss b/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss index f2b4b55e0e..7134d882b9 100644 --- a/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss +++ b/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss @@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details. flex: 1 1 0; align-content: flex-start; display: grid; - gap: $spacing-20; - padding-right: $spacing-64; - margin: $spacing-32 0; + gap: var(--cpd-space-5x); + padding-right: var(--cpd-space-16x); + margin: var(--cpd-space-8x) 0; &.mx_PollHistoryList_list_ENDED { - gap: $spacing-32; + gap: var(--cpd-space-8x); } } @@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details. height: 100%; width: 100%; box-sizing: border-box; - padding: 0 $spacing-64; + padding: 0 var(--cpd-space-16x); display: flex; flex-direction: column; align-items: center; @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. color: $secondary-content; .mx_PollHistoryList_loadMorePolls { - margin-top: $spacing-16; + margin-top: var(--cpd-space-4x); } } diff --git a/apps/web/res/css/views/right_panel/_BaseCard.pcss b/apps/web/res/css/views/right_panel/_BaseCard.pcss index a5864c4e2a..2a229406c0 100644 --- a/apps/web/res/css/views/right_panel/_BaseCard.pcss +++ b/apps/web/res/css/views/right_panel/_BaseCard.pcss @@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details. } .mx_BaseCard_footer { - padding-top: $spacing-4; + padding-top: var(--cpd-space-1x); text-align: center; display: flex; justify-content: space-around; diff --git a/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss b/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss index cda7541bf4..0ccbc91e19 100644 --- a/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss +++ b/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss @@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details. .mx_ExtensionsCard_container { text-align: center; - margin: $spacing-20 var(--cpd-space-4x) 0; + margin: var(--cpd-space-5x) var(--cpd-space-4x) 0; } .mx_ExtensionsCard_Button { diff --git a/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss b/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss index 96d1b0867e..319bd7e6aa 100644 --- a/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomSummaryCard_container { text-align: center; - margin: $spacing-20 var(--cpd-space-4x) 0; + margin: var(--cpd-space-5x) var(--cpd-space-4x) 0; } .mx_RoomSummaryCard_roomName, @@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSummaryCard_roomName { - margin: $spacing-12 0 $spacing-4; + margin: var(--cpd-space-3x) 0 var(--cpd-space-1x); } .mx_RoomSummaryCard_bottomOptions { diff --git a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss index 7bd1e858c4..d17b105f3e 100644 --- a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss +++ b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss @@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details. .mx_ThreadPanel_dropdown { font: var(--cpd-font-body-sm-regular); - padding: 3px $spacing-4 3px $spacing-8; + padding: 3px var(--cpd-space-1x) 3px var(--cpd-space-2x); border-radius: 4px; line-height: 1.5; user-select: none; @@ -111,8 +111,8 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomView_MessageList { - padding-inline-start: $spacing-8; - padding-inline-end: $spacing-8; + padding-inline-start: var(--cpd-space-2x); + padding-inline-end: var(--cpd-space-2x); content-visibility: visible; } diff --git a/apps/web/res/css/views/right_panel/_TimelineCard.pcss b/apps/web/res/css/views/right_panel/_TimelineCard.pcss index 14d33d4f99..27cc26e397 100644 --- a/apps/web/res/css/views/right_panel/_TimelineCard.pcss +++ b/apps/web/res/css/views/right_panel/_TimelineCard.pcss @@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details. padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */ .mx_EventTile_e2eIcon { - inset-inline-start: $spacing-8; + inset-inline-start: var(--cpd-space-2x); } } @@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details. .mx_ReactionsRow { /* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */ - margin-inline-end: $spacing-8; + margin-inline-end: var(--cpd-space-2x); } .mx_ThreadSummary { diff --git a/apps/web/res/css/views/right_panel/_UserInfo.pcss b/apps/web/res/css/views/right_panel/_UserInfo.pcss index 93511a9406..a8a4ef7d2c 100644 --- a/apps/web/res/css/views/right_panel/_UserInfo.pcss +++ b/apps/web/res/css/views/right_panel/_UserInfo.pcss @@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details. .mx_UserInfo_memberDetailsContainer { padding-top: 0; padding-bottom: 0; - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); } .mx_RoomTile_titleContainer { @@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details. color: $tertiary-content; font: var(--cpd-font-body-md-semibold); font-weight: var(--cpd-font-weight-semibold); - margin: $spacing-4 0; + margin: var(--cpd-space-1x) 0; } p { diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss index 32d90af263..009750653a 100644 --- a/apps/web/res/css/views/rooms/_EventTile.pcss +++ b/apps/web/res/css/views/rooms/_EventTile.pcss @@ -97,7 +97,7 @@ $left-gutter: 64px; display: flex; flex-flow: wrap; align-items: center; - gap: $spacing-4; + gap: var(--cpd-space-1x); } .mx_ReplyChain--expanded { @@ -236,7 +236,7 @@ $left-gutter: 64px; } .mx_ReplyChain { - margin-bottom: $spacing-8; + margin-bottom: var(--cpd-space-2x); } } @@ -315,7 +315,7 @@ $left-gutter: 64px; display: inline; background-color: $event-selected-color; border-radius: 8px 0 0 8px; - padding-right: $spacing-8; + padding-right: var(--cpd-space-2x); } > .mx_DisambiguatedProfile_mxid { @@ -440,7 +440,7 @@ $left-gutter: 64px; &[data-layout="group"] { .mx_EventTile_avatar { top: 14px; - left: $spacing-8; + left: var(--cpd-space-2x); } .mx_EventTile_line, @@ -657,11 +657,11 @@ $left-gutter: 64px; border: 1px solid $inlinecode-border-color; border-radius: 4px; /* The horizontal padding is added by github-markdown-css .markdown-body */ - padding: $spacing-2 0; + padding: var(--cpd-space-0-5x) 0; /* Avoid inline code blocks to be sticked when on multiple lines */ line-height: $font-22px; /* Avoid the border to be glued to the other words */ - margin-right: $spacing-2; + margin-right: var(--cpd-space-0-5x); } code { @@ -860,15 +860,15 @@ $left-gutter: 64px; .mx_EventTile_collapsedCodeBlock { max-height: 30vh; - padding-top: $spacing-12; - padding-bottom: $spacing-12; + padding-top: var(--cpd-space-3x); + padding-bottom: var(--cpd-space-3x); } /* Inserted adjacent to 
 blocks, (See TextualBody) */
         .mx_EventTile_button {
             position: absolute;
-            top: $spacing-8;
-            right: $spacing-8;
+            top: var(--cpd-space-2x);
+            right: var(--cpd-space-2x);
             visibility: hidden;
 
             &.mx_EventTile_buttonBottom {
@@ -914,7 +914,7 @@ $left-gutter: 64px;
         margin-right: 0;
 
         span {
-            padding: $spacing-4 $spacing-8;
+            padding: var(--cpd-space-1x) var(--cpd-space-2x);
         }
     }
 
@@ -932,10 +932,10 @@ $left-gutter: 64px;
 
 .mx_EventTile[data-shape="ThreadsList"],
 .mx_EventTile[data-shape="Notification"] {
-    --topOffset: $spacing-12;
+    --topOffset: var(--cpd-space-3x);
     --leftOffset: 48px;
     $borderRadius: 8px;
-    $padding: $spacing-8;
+    $padding: var(--cpd-space-2x);
     $hrHeight: 1px;
     $notification-dot-size: 8px; /* notification dot next to the timestamp */
 
@@ -1051,7 +1051,7 @@ $left-gutter: 64px;
 
 .mx_EventTile[data-shape="ThreadsList"] {
     .mx_ThreadPanel_replies {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
         display: flex;
         align-items: center;
         position: relative;
@@ -1069,13 +1069,13 @@ $left-gutter: 64px;
 
 .mx_ThreadSummary_icon {
     display: inline-block;
-    margin-top: $spacing-8;
-    margin-bottom: $spacing-8;
+    margin-top: var(--cpd-space-2x);
+    margin-bottom: var(--cpd-space-2x);
 
     > svg {
         @mixin ThreadSummaryIcon;
         vertical-align: middle;
-        margin-inline-end: $spacing-8;
+        margin-inline-end: var(--cpd-space-2x);
         margin-top: -2px;
     }
 
@@ -1163,7 +1163,7 @@ $left-gutter: 64px;
 
         &[data-layout="irc"],
         &[data-layout="group"] {
-            padding-block-start: $spacing-16;
+            padding-block-start: var(--cpd-space-4x);
 
             .mx_EventTile_line,
             .mx_EventTile_footer {
@@ -1200,8 +1200,8 @@ $left-gutter: 64px;
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
-                gap: $spacing-16; /* gap between the avatar and the sender ID */
-                padding-inline-start: $spacing-8;
+                gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
+                padding-inline-start: var(--cpd-space-2x);
 
                 a {
                     flex: 1;
@@ -1265,7 +1265,7 @@ $left-gutter: 64px;
 /* Cascading - compact modern layout on the main timeline and the right panel */
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile[data-layout="group"] {
-        --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
+        --MatrixChat_useCompactLayout_group-padding-top: var(--cpd-space-1x);
         --MatrixChat_useCompactLayout-top-avatar: 2px;
         --MatrixChat_useCompactLayout_line-spacing-block: 0px;
 
@@ -1277,7 +1277,7 @@ $left-gutter: 64px;
         }
 
         .mx_ReplyChain {
-            margin-bottom: $spacing-4;
+            margin-bottom: var(--cpd-space-1x);
         }
 
         &.mx_EventTile_info {
@@ -1297,7 +1297,7 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_emote {
-            padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
+            padding-top: var(--cpd-space-2x); /* add a bit more space for emotes so that avatars don't collide */
 
             .mx_EventTile_avatar {
                 top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1349,7 +1349,7 @@ $left-gutter: 64px;
             blockquote,
             pre,
             table {
-                margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
+                margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
             }
         }
     }
@@ -1360,7 +1360,7 @@ $left-gutter: 64px;
     width: stretch;
     align-items: center;
     justify-content: space-between;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     margin-left: var(--leftOffset);
     .mx_EventTile_truncated {
         flex: 1;
diff --git a/apps/web/res/css/views/rooms/_ReplyPreview.pcss b/apps/web/res/css/views/rooms/_ReplyPreview.pcss
index b80de710f6..468d5faf96 100644
--- a/apps/web/res/css/views/rooms/_ReplyPreview.pcss
+++ b/apps/web/res/css/views/rooms/_ReplyPreview.pcss
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
         border-bottom: 1px solid $primary-hairline-color;
         display: flex;
         flex-flow: column;
-        row-gap: $spacing-8;
-        padding: $spacing-8 $spacing-8 0 0;
+        row-gap: var(--cpd-space-2x);
+        padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
 
         .mx_ReplyPreview_header {
             display: flex;
diff --git a/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss b/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
index 9fbcd835f7..4115277baf 100644
--- a/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_RoomPreviewCard {
-    padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
+    padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
     margin: auto;
     flex-grow: 1;
     max-width: 480px;
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
         font-weight: var(--cpd-font-weight-semibold);
         line-height: $font-24px;
         color: $primary-content;
-        margin-top: $spacing-24;
+        margin-top: var(--cpd-space-6x);
 
         svg {
             height: 1em;
             width: 1em;
-            margin-right: $spacing-8;
+            margin-right: var(--cpd-space-2x);
             color: $secondary-content;
             vertical-align: -2px;
         }
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_RoomPreviewCard_inviter {
         display: flex;
         align-items: center;
-        margin-bottom: $spacing-20;
+        margin-bottom: var(--cpd-space-5x);
         font-size: $font-15px;
 
         > div {
-            margin-left: $spacing-8;
+            margin-left: var(--cpd-space-2x);
 
             .mx_RoomPreviewCard_inviter_name {
                 line-height: $font-18px;
@@ -75,18 +75,18 @@ Please see LICENSE files in the repository root for full details.
         /* XXX Remove this when video rooms leave beta */
         .mx_BetaCard_betaPill {
             position: absolute;
-            inset-block-start: $spacing-32;
-            inset-inline-end: $spacing-24;
+            inset-block-start: var(--cpd-space-8x);
+            inset-inline-end: var(--cpd-space-6x);
         }
     }
 
     h1.mx_RoomPreviewCard_name {
-        margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
+        margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
     }
 
     .mx_RoomPreviewCard_topic {
         line-height: $font-22px;
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
         max-height: 160px;
         overflow-y: auto;
     }
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_FacePile {
         display: flex;
         align-items: center;
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
         /* For enhanced visibility under contrast control */
         outline: 1px solid transparent;
 
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomPreviewCard_joinButtons {
-        margin-top: $spacing-20;
+        margin-top: var(--cpd-space-5x);
         display: flex;
-        gap: $spacing-20;
+        gap: var(--cpd-space-5x);
 
         .mx_AccessibleButton {
             max-width: 200px;
diff --git a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 339c5e9d1c..3314a38e67 100644
--- a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
         ol {
             margin-top: 0;
             margin-bottom: 0;
-            padding-inline-start: $spacing-28;
+            padding-inline-start: var(--cpd-space-7x);
         }
 
         /* Make list type disc to match rich text editor */
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
 
             margin-top: 0;
             margin-bottom: 0;
-            padding: $spacing-8 $spacing-12;
+            padding: var(--cpd-space-2x) var(--cpd-space-3x);
 
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
@@ -90,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
-            padding: $spacing-2;
+            padding: var(--cpd-space-0-5x);
 
             &:empty {
                 border: unset;
diff --git a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 346e05efc3..254d8625b8 100644
--- a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LinkModal {
-    padding: $spacing-32;
+    padding: var(--cpd-space-8x);
     max-width: 600px;
     height: 341px;
     box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: $spacing-8;
+        gap: var(--cpd-space-2x);
         margin-top: 7px;
 
         .mx_LinkModal_Field {
diff --git a/apps/web/res/css/views/settings/_FontScalingPanel.pcss b/apps/web/res/css/views/settings/_FontScalingPanel.pcss
index 56e90bd9b8..bfb8de9da7 100644
--- a/apps/web/res/css/views/settings/_FontScalingPanel.pcss
+++ b/apps/web/res/css/views/settings/_FontScalingPanel.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 
     border: 1px solid $quinary-content;
     border-radius: 10px;
-    padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
+    padding: 0 var(--cpd-space-4x) var(--FontScalingPanel_preview-padding-block) var(--cpd-space-4x);
     pointer-events: none;
     display: flow-root;
 
diff --git a/apps/web/res/css/views/settings/_ImageSizePanel.pcss b/apps/web/res/css/views/settings/_ImageSizePanel.pcss
index 9112c5cdfe..8d6e879966 100644
--- a/apps/web/res/css/views/settings/_ImageSizePanel.pcss
+++ b/apps/web/res/css/views/settings/_ImageSizePanel.pcss
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_ImageSizePanel_radios {
     display: flex;
     flex-direction: row;
-    gap: $spacing-16;
+    gap: var(--cpd-space-4x);
 
     > label {
         margin-right: 68px; /* keep the boxes separate */
diff --git a/apps/web/res/css/views/settings/_IntegrationManager.pcss b/apps/web/res/css/views/settings/_IntegrationManager.pcss
index 15b7ef4b0d..617185a876 100644
--- a/apps/web/res/css/views/settings/_IntegrationManager.pcss
+++ b/apps/web/res/css/views/settings/_IntegrationManager.pcss
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     h3 {
-        margin-block: $spacing-20;
+        margin-block: var(--cpd-space-5x);
     }
 
     .mx_IntegrationManager_loading,
diff --git a/apps/web/res/css/views/settings/_Notifications.pcss b/apps/web/res/css/views/settings/_Notifications.pcss
index 139c0bee4c..f47b71c70f 100644
--- a/apps/web/res/css/views/settings/_Notifications.pcss
+++ b/apps/web/res/css/views/settings/_Notifications.pcss
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
     justify-self: start;
     padding-right: 30%;
     /* collapse half of the grid-gap */
-    margin-top: -$spacing-4;
+    margin-top: calc(-1 * var(--cpd-space-1x));
 }
 
 .mx_UserNotifSettings_floatingSection {
diff --git a/apps/web/res/css/views/settings/_RoomProfileSettings.pcss b/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
index 5b196a44b4..88b8e02642 100644
--- a/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
+++ b/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
@@ -17,11 +17,11 @@ Please see LICENSE files in the repository root for full details.
             margin-inline-end: 54px;
 
             .mx_Field {
-                margin-top: $spacing-8;
+                margin-top: var(--cpd-space-2x);
             }
 
             .mx_RoomProfileSettings_profile_controls_topic {
-                margin-top: $spacing-8;
+                margin-top: var(--cpd-space-2x);
 
                 & > textarea {
                     font-family: inherit;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_RoomProfileSettings_profile_controls_userId {
-                margin-inline-end: $spacing-20;
+                margin-inline-end: var(--cpd-space-5x);
             }
         }
     }
@@ -43,6 +43,6 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         gap: var(--cpd-space-4x);
         margin-top: 10px; /* 18px is already accounted for by the 
 above the buttons */
-        margin-bottom: $spacing-28;
+        margin-bottom: var(--cpd-space-7x);
     }
 }
diff --git a/apps/web/res/css/views/settings/_SetIntegrationManager.pcss b/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
index f370d06e5e..4832622c52 100644
--- a/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
+++ b/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        column-gap: $spacing-4;
+        column-gap: var(--cpd-space-1x);
     }
     form {
         margin-top: var(--cpd-space-3x);
diff --git a/apps/web/res/css/views/settings/_SettingsFieldset.pcss b/apps/web/res/css/views/settings/_SettingsFieldset.pcss
index 2b013da4b1..72db10f254 100644
--- a/apps/web/res/css/views/settings/_SettingsFieldset.pcss
+++ b/apps/web/res/css/views/settings/_SettingsFieldset.pcss
@@ -37,5 +37,5 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsFieldset_content {
     display: flex;
     flex-direction: column;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
diff --git a/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss b/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
index 42b247b747..46ebae475b 100644
--- a/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
+++ b/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--cpd-space-2x);
 }
diff --git a/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss b/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
index 0a70169248..4c8009a144 100644
--- a/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+++ b/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsSection_subSections {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    gap: $spacing-32;
+    gap: var(--cpd-space-8x);
 
-    margin: $spacing-16 0;
+    margin: var(--cpd-space-4x) 0;
 }
diff --git a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
index 3c50c4e4b5..526217f4e9 100644
--- a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsTab_section {
     $end-gutter: 80px;
 
-    margin-bottom: $spacing-24;
+    margin-bottom: var(--cpd-space-6x);
 
     .mx_SettingsFlag {
         margin-inline-end: $end-gutter;
@@ -82,7 +82,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsTab_sections {
     display: grid;
     grid-template-columns: 1fr;
-    gap: $spacing-32;
+    gap: var(--cpd-space-8x);
 
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
index f21b83b0fe..1168b81105 100644
--- a/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_SecurityRoomSettingsTab_advancedSection {
-    margin-top: $spacing-16;
+    margin-top: var(--cpd-space-4x);
 }
 
 .mx_SecurityRoomSettingsTab_warning {
     display: flex;
     align-items: center;
-    column-gap: $spacing-4;
+    column-gap: var(--cpd-space-1x);
 
     svg {
         color: #ff0064; /* Match legacy icon colour until redesign */
diff --git a/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
index 44452be744..1459f71fe7 100644
--- a/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     padding: 0;
     width: 100%;
     display: grid;
-    gap: $spacing-4;
+    gap: var(--cpd-space-1x);
 }
 
 .mx_KeyboardShortcut_shortcutRow,
@@ -23,10 +23,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_KeyboardShortcut_shortcutRow {
-    column-gap: $spacing-8;
+    column-gap: var(--cpd-space-2x);
 }
 
 .mx_KeyboardShortcut {
     flex-wrap: nowrap;
-    column-gap: $spacing-4;
+    column-gap: var(--cpd-space-1x);
 }
diff --git a/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
index 90a4fdd5b1..00a19d1606 100644
--- a/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SecurityUserSettingsTab_bulkOptions {
     display: flex;
     flex-direction: row;
-    column-gap: $spacing-8;
+    column-gap: var(--cpd-space-2x);
 }
 
 .mx_SecurityUserSettingsTab_ignoredUsers {
@@ -18,11 +18,11 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser {
-    margin-bottom: $spacing-4;
+    margin-bottom: var(--cpd-space-1x);
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
 }
 
 .mx_SecurityUserSettingsTab_warning {
diff --git a/code_style.md b/code_style.md
index 6ddc83010e..a53996f59f 100644
--- a/code_style.md
+++ b/code_style.md
@@ -301,8 +301,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
     - Note: These are deprecated. Prefer Compound typography tokens like `var(--cpd-font-body-md-regular)` for new code.
 7. Use theme color variables like `$primary-content`, `$secondary-content`, `$accent`, `$alert` for colors.
     - Prefer Compound color tokens like `var(--cpd-color-text-primary)` for new code.
-8. Use spacing variables like `$spacing-8`, `$spacing-12`, `$spacing-16` where available.
-    - Prefer Compound spacing tokens like `var(--cpd-space-2x)` for new code.
+8. Use spacing variables like `var(--cpd-space-2x)`, `var(--cpd-space-3x)`, `var(--cpd-space-4x)`.
 
 #### Syntax and formatting