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

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

* Remove unused font size vars

* Use calc to get negative spacing vars
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
+15 -15
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
h1 {
font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
color: $authpage-primary-color;
}
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_text {
margin-bottom: $spacing-48;
margin-bottom: var(--cpd-space-12x);
margin-top: 0;
}
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Login_submit {
height: 32px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
.mx_ErrorMessage {
@@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details.
min-height: 600px;
h1 {
margin: $spacing-24 0;
margin: var(--cpd-space-6x) 0;
}
.mx_AuthBody_button-container {
@@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Login_submit {
margin: 0 0 $spacing-16;
margin: 0 0 var(--cpd-space-4x);
}
.mx_AuthBody_text {
margin-bottom: $spacing-32;
margin-bottom: var(--cpd-space-8x);
p {
margin: 0 0 $spacing-8;
margin: 0 0 var(--cpd-space-2x);
}
}
.mx_AuthBody_sign-in-instead-button {
font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4;
padding: var(--cpd-space-1x);
}
.mx_AuthBody_fieldRow {
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
color: $secondary-content;
display: flex;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_AuthBody_resend-button {
@@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
color: $accent;
display: flex;
gap: $spacing-4;
padding: $spacing-4;
gap: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
&:hover {
background-color: $system;
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_AuthBody_paddedFooter_title {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
font-size: $font-15px;
line-height: $font-24px;
@@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_paddedFooter_subtitle {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
font-size: $font-10px;
line-height: $font-14px;
}
@@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_AuthBody_spinner {