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/_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 {
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 {
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;
}
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 {
display: flex;
flex-wrap: wrap;
gap: $spacing-8;
gap: var(--cpd-space-2x);
padding: 5px;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
/* border-style around each bridge list item */
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_metadata {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
}
.mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.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 {
position: absolute;
padding: $spacing-8;
padding: var(--cpd-space-2x);
border-radius: 8px;
background-color: $background;
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 {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
padding: 2px var(--cpd-space-1x);
margin: 0 var(--cpd-space-1x);
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
margin: 0;
border: none;
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;
> .mx_SpotlightDialog_filter {
@@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details.
align-content: center;
align-items: center;
border-radius: 8px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
background-color: $quinary-content;
vertical-align: middle;
color: $primary-content;
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 {
color: $secondary-content;
width: 18px;
height: 18px;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
top: 50%;
transform: translateY(-50%);
}
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
padding: 1px;
background: $system;
border-radius: 8px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
text-align: center;
line-height: 16px;
color: $secondary-content;
@@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details.
flex-grow: 0;
width: unset;
height: unset;
margin-left: $spacing-16;
margin-left: var(--cpd-space-4x);
}
&:not(:focus-within) + #mx_SpotlightDialog_content {
@@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_content {
height: 100%;
overflow-y: auto;
padding: $spacing-16;
padding: var(--cpd-space-4x);
ul {
padding: 0;
@@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details.
}
> h4 {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_SpotlightDialog_sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
.mx_SpotlightDialog_options {
display: flex;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
}
& + .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 {
padding: $spacing-4;
padding: var(--cpd-space-1x);
color: $primary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
margin: 0 9px var(--cpd-space-1x); /* maintain centering */
}
& + .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_selectedBgColor: $system;
padding: 6px $spacing-4;
padding: 6px var(--cpd-space-1x);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@@ -249,20 +249,20 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start;
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4;
padding: var(--cpd-space-1x) var(--cpd-space-5x);
margin: 2px var(--cpd-space-1x);
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
width: 24px;
height: 24px;
flex-shrink: 0;
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
line-height: $font-24px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
@@ -294,7 +294,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
overflow: hidden;
text-overflow: ellipsis;
}
@@ -313,7 +313,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_NotificationBadge {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
.mx_SpotlightDialog_option--menu,
@@ -356,17 +356,17 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28;
padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
svg {
display: block;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
width: 16px;
height: 16px;
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_option {
padding-left: $spacing-32;
padding-left: var(--cpd-space-8x);
position: relative;
svg {
@@ -384,7 +384,7 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
height: 24px;
position: absolute;
left: $spacing-4;
left: var(--cpd-space-1x);
top: 50%;
transform: translateY(-50%);
}
@@ -397,8 +397,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_result_details {
margin-left: $spacing-8;
margin-right: $spacing-8;
margin-left: var(--cpd-space-2x);
margin-right: var(--cpd-space-2x);
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -415,7 +415,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4;
padding: 2px var(--cpd-space-1x);
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
@@ -424,7 +424,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin-right: $spacing-4;
margin-right: var(--cpd-space-1x);
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 {
color: $primary-content;
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;
/* !important override compound */
width: 485px !important;
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AuthBody_did-not-receive {
justify-content: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.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 */
.mx_Dialog_title {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
}