Replace Sass variables with CSS custom properties - _spacing.pcss

res/css/_common.pcss

@@ -43,8 +43,8 @@ $timeline-image-border-radius: 8px;
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
     --MessageTimestamp-width: $MessageTimestamp_width;
-    --buttons-dialog-gap-row: $spacing-8;
-    --buttons-dialog-gap-column: $spacing-8;
+    --buttons-dialog-gap-row: var(--spacing-8);
+    --buttons-dialog-gap-column: var(--spacing-8);
 }
 
 @media only percy {
@@ -509,7 +509,7 @@ legend {
 }
 
 .mx_Dialog_buttons {
-    margin-top: $spacing-20;
+    margin-top: var(--spacing-20);
     margin-inline-start: auto;
     text-align: right;
 
@@ -807,7 +807,7 @@ legend {
     font-weight: $font-semi-bold;
     white-space: nowrap;
     position: relative;
-    padding: 0 $spacing-12 0 $spacing-8;
+    padding: 0 var(--spacing-12) 0 var(--spacing-8);
 }
 
 @define-mixin ThreadSummaryIcon {

res/css/_spacing.pcss

@@ -16,15 +16,17 @@ limitations under the License.
 
 /* 1rem :: 10px */
 
-$spacing-2: 2px;
-$spacing-4: 4px;
-$spacing-8: 8px;
-$spacing-12: 12px;
-$spacing-16: 16px;
-$spacing-20: 20px;
-$spacing-24: 24px;
-$spacing-28: 28px;
-$spacing-32: 32px;
-$spacing-40: 40px;
-$spacing-48: 48px;
-$spacing-64: 64px;
+:root {
+    --spacing-2: 2px;
+    --spacing-4: 4px;
+    --spacing-8: 8px;
+    --spacing-12: 12px;
+    --spacing-16: 16px;
+    --spacing-20: 20px;
+    --spacing-24: 24px;
+    --spacing-28: 28px;
+    --spacing-32: 32px;
+    --spacing-40: 40px;
+    --spacing-48: 48px;
+    --spacing-64: 64px;
+}

res/css/components/views/beacon/_BeaconListItem.pcss

@@ -19,7 +19,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: $spacing-12 0;
+    padding: var(--spacing-12) 0;
 
     border-bottom: 1px solid $system;
 
@@ -36,7 +36,7 @@ limitations under the License.
     flex: 0 0;
     box-sizing: border-box;
 
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     border: 2px solid $location-live-color;
     border-radius: 50%;
 }
@@ -52,7 +52,7 @@ limitations under the License.
 .mx_BeaconListItem_status {
     /* override beacon status padding */
     padding: 0 !important;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--spacing-8);
 
     .mx_BeaconStatus_label {
         font-weight: $font-semi-bold;

res/css/components/views/beacon/_BeaconStatus.pcss

@@ -21,7 +21,7 @@ limitations under the License.
     justify-content: flex-start;
 
     box-sizing: border-box;
-    padding: $spacing-8;
+    padding: var(--spacing-8);
 
     color: var(--color);
     font-size: $font-12px;
@@ -42,7 +42,7 @@ limitations under the License.
     width: 32px;
 
     flex: 0 0 32px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_BeaconStatus_description {
@@ -51,7 +51,7 @@ limitations under the License.
     flex-direction: column;
     line-height: $font-14px;
 
-    padding-right: $spacing-8;
+    padding-right: var(--spacing-8);
 
     white-space: nowrap;
     overflow: hidden;

res/css/components/views/beacon/_BeaconStatusTooltip.pcss

@@ -20,7 +20,7 @@ limitations under the License.
     max-width: 150px;
     height: 38px;
     box-sizing: content-box;
-    padding-top: $spacing-8;
+    padding-top: var(--spacing-8);
 }
 
 .mx_BeaconStatusTooltip_inner {

res/css/components/views/beacon/_BeaconViewDialog.pcss

@@ -61,11 +61,11 @@ limitations under the License.
 
 .mx_BeaconViewDialog_mapFallbackMessage {
     color: $secondary-content;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
 }
 
 .mx_BeaconViewDialog_viewListButton {
     position: absolute;
-    top: $spacing-24;
-    left: $spacing-24;
+    top: var(--spacing-24);
+    left: var(--spacing-24);
 }

res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_DialogOwnBeaconStatus {
     position: absolute;
-    bottom: $spacing-32;
+    bottom: var(--spacing-32);
     width: 300px;
     margin-left: -150px;
     left: 50%;
@@ -31,14 +31,14 @@ limitations under the License.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
 
-    padding: 0 $spacing-12;
+    padding: 0 var(--spacing-12);
 }
 
 .mx_DialogOwnBeaconStatus_avatarIcon {
     flex: 0 0;
     height: 32px;
     width: 32px;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--spacing-8) 0 var(--spacing-8) 0;
 }
 
 .mx_DialogOwnBeaconStatus_avatar {
@@ -47,7 +47,7 @@ limitations under the License.
 
     border: 2px solid $location-live-color;
     border-radius: 50%;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--spacing-8) 0 var(--spacing-8) 0;
 }
 
 .mx_DialogOwnBeaconStatus_status {

res/css/components/views/beacon/_DialogSidebar.pcss

@@ -25,7 +25,7 @@ limitations under the License.
     flex-direction: column;
 
     box-sizing: border-box;
-    padding: $spacing-16;
+    padding: var(--spacing-16);
 
     background-color: $background;
     box-shadow: 0px 4px 4px $menu-box-shadow-color;
@@ -36,7 +36,7 @@ limitations under the License.
         justify-content: space-between;
 
         flex: 0 0;
-        margin-bottom: $spacing-16;
+        margin-bottom: var(--spacing-16);
 
         color: $primary-content;
 

res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss

@@ -18,7 +18,7 @@ limitations under the License.
     width: 100%;
     box-sizing: border-box;
 
-    padding: $spacing-4;
+    padding: var(--spacing-4);
     text-align: center;
 
     background-color: $accent;

res/css/components/views/beacon/_OwnBeaconStatus.pcss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_OwnBeaconStatus_button {
-    margin-left: $spacing-8;
+    margin-left: var(--spacing-8);
 }
 
 .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {

res/css/components/views/beacon/_RoomLiveShareWarning.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     align-items: center;
 
     box-sizing: border-box;
-    padding: $spacing-12 $spacing-16;
+    padding: var(--spacing-12) var(--spacing-16);
 
     color: $primary-content;
     background-color: $system;
@@ -32,7 +32,7 @@ limitations under the License.
 .mx_RoomLiveShareWarning_icon {
     height: 32px;
     width: 32px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_RoomLiveShareWarning_label {
@@ -41,19 +41,19 @@ limitations under the License.
 }
 
 .mx_RoomLiveShareWarning_spinner {
-    margin-right: $spacing-16;
+    margin-right: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_closeButton {
     @mixin ButtonResetDefault;
-    margin-left: $spacing-16;
+    margin-left: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_stopButton {
-    margin-left: $spacing-16;
+    margin-left: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_closeButtonIcon {
     height: $font-18px;
-    padding: $spacing-4;
+    padding: var(--spacing-4);
 }

res/css/components/views/beacon/_ShareLatestLocation.pcss

@@ -25,7 +25,7 @@ limitations under the License.
     /* override copyable text style to make compact */
     .mx_CopyableText_copyButton {
         height: 13px;
-        margin-left: $spacing-8 !important;
+        margin-left: var(--spacing-8) !important;
         position: relative;
         top: -1px;
         width: 13px;

res/css/components/views/dialogs/polls/_PollDetailHeader.pcss

@@ -22,6 +22,6 @@ limitations under the License.
 .mx_PollDetailHeader_icon {
     height: 15px;
     width: 15px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     vertical-align: middle;
 }

res/css/components/views/dialogs/polls/_PollListItem.pcss

@@ -23,7 +23,7 @@ limitations under the License.
     display: grid;
     justify-content: left;
     align-items: center;
-    grid-gap: $spacing-8;
+    grid-gap: var(--spacing-8);
     grid-template-columns: auto auto auto;
     grid-template-rows: auto;
     cursor: pointer;
@@ -35,7 +35,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--spacing-8);
 }
 
 .mx_PollListItem_question {

res/css/components/views/dialogs/polls/_PollListItemEnded.pcss

@@ -30,7 +30,7 @@ limitations under the License.
     display: grid;
     justify-content: left;
     align-items: center;
-    grid-gap: $spacing-8;
+    grid-gap: var(--spacing-8);
     grid-template-columns: min-content 1fr min-content;
     grid-template-rows: auto;
 }
@@ -39,7 +39,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--spacing-8);
 }
 
 .mx_PollListItemEnded_date {
@@ -55,11 +55,11 @@ limitations under the License.
 
 .mx_PollListItemEnded_answers {
     display: grid;
-    grid-gap: $spacing-8;
-    margin-top: $spacing-12;
+    grid-gap: var(--spacing-8);
+    margin-top: var(--spacing-12);
 }
 
 .mx_PollListItemEnded_voteCount {
     // 6px to match PollOption padding
-    margin: $spacing-8 0 0 6px;
+    margin: var(--spacing-8) 0 0 6px;
 }

res/css/components/views/elements/_FilterDropdown.pcss

@@ -16,11 +16,11 @@ limitations under the License.
 
 .mx_FilterDropdown {
     .mx_Dropdown_menu {
-        margin-top: $spacing-4;
+        margin-top: var(--spacing-4);
         left: unset;
-        right: -$spacing-12;
+        right: calc(-1 * var(--spacing-12));
         width: 232px;
-        padding: $spacing-12;
+        padding: var(--spacing-12);
 
         border: 1px solid $quinary-content;
         border-radius: 8px;
@@ -56,7 +56,7 @@ limitations under the License.
     position: relative;
     width: 100%;
     box-sizing: border-box;
-    padding: $spacing-8 0 $spacing-8 $spacing-20;
+    padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-20);
 
     font-size: $font-12px;
     line-height: $font-15px;
@@ -67,7 +67,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     position: absolute;
-    top: $spacing-8;
+    top: var(--spacing-8);
     left: 0;
 }
 
@@ -78,5 +78,5 @@ limitations under the License.
 
 .mx_FilterDropdown_optionDescription {
     color: $secondary-content;
-    margin-top: $spacing-4;
+    margin-top: var(--spacing-4);
 }

res/css/components/views/elements/_FilterTabGroup.pcss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_FilterTabGroup {
     color: $primary-content;
     label {
-        margin-right: $spacing-12;
+        margin-right: var(--spacing-12);
         cursor: pointer;
         span {
             display: inline-block;

res/css/components/views/elements/_LearnMore.pcss

@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 .mx_LearnMore_button {
-    margin-left: $spacing-4;
+    margin-left: var(--spacing-4);
 }