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/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 {
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
}
.mx_InviteDialog_addressBar {
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */
margin: $spacing-8 45px 0 0;
margin: var(--cpd-space-2x) 45px 0 0;
.mx_InviteDialog_editor {
flex: 1;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
padding-bottom: var(--cpd-space-1x);
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x) 0;
font: var(--cpd-font-body-md-regular);
> span {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
border-top: 1px solid $input-border-color;
> h3 {
margin: $spacing-12 0;
margin: var(--cpd-space-3x) 0;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
@@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_addressBar {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
input[type="checkbox"] {
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
}
}
.mx_InviteDialog_userSections {
overflow-y: auto;
padding: 0 45px $spacing-4 0;
padding: 0 45px var(--cpd-space-1x) 0;
}
.mx_InviteDialog_helpText {
@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_dialPad {
width: 224px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
margin-inline: auto;
.mx_InviteDialog_dialPadField {
@@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DialPad {
row-gap: $spacing-16;
row-gap: var(--cpd-space-4x);
column-gap: 48px;
margin-inline: auto;
}
}
.mx_InviteDialog_transferConsultConnect {
padding-top: $spacing-16;
padding-top: var(--cpd-space-4x);
/* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
* then compensate with padding
*/
padding-inline: $spacing-24;
margin-inline: calc(-1 * $spacing-24);
padding-inline: var(--cpd-space-6x);
margin-inline: calc(-1 * var(--cpd-space-6x));
border-top: 1px solid $quinary-content;
display: flex;
@@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
gap: $spacing-8 $spacing-12;
gap: var(--cpd-space-2x) var(--cpd-space-3x);
align-items: center;
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
&:last-child {
margin-bottom: 0;
@@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_oneThreepid {
font-size: $font-12px;
margin: $spacing-8 0;
margin: var(--cpd-space-2x) 0;
}