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/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;
align-items: center;
padding: $spacing-32 $spacing-16;
padding: var(--cpd-space-8x) var(--cpd-space-4x);
text-align: center;
box-sizing: border-box;
}
.mx_EnableLiveShare_heading {
padding-top: $spacing-24;
padding-top: var(--cpd-space-6x);
}
.mx_EnableLiveShare_icon {
@@ -28,13 +28,13 @@ Please see LICENSE files in the repository root for full details.
}
.mx_EnableLiveShare_description {
padding: 0 $spacing-24;
margin-bottom: $spacing-32;
padding: 0 var(--cpd-space-6x);
margin-bottom: var(--cpd-space-8x);
line-height: $font-20px;
}
.mx_EnableLiveShare_button {
margin-top: $spacing-32;
margin-top: var(--cpd-space-8x);
height: 48px;
width: 100%;
}
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 {
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 {
padding: 100px $spacing-32 0;
padding: 100px var(--cpd-space-8x) 0;
text-align: center;
--mx-map-error-icon-color: $secondary-content;
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
justify-content: center;
align-items: center;
padding: $spacing-24;
padding: var(--cpd-space-6x);
background-color: $panels;
font-size: $font-12px;
line-height: $font-16px;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MapError_heading {
padding-top: $spacing-8;
padding-top: var(--cpd-space-2x);
/* override h3 heading size */
font-size: inherit !important;
font-weight: normal !important;
@@ -44,11 +44,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MapError_message {
margin: $spacing-16 0 $spacing-32;
margin: var(--cpd-space-4x) 0 var(--cpd-space-8x);
}
.mx_MapError_heading {
padding-top: $spacing-24;
padding-top: var(--cpd-space-6x);
}
.mx_MapError_icon {
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 {
width: 65px;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
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;
color: $secondary-content;
position: absolute;
top: $spacing-16;
top: var(--cpd-space-4x);
&:hover,
&:focus {
@@ -30,11 +30,11 @@ button.mx_ShareDialogButtons_button {
}
&.left {
left: $spacing-16;
left: var(--cpd-space-4x);
}
&.right {
right: $spacing-16;
right: var(--cpd-space-4x);
}
}
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;
align-items: center;
padding: 60px $spacing-12 $spacing-32;
padding: 60px var(--cpd-space-3x) var(--cpd-space-8x);
color: $primary-content;
.mx_ShareType_wrapper_options {
display: flex;
flex-direction: column;
row-gap: $spacing-12;
row-gap: var(--cpd-space-3x);
width: 100%;
margin-top: $spacing-12;
margin-top: var(--cpd-space-3x);
.mx_ShareType_option {
display: flex;
align-items: center;
justify-content: flex-start;
padding: $spacing-8 $spacing-20;
padding: var(--cpd-space-2x) var(--cpd-space-5x);
background: none;
border: 1px solid $quinary-content;
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ShareType_badge {
height: 60px;
width: 60px;
margin-bottom: $spacing-20;
margin-bottom: var(--cpd-space-5x);
background-color: $accent;
border-radius: 50%;
border: 14px solid $accent;
@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ShareType_heading {
padding-bottom: $spacing-32;
padding-bottom: var(--cpd-space-8x);
text-align: center;
}
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
height: 40px;
width: 40px;
box-sizing: border-box;
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
flex: 0 0 40px;
border-width: 2px;
border-style: solid;
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 {
position: absolute;
bottom: $spacing-32;
right: $spacing-24;
bottom: var(--cpd-space-8x);
right: var(--cpd-space-6x);
display: flex;
flex-direction: column;
row-gap: $spacing-8;
row-gap: var(--cpd-space-2x);
.mx_ZoomButtons_button {
$ZoomButtons_button-size: 24px;