Replace Sass variables specific to each CSS file with CSS custom properties (matrix-org#11039)

* Use CSS custom properties on _LeftPanel.pcss

* Use CSS custom properties on _SpacePanel.pcss

* Use CSS custom properties on _SpaceRoomView.pcss

* Use CSS custom properties on _ImageView.pcss

* Use CSS custom properties on _EventTile.pcss

* Remove a CSS custom properties on _SpaceCreateMenu.pcss

Used only on one instance

* Revert "Use CSS custom properties on _ImageView.pcss"

This reverts commit 0210659.

* Revert "Use CSS custom properties on _EventTile.pcss"

This reverts commit 83cf824.

* Run prettier

Author: luixxiul

res/css/structures/_LeftPanel.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$roomListCollapsedWidth: 68px;
-
 .mx_MatrixChat--with-avatar {
     .mx_LeftPanel,
     .mx_LeftPanel .mx_LeftPanel_roomListContainer {
@@ -33,6 +31,11 @@ $roomListCollapsedWidth: 68px;
     contain: layout paint;
 }
 
+.mx_LeftPanel_wrapper,
+.mx_LeftPanel {
+    --collapsedWidth: 68px;
+}
+
 .mx_LeftPanel_wrapper {
     display: flex;
     flex-direction: row;
@@ -46,7 +49,7 @@ $roomListCollapsedWidth: 68px;
         position: relative;
 
         &[data-collapsed] {
-            max-width: $roomListCollapsedWidth;
+            max-width: var(--collapsedWidth);
         }
     }
 }
@@ -218,7 +221,7 @@ $roomListCollapsedWidth: 68px;
         width: unset !important;
 
         .mx_LeftPanel_roomListContainer {
-            width: $roomListCollapsedWidth;
+            width: var(--collapsedWidth);
 
             .mx_LeftPanel_userHeader {
                 flex-direction: row;

res/css/structures/_SpacePanel.pcss

@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$topLevelHeight: 32px;
-$nestedHeight: 24px;
-$gutterSize: 16px;
-$activeBorderTransparentGap: 1px;
-
-$activeBackgroundColor: $panel-actions;
-$activeBorderColor: $primary-content;
-
 .mx_SpacePanel {
+    --activeBackground-color: $panel-actions;
+    --activeBorder-color: $primary-content;
+    --activeBorder-transparent-gap: 1px;
+    --gutterSize: 16px;
+    --height-nested: 24px;
+    --height-topLevel: 32px;
+
     background-color: $spacePanel-bg-color;
     flex: 0 0 auto;
     padding: 0;
@@ -116,7 +115,7 @@ $activeBorderColor: $primary-content;
     }
 
     .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
-        margin-left: $gutterSize;
+        margin-left: var(--gutterSize);
         min-width: 40px;
     }
 
@@ -130,12 +129,12 @@ $activeBorderColor: $primary-content;
 
         &.mx_SpaceButton_active {
             &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
-                background-color: $activeBackgroundColor;
+                background-color: var(--activeBackground-color);
             }
 
             &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
-                padding: $activeBorderTransparentGap;
-                border: 3px $activeBorderColor solid;
+                padding: var(--activeBorder-transparent-gap);
+                border: 3px var(--activeBorder-color) solid;
             }
         }
 
@@ -162,9 +161,9 @@ $activeBorderColor: $primary-content;
         }
 
         .mx_SpaceButton_toggleCollapse {
-            width: $gutterSize;
+            width: var(--gutterSize);
             padding: 10px 0;
-            min-width: $gutterSize;
+            min-width: var(--gutterSize);
             height: 20px;
             mask-position: center;
             mask-size: 20px;
@@ -174,17 +173,17 @@ $activeBorderColor: $primary-content;
         }
 
         .mx_SpaceButton_icon {
-            width: $topLevelHeight;
-            min-width: $topLevelHeight;
-            height: $topLevelHeight;
+            width: var(--height-topLevel);
+            min-width: var(--height-topLevel);
+            height: var(--height-topLevel);
             border-radius: 8px;
             position: relative;
 
             &::before {
                 position: absolute;
                 content: "";
-                width: $topLevelHeight;
-                height: $topLevelHeight;
+                width: var(--height-topLevel);
+                height: var(--height-topLevel);
                 top: 0;
                 left: 0;
                 mask-position: center;
@@ -344,10 +343,10 @@ $activeBorderColor: $primary-content;
         padding: 0 8px 16px 0;
 
         & > .mx_SpaceButton {
-            height: $topLevelHeight;
+            height: var(--height-topLevel);
 
             &.mx_SpaceButton_active::before {
-                height: $topLevelHeight;
+                height: var(--height-topLevel);
             }
         }
 

res/css/structures/_SpaceRoomView.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$SpaceRoomViewInnerWidth: 428px;
-
 @define-mixin SpacePillButton {
     position: relative;
     padding: 16px 32px 16px 72px;
@@ -61,6 +59,8 @@ $SpaceRoomViewInnerWidth: 428px;
 }
 
 .mx_SpaceRoomView {
+    --innerWidth: 428px;
+
     overflow-y: auto;
     flex: 1;
 
@@ -83,11 +83,11 @@ $SpaceRoomViewInnerWidth: 428px;
             color: $secondary-content;
             margin-top: 12px;
             margin-bottom: 24px;
-            max-width: $SpaceRoomViewInnerWidth;
+            max-width: var(--innerWidth);
         }
 
         .mx_AddExistingToSpace {
-            max-width: $SpaceRoomViewInnerWidth;
+            max-width: var(--innerWidth);
 
             .mx_AddExistingToSpace_content {
                 height: calc(100vh - 360px);
@@ -98,7 +98,7 @@ $SpaceRoomViewInnerWidth: 428px;
         .mx_SpaceRoomView_buttons {
             display: block;
             margin-top: 44px;
-            width: $SpaceRoomViewInnerWidth;
+            width: var(--innerWidth);
             text-align: right; /* button alignment right */
 
             .mx_AccessibleButton_hasKind {
@@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         .mx_Field {
-            max-width: $SpaceRoomViewInnerWidth;
+            max-width: var(--innerWidth);
 
             & + .mx_Field {
                 margin-top: 28px;

res/css/views/spaces/_SpaceCreateMenu.pcss

@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$spacePanelWidth: 68px;
-
 .mx_SpaceCreateMenu_wrapper {
     /* background blur everything except SpacePanel */
     .mx_ContextualMenu_background {
         background-color: $dialog-backdrop-color;
         opacity: 0.6;
-        left: $spacePanelWidth;
+        left: 68px;
     }
 
     .mx_ContextualMenu {