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/views/auth/_AuthBody.pcss
+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 {
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 {
margin-top: 0;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
.mx_LoginWithQRSection {
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LoginWithQRSection .mx_AccessibleButton svg {
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
}
.mx_LoginWithQR_dialog .mx_Dialog {
@@ -42,12 +42,12 @@ Please see LICENSE files in the repository root for full details.
}
h2 {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_LoginWithQR_qrWrapper {
display: flex;
padding: $spacing-28 0;
padding: var(--cpd-space-7x) 0;
.mx_Spinner {
/* Match the size of the QR code to prevent jumps */
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationDigits {
text-align: center;
margin: $spacing-48 auto;
margin: var(--cpd-space-12x) auto;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
color: $primary-content;
@@ -66,8 +66,8 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationAlert {
border: 1px solid $quaternary-content;
border-radius: $spacing-8;
padding: $spacing-8;
border-radius: var(--cpd-space-2x);
padding: var(--cpd-space-2x);
line-height: 1.5em;
display: flex;
@@ -128,14 +128,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_heading {
display: flex;
gap: $spacing-12;
gap: var(--cpd-space-3x);
align-items: center;
}
.mx_LoginWithQR_BackButton {
height: $spacing-28;
border-radius: $spacing-28;
padding: $spacing-4;
height: var(--cpd-space-7x);
border-radius: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary);
svg {
@@ -166,7 +166,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
align-items: center;
gap: $spacing-16;
gap: var(--cpd-space-4x);
margin-top: var(--cpd-space-6x);
.mx_AccessibleButton {
@@ -177,7 +177,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_QRCode {
border-radius: $spacing-8;
border-radius: var(--cpd-space-2x);
display: flex;
justify-content: center;
}