sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Replace legacy $spacing-X vars with Compound Design Tokens (#34380)

Browse Source 
* Replace legacy `$spacing-X` vars with Compound Design Tokens

* Remove unused font size vars

* Use calc to get negative spacing vars
This commit is contained in:
Michael Telatynski
2026-07-22 10:10:57 +00:00
committed by GitHub
parent ef8cfda6fe
commit 49a2bdd7e4
87 changed files with 343 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_common.pcss
+4 -5
View File
@@ -11,15 +11,14 @@ Please see LICENSE files in the repository root for full details.
@import "./_font-sizes.pcss"; @import "./_font-sizes.pcss";
@import "./_animations.pcss"; @import "./_animations.pcss";
@import "./_spacing.pcss";
:root { :root {
--container-border-width: 8px; --container-border-width: 8px;
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */ --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
--transition-short: 0.1s; --transition-short: 0.1s;
--transition-standard: 0.3s; --transition-standard: 0.3s;
--buttons-dialog-gap-row: $spacing-8; --buttons-dialog-gap-row: var(--cpd-space-2x);
--buttons-dialog-gap-column: $spacing-8; --buttons-dialog-gap-column: var(--cpd-space-2x);
--MBody-border-radius: 8px; --MBody-border-radius: 8px;
--EventTileBubble_margin-block: 10px; --EventTileBubble_margin-block: 10px;
--MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */ --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
@@ -532,7 +531,7 @@ legend {
} }
.mx_Dialog_buttons { .mx_Dialog_buttons {
margin-top: $spacing-20; margin-top: var(--cpd-space-5x);
margin-inline-start: auto; margin-inline-start: auto;
text-align: right; text-align: right;
@@ -872,7 +871,7 @@ legend {
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
padding: 0 $spacing-12 0 $spacing-8; padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x);
} }
@define-mixin ThreadSummaryIcon { @define-mixin ThreadSummaryIcon {
apps/web/res/css/_components.pcss
-1
View File
@@ -2,7 +2,6 @@
@import "./_animations.pcss"; @import "./_animations.pcss";
@import "./_common.pcss"; @import "./_common.pcss";
@import "./_font-sizes.pcss"; @import "./_font-sizes.pcss";
@import "./_spacing.pcss";
@import "./components/views/beacon/_BeaconListItem.pcss"; @import "./components/views/beacon/_BeaconListItem.pcss";
@import "./components/views/beacon/_BeaconStatus.pcss"; @import "./components/views/beacon/_BeaconStatus.pcss";
@import "./components/views/beacon/_BeaconStatusTooltip.pcss"; @import "./components/views/beacon/_BeaconStatusTooltip.pcss";
apps/web/res/css/_font-sizes.pcss
-4
View File
@@ -24,7 +24,6 @@ Please see LICENSE files in the repository root for full details.
*/ */
$font-1px: 0.0625rem; $font-1px: 0.0625rem;
$font-8px: 0.5rem; $font-8px: 0.5rem;
$font-9px: 0.5625rem;
$font-10px: 0.625rem; $font-10px: 0.625rem;
$font-10-4px: 0.6275rem; $font-10-4px: 0.6275rem;
$font-11px: 0.6875rem; /* Compound equivalent: --cpd-font-size-body-xs */ $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-18px: 1.125rem;
$font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */ $font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */
$font-22px: 1.375rem; $font-22px: 1.375rem;
$font-23px: 1.4375rem;
$font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */ $font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */
$font-25px: 1.5625rem; $font-25px: 1.5625rem;
$font-26px: 1.625rem; $font-26px: 1.625rem;
$font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */ $font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */
$font-29px: 1.8125rem;
$font-30px: 1.875rem; $font-30px: 1.875rem;
$font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */ $font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */
$font-34px: 2.125rem; $font-34px: 2.125rem;
$font-35px: 2.1875rem; $font-35px: 2.1875rem;
$font-39px: 2.4375rem;
$font-42px: 2.625rem; $font-42px: 2.625rem;
$font-44px: 2.75rem; $font-44px: 2.75rem;
$font-48px: 3rem; $font-48px: 3rem;
apps/web/res/css/_spacing.pcss
-30
View File
@@ -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-<N>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;
apps/web/res/css/components/views/beacon/_BeaconListItem.pcss
+3 -3
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding: $spacing-12 0; padding: var(--cpd-space-3x) 0;
border-bottom: 1px solid $system; border-bottom: 1px solid $system;
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
flex: 0 0; flex: 0 0;
box-sizing: border-box; box-sizing: border-box;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
border: 2px solid $location-live-color; border: 2px solid $location-live-color;
border-radius: 50%; border-radius: 50%;
} }
@@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BeaconListItem_status { .mx_BeaconListItem_status {
/* override beacon status padding */ /* override beacon status padding */
padding: 0 !important; padding: 0 !important;
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
.mx_BeaconStatus_label { .mx_BeaconStatus_label {
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
apps/web/res/css/components/views/beacon/_BeaconStatus.pcss
+3 -3
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-8; padding: var(--cpd-space-2x);
color: var(--color); color: var(--color);
font-size: $font-12px; font-size: $font-12px;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
width: 32px; width: 32px;
flex: 0 0 32px; flex: 0 0 32px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
.mx_BeaconStatus_description { .mx_BeaconStatus_description {
@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column; flex-direction: column;
line-height: $font-14px; line-height: $font-14px;
padding-right: $spacing-8; padding-right: var(--cpd-space-2x);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
+1 -1
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
max-width: 150px; max-width: 150px;
height: 38px; height: 38px;
box-sizing: content-box; box-sizing: content-box;
padding-top: $spacing-8; padding-top: var(--cpd-space-2x);
} }
.mx_BeaconStatusTooltip_inner { .mx_BeaconStatusTooltip_inner {
apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss
+3 -3
View File
@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
.mx_BeaconViewDialog_mapFallbackMessage { .mx_BeaconViewDialog_mapFallbackMessage {
color: $secondary-content; color: $secondary-content;
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
.mx_BeaconViewDialog_viewListButton { .mx_BeaconViewDialog_viewListButton {
position: absolute; position: absolute;
top: $spacing-24; top: var(--cpd-space-6x);
left: $spacing-24; left: var(--cpd-space-6x);
} }
apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
+4 -4
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DialogOwnBeaconStatus { .mx_DialogOwnBeaconStatus {
position: absolute; position: absolute;
bottom: $spacing-32; bottom: var(--cpd-space-8x);
width: 300px; width: 300px;
margin-left: -150px; margin-left: -150px;
left: 50%; left: 50%;
@@ -23,14 +23,14 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
padding: 0 $spacing-12; padding: 0 var(--cpd-space-3x);
} }
.mx_DialogOwnBeaconStatus_avatarIcon { .mx_DialogOwnBeaconStatus_avatarIcon {
flex: 0 0; flex: 0 0;
height: 32px; height: 32px;
width: 32px; width: 32px;
margin: $spacing-8 0 $spacing-8 0; margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
} }
.mx_DialogOwnBeaconStatus_avatar { .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: 2px solid $location-live-color;
border-radius: 50%; border-radius: 50%;
margin: $spacing-8 0 $spacing-8 0; margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
} }
.mx_DialogOwnBeaconStatus_status { .mx_DialogOwnBeaconStatus_status {
apps/web/res/css/components/views/beacon/_DialogSidebar.pcss
+2 -2
View File
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-16; padding: var(--cpd-space-4x);
background-color: $background; background-color: $background;
box-shadow: 0px 4px 4px $menu-box-shadow-color; 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; justify-content: space-between;
flex: 0 0; flex: 0 0;
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
color: $primary-content; color: $primary-content;
apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-4; padding: var(--cpd-space-1x);
text-align: center; text-align: center;
background-color: $accent; background-color: $accent;
apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss
+1 -1
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_OwnBeaconStatus_button { .mx_OwnBeaconStatus_button {
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
} }
.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button { .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss
+1 -1
View File
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
/* override copyable text style to make compact */ /* override copyable text style to make compact */
.mx_CopyableText_copyButton { .mx_CopyableText_copyButton {
height: 13px; height: 13px;
margin-left: $spacing-8 !important; margin-left: var(--cpd-space-2x) !important;
position: relative; position: relative;
top: -1px; top: -1px;
width: 13px; width: 13px;
apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
+1 -1
View File
@@ -14,6 +14,6 @@ Please see LICENSE files in the repository root for full details.
.mx_PollDetailHeader_icon { .mx_PollDetailHeader_icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
vertical-align: middle; vertical-align: middle;
} }
apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss
+2 -2
View File
@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
display: grid; display: grid;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
gap: $spacing-8; gap: var(--cpd-space-2x);
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
grid-template-rows: auto; grid-template-rows: auto;
cursor: pointer; cursor: pointer;
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px; height: 14px;
width: 14px; width: 14px;
color: $quaternary-content; color: $quaternary-content;
padding-left: $spacing-8; padding-left: var(--cpd-space-2x);
} }
.mx_PollListItem_question { .mx_PollListItem_question {
apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
+5 -5
View File
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
display: grid; display: grid;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
gap: $spacing-8; gap: var(--cpd-space-2x);
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
grid-template-rows: auto; grid-template-rows: auto;
} }
@@ -31,7 +31,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px; height: 14px;
width: 14px; width: 14px;
color: $quaternary-content; color: $quaternary-content;
padding-left: $spacing-8; padding-left: var(--cpd-space-2x);
} }
.mx_PollListItemEnded_date { .mx_PollListItemEnded_date {
@@ -47,11 +47,11 @@ Please see LICENSE files in the repository root for full details.
.mx_PollListItemEnded_answers { .mx_PollListItemEnded_answers {
display: grid; display: grid;
gap: $spacing-8; gap: var(--cpd-space-2x);
margin-top: $spacing-12; margin-top: var(--cpd-space-3x);
} }
.mx_PollListItemEnded_voteCount { .mx_PollListItemEnded_voteCount {
/* 6px to match PollOption padding */ /* 6px to match PollOption padding */
margin: $spacing-8 0 0 6px; margin: var(--cpd-space-2x) 0 0 6px;
} }
apps/web/res/css/components/views/elements/_FilterDropdown.pcss
+6 -6
View File
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterDropdown { .mx_FilterDropdown {
.mx_Dropdown_menu { .mx_Dropdown_menu {
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
left: unset; left: unset;
right: -$spacing-12; right: calc(-1 * var(--cpd-space-3x));
width: 232px; width: 232px;
padding: $spacing-12; padding: var(--cpd-space-3x);
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
border-radius: 8px; border-radius: 8px;
@@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
position: relative; position: relative;
width: 100%; width: 100%;
box-sizing: border-box; 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; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
@@ -59,7 +59,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px; height: 14px;
width: 14px; width: 14px;
position: absolute; position: absolute;
top: $spacing-8; top: var(--cpd-space-2x);
left: 0; left: 0;
} }
@@ -70,5 +70,5 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterDropdown_optionDescription { .mx_FilterDropdown_optionDescription {
color: $secondary-content; color: $secondary-content;
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
} }
apps/web/res/css/components/views/elements/_FilterTabGroup.pcss
+1 -1
View File
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterTabGroup { .mx_FilterTabGroup {
color: $primary-content; color: $primary-content;
label { label {
margin-right: $spacing-12; margin-right: var(--cpd-space-3x);
cursor: pointer; cursor: pointer;
span { span {
display: inline-block; display: inline-block;
apps/web/res/css/components/views/elements/_LearnMore.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_LearnMore_button { .mx_LearnMore_button {
margin-left: $spacing-4; margin-left: var(--cpd-space-1x);
} }
apps/web/res/css/components/views/location/_EnableLiveShare.pcss
+5 -5
View File
@@ -13,13 +13,13 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
padding: $spacing-32 $spacing-16; padding: var(--cpd-space-8x) var(--cpd-space-4x);
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
.mx_EnableLiveShare_heading { .mx_EnableLiveShare_heading {
padding-top: $spacing-24; padding-top: var(--cpd-space-6x);
} }
.mx_EnableLiveShare_icon { .mx_EnableLiveShare_icon {
@@ -28,13 +28,13 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_EnableLiveShare_description { .mx_EnableLiveShare_description {
padding: 0 $spacing-24; padding: 0 var(--cpd-space-6x);
margin-bottom: $spacing-32; margin-bottom: var(--cpd-space-8x);
line-height: $font-20px; line-height: $font-20px;
} }
.mx_EnableLiveShare_button { .mx_EnableLiveShare_button {
margin-top: $spacing-32; margin-top: var(--cpd-space-8x);
height: 48px; height: 48px;
width: 100%; width: 100%;
} }
apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_LiveDurationDropdown { .mx_LiveDurationDropdown {
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
apps/web/res/css/components/views/location/_MapError.pcss
+5 -5
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_MapError { .mx_MapError {
padding: 100px $spacing-32 0; padding: 100px var(--cpd-space-8x) 0;
text-align: center; text-align: center;
--mx-map-error-icon-color: $secondary-content; --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; justify-content: center;
align-items: center; align-items: center;
padding: $spacing-24; padding: var(--cpd-space-6x);
background-color: $panels; background-color: $panels;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-16px; line-height: $font-16px;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MapError_heading { .mx_MapError_heading {
padding-top: $spacing-8; padding-top: var(--cpd-space-2x);
/* override h3 heading size */ /* override h3 heading size */
font-size: inherit !important; font-size: inherit !important;
font-weight: normal !important; font-weight: normal !important;
@@ -44,11 +44,11 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MapError_message { .mx_MapError_message {
margin: $spacing-16 0 $spacing-32; margin: var(--cpd-space-4x) 0 var(--cpd-space-8x);
} }
.mx_MapError_heading { .mx_MapError_heading {
padding-top: $spacing-24; padding-top: var(--cpd-space-6x);
} }
.mx_MapError_icon { .mx_MapError_icon {
apps/web/res/css/components/views/location/_MapFallback.pcss
+1 -1
View File
@@ -32,6 +32,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MapFallback_icon { .mx_MapFallback_icon {
width: 65px; width: 65px;
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
color: $quaternary-content; color: $quaternary-content;
} }
apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
+3 -3
View File
@@ -22,7 +22,7 @@ button.mx_ShareDialogButtons_button {
text-align: center; text-align: center;
color: $secondary-content; color: $secondary-content;
position: absolute; position: absolute;
top: $spacing-16; top: var(--cpd-space-4x);
&:hover, &:hover,
&:focus { &:focus {
@@ -30,11 +30,11 @@ button.mx_ShareDialogButtons_button {
} }
&.left { &.left {
left: $spacing-16; left: var(--cpd-space-4x);
} }
&.right { &.right {
right: $spacing-16; right: var(--cpd-space-4x);
} }
} }
apps/web/res/css/components/views/location/_ShareType.pcss
+7 -7
View File
@@ -13,22 +13,22 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 60px $spacing-12 $spacing-32; padding: 60px var(--cpd-space-3x) var(--cpd-space-8x);
color: $primary-content; color: $primary-content;
.mx_ShareType_wrapper_options { .mx_ShareType_wrapper_options {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: $spacing-12; row-gap: var(--cpd-space-3x);
width: 100%; width: 100%;
margin-top: $spacing-12; margin-top: var(--cpd-space-3x);
.mx_ShareType_option { .mx_ShareType_option {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: $spacing-8 $spacing-20; padding: var(--cpd-space-2x) var(--cpd-space-5x);
background: none; background: none;
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ShareType_badge { .mx_ShareType_badge {
height: 60px; height: 60px;
width: 60px; width: 60px;
margin-bottom: $spacing-20; margin-bottom: var(--cpd-space-5x);
background-color: $accent; background-color: $accent;
border-radius: 50%; border-radius: 50%;
border: 14px solid $accent; border: 14px solid $accent;
@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_ShareType_heading { .mx_ShareType_heading {
padding-bottom: $spacing-32; padding-bottom: var(--cpd-space-8x);
text-align: center; text-align: center;
} }
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
height: 40px; height: 40px;
width: 40px; width: 40px;
box-sizing: border-box; box-sizing: border-box;
margin-right: $spacing-12; margin-right: var(--cpd-space-3x);
flex: 0 0 40px; flex: 0 0 40px;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
apps/web/res/css/components/views/location/_ZoomButtons.pcss
+3 -3
View File
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
.mx_ZoomButtons { .mx_ZoomButtons {
position: absolute; position: absolute;
bottom: $spacing-32; bottom: var(--cpd-space-8x);
right: $spacing-24; right: var(--cpd-space-6x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: $spacing-8; row-gap: var(--cpd-space-2x);
.mx_ZoomButtons_button { .mx_ZoomButtons_button {
$ZoomButtons_button-size: 24px; $ZoomButtons_button-size: 24px;
apps/web/res/css/components/views/messages/_MBeaconBody.pcss
+2 -2
View File
@@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
.mx_MBeaconBody_withoutMapInfoLastUpdated { .mx_MBeaconBody_withoutMapInfoLastUpdated {
/* 48px lines up with icon in BeaconStatus */ /* 48px lines up with icon in BeaconStatus */
margin-top: -$spacing-8; margin-top: calc(-1 * var(--cpd-space-2x));
padding: 0 $spacing-8 $spacing-8 48px; padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 48px;
color: $tertiary-content; color: $tertiary-content;
font-size: $font-10px; font-size: $font-10px;
apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss
+1 -1
View File
@@ -7,6 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_MediaProcessingError_Icon { .mx_MediaProcessingError_Icon {
margin-right: $spacing-4; margin-right: var(--cpd-space-1x);
vertical-align: text-top; vertical-align: text-top;
} }
apps/web/res/css/components/views/polls/_PollOption.pcss
+2 -2
View File
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
height: 12px; height: 12px;
width: 12px; width: 12px;
color: var(--cpd-color-icon-accent-tertiary); color: var(--cpd-color-icon-accent-tertiary);
margin-right: $spacing-4; margin-right: var(--cpd-space-1x);
vertical-align: middle; vertical-align: middle;
} }
@@ -105,7 +105,7 @@ Please see LICENSE files in the repository root for full details.
margin-right: 12px; margin-right: 12px;
border-radius: 8px; border-radius: 8px;
background-color: $system; background-color: $system;
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
.mx_PollOption_popularityAmount { .mx_PollOption_popularityAmount {
width: 0%; width: 0%;
apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
+4 -4
View File
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameForm { .mx_DeviceDetailHeading_renameForm {
display: grid; display: grid;
gap: $spacing-16; gap: var(--cpd-space-4x);
justify-content: left; justify-content: left;
grid-template-columns: 100%; grid-template-columns: 100%;
} }
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormButtons { .mx_DeviceDetailHeading_renameFormButtons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $spacing-8; gap: var(--cpd-space-2x);
.mx_Spinner { .mx_Spinner {
width: auto; width: auto;
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormInput { .mx_DeviceDetailHeading_renameFormInput {
/* override field styles */ /* override field styles */
margin: 0 0 $spacing-4 0 !important; margin: 0 0 var(--cpd-space-1x) 0 !important;
} }
.mx_DeviceDetailHeading_renameFormHeading { .mx_DeviceDetailHeading_renameFormHeading {
@@ -46,6 +46,6 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormError { .mx_DeviceDetailHeading_renameFormError {
color: $alert; color: $alert;
padding-right: $spacing-4; padding-right: var(--cpd-space-1x);
display: block; display: block;
} }
apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss
+8 -8
View File
@@ -11,19 +11,19 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
padding: $spacing-24; padding: var(--cpd-space-6x);
border-radius: 8px; border-radius: 8px;
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
} }
.mx_DeviceDetails_section { .mx_DeviceDetails_section {
padding-bottom: $spacing-20; padding-bottom: var(--cpd-space-5x);
margin-bottom: $spacing-20; margin-bottom: var(--cpd-space-5x);
border-bottom: 1px solid $quinary-content; border-bottom: 1px solid $quinary-content;
display: grid; display: grid;
gap: $spacing-24; gap: var(--cpd-space-6x);
justify-content: left; justify-content: left;
grid-template-columns: 100%; grid-template-columns: 100%;
@@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px; font-size: $font-12px;
color: $secondary-content; color: $secondary-content;
line-height: $font-14px; 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 { td {
padding-top: $spacing-8; padding-top: var(--cpd-space-2x);
} }
.mxDeviceDetails_metadataLabel { .mxDeviceDetails_metadataLabel {
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: $spacing-4; gap: var(--cpd-space-1x);
} }
.mx_DeviceDetails_pushNotifications { .mx_DeviceDetails_pushNotifications {
apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
+4 -4
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start; align-items: flex-start;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-16; padding: var(--cpd-space-4x);
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
border-radius: 8px; border-radius: 8px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: $spacing-16; margin-right: var(--cpd-space-4x);
border-radius: 8px; border-radius: 8px;
height: 40px; height: 40px;
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1; flex: 1 1;
} }
.mx_DeviceSecurityCard_heading { .mx_DeviceSecurityCard_heading {
margin: 0 0 $spacing-4 0; margin: 0 0 var(--cpd-space-1x) 0;
} }
.mx_DeviceSecurityCard_description { .mx_DeviceSecurityCard_description {
margin: 0; margin: 0;
@@ -62,5 +62,5 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_DeviceSecurityCard_actions { .mx_DeviceSecurityCard_actions {
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
} }
apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss
+4 -4
View File
@@ -22,20 +22,20 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_DeviceTile_metadata { .mx_DeviceTile_metadata {
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
font: var(--cpd-font-body-sm-regular); font: var(--cpd-font-body-sm-regular);
color: $secondary-content; color: $secondary-content;
} }
.mx_DeviceTile_inactiveIcon { .mx_DeviceTile_inactiveIcon {
height: 14px; height: 14px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
vertical-align: middle; vertical-align: middle;
} }
.mx_DeviceTile_actions { .mx_DeviceTile_actions {
display: grid; display: grid;
gap: $spacing-8; gap: var(--cpd-space-2x);
grid-auto-flow: column; grid-auto-flow: column;
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
} }
apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+4 -4
View File
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceTypeIcon { .mx_DeviceTypeIcon {
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
/* creates space for verification icon to overlap */ /* 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 { .mx_DeviceTypeIcon_deviceIconWrapper {
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
width: 40px; width: 40px;
box-sizing: border-box; box-sizing: border-box;
border: $spacing-8 solid var(--background-color); border: var(--cpd-space-2x) solid var(--background-color);
border-radius: 50%; border-radius: 50%;
color: var(--icon-color); color: var(--icon-color);
background-color: var(--background-color); background-color: var(--background-color);
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
height: 24px; height: 24px;
width: 24px; width: 24px;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-4; padding: var(--cpd-space-1x);
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
border-radius: 50%; border-radius: 50%;
apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+5 -5
View File
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
.mx_FilteredDeviceList_list { .mx_FilteredDeviceList_list {
list-style-type: none; list-style-type: none;
display: grid; display: grid;
gap: $spacing-16; gap: var(--cpd-space-4x);
margin: 0; margin: 0;
padding: 0 $spacing-16; padding: 0 var(--cpd-space-4x);
} }
.mx_FilteredDeviceList_listItem { .mx_FilteredDeviceList_listItem {
@@ -26,13 +26,13 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_FilteredDeviceList_securityCard { .mx_FilteredDeviceList_securityCard {
margin-bottom: $spacing-32; margin-bottom: var(--cpd-space-8x);
} }
.mx_FilteredDeviceList_noResults { .mx_FilteredDeviceList_noResults {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: $spacing-32; margin-bottom: var(--cpd-space-8x);
} }
.mx_FilteredDeviceList_headerButton { .mx_FilteredDeviceList_headerButton {
@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
/* override inline button styling */ /* override inline button styling */
display: flex !important; display: flex !important;
flex-direction: row; flex-direction: row;
gap: $spacing-8; gap: var(--cpd-space-2x);
} }
.mx_FilteredDeviceList_deviceDetails { .mx_FilteredDeviceList_deviceDetails {
apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
+3 -3
View File
@@ -11,12 +11,12 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
gap: $spacing-16; gap: var(--cpd-space-4x);
width: 100%; width: 100%;
height: 48px; height: 48px;
padding: 0 $spacing-16; padding: 0 var(--cpd-space-4x);
margin-bottom: $spacing-32; margin-bottom: var(--cpd-space-8x);
background-color: $panels; background-color: $panels;
border-radius: 8px; border-radius: 8px;
apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_SecurityRecommendations_spacing { .mx_SecurityRecommendations_spacing {
height: $spacing-16; height: var(--cpd-space-4x);
} }
apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+3 -3
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_SettingsSubsection_description { .mx_SettingsSubsection_description {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
} }
.mx_SettingsSubsection_text { .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 */ /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
justify-items: flex-start; justify-items: flex-start;
margin-top: $spacing-24; margin-top: var(--cpd-space-6x);
summary { summary {
color: $accent; color: $accent;
} }
details[open] { details[open] {
summary { summary {
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
} }
apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $spacing-8; gap: var(--cpd-space-2x);
} }
.mx_SettingsSubsectionHeading_heading { .mx_SettingsSubsectionHeading_heading {
apps/web/res/css/compound/_SuccessDialog.pcss
+3 -3
View File
@@ -10,11 +10,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center; text-align: center;
.mx_Icon { .mx_Icon {
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
.mx_Dialog_header { .mx_Dialog_header {
margin: 0 0 $spacing-16; margin: 0 0 var(--cpd-space-4x);
padding: 0; padding: 0;
} }
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Dialog_content { .mx_Dialog_content {
color: $secondary-content; color: $secondary-content;
margin: 0 0 $spacing-40; margin: 0 0 var(--cpd-space-10x);
} }
.mx_Dialog_buttons { .mx_Dialog_buttons {
apps/web/res/css/structures/_AutocompleteInput.pcss
+7 -7
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_AutocompleteInput_search_icon { .mx_AutocompleteInput_search_icon {
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
fill: $secondary-content; fill: $secondary-content;
} }
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
resize: none; resize: none;
/* `!important` is required to bypass global input styles. */ /* `!important` is required to bypass global input styles. */
margin: 0 !important; margin: 0 !important;
padding: $spacing-8 9px; padding: var(--cpd-space-2x) 9px;
border: none !important; border: none !important;
color: $primary-content !important; color: $primary-content !important;
font-weight: normal !important; font-weight: normal !important;
@@ -55,15 +55,15 @@ Please see LICENSE files in the repository root for full details.
.mx_AutocompleteInput_editor_selection { .mx_AutocompleteInput_editor_selection {
display: flex; display: flex;
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
} }
.mx_AutocompleteInput_editor_selection_pill { .mx_AutocompleteInput_editor_selection_pill {
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 12px; border-radius: 12px;
padding-left: $spacing-8; padding-left: var(--cpd-space-2x);
padding-right: $spacing-8; padding-right: var(--cpd-space-2x);
background-color: $username-variant1-color; background-color: $username-variant1-color;
color: #ffffff; color: #ffffff;
font-size: $font-12px; font-size: $font-12px;
@@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AutocompleteInput_suggestion { .mx_AutocompleteInput_suggestion {
display: flex; display: flex;
align-items: center; align-items: center;
padding: $spacing-8; padding: var(--cpd-space-2x);
cursor: pointer; cursor: pointer;
> * { > * {
@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_AutocompleteInput_suggestion_title { .mx_AutocompleteInput_suggestion_title {
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
.mx_AutocompleteInput_suggestion_description { .mx_AutocompleteInput_suggestion_description {
apps/web/res/css/structures/_ErrorMessage.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert; color: $alert;
display: flex; display: flex;
font-size: $font-12px; font-size: $font-12px;
gap: $spacing-8; gap: var(--cpd-space-2x);
line-height: 1.2em; line-height: 1.2em;
min-height: 2.4em; min-height: 2.4em;
} }
apps/web/res/css/structures/_ViewSource.pcss
+4 -4
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
.mx_ViewSource_header { .mx_ViewSource_header {
border-bottom: 1px solid $quinary-content; border-bottom: 1px solid $quinary-content;
padding-bottom: $spacing-12; padding-bottom: var(--cpd-space-3x);
margin-bottom: $spacing-12; margin-bottom: var(--cpd-space-3x);
font-family: monospace; font-family: monospace;
.mx_CopyableText { .mx_CopyableText {
@@ -30,11 +30,11 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-17px; font-size: $font-17px;
font-weight: 400; font-weight: 400;
color: $primary-content; color: $primary-content;
margin-top: $spacing-12; margin-top: var(--cpd-space-3x);
} }
.mx_ViewSource_details { .mx_ViewSource_details {
margin-top: $spacing-12; margin-top: var(--cpd-space-3x);
} }
.mx_CopyableText_border { .mx_CopyableText_border {
apps/web/res/css/views/auth/_AuthBody.pcss
+15 -15
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
h1 { h1 {
font-size: $font-24px; font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
color: $authpage-primary-color; color: $authpage-primary-color;
} }
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_AuthBody_text { .mx_AuthBody_text {
margin-bottom: $spacing-48; margin-bottom: var(--cpd-space-12x);
margin-top: 0; margin-top: 0;
} }
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Login_submit { .mx_Login_submit {
height: 32px; height: 32px;
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
} }
.mx_ErrorMessage { .mx_ErrorMessage {
@@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details.
min-height: 600px; min-height: 600px;
h1 { h1 {
margin: $spacing-24 0; margin: var(--cpd-space-6x) 0;
} }
.mx_AuthBody_button-container { .mx_AuthBody_button-container {
@@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_Login_submit { .mx_Login_submit {
margin: 0 0 $spacing-16; margin: 0 0 var(--cpd-space-4x);
} }
.mx_AuthBody_text { .mx_AuthBody_text {
margin-bottom: $spacing-32; margin-bottom: var(--cpd-space-8x);
p { p {
margin: 0 0 $spacing-8; margin: 0 0 var(--cpd-space-2x);
} }
} }
.mx_AuthBody_sign-in-instead-button { .mx_AuthBody_sign-in-instead-button {
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4; padding: var(--cpd-space-1x);
} }
.mx_AuthBody_fieldRow { .mx_AuthBody_fieldRow {
margin-bottom: $spacing-24; margin-bottom: var(--cpd-space-6x);
} }
.mx_AccessibleButton.mx_AccessibleButton_hasKind { .mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
align-items: center; align-items: center;
color: $secondary-content; color: $secondary-content;
display: flex; display: flex;
gap: $spacing-8; gap: var(--cpd-space-2x);
} }
.mx_AuthBody_resend-button { .mx_AuthBody_resend-button {
@@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px; border-radius: 8px;
color: $accent; color: $accent;
display: flex; display: flex;
gap: $spacing-4; gap: var(--cpd-space-1x);
padding: $spacing-4; padding: var(--cpd-space-1x);
&:hover { &:hover {
background-color: $system; background-color: $system;
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
text-align: center; text-align: center;
.mx_AuthBody_paddedFooter_title { .mx_AuthBody_paddedFooter_title {
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
@@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_AuthBody_paddedFooter_subtitle { .mx_AuthBody_paddedFooter_subtitle {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
font-size: $font-10px; font-size: $font-10px;
line-height: $font-14px; line-height: $font-14px;
} }
@@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_SSOButtons + .mx_AuthBody_changeFlow { .mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: $spacing-24; margin-top: var(--cpd-space-6x);
} }
.mx_AuthBody_spinner { .mx_AuthBody_spinner {
apps/web/res/css/views/auth/_LoginWithQR.pcss
+13 -13
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQRSection p { .mx_LoginWithQRSection p {
margin-top: 0; margin-top: 0;
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
.mx_LoginWithQRSection { .mx_LoginWithQRSection {
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_LoginWithQRSection .mx_AccessibleButton svg { .mx_LoginWithQRSection .mx_AccessibleButton svg {
margin-right: $spacing-12; margin-right: var(--cpd-space-3x);
} }
.mx_LoginWithQR_dialog .mx_Dialog { .mx_LoginWithQR_dialog .mx_Dialog {
@@ -42,12 +42,12 @@ Please see LICENSE files in the repository root for full details.
} }
h2 { h2 {
margin-top: $spacing-24; margin-top: var(--cpd-space-6x);
} }
.mx_LoginWithQR_qrWrapper { .mx_LoginWithQR_qrWrapper {
display: flex; display: flex;
padding: $spacing-28 0; padding: var(--cpd-space-7x) 0;
.mx_Spinner { .mx_Spinner {
/* Match the size of the QR code to prevent jumps */ /* 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 { .mx_LoginWithQR_confirmationDigits {
text-align: center; text-align: center;
margin: $spacing-48 auto; margin: var(--cpd-space-12x) auto;
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px; font-size: $font-24px;
color: $primary-content; color: $primary-content;
@@ -66,8 +66,8 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationAlert { .mx_LoginWithQR_confirmationAlert {
border: 1px solid $quaternary-content; border: 1px solid $quaternary-content;
border-radius: $spacing-8; border-radius: var(--cpd-space-2x);
padding: $spacing-8; padding: var(--cpd-space-2x);
line-height: 1.5em; line-height: 1.5em;
display: flex; display: flex;
@@ -128,14 +128,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_heading { .mx_LoginWithQR_heading {
display: flex; display: flex;
gap: $spacing-12; gap: var(--cpd-space-3x);
align-items: center; align-items: center;
} }
.mx_LoginWithQR_BackButton { .mx_LoginWithQR_BackButton {
height: $spacing-28; height: var(--cpd-space-7x);
border-radius: $spacing-28; border-radius: var(--cpd-space-7x);
padding: $spacing-4; padding: var(--cpd-space-1x);
box-sizing: border-box; box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary); background-color: var(--cpd-color-bg-subtle-secondary);
svg { svg {
@@ -166,7 +166,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: $spacing-16; gap: var(--cpd-space-4x);
margin-top: var(--cpd-space-6x); margin-top: var(--cpd-space-6x);
.mx_AccessibleButton { .mx_AccessibleButton {
@@ -177,7 +177,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_QRCode { .mx_QRCode {
border-radius: $spacing-8; border-radius: var(--cpd-space-2x);
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
apps/web/res/css/views/beta/_BetaCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_BetaCard { .mx_BetaCard {
padding: $spacing-24; padding: var(--cpd-space-6x);
background-color: $panels; background-color: $panels;
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_columns { .mx_BetaCard_columns {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
gap: $spacing-20; gap: var(--cpd-space-5x);
justify-content: center; justify-content: center;
.mx_BetaCard_columns_description { .mx_BetaCard_columns_description {
@@ -27,11 +27,11 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-18px; font-size: $font-18px;
line-height: $font-22px; line-height: $font-22px;
color: $primary-content; color: $primary-content;
margin: $spacing-4 0 14px; margin: var(--cpd-space-1x) 0 14px;
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: $spacing-12; column-gap: var(--cpd-space-3x);
} }
.mx_BetaCard_caption { .mx_BetaCard_caption {
@@ -42,8 +42,8 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_buttons { .mx_BetaCard_buttons {
display: flex; display: flex;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
gap: $spacing-12; gap: var(--cpd-space-3x);
margin: $spacing-20 auto 0; margin: var(--cpd-space-5x) auto 0;
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 7px 40px; padding: 7px 40px;
@@ -58,17 +58,17 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_BetaCard_refreshWarning { .mx_BetaCard_refreshWarning {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
font-size: $font-10px; font-size: $font-10px;
text-align: center; text-align: center;
} }
.mx_BetaCard_faq { .mx_BetaCard_faq {
margin-top: $spacing-20; margin-top: var(--cpd-space-5x);
font: var(--cpd-font-body-xs-regular); font: var(--cpd-font-body-xs-regular);
> h4 { > h4 {
margin: $spacing-12 0 0; margin: var(--cpd-space-3x) 0 0;
} }
> p { > p {
@@ -92,13 +92,13 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_relatedSettings { .mx_BetaCard_relatedSettings {
.mx_SettingsFlag { .mx_SettingsFlag {
margin: $spacing-16 0 0; margin: var(--cpd-space-4x) 0 0;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-content; color: $primary-content;
.mx_SettingsFlag_microcopy { .mx_SettingsFlag_microcopy {
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
font: var(--cpd-font-body-sm-regular); 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 { .mx_BetaCard_betaPill {
background-color: $accent-alt; background-color: $accent-alt;
padding: $spacing-4 10px; padding: var(--cpd-space-1x) 10px;
border-radius: 8px; border-radius: 8px;
text-transform: uppercase; text-transform: uppercase;
font-size: $font-12px; font-size: $font-12px;
apps/web/res/css/views/dialogs/_ExportDialog.pcss
+1 -1
View File
@@ -79,5 +79,5 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_ExportDialog_attachments-checkbox { .mx_ExportDialog_attachments-checkbox {
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
} }
apps/web/res/css/views/dialogs/_InviteDialog.pcss
+16 -16
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_InviteDialog_transferWrapper .mx_Dialog { .mx_InviteDialog_transferWrapper .mx_Dialog {
padding-bottom: $spacing-16; padding-bottom: var(--cpd-space-4x);
} }
.mx_InviteDialog_addressBar { .mx_InviteDialog_addressBar {
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row; flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */ /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */ /* for the user section gets weird. */
margin: $spacing-8 45px 0 0; margin: var(--cpd-space-2x) 45px 0 0;
.mx_InviteDialog_editor { .mx_InviteDialog_editor {
flex: 1; flex: 1;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_InviteDialog_section { .mx_InviteDialog_section {
padding-bottom: $spacing-4; padding-bottom: var(--cpd-space-1x);
.mx_InviteDialog_section_showMore { .mx_InviteDialog_section_showMore {
margin: 7px 18px; margin: 7px 18px;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_InviteDialog_section_hidden_suggestions_disclaimer { .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); font: var(--cpd-font-body-md-regular);
> span { > span {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
border-top: 1px solid $input-border-color; border-top: 1px solid $input-border-color;
> h3 { > h3 {
margin: $spacing-12 0; margin: var(--cpd-space-3x) 0;
font-size: $font-12px; font-size: $font-12px;
color: $muted-fg-color; color: $muted-fg-color;
font-weight: bold; font-weight: bold;
@@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_InviteDialog_addressBar { .mx_InviteDialog_addressBar {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
} }
input[type="checkbox"] { input[type="checkbox"] {
margin-inline-end: $spacing-8; margin-inline-end: var(--cpd-space-2x);
} }
} }
.mx_InviteDialog_userSections { .mx_InviteDialog_userSections {
overflow-y: auto; overflow-y: auto;
padding: 0 45px $spacing-4 0; padding: 0 45px var(--cpd-space-1x) 0;
} }
.mx_InviteDialog_helpText { .mx_InviteDialog_helpText {
@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_dialPad { .mx_InviteDialog_dialPad {
width: 224px; width: 224px;
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
margin-inline: auto; margin-inline: auto;
.mx_InviteDialog_dialPadField { .mx_InviteDialog_dialPadField {
@@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_DialPad { .mx_DialPad {
row-gap: $spacing-16; row-gap: var(--cpd-space-4x);
column-gap: 48px; column-gap: 48px;
margin-inline: auto; margin-inline: auto;
} }
} }
.mx_InviteDialog_transferConsultConnect { .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, /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
* then compensate with padding * then compensate with padding
*/ */
padding-inline: $spacing-24; padding-inline: var(--cpd-space-6x);
margin-inline: calc(-1 * $spacing-24); margin-inline: calc(-1 * var(--cpd-space-6x));
border-top: 1px solid $quinary-content; border-top: 1px solid $quinary-content;
display: flex; display: flex;
@@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_tile { .mx_InviteDialog_tile {
cursor: pointer; cursor: pointer;
display: grid; display: grid;
gap: $spacing-8 $spacing-12; gap: var(--cpd-space-2x) var(--cpd-space-3x);
align-items: center; align-items: center;
&.mx_InviteDialog_tile--inviterError { &.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */ grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24; margin-bottom: var(--cpd-space-6x);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_oneThreepid { .mx_InviteDialog_oneThreepid {
font-size: $font-12px; font-size: $font-12px;
margin: $spacing-8 0; margin: var(--cpd-space-2x) 0;
} }
apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+4 -4
View File
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_RoomSettingsDialog_BridgeList_listItem { &.mx_RoomSettingsDialog_BridgeList_listItem {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: $spacing-8; gap: var(--cpd-space-2x);
padding: 5px; padding: 5px;
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
/* border-style around each bridge list item */ /* border-style around each bridge list item */
border-width: 1px 1px; 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_details,
.mx_RoomSettingsDialog_column_data_metadata { .mx_RoomSettingsDialog_column_data_metadata {
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
} }
.mx_RoomSettingsDialog_column_data_metadata li { .mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
} }
.mx_RoomSettingsDialog_column_data_protocolName { .mx_RoomSettingsDialog_column_data_protocolName {
apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
+34 -34
View File
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_keyboardPrompt { #mx_SpotlightDialog_keyboardPrompt {
position: absolute; position: absolute;
padding: $spacing-8; padding: var(--cpd-space-2x);
border-radius: 8px; border-radius: 8px;
background-color: $background; background-color: $background;
top: -60px; /* relative to the top of the modal */ 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 { kbd {
display: inline-block; display: inline-block;
padding: 2px $spacing-4; padding: 2px var(--cpd-space-1x);
margin: 0 $spacing-4; margin: 0 var(--cpd-space-1x);
border-radius: 6px; border-radius: 6px;
background-color: $quinary-content; background-color: $quinary-content;
vertical-align: middle; vertical-align: middle;
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
margin: 0; margin: 0;
border: none; border: none;
border-radius: 8px 8px 0 0; 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; border-bottom: 1px solid $system;
> .mx_SpotlightDialog_filter { > .mx_SpotlightDialog_filter {
@@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details.
align-content: center; align-content: center;
align-items: center; align-items: center;
border-radius: 8px; border-radius: 8px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
background-color: $quinary-content; background-color: $quinary-content;
vertical-align: middle; vertical-align: middle;
color: $primary-content; color: $primary-content;
position: relative; 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 { > svg {
color: $secondary-content; color: $secondary-content;
width: 18px; width: 18px;
height: 18px; height: 18px;
position: absolute; position: absolute;
left: $spacing-8; left: var(--cpd-space-2x);
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
padding: 1px; padding: 1px;
background: $system; background: $system;
border-radius: 8px; border-radius: 8px;
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
color: $secondary-content; color: $secondary-content;
@@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details.
flex-grow: 0; flex-grow: 0;
width: unset; width: unset;
height: unset; height: unset;
margin-left: $spacing-16; margin-left: var(--cpd-space-4x);
} }
&:not(:focus-within) + #mx_SpotlightDialog_content { &:not(:focus-within) + #mx_SpotlightDialog_content {
@@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_content { #mx_SpotlightDialog_content {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
padding: $spacing-16; padding: var(--cpd-space-4x);
ul { ul {
padding: 0; padding: 0;
@@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details.
} }
> h4 { > h4 {
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
.mx_SpotlightDialog_sectionHeader { .mx_SpotlightDialog_sectionHeader {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
.mx_SpotlightDialog_options { .mx_SpotlightDialog_options {
display: flex; display: flex;
gap: $spacing-4; gap: var(--cpd-space-1x);
} }
} }
& + .mx_SpotlightDialog_section { & + .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 { .mx_SpotlightDialog_option {
padding: $spacing-4; padding: var(--cpd-space-1x);
color: $primary-content; color: $primary-content;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
@@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center; text-align: center;
.mx_DecoratedRoomAvatar { .mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */ margin: 0 9px var(--cpd-space-1x); /* maintain centering */
} }
& + .mx_SpotlightDialog_option { & + .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 {
--mx_SpotlightDialog_option_selectedBgColor: $system; --mx_SpotlightDialog_option_selectedBgColor: $system;
padding: 6px $spacing-4; padding: 6px var(--cpd-space-1x);
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px; line-height: $font-24px;
color: $primary-content; color: $primary-content;
@@ -249,20 +249,20 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start; align-items: flex-start;
.mx_AccessibleButton { .mx_AccessibleButton {
padding: $spacing-4 $spacing-20; padding: var(--cpd-space-1x) var(--cpd-space-5x);
margin: 2px $spacing-4; margin: 2px var(--cpd-space-1x);
} }
.mx_SpotlightDialog_enterPrompt { .mx_SpotlightDialog_enterPrompt {
margin-top: 9px; margin-top: 9px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
} }
> .mx_SpotlightDialog_metaspaceResult, > .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar, > .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar { > .mx_BaseAvatar {
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
line-height: $font-24px; line-height: $font-24px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
.mx_SpotlightDialog_result_publicRoomName { .mx_SpotlightDialog_result_publicRoomName {
color: $primary-content; color: $primary-content;
@@ -294,7 +294,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_result_publicRoomAlias { .mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@@ -313,7 +313,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_NotificationBadge { .mx_NotificationBadge {
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
} }
.mx_SpotlightDialog_option--menu, .mx_SpotlightDialog_option--menu,
@@ -356,17 +356,17 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_inviteLink, .mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom { .mx_SpotlightDialog_createRoom {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
.mx_AccessibleButton { .mx_AccessibleButton {
position: relative; position: relative;
margin: 0; margin: 0;
padding: 3px $spacing-8 3px $spacing-28; padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
svg { svg {
display: block; display: block;
position: absolute; position: absolute;
left: $spacing-8; left: var(--cpd-space-2x);
width: 16px; width: 16px;
height: 16px; height: 16px;
color: var(--cpd-color-icon-primary); 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_otherSearches {
.mx_SpotlightDialog_option { .mx_SpotlightDialog_option {
padding-left: $spacing-32; padding-left: var(--cpd-space-8x);
position: relative; position: relative;
svg { svg {
@@ -384,7 +384,7 @@ Please see LICENSE files in the repository root for full details.
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute; position: absolute;
left: $spacing-4; left: var(--cpd-space-1x);
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
@@ -397,8 +397,8 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_SpotlightDialog_result_details { .mx_SpotlightDialog_result_details {
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
color: $tertiary-content; color: $tertiary-content;
font-size: $font-12px; font-size: $font-12px;
line-height: $font-15px; line-height: $font-15px;
@@ -415,7 +415,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_SpotlightDialog_enterPrompt { .mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4; padding: 2px var(--cpd-space-1x);
/* To avoid any styling inherent with <kbd> elements */ /* To avoid any styling inherent with <kbd> elements */
font-family: inherit; font-family: inherit;
font-weight: inherit; font-weight: inherit;
@@ -424,7 +424,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content; color: $tertiary-content;
border-radius: 6px; border-radius: 6px;
background-color: $quinary-content; background-color: $quinary-content;
margin-right: $spacing-4; margin-right: var(--cpd-space-1x);
display: none; display: none;
} }
apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
+2 -2
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Dialog { .mx_Dialog {
color: $primary-content; color: $primary-content;
font: var(--cpd-font-body-md-regular); 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; text-align: center;
/* !important override compound */ /* !important override compound */
width: 485px !important; width: 485px !important;
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AuthBody_did-not-receive { .mx_AuthBody_did-not-receive {
justify-content: center; justify-content: center;
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
.mx_Dialog_cancelButton { .mx_Dialog_cancelButton {
apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+1 -1
View File
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
padding: 56px; /* 80px from design - 24px wrapper padding */ padding: 56px; /* 80px from design - 24px wrapper padding */
.mx_Dialog_title { .mx_Dialog_title {
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
} }
apps/web/res/css/views/directory/_NetworkDropdown.pcss
+7 -7
View File
@@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details.
.mx_NetworkDropdown_wrapper .mx_ContextualMenu { .mx_NetworkDropdown_wrapper .mx_ContextualMenu {
.mx_GenericDropdownMenu_Option { .mx_GenericDropdownMenu_Option {
&.mx_GenericDropdownMenu_Option--header { &.mx_GenericDropdownMenu_Option--header {
padding-top: $spacing-12; padding-top: var(--cpd-space-3x);
padding-bottom: $spacing-4; padding-bottom: var(--cpd-space-1x);
min-width: 160px; min-width: 160px;
} }
&.mx_GenericDropdownMenu_Option--item { &.mx_GenericDropdownMenu_Option--item {
padding-top: $spacing-4; padding-top: var(--cpd-space-1x);
padding-bottom: $spacing-4; padding-bottom: var(--cpd-space-1x);
> .mx_GenericDropdownMenu_Option--label span:first-child { > .mx_GenericDropdownMenu_Option--label span:first-child {
font-weight: normal; font-weight: normal;
@@ -30,15 +30,15 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content; color: $primary-content;
span:not(:first-child) { span:not(:first-child) {
margin-left: $spacing-4; margin-left: var(--cpd-space-1x);
color: $secondary-content; color: $secondary-content;
} }
} }
} }
.mx_GenericDropdownMenu_divider { .mx_GenericDropdownMenu_divider {
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
margin-bottom: $spacing-4; margin-bottom: var(--cpd-space-1x);
& + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label { & + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
font-size: $font-15px; font-size: $font-15px;
apps/web/res/css/views/elements/_GenericEventListSummary.pcss
+3 -3
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
position: relative; position: relative;
.mx_GenericEventListSummary_avatars { .mx_GenericEventListSummary_avatars {
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
.mx_GenericEventListSummary_spacer { .mx_GenericEventListSummary_spacer {
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
} }
&[data-layout="group"] { &[data-layout="group"] {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
} }
&[data-layout="bubble"] { &[data-layout="bubble"] {
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MatrixChat_useCompactLayout & { .mx_MatrixChat_useCompactLayout & {
font-size: $font-13px; font-size: $font-13px;
margin-top: $spacing-4; margin-top: var(--cpd-space-1x);
.mx_EventTile_line { .mx_EventTile_line {
line-height: 1.25; line-height: 1.25;
apps/web/res/css/views/elements/_ServerPicker.pcss
+1 -1
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ServerPicker { .mx_ServerPicker {
margin-bottom: 14px; margin-bottom: 14px;
padding-bottom: $spacing-16; padding-bottom: var(--cpd-space-4x);
border-bottom: 1px solid rgb(141, 151, 165, 0.2); border-bottom: 1px solid rgb(141, 151, 165, 0.2);
display: grid; display: grid;
grid-template-columns: auto min-content; grid-template-columns: auto min-content;
apps/web/res/css/views/location/_LocationPicker.pcss
+4 -4
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.maplibregl-ctrl.maplibregl-ctrl-group, .maplibregl-ctrl.maplibregl-ctrl-group,
.maplibregl-ctrl.maplibregl-ctrl-attrib { .maplibregl-ctrl.maplibregl-ctrl-attrib {
margin-right: $spacing-16; margin-right: var(--cpd-space-4x);
} }
.maplibregl-ctrl.maplibregl-ctrl-group { .maplibregl-ctrl.maplibregl-ctrl-group {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
flex: 0; flex: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $spacing-16; padding: var(--cpd-space-4x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LocationPicker_pinText { .mx_LocationPicker_pinText {
position: absolute; position: absolute;
top: $spacing-16; top: var(--cpd-space-4x);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
span { span {
box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15); box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
border-radius: 8px; border-radius: 8px;
padding: $spacing-8; padding: var(--cpd-space-2x);
background-color: $background; background-color: $background;
color: $primary-content; color: $primary-content;
apps/web/res/css/views/messages/_CallEvent.pcss
+5 -5
View File
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
gap: $spacing-8; gap: var(--cpd-space-2x);
> .mx_BaseAvatar, > .mx_BaseAvatar,
> .mx_Icon { > .mx_Icon {
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
> .mx_Icon { > .mx_Icon {
padding: 0; padding: 0;
margin: $spacing-4 0; margin: var(--cpd-space-1x) 0;
color: $secondary-content; color: $secondary-content;
} }
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content; color: $secondary-content;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
.mx_CallEvent_active .mx_CallEvent_title { .mx_CallEvent_active .mx_CallEvent_title {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
.mx_CallEvent_columns { .mx_CallEvent_columns {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
gap: $spacing-12; gap: var(--cpd-space-3x);
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details.
.mx_TimelineCard .mx_CallEvent_columns { .mx_TimelineCard .mx_CallEvent_columns {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: $spacing-8; gap: var(--cpd-space-2x);
} }
.mx_CallEvent_details { .mx_CallEvent_details {
apps/web/res/css/views/messages/_LegacyCallEvent.pcss
+10 -10
View File
@@ -16,11 +16,11 @@ Please see LICENSE files in the repository root for full details.
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: $spacing-4 0; gap: var(--cpd-space-1x) 0;
position: relative; position: relative;
margin: $spacing-4 0; margin: var(--cpd-space-1x) 0;
padding: $spacing-12 $spacing-24; padding: var(--cpd-space-3x) var(--cpd-space-6x);
box-sizing: border-box; box-sizing: border-box;
background-color: $dark-panel-bg-color; background-color: $dark-panel-bg-color;
border-radius: 8px; border-radius: 8px;
@@ -47,14 +47,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_info_basic { .mx_LegacyCallEvent_info_basic {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-4; gap: var(--cpd-space-1x);
margin-left: 10px; /* To match mx_LegacyCallEvent */ margin-left: 10px; /* To match mx_LegacyCallEvent */
margin-right: 10px; margin-right: 10px;
min-width: 0; min-width: 0;
.mx_LegacyCallEvent_sender { .mx_LegacyCallEvent_sender {
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
margin-bottom: $spacing-4; margin-bottom: var(--cpd-space-1x);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -74,14 +74,14 @@ Please see LICENSE files in the repository root for full details.
align-items: center; align-items: center;
color: $secondary-content; color: $secondary-content;
font-size: $font-12px; 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) */ margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
word-break: break-word; word-break: break-word;
max-width: fit-content; max-width: fit-content;
.mx_LegacyCallEvent_content_button { .mx_LegacyCallEvent_content_button {
@mixin LegacyCallButton; @mixin LegacyCallButton;
padding: 0 $spacing-12; padding: 0 var(--cpd-space-3x);
font-size: inherit; font-size: inherit;
} }
@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallEvent_narrow { &.mx_LegacyCallEvent_narrow {
flex-direction: column; flex-direction: column;
align-items: unset; align-items: unset;
gap: $spacing-4 $spacing-16; gap: var(--cpd-space-1x) var(--cpd-space-4x);
height: unset; height: unset;
min-width: 290px; min-width: 290px;
@@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_wrapper { .mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent { .mx_LegacyCallEvent {
&.mx_LegacyCallEvent_narrow { &.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_IRCLayout {
.mx_LegacyCallEvent_wrapper { .mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent { .mx_LegacyCallEvent {
margin-inline-start: $spacing-4; /* display green line */ margin-inline-start: var(--cpd-space-1x); /* display green line */
} }
} }
} }
apps/web/res/css/views/messages/_MImageReplyBody.pcss
+4 -4
View File
@@ -10,9 +10,9 @@ Please see LICENSE files in the repository root for full details.
.mx_MStickerBody_wrapper { .mx_MStickerBody_wrapper {
.mx_MImageBody_banner { .mx_MImageBody_banner {
position: absolute; position: absolute;
bottom: $spacing-4; bottom: var(--cpd-space-1x);
left: $spacing-4; left: var(--cpd-space-1x);
padding: $spacing-4; padding: var(--cpd-space-1x);
border-radius: var(--MBody-border-radius); border-radius: var(--MBody-border-radius);
font-size: $font-15px; font-size: $font-15px;
user-select: none; user-select: none;
@@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MImageReplyBody { .mx_MImageReplyBody {
display: flex; display: flex;
column-gap: $spacing-4; column-gap: var(--cpd-space-1x);
.mx_MImageBody_thumbnail_container { .mx_MImageBody_thumbnail_container {
flex: 1; flex: 1;
apps/web/res/css/views/messages/_MPollBody.pcss
+3 -3
View File
@@ -47,7 +47,7 @@ $poll-max-width: 550px;
.mx_Spinner { .mx_Spinner {
flex: 0; flex: 0;
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
} }
} }
} }
@@ -59,7 +59,7 @@ $poll-max-width: 550px;
.mx_MPollBody_allOptions { .mx_MPollBody_allOptions {
display: grid; display: grid;
gap: $spacing-16; gap: var(--cpd-space-4x);
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
max-width: $poll-max-width; max-width: $poll-max-width;
} }
apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
+1 -1
View File
@@ -15,5 +15,5 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_PollHistory_header.mx_Heading_h2 { .mx_PollHistory_header.mx_Heading_h2 {
margin-bottom: $spacing-16; margin-bottom: var(--cpd-space-4x);
} }
apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
+6 -6
View File
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1 0; flex: 1 1 0;
align-content: flex-start; align-content: flex-start;
display: grid; display: grid;
gap: $spacing-20; gap: var(--cpd-space-5x);
padding-right: $spacing-64; padding-right: var(--cpd-space-16x);
margin: $spacing-32 0; margin: var(--cpd-space-8x) 0;
&.mx_PollHistoryList_list_ENDED { &.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%; height: 100%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 $spacing-64; padding: 0 var(--cpd-space-16x);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content; color: $secondary-content;
.mx_PollHistoryList_loadMorePolls { .mx_PollHistoryList_loadMorePolls {
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
} }
} }
apps/web/res/css/views/right_panel/_BaseCard.pcss
+1 -1
View File
@@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_BaseCard_footer { .mx_BaseCard_footer {
padding-top: $spacing-4; padding-top: var(--cpd-space-1x);
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
+1 -1
View File
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ExtensionsCard_container { .mx_ExtensionsCard_container {
text-align: center; text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0; margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
} }
.mx_ExtensionsCard_Button { .mx_ExtensionsCard_Button {
apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
+2 -2
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSummaryCard_container { .mx_RoomSummaryCard_container {
text-align: center; text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0; margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
} }
.mx_RoomSummaryCard_roomName, .mx_RoomSummaryCard_roomName,
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomSummaryCard_roomName { .mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4; margin: var(--cpd-space-3x) 0 var(--cpd-space-1x);
} }
.mx_RoomSummaryCard_bottomOptions { .mx_RoomSummaryCard_bottomOptions {
apps/web/res/css/views/right_panel/_ThreadPanel.pcss
+3 -3
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ThreadPanel_dropdown { .mx_ThreadPanel_dropdown {
font: var(--cpd-font-body-sm-regular); 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; border-radius: 4px;
line-height: 1.5; line-height: 1.5;
user-select: none; user-select: none;
@@ -111,8 +111,8 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
padding-inline-start: $spacing-8; padding-inline-start: var(--cpd-space-2x);
padding-inline-end: $spacing-8; padding-inline-end: var(--cpd-space-2x);
content-visibility: visible; content-visibility: visible;
} }
apps/web/res/css/views/right_panel/_TimelineCard.pcss
+2 -2
View File
@@ -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 */ padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
.mx_EventTile_e2eIcon { .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 { .mx_ReactionsRow {
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */ /* 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 { .mx_ThreadSummary {
apps/web/res/css/views/right_panel/_UserInfo.pcss
+2 -2
View File
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
.mx_UserInfo_memberDetailsContainer { .mx_UserInfo_memberDetailsContainer {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
.mx_RoomTile_titleContainer { .mx_RoomTile_titleContainer {
@@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content; color: $tertiary-content;
font: var(--cpd-font-body-md-semibold); font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold); font-weight: var(--cpd-font-weight-semibold);
margin: $spacing-4 0; margin: var(--cpd-space-1x) 0;
} }
p { p {
apps/web/res/css/views/rooms/_EventTile.pcss
+25 -25
View File
@@ -97,7 +97,7 @@ $left-gutter: 64px;
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
align-items: center; align-items: center;
gap: $spacing-4; gap: var(--cpd-space-1x);
} }
.mx_ReplyChain--expanded { .mx_ReplyChain--expanded {
@@ -236,7 +236,7 @@ $left-gutter: 64px;
} }
.mx_ReplyChain { .mx_ReplyChain {
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
} }
@@ -315,7 +315,7 @@ $left-gutter: 64px;
display: inline; display: inline;
background-color: $event-selected-color; background-color: $event-selected-color;
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
padding-right: $spacing-8; padding-right: var(--cpd-space-2x);
} }
> .mx_DisambiguatedProfile_mxid { > .mx_DisambiguatedProfile_mxid {
@@ -440,7 +440,7 @@ $left-gutter: 64px;
&[data-layout="group"] { &[data-layout="group"] {
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: 14px; top: 14px;
left: $spacing-8; left: var(--cpd-space-2x);
} }
.mx_EventTile_line, .mx_EventTile_line,
@@ -657,11 +657,11 @@ $left-gutter: 64px;
border: 1px solid $inlinecode-border-color; border: 1px solid $inlinecode-border-color;
border-radius: 4px; border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */ /* 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 */ /* Avoid inline code blocks to be sticked when on multiple lines */
line-height: $font-22px; line-height: $font-22px;
/* Avoid the border to be glued to the other words */ /* Avoid the border to be glued to the other words */
margin-right: $spacing-2; margin-right: var(--cpd-space-0-5x);
} }
code { code {
@@ -860,15 +860,15 @@ $left-gutter: 64px;
.mx_EventTile_collapsedCodeBlock { .mx_EventTile_collapsedCodeBlock {
max-height: 30vh; max-height: 30vh;
padding-top: $spacing-12; padding-top: var(--cpd-space-3x);
padding-bottom: $spacing-12; padding-bottom: var(--cpd-space-3x);
} }
/* Inserted adjacent to <pre> blocks, (See TextualBody) */ /* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button { .mx_EventTile_button {
position: absolute; position: absolute;
top: $spacing-8; top: var(--cpd-space-2x);
right: $spacing-8; right: var(--cpd-space-2x);
visibility: hidden; visibility: hidden;
&.mx_EventTile_buttonBottom { &.mx_EventTile_buttonBottom {
@@ -914,7 +914,7 @@ $left-gutter: 64px;
margin-right: 0; margin-right: 0;
span { 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="ThreadsList"],
.mx_EventTile[data-shape="Notification"] { .mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12; --topOffset: var(--cpd-space-3x);
--leftOffset: 48px; --leftOffset: 48px;
$borderRadius: 8px; $borderRadius: 8px;
$padding: $spacing-8; $padding: var(--cpd-space-2x);
$hrHeight: 1px; $hrHeight: 1px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */ $notification-dot-size: 8px; /* notification dot next to the timestamp */
@@ -1051,7 +1051,7 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"] { .mx_EventTile[data-shape="ThreadsList"] {
.mx_ThreadPanel_replies { .mx_ThreadPanel_replies {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@@ -1069,13 +1069,13 @@ $left-gutter: 64px;
.mx_ThreadSummary_icon { .mx_ThreadSummary_icon {
display: inline-block; display: inline-block;
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
> svg { > svg {
@mixin ThreadSummaryIcon; @mixin ThreadSummaryIcon;
vertical-align: middle; vertical-align: middle;
margin-inline-end: $spacing-8; margin-inline-end: var(--cpd-space-2x);
margin-top: -2px; margin-top: -2px;
} }
@@ -1163,7 +1163,7 @@ $left-gutter: 64px;
&[data-layout="irc"], &[data-layout="irc"],
&[data-layout="group"] { &[data-layout="group"] {
padding-block-start: $spacing-16; padding-block-start: var(--cpd-space-4x);
.mx_EventTile_line, .mx_EventTile_line,
.mx_EventTile_footer { .mx_EventTile_footer {
@@ -1200,8 +1200,8 @@ $left-gutter: 64px;
.mx_EventTile_senderDetails { .mx_EventTile_senderDetails {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-16; /* gap between the avatar and the sender ID */ gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8; padding-inline-start: var(--cpd-space-2x);
a { a {
flex: 1; flex: 1;
@@ -1265,7 +1265,7 @@ $left-gutter: 64px;
/* Cascading - compact modern layout on the main timeline and the right panel */ /* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout { .mx_MatrixChat_useCompactLayout {
.mx_EventTile[data-layout="group"] { .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-top-avatar: 2px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px; --MatrixChat_useCompactLayout_line-spacing-block: 0px;
@@ -1277,7 +1277,7 @@ $left-gutter: 64px;
} }
.mx_ReplyChain { .mx_ReplyChain {
margin-bottom: $spacing-4; margin-bottom: var(--cpd-space-1x);
} }
&.mx_EventTile_info { &.mx_EventTile_info {
@@ -1297,7 +1297,7 @@ $left-gutter: 64px;
} }
&.mx_EventTile_emote { &.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 { .mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar); top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1349,7 +1349,7 @@ $left-gutter: 64px;
blockquote, blockquote,
pre, pre,
table { 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; width: stretch;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: $spacing-8; gap: var(--cpd-space-2x);
margin-left: var(--leftOffset); margin-left: var(--leftOffset);
.mx_EventTile_truncated { .mx_EventTile_truncated {
flex: 1; flex: 1;
apps/web/res/css/views/rooms/_ReplyPreview.pcss
+2 -2
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
border-bottom: 1px solid $primary-hairline-color; border-bottom: 1px solid $primary-hairline-color;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
row-gap: $spacing-8; row-gap: var(--cpd-space-2x);
padding: $spacing-8 $spacing-8 0 0; padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
.mx_ReplyPreview_header { .mx_ReplyPreview_header {
display: flex; display: flex;
apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_RoomPreviewCard { .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; margin: auto;
flex-grow: 1; flex-grow: 1;
max-width: 480px; 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); font-weight: var(--cpd-font-weight-semibold);
line-height: $font-24px; line-height: $font-24px;
color: $primary-content; color: $primary-content;
margin-top: $spacing-24; margin-top: var(--cpd-space-6x);
svg { svg {
height: 1em; height: 1em;
width: 1em; width: 1em;
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
color: $secondary-content; color: $secondary-content;
vertical-align: -2px; vertical-align: -2px;
} }
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomPreviewCard_inviter { .mx_RoomPreviewCard_inviter {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: $spacing-20; margin-bottom: var(--cpd-space-5x);
font-size: $font-15px; font-size: $font-15px;
> div { > div {
margin-left: $spacing-8; margin-left: var(--cpd-space-2x);
.mx_RoomPreviewCard_inviter_name { .mx_RoomPreviewCard_inviter_name {
line-height: $font-18px; 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 */ /* XXX Remove this when video rooms leave beta */
.mx_BetaCard_betaPill { .mx_BetaCard_betaPill {
position: absolute; position: absolute;
inset-block-start: $spacing-32; inset-block-start: var(--cpd-space-8x);
inset-inline-end: $spacing-24; inset-inline-end: var(--cpd-space-6x);
} }
} }
h1.mx_RoomPreviewCard_name { 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 { .mx_RoomPreviewCard_topic {
line-height: $font-22px; line-height: $font-22px;
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
max-height: 160px; max-height: 160px;
overflow-y: auto; overflow-y: auto;
} }
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FacePile { .mx_FacePile {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
/* For enhanced visibility under contrast control */ /* For enhanced visibility under contrast control */
outline: 1px solid transparent; outline: 1px solid transparent;
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomPreviewCard_joinButtons { .mx_RoomPreviewCard_joinButtons {
margin-top: $spacing-20; margin-top: var(--cpd-space-5x);
display: flex; display: flex;
gap: $spacing-20; gap: var(--cpd-space-5x);
.mx_AccessibleButton { .mx_AccessibleButton {
max-width: 200px; max-width: 200px;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
ol { ol {
margin-top: 0; margin-top: 0;
margin-bottom: 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 */ /* 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-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding: $spacing-8 $spacing-12; padding: var(--cpd-space-2x) var(--cpd-space-3x);
background-color: $inlinecode-background-color; background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-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; background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color; border: 1px solid $inlinecode-border-color;
border-radius: 4px; border-radius: 4px;
padding: $spacing-2; padding: var(--cpd-space-0-5x);
&:empty { &:empty {
border: unset; border: unset;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+2 -2
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_LinkModal { .mx_LinkModal {
padding: $spacing-32; padding: var(--cpd-space-8x);
max-width: 600px; max-width: 600px;
height: 341px; height: 341px;
box-sizing: border-box; box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
gap: $spacing-8; gap: var(--cpd-space-2x);
margin-top: 7px; margin-top: 7px;
.mx_LinkModal_Field { .mx_LinkModal_Field {
apps/web/res/css/views/settings/_FontScalingPanel.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
border: 1px solid $quinary-content; border: 1px solid $quinary-content;
border-radius: 10px; 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; pointer-events: none;
display: flow-root; display: flow-root;
apps/web/res/css/views/settings/_ImageSizePanel.pcss
+1 -1
View File
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ImageSizePanel_radios { .mx_ImageSizePanel_radios {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $spacing-16; gap: var(--cpd-space-4x);
> label { > label {
margin-right: 68px; /* keep the boxes separate */ margin-right: 68px; /* keep the boxes separate */
apps/web/res/css/views/settings/_IntegrationManager.pcss
+1 -1
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
} }
h3 { h3 {
margin-block: $spacing-20; margin-block: var(--cpd-space-5x);
} }
.mx_IntegrationManager_loading, .mx_IntegrationManager_loading,
apps/web/res/css/views/settings/_Notifications.pcss
+1 -1
View File
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
justify-self: start; justify-self: start;
padding-right: 30%; padding-right: 30%;
/* collapse half of the grid-gap */ /* collapse half of the grid-gap */
margin-top: -$spacing-4; margin-top: calc(-1 * var(--cpd-space-1x));
} }
.mx_UserNotifSettings_floatingSection { .mx_UserNotifSettings_floatingSection {
apps/web/res/css/views/settings/_RoomProfileSettings.pcss
+4 -4
View File
@@ -17,11 +17,11 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: 54px; margin-inline-end: 54px;
.mx_Field { .mx_Field {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
} }
.mx_RoomProfileSettings_profile_controls_topic { .mx_RoomProfileSettings_profile_controls_topic {
margin-top: $spacing-8; margin-top: var(--cpd-space-2x);
& > textarea { & > textarea {
font-family: inherit; font-family: inherit;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomProfileSettings_profile_controls_userId { .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; display: flex;
gap: var(--cpd-space-4x); gap: var(--cpd-space-4x);
margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */ margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
margin-bottom: $spacing-28; margin-bottom: var(--cpd-space-7x);
} }
} }
apps/web/res/css/views/settings/_SetIntegrationManager.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: $spacing-4; column-gap: var(--cpd-space-1x);
} }
form { form {
margin-top: var(--cpd-space-3x); margin-top: var(--cpd-space-3x);
apps/web/res/css/views/settings/_SettingsFieldset.pcss
+1 -1
View File
@@ -37,5 +37,5 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsFieldset_content { .mx_SettingsFieldset_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $spacing-8; gap: var(--cpd-space-2x);
} }
apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
+1 -1
View File
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_GeneralUserSettingsTab_spellCheckLanguageInput { .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-bottom: $spacing-8; margin-bottom: var(--cpd-space-2x);
} }
apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+2 -2
View File
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsSection_subSections { .mx_SettingsSection_subSections {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: $spacing-32; gap: var(--cpd-space-8x);
margin: $spacing-16 0; margin: var(--cpd-space-4x) 0;
} }
apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_section { .mx_SettingsTab_section {
$end-gutter: 80px; $end-gutter: 80px;
margin-bottom: $spacing-24; margin-bottom: var(--cpd-space-6x);
.mx_SettingsFlag { .mx_SettingsFlag {
margin-inline-end: $end-gutter; margin-inline-end: $end-gutter;
@@ -82,7 +82,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_sections { .mx_SettingsTab_sections {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: $spacing-32; gap: var(--cpd-space-8x);
padding-bottom: $spacing-16; padding-bottom: var(--cpd-space-4x);
} }
apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+2 -2
View File
@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
*/ */
.mx_SecurityRoomSettingsTab_advancedSection { .mx_SecurityRoomSettingsTab_advancedSection {
margin-top: $spacing-16; margin-top: var(--cpd-space-4x);
} }
.mx_SecurityRoomSettingsTab_warning { .mx_SecurityRoomSettingsTab_warning {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: $spacing-4; column-gap: var(--cpd-space-1x);
svg { svg {
color: #ff0064; /* Match legacy icon colour until redesign */ color: #ff0064; /* Match legacy icon colour until redesign */
apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+3 -3
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
padding: 0; padding: 0;
width: 100%; width: 100%;
display: grid; display: grid;
gap: $spacing-4; gap: var(--cpd-space-1x);
} }
.mx_KeyboardShortcut_shortcutRow, .mx_KeyboardShortcut_shortcutRow,
@@ -23,10 +23,10 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_KeyboardShortcut_shortcutRow { .mx_KeyboardShortcut_shortcutRow {
column-gap: $spacing-8; column-gap: var(--cpd-space-2x);
} }
.mx_KeyboardShortcut { .mx_KeyboardShortcut {
flex-wrap: nowrap; flex-wrap: nowrap;
column-gap: $spacing-4; column-gap: var(--cpd-space-1x);
} }
apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+3 -3
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SecurityUserSettingsTab_bulkOptions { .mx_SecurityUserSettingsTab_bulkOptions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
column-gap: $spacing-8; column-gap: var(--cpd-space-2x);
} }
.mx_SecurityUserSettingsTab_ignoredUsers { .mx_SecurityUserSettingsTab_ignoredUsers {
@@ -18,11 +18,11 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_SecurityUserSettingsTab_ignoredUser { .mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: $spacing-4; margin-bottom: var(--cpd-space-1x);
} }
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton { .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: $spacing-8; margin-right: var(--cpd-space-2x);
} }
.mx_SecurityUserSettingsTab_warning { .mx_SecurityUserSettingsTab_warning {
code_style.md
+1 -2
View File
@@ -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. - 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. 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. - 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. 8. Use spacing variables like `var(--cpd-space-2x)`, `var(--cpd-space-3x)`, `var(--cpd-space-4x)`.
- Prefer Compound spacing tokens like `var(--cpd-space-2x)` for new code.
#### Syntax and formatting #### Syntax and formatting