fix: incorrect variable expansion (#351)

Author: ToxicAven

src/components/_chat.scss

@@ -2,20 +2,21 @@
   // new message ruler
   #---new-messages-bar {
     span[class^="unreadPill"] {
-      color: $crust;
+      color: #{$crust};
     }
   }
 
   // new message bar
   div[class^="newMessagesBar"] {
     button {
-      color: $crust;
+      color: #{$crust};
     }
   }
 
   // reply bar
-  [class^="attachedBars_"], [class^="stackedBars_"] {
-    --background-secondary: $crust;
+  [class^="attachedBars_"],
+  [class^="stackedBars_"] {
+    --background-secondary: #{$crust};
   }
 
   // text input area
@@ -40,7 +41,9 @@
   }
   // Super reactions and beta badge
   div[class*="isBurstReactionPicker_"] {
-    box-shadow: 0 0 0 2px $mauve, 0 0 16px $lavender;
+    box-shadow:
+      0 0 0 2px $mauve,
+      0 0 16px $lavender;
   }
   div[class^="navButtonSuperReactActive"],
   div[class^="navButtonSuperReactActive"]:hover {
@@ -61,7 +64,9 @@
   }
   div[class*="isBurstReactionPicker"] {
     border: none;
-    box-shadow: 0 0 0 2px $mauve, 0 0 16px $lavender;
+    box-shadow:
+      0 0 0 2px $mauve,
+      0 0 16px $lavender;
   }
   // Voice messages play button
   div[class*="playButtonContainer_"] {
@@ -551,13 +556,13 @@ div[class*="giftCodeContainer"] [class*="tile"] {
 div[class*="chat_"] {
   div[class*="content_"][class*="container_"] {
     // customise
-    --background-primary: $surface0;
-    --background-secondary: $base;  // dropdown menu
-    --background-secondary-alt: $mantle;  // roles
-    --background-tertiary: $mantle;
-    --input-background: $mantle;
-    --white-500: $crust;  // check icon
-    
+    --background-primary: #{$surface0};
+    --background-secondary: #{$base}; // dropdown menu
+    --background-secondary-alt: #{$mantle}; // roles
+    --background-tertiary: #{$mantle};
+    --input-background: #{$mantle};
+    --white-500: #{$crust}; // check icon
+
     // channels
     div[class*="search_"] input::placeholder {
       color: $overlay1;

src/components/_popouts.scss

@@ -2,8 +2,8 @@ div[class^="layerContainer"] [role="menu"] {
   // make menu items readable when hovered
   --brand-experiment-560: var(--brand-experiment-25a);
   --brand-experiment-600: var(--brand-experiment);
-  --white: $crust;
-  --white-500: $crust;
+  --white: #{$crust};
+  --white-500: #{$crust};
 
   // make active items have dark text
   [class*="colorDefault"]:active:not([class*="hideInteraction_"]) {
@@ -232,9 +232,11 @@ section[class*="positionContainer_"] {
   }
 
   > div[class^="focusLock"] > div[class^="root"] {
-    box-shadow: 0 0 0 1px $surface0,
+    box-shadow:
+      0 0 0 1px $surface0,
       0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
-    -webkit-box-shadow: 0 0 0 1px $surface0,
+    -webkit-box-shadow:
+      0 0 0 1px $surface0,
       0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
   }
 
@@ -584,7 +586,7 @@ div[class*="userProfileOuter_"] {
     background: $brand;
   }
   div[class^="inner_"] {
-    --input-background: $mantle;
+    --input-background: #{$mantle};
   }
 }