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/rooms/_EventTile.pcss
+25 -25
View File
@@ -97,7 +97,7 @@ $left-gutter: 64px;
display: flex;
flex-flow: wrap;
align-items: center;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_ReplyChain--expanded {
@@ -236,7 +236,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
}
@@ -315,7 +315,7 @@ $left-gutter: 64px;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
padding-right: var(--cpd-space-2x);
}
> .mx_DisambiguatedProfile_mxid {
@@ -440,7 +440,7 @@ $left-gutter: 64px;
&[data-layout="group"] {
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
left: var(--cpd-space-2x);
}
.mx_EventTile_line,
@@ -657,11 +657,11 @@ $left-gutter: 64px;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */
padding: $spacing-2 0;
padding: var(--cpd-space-0-5x) 0;
/* Avoid inline code blocks to be sticked when on multiple lines */
line-height: $font-22px;
/* Avoid the border to be glued to the other words */
margin-right: $spacing-2;
margin-right: var(--cpd-space-0-5x);
}
code {
@@ -860,15 +860,15 @@ $left-gutter: 64px;
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: $spacing-12;
padding-bottom: $spacing-12;
padding-top: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-3x);
}
/* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
right: $spacing-8;
top: var(--cpd-space-2x);
right: var(--cpd-space-2x);
visibility: hidden;
&.mx_EventTile_buttonBottom {
@@ -914,7 +914,7 @@ $left-gutter: 64px;
margin-right: 0;
span {
padding: $spacing-4 $spacing-8;
padding: var(--cpd-space-1x) var(--cpd-space-2x);
}
}
@@ -932,10 +932,10 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
--topOffset: var(--cpd-space-3x);
--leftOffset: 48px;
$borderRadius: 8px;
$padding: $spacing-8;
$padding: var(--cpd-space-2x);
$hrHeight: 1px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
@@ -1051,7 +1051,7 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"] {
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
display: flex;
align-items: center;
position: relative;
@@ -1069,13 +1069,13 @@ $left-gutter: 64px;
.mx_ThreadSummary_icon {
display: inline-block;
margin-top: $spacing-8;
margin-bottom: $spacing-8;
margin-top: var(--cpd-space-2x);
margin-bottom: var(--cpd-space-2x);
> svg {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
margin-top: -2px;
}
@@ -1163,7 +1163,7 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
padding-block-start: $spacing-16;
padding-block-start: var(--cpd-space-4x);
.mx_EventTile_line,
.mx_EventTile_footer {
@@ -1200,8 +1200,8 @@ $left-gutter: 64px;
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: $spacing-16; /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8;
gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
padding-inline-start: var(--cpd-space-2x);
a {
flex: 1;
@@ -1265,7 +1265,7 @@ $left-gutter: 64px;
/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout_group-padding-top: var(--cpd-space-1x);
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
@@ -1277,7 +1277,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
}
&.mx_EventTile_info {
@@ -1297,7 +1297,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_emote {
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
padding-top: var(--cpd-space-2x); /* add a bit more space for emotes so that avatars don't collide */
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1349,7 +1349,7 @@ $left-gutter: 64px;
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
}
}
}
@@ -1360,7 +1360,7 @@ $left-gutter: 64px;
width: stretch;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-left: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
apps/web/res/css/views/rooms/_ReplyPreview.pcss
+2 -2
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
border-bottom: 1px solid $primary-hairline-color;
display: flex;
flex-flow: column;
row-gap: $spacing-8;
padding: $spacing-8 $spacing-8 0 0;
row-gap: var(--cpd-space-2x);
padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
.mx_ReplyPreview_header {
display: flex;
apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_RoomPreviewCard {
padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
margin: auto;
flex-grow: 1;
max-width: 480px;
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-24px;
color: $primary-content;
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
svg {
height: 1em;
width: 1em;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
color: $secondary-content;
vertical-align: -2px;
}
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomPreviewCard_inviter {
display: flex;
align-items: center;
margin-bottom: $spacing-20;
margin-bottom: var(--cpd-space-5x);
font-size: $font-15px;
> div {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
.mx_RoomPreviewCard_inviter_name {
line-height: $font-18px;
@@ -75,18 +75,18 @@ Please see LICENSE files in the repository root for full details.
/* XXX Remove this when video rooms leave beta */
.mx_BetaCard_betaPill {
position: absolute;
inset-block-start: $spacing-32;
inset-inline-end: $spacing-24;
inset-block-start: var(--cpd-space-8x);
inset-inline-end: var(--cpd-space-6x);
}
}
h1.mx_RoomPreviewCard_name {
margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
}
.mx_RoomPreviewCard_topic {
line-height: $font-22px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
max-height: 160px;
overflow-y: auto;
}
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FacePile {
display: flex;
align-items: center;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomPreviewCard_joinButtons {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
display: flex;
gap: $spacing-20;
gap: var(--cpd-space-5x);
.mx_AccessibleButton {
max-width: 200px;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
ol {
margin-top: 0;
margin-bottom: 0;
padding-inline-start: $spacing-28;
padding-inline-start: var(--cpd-space-7x);
}
/* Make list type disc to match rich text editor */
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
margin-top: 0;
margin-bottom: 0;
padding: $spacing-8 $spacing-12;
padding: var(--cpd-space-2x) var(--cpd-space-3x);
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
@@ -90,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
padding: $spacing-2;
padding: var(--cpd-space-0-5x);
&:empty {
border: unset;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+2 -2
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LinkModal {
padding: $spacing-32;
padding: var(--cpd-space-8x);
max-width: 600px;
height: 341px;
box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
flex: 1;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-top: 7px;
.mx_LinkModal_Field {