Remove TODO comments about spacing variables (matrix-org#10695)

luixxiul · web-flow · commit d340fa8d2a43 · 2023-06-06T14:03:52.000Z
The variables on _spacing.pcss have been deprecated by matrix-org#10686
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 :root {
-    --RoomView_MessageList-padding: 18px; /* TODO: use a variable */
+    --RoomView_MessageList-padding: 18px;
 }
 
 .mx_RoomView_wrapper {
@@ -212,7 +212,7 @@ limitations under the License.
         margin-bottom: 4px;
 
         h2 {
-            margin-top: 6px; /* TODO: Use a spacing variable */
+            margin-top: 6px;
         }
     }
 
diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss
@@ -35,7 +35,7 @@ limitations under the License.
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
-                margin: $spacing-4 0 14px; // TODO: use a spacing variable
+                margin: $spacing-4 0 14px;
 
                 display: flex;
                 align-items: center;
@@ -117,7 +117,7 @@ limitations under the License.
 
 .mx_BetaCard_betaPill {
     background-color: $accent-alt;
-    padding: $spacing-4 10px; // TODO: use a spacing variable
+    padding: $spacing-4 10px;
     border-radius: 8px;
     text-transform: uppercase;
     font-size: $font-12px;
diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
@@ -28,7 +28,7 @@ limitations under the License.
     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; /* TODO: Use a spacing variable */
+    margin: $spacing-8 45px 0 0;
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -43,14 +43,14 @@ limitations under the License.
         flex-wrap: wrap;
 
         .mx_InviteDialog_userTile {
-            margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
+            margin: 6px 6px 0 0;
             display: inline-block;
             min-width: max-content; /* prevent manipulation by flexbox */
         }
 
         /* overrides bunch of our default text input styles */
         > input[type="text"] {
-            margin: 6px 0 !important; /* TODO: Use a spacing variable */
+            margin: 6px 0 !important;
             height: 24px;
             line-height: $font-24px;
             font-size: $font-14px;
@@ -67,7 +67,7 @@ limitations under the License.
 
     .mx_InviteDialog_goButton {
         min-width: 48px;
-        margin-inline-start: 10px; /* TODO: Use a spacing variable */
+        margin-inline-start: 10px;
         height: 25px;
         line-height: $font-25px;
     }
@@ -77,7 +77,7 @@ limitations under the License.
             /* Width and height are required to trick the layout engine. */
             width: 20px;
             height: 20px;
-            margin-inline-start: 5px; /* TODO: Use a spacing variable */
+            margin-inline-start: 5px;
             display: inline-block;
             vertical-align: middle;
         }
@@ -103,7 +103,7 @@ limitations under the License.
     }
 
     .mx_InviteDialog_section_showMore {
-        margin: 7px 18px; /* TODO: Use a spacing variable */
+        margin: 7px 18px;
         display: block;
     }
 }
@@ -252,7 +252,7 @@ limitations under the License.
 .mx_InviteDialog_userSections {
     margin-top: $spacing-4;
     overflow-y: auto;
-    padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
+    padding: 0 45px $spacing-4 0;
 }
 
 .mx_InviteDialog_helpText {
@@ -289,7 +289,7 @@ limitations under the License.
 
     .mx_DialPad {
         row-gap: $spacing-16;
-        column-gap: 48px; /* TODO: Use a spacing variable */
+        column-gap: 48px;
         margin-inline: auto;
     }
 }
@@ -450,7 +450,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_identityServer {
-    margin-top: 1em; /* TODO: Use a spacing variable */
+    margin-top: 1em;
 }
 
 .mx_InviteDialog_oneThreepid {
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -36,7 +36,7 @@ limitations under the License.
 
         kbd {
             display: inline-block;
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            padding: 2px $spacing-4;
             margin: 0 $spacing-4;
             border-radius: 6px;
             background-color: $quinary-content;
@@ -76,7 +76,7 @@ limitations under the License.
             vertical-align: middle;
             color: $primary-content;
             position: relative;
-            padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
+            padding: $spacing-4 $spacing-8 $spacing-4 37px;
 
             &::before {
                 background-color: $secondary-content;
@@ -234,7 +234,7 @@ limitations under the License.
         .mx_SpotlightDialog_otherSearches,
         .mx_SpotlightDialog_hiddenResults {
             .mx_SpotlightDialog_option {
-                padding: 6px $spacing-4; /* TODO: Use a spacing variable */
+                padding: 6px $spacing-4;
                 border-radius: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
@@ -258,11 +258,11 @@ limitations under the License.
 
                     .mx_AccessibleButton {
                         padding: $spacing-4 $spacing-20;
-                        margin: 2px $spacing-4; /* TODO: Use a spacing variable */
+                        margin: 2px $spacing-4;
                     }
 
                     .mx_SpotlightDialog_enterPrompt {
-                        margin-top: 9px; /* TODO: Use a spacing variable */
+                        margin-top: 9px;
                         margin-right: $spacing-8;
                     }
                 }
@@ -379,7 +379,7 @@ limitations under the License.
             .mx_AccessibleButton {
                 position: relative;
                 margin: 0;
-                padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
+                padding: 3px $spacing-8 3px $spacing-28;
 
                 &::before {
                     content: "";
@@ -480,7 +480,7 @@ limitations under the License.
         }
 
         .mx_SpotlightDialog_enterPrompt {
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            padding: 2px $spacing-4;
             /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;
diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -23,7 +23,7 @@ limitations under the License.
             height: 24px;
             margin-inline-end: $spacing-8;
             position: relative;
-            top: 5px; /* TODO: spacing variable */
+            top: 5px;
             background-color: $primary-content;
         }
 
@@ -81,7 +81,7 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
-                margin-inline-end: 5px; /* TODO: spacing variable */
+                margin-inline-end: 5px;
             }
 
             &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@@ -109,7 +109,7 @@ limitations under the License.
             text-align: initial;
             display: flex;
             flex-flow: column;
-            gap: 14px; /* TODO: spacing variable */
+            gap: 14px;
 
             .mx_Dialog_buttons_additive {
                 float: none;
diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss
@@ -23,7 +23,7 @@ limitations under the License.
 
     .mx_GenericEventListSummary_spacer {
         border-bottom: 1px solid $primary-hairline-color;
-        margin-left: 63px; /* TODO: Use a variable */
+        margin-left: 63px;
         line-height: $font-30px; /* TODO: Use a variable */
 
         .mx_IRCLayout & {
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_ReplyChain {
     margin: 0; // Reset default blockquote margin
-    padding-left: 10px; // TODO: Use a spacing variable
-    border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
-    border-radius: 2px; // TODO: Use a spacing variable
+    padding-left: 10px;
+    border-left: 2px solid var(--username-color);
+    border-radius: 2px;
 
     .mx_ReplyChain_show {
         &.mx_AccessibleButton_kind_link_inline {
diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss
@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 .mx_EventTileBubble {
-    --EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */
+    --EventTileBubble_margin-block: 10px;
 
     background-color: $dark-panel-bg-color;
-    padding: 10px; /* TODO: Use a spacing variable */
+    padding: 10px;
     border-radius: 8px;
     /* Reserve space for external timestamps, but also cap the width */
     max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);
diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss
@@ -29,7 +29,7 @@ limitations under the License.
 
     pre {
         line-height: 1.2;
-        margin: 3.5px 0; /* TODO: use a variable */
+        margin: 3.5px 0;
     }
 
     .mx_ViewSourceEvent_toggle {
@@ -56,7 +56,7 @@ limitations under the License.
         align-self: flex-end;
         height: var(--ViewSourceEvent_toggle-size);
         mask-position: 0 bottom;
-        margin-bottom: 5px; /* TODO: use a variable */
+        margin-bottom: 5px;
         mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }
diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BaseCard {
     --BaseCard_padding-inline: $spacing-8;
     --BaseCard_EventTile_line-padding-block: 2px;
-    --BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */
+    --BaseCard_EventTile-spacing-inline: 36px;
     --BaseCard_header-button-size: 24px;
 
     padding: 0 var(--BaseCard_padding-inline);
@@ -32,7 +32,7 @@ limitations under the License.
         margin: $spacing-4 0 $spacing-12;
 
         > h2 {
-            margin: 0 44px; /* TODO: Use a spacing variable */
+            margin: 0 44px;
             font-size: $font-18px;
             font-weight: var(--font-semi-bold);
             overflow: hidden;
@@ -79,7 +79,7 @@ limitations under the License.
                 margin-inline-start: var(--BaseCard_header-button-size);
 
                 .mx_BaseCard_header_title_heading {
-                    margin-inline-start: 6px; /* TODO: Use a spacing variable */
+                    margin-inline-start: 6px;
                 }
             }
         }
@@ -159,7 +159,7 @@ limitations under the License.
         }
 
         .mx_BaseCard_Button {
-            padding: 10px; /* TODO: Use a spacing variable */
+            padding: 10px;
             padding-inline-start: $spacing-12;
             margin: 0;
             position: relative;
@@ -234,16 +234,16 @@ limitations under the License.
 
         font-size: $font-12px;
         color: $secondary-content;
-        padding-top: 10px; /* TODO: Use a spacing variable */
-        padding-bottom: 10px; /* TODO: Use a spacing variable */
+        padding-top: 10px;
+        padding-bottom: 10px;
 
         border: 1px solid $quinary-content;
         box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
     }
 
     .mx_ContextualMenu_chevron_top {
         left: auto;
-        right: 22px; /* TODO: Use a spacing variable */
+        right: 22px;
         border-bottom-color: $quinary-content;
 
         &::after {
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -26,7 +26,7 @@ limitations under the License.
             }
 
             .mx_ThreadPanel_dropdown {
-                padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */
+                padding: 3px $spacing-4 3px $spacing-8;
                 border-radius: 4px;
                 line-height: 1.5;
                 user-select: none;
diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
@@ -27,7 +27,7 @@ limitations under the License.
         top: 0;
         border-radius: 4px;
         background-color: $dark-panel-bg-color;
-        margin: 9px; /* TODO: Use a variable */
+        margin: 9px;
         z-index: 1; /* render on top of the right panel */
 
         div {
@@ -44,7 +44,7 @@ limitations under the License.
     h2 {
         font-size: $font-18px;
         font-weight: var(--font-semi-bold);
-        margin: 18px 0 0 0; /* TODO: Use a variable */
+        margin: 18px 0 0 0;
     }
 
     .mx_UserInfo_container {
@@ -151,7 +151,7 @@ limitations under the License.
     }
 
     p {
-        margin: 5px 0; /* TODO: Use a variable */
+        margin: 5px 0;
     }
 
     .mx_UserInfo_profile {
@@ -179,7 +179,7 @@ limitations under the License.
             }
 
             .mx_E2EIcon {
-                margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */
+                margin-top: 3px; /* visual vertical centering to the top line of text. */
                 margin-inline-end: $spacing-4; /* margin from displayName */
                 min-width: 18px; /* convince flexbox to not collapse it */
             }
@@ -196,7 +196,7 @@ limitations under the License.
             justify-content: center;
             align-items: center;
 
-            margin: 6px 0; /* TODO: Use a variable */
+            margin: 6px 0;
 
             .mx_UserInfo_roleDescription {
                 display: flex;
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 $left-gutter: 64px;
 
 .mx_EventTile {
-    --EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */
+    --EventTile_content-margin-inline-end: 34px;
     --EventTile_group_line-spacing-block-start: 1px;
     --EventTile_group_line-spacing-block-end: 3px;
     --EventTile_group_line-spacing-inline-start: $left-gutter;
@@ -347,7 +347,7 @@ $left-gutter: 64px;
             > .mx_DisambiguatedProfile_mxid {
                 visibility: collapse;
                 margin-left: 0; /* Override the inherited margin. */
-                padding: 0 5px; /* TODO: Use a spacing variable */
+                padding: 0 5px;
             }
 
             &:hover {
@@ -537,7 +537,7 @@ $left-gutter: 64px;
         }
 
         .mx_RoomView_timeline_rr_enabled & {
-            $inline-end-margin: 80px; /* TODO: Use a spacing variable */
+            $inline-end-margin: 80px;
 
             .mx_ThreadSummary,
             .mx_ThreadSummary_icon,
diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss
diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ limitations under the License.`
`15`	`15`	`*/`
`16`	`16`
`17`	`17`	`:root {`
`18`		`- --RoomView_MessageList-padding: 18px; /* TODO: use a variable */`
	`18`	`+ --RoomView_MessageList-padding: 18px;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.mx_RoomView_wrapper {`
`@@ -212,7 +212,7 @@ limitations under the License.`
`212`	`212`	`margin-bottom: 4px;`
`213`	`213`
`214`	`214`	`h2 {`
`215`		`- margin-top: 6px; /* TODO: Use a spacing variable */`
	`215`	`+ margin-top: 6px;`
`216`	`216`	`}`
`217`	`217`	`}`
`218`	`218`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ limitations under the License.`
`29`	`29`
`30`	`30`	`pre {`
`31`	`31`	`line-height: 1.2;`
`32`		`- margin: 3.5px 0; /* TODO: use a variable */`
	`32`	`+ margin: 3.5px 0;`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.mx_ViewSourceEvent_toggle {`
`@@ -56,7 +56,7 @@ limitations under the License.`
`56`	`56`	`align-self: flex-end;`
`57`	`57`	`height: var(--ViewSourceEvent_toggle-size);`
`58`	`58`	`mask-position: 0 bottom;`
`59`		`- margin-bottom: 5px; /* TODO: use a variable */`
	`59`	`+ margin-bottom: 5px;`
`60`	`60`	`mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");`
`61`	`61`	`}`
`62`	`62`	`}`