From c14a1b282efc1be6d5948131364ee37eefeb3454 Mon Sep 17 00:00:00 2001
From: Jade Herd <toxicaven@disroot.org>
Date: Wed, 25 Oct 2023 12:43:27 -0400
Subject: [PATCH] Fix: Most of the major stuff discord broke (#234)

---
 src/components/_buttons.scss          |  56 ++++-----
 src/components/_chat.scss             | 162 +++++++++++++-------------
 src/components/_details.scss          |  89 +++++++-------
 src/components/_icons-bgImg.scss      |   2 +-
 src/components/_icons-imgContent.scss |   2 +-
 src/components/_icons-svgBg.scss      |   2 +-
 src/components/_icons-svgColor.scss   |   5 +-
 src/components/_navbar.scss           |   8 +-
 src/components/_pages.scss            |  90 +++++++-------
 src/components/_popouts.scss          | 144 ++++++++++++-----------
 src/components/_sidebar.scss          |  10 +-
 src/components/_variables.scss        |   4 +-
 12 files changed, 292 insertions(+), 282 deletions(-)

diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index 254d544..aeb8bb0 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -1,11 +1,11 @@
 // filled buttons and badges should have crust text
-[class*="lookFilled-"] {
-  &[class*="colorBrand-"],
-  &[class*="colorBrandNew-"],
-  &[class*="colorLink-"],
-  &[class*="colorYellow-"],
-  &[class*="colorRed-"],
-  &[class*="colorGreen-"] {
+[class*="lookFilled_"] {
+  &[class*="colorBrand_"],
+  &[class*="colorBrandNew_"],
+  &[class*="colorLink_"],
+  &[class*="colorYellow_"],
+  &[class*="colorRed_"],
+  &[class*="colorGreen_"] {
     color: $crust;
 
     // darken the nitro button too
@@ -14,27 +14,27 @@
     }
 
     // spinner color
-    [class*="spinnerItem-"] {
+    [class*="spinnerItem_"] {
       background-color: $crust;
     }
 
-    [class*="defaultColor-"] {
+    [class*="defaultColor_"] {
       color: $crust;
     }
   }
 
   // ...unless it's primary
-  &[class*="colorPrimary-"] {
+  &[class*="colorPrimary_"] {
     color: $text;
   }
 }
 
 // For some reason, red buttons on click turn blue. Sure.
-button[class*="lookFilled-"][class*="colorRed-"]:active {
+button[class*="lookFilled-"][class*="colorRed_"]:active {
   background-color: $red;
 }
 
-[class*="lookOutlined-"][class*="colorPrimary-"] {
+[class*="lookOutlined-"][class*="colorPrimary_"] {
   border-color: $surface1;
 
   &:hover {
@@ -46,15 +46,15 @@ button[class*="lookFilled-"][class*="colorRed-"]:active {
 
 // buttons in sidebar when in calls
 div[class|="actionButtons"] {
-  [class|="button"][class*="buttonColor-"],
-  [class|="button"] [class*="buttonColor-"] {
+  [class|="button"][class*="buttonColor_"],
+  [class|="button"] [class*="buttonColor_"] {
     background-color: $surface1;
 
-    &[class*="buttonActive-"] {
+    &[class*="buttonActive_"] {
       background-color: $green;
       color: $crust;
 
-      [class*="buttonContents-"] {
+      [class*="buttonContents_"] {
         color: $crust;
 
         svg {
@@ -66,7 +66,7 @@ div[class|="actionButtons"] {
 }
 
 // lookInverted buttons should have darker brand text
-[class*="lookInverted-"][class*="colorBrand-"] {
+[class*="lookInverted-"][class*="colorBrand_"] {
   color: var(--brand-experiment-600);
 
   // darken the nitro button too
@@ -78,17 +78,17 @@ div[class|="actionButtons"] {
 // lookLink + colorPrimary should be themed
 .theme-dark,
 .theme-light {
-  [class*="lookLink-"][class*="colorPrimary-"] {
+  [class*="lookLink-"][class*="colorPrimary_"] {
     color: $text;
   }
-  [class*="lookFilled-"][class*="colorTransparent-"] {
+  [class*="lookFilled-"][class*="colorTransparent_"] {
     color: $text;
     background-color: $surface0;
   }
 }
 
 // dangerous button when hovered is colored properly
-div[class*="button-"][class*="dangerous-"]:hover {
+div[class*="button-"][class*="dangerous_"]:hover {
   color: darken($red, 10%);
 }
 
@@ -102,12 +102,12 @@ div[role="radio"][class*="selected"] {
   }
 }
 //nonspecific radio buttons
-[class*="container-"][style*="background-color: var(--green-360)"] {
+[class*="container-"][style*="background-color: var(--green_360)"] {
   --green-360: #{$green}; //vencord plugin settings
   background-color: $green !important;
 }
-[class*="container-"][style*="background-color: var(--primary-400)"],
-[class*="container-"][style*="background-color: rgb(130, 133, 143)"] {
+[class*="container-"][style*="background-color: var(--primary_400)"],
+[class*="container-"][style*="background_color: rgb(130, 133, 143)"] {
   background-color: $crust !important; //used in a lot of places
 }
 // vencord spotify plugin button theming support (uses vencord-specific classes)
@@ -124,7 +124,7 @@ div[role="radio"][class*="selected"] {
 }
 
 // these badges appear in the emoji/sticker picker
-[class*="topGuildEmojiBadge-"] {
+[class*="topGuildEmojiBadge_"] {
   background: linear-gradient(268.26deg, $peach, $red 102.45%);
 
   * {
@@ -132,7 +132,7 @@ div[role="radio"][class*="selected"] {
   }
 }
 
-[class*="newlyAddedBadge-"] {
+[class*="newlyAddedBadge_"] {
   background: linear-gradient(268.26deg, $teal, $green 102.45%);
 
   * {
@@ -141,8 +141,8 @@ div[role="radio"][class*="selected"] {
 }
 
 //revert nitro icon on nitro subscribe button on external emoji
-[class*="lookFilled-"]
-  [class*="premiumSubscribeButton-"]
-  > [class*="premiumIcon-"] {
+[class*="lookFilled_"]
+  [class*="premiumSubscribeButton_"]
+  > [class*="premiumIcon_"] {
   color: $crust !important;
 }
diff --git a/src/components/_chat.scss b/src/components/_chat.scss
index ee15dd9..9704f46 100644
--- a/src/components/_chat.scss
+++ b/src/components/_chat.scss
@@ -1,11 +1,11 @@
 [class|="chatContent"] {
-  div[class*="wrapperAudio-"],
-  div[class*="imageWrapper-"] {
+  div[class*="wrapperAudio_"],
+  div[class*="imageWrapper_"] {
     div[class*="audioControls"],
-    div[class*="videoControls-"] {
+    div[class*="videoControls_"] {
       background-color: #{adjust-color($mantle, $alpha: -0.2)};
 
-      svg[class*="controlIcon-"] {
+      svg[class*="controlIcon_"] {
         opacity: 1;
         color: $subtext1;
       }
@@ -44,42 +44,46 @@
     }
   }
   // Super reactions and beta badge
-  div[class*="isBurstReactionPicker-"] {
-    box-shadow: 0 0 0 2px $mauve, 0 0 16px $lavender;
+  div[class*="isBurstReactionPicker_"] {
+    box-shadow:
+      0 0 0 2px $mauve,
+      0 0 16px $lavender;
   }
   div[class|="navButtonSuperReactActive"],
   div[class|="navButtonSuperReactActive"]:hover {
     background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
     color: $crust;
   }
-  div[class*="betaTag-"] {
+  div[class*="betaTag_"] {
     background: var(--brand-experiment) !important;
     color: $crust;
   }
-  button[class*="navButtonActive-"],
-  button[class*="navButtonActive-"]:hover {
+  button[class*="navButtonActive_"],
+  button[class*="navButtonActive_"]:hover {
     color: $crust;
   }
-  div[class*="colorPremiumGradient-"][class*="focused-"] {
+  div[class*="colorPremiumGradient-"][class*="focused_"] {
     background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
     color: $crust !important;
   }
   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-"] {
+  div[class*="playButtonContainer_"] {
     background: var(--brand-experiment) !important;
   }
-  svg[class*="playIcon-"] path {
+  svg[class*="playIcon_"] path {
     fill: $crust;
   }
 
   // chat header
-  div[class|="container"][class*="header-"] {
-    div[class*="addReactButton-"],
-    div[class|="buttons"]:not([class*="lookBlank-"]) div[class|="contents"] {
+  div[class|="container"][class*="header_"] {
+    div[class*="addReactButton_"],
+    div[class|="buttons"]:not([class*="lookBlank_"]) div[class|="contents"] {
       background: $surface0;
       &:hover {
         background-color: var(--brand-experiment-20a);
@@ -89,19 +93,19 @@
   }
 
   // "Messages failed to load" bar
-  div[class|="messagesErrorBar"] div[class*="barButtonBase-"] {
+  div[class|="messagesErrorBar"] div[class*="barButtonBase_"] {
     color: $crust;
   }
 
   // code stuff
-  // [class*="after_inlineCode-"],
-  // [class*="before_inlineCode-"],
+  // [class*="after_inlineCode_"],
+  // [class*="before_inlineCode_"],
   // [class|="syntaxBefore"],
   // [class|="syntaxAfter"] {
   //   color: $overlay0;
   // }
 
-  [class*="inlineCode-"] {
+  [class*="inlineCode_"] {
     background: $surface0;
   }
 
@@ -110,7 +114,7 @@
   }
 
   div[class|="container"] div[class|="cardWrapper"] {
-    div[class*="completed-"] {
+    div[class*="completed_"] {
       svg[class|="checkmark"] {
         background-color: $green;
         color: $crust;
@@ -176,7 +180,7 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
       }
     }
 
-    article[class*="embedFull-"] {
+    article[class*="embedFull_"] {
       border-color: $surface2;
     }
   }
@@ -188,7 +192,7 @@ div[class|="cooldownWrapper"] {
 }
 
 // autocomplete chat textboxes
-div[class*="autocomplete-"] {
+div[class*="autocomplete_"] {
   background-color: $mantle !important;
 
   div[class*="categoryHeader"] {
@@ -200,7 +204,7 @@ div[class*="autocomplete-"] {
   div[class*="autocompleteRowContentSecondary"] {
     background-color: transparent;
   }
-  div[class|="usageWrapper"] > div[class*="title-"] {
+  div[class|="usageWrapper"] > div[class*="title_"] {
     color: $brand !important;
   }
 
@@ -210,7 +214,7 @@ div[class*="autocomplete-"] {
 }
 
 // emoji button
-div[class|="channelTextArea"] button[class*="emojiButton-"] {
+div[class|="channelTextArea"] button[class*="emojiButton_"] {
   background: transparent !important;
 }
 
@@ -230,8 +234,10 @@ div[class|="channelTextArea"] button[class*="emojiButton-"] {
 }
 
 // forums
-div[class|="chat"] > div[class|="content"] > div[class|="container"] {
-  background-color: $base;
+div[class^="chat"] > div[class^="content"] > div[class^="container"] {
+  div[class^="chatContainer"] > div[class^="container"] {
+    background-color: $base;
+  }
 
   div[class|="grid"][class*="scrollerBase"],
   > div[class|="chatContainer"] > div[class|="container"] {
@@ -269,13 +275,13 @@ div[class|="chat"] > div[class|="content"] > div[class|="container"] {
     color: $crust;
   }
 
-  div[class*="mainCard-"] {
+  div[class*="mainCard_"] {
     background-color: $surface0;
   }
 }
 
 div[class|="sidebar"] > section[class|="panels"] {
-  svg[class*="buttonIcon-"],
+  svg[class*="buttonIcon_"],
   div[class*="buttonContents"] {
     fill: $text;
     color: $text;
@@ -296,11 +302,11 @@ div[class|="sidebar"] > section[class|="panels"] {
 
 // Bot slash command field
 div[class|="applicationCommand"] {
-  span[class*="selectedPill-"] {
+  span[class*="selectedPill_"] {
     border-color: $brand !important;
   }
 
-  span[class*="erroredPill-"] {
+  span[class*="erroredPill_"] {
     border-color: $red !important;
   }
 }
@@ -314,18 +320,18 @@ div[class|="chat"]
 }
 
 // fix error border when attempting to start a thread with no message
-[class*="channelTextAreaInnerError-"] {
+[class*="channelTextAreaInnerError_"] {
   border: 1px solid $red !important;
 }
 
 // Jump to Present bar text
-[class*="barButtonBase-"] {
+[class*="barButtonBase_"] {
   color: $crust !important;
 }
 
 // calls
 div[class|="callContainer"] {
-  [class*="controlIcon-"] {
+  [class*="controlIcon_"] {
     color: $subtext1;
 
     &:hover {
@@ -333,25 +339,25 @@ div[class|="callContainer"] {
     }
   }
 
-  div[class*="tile-"],
-  div[class*="background-"] {
+  div[class*="tile_"],
+  div[class*="background_"] {
     background-color: $base !important;
   }
 
   div[class*="overlayTitle"],
-  svg[class*="status-"] {
+  svg[class*="status_"] {
     background-color: $surface0;
     color: $text;
   }
 
   div[class*="header"],
-  svg[class*="selectedIcon-"] {
+  svg[class*="selectedIcon_"] {
     color: $text;
   }
 
-  div[class*="button-"][class*="contents-"],
-  button[class*="cta-"],
-  button[class*="participantsButton-"] {
+  div[class*="button-"][class*="contents_"],
+  button[class*="cta_"],
+  button[class*="participantsButton_"] {
     background-color: $surface0;
     color: $text;
   }
@@ -369,7 +375,7 @@ div[class|="callContainer"] {
 
   div[class|="videoControls"] {
     div[class|="children"] {
-      div[class*="playingText-"] {
+      div[class*="playingText_"] {
         color: $subtext1;
       }
     }
@@ -404,7 +410,7 @@ div[class|="callContainer"] {
       }
     }
 
-    button[class*="leftTrayIcon-"][class*="buttonColor-"] {
+    button[class*="leftTrayIcon-"][class*="buttonColor_"] {
       background-color: $surface0;
       color: $text;
     }
@@ -413,20 +419,20 @@ div[class|="callContainer"] {
       color: $crust;
     }
 
-    [class*="colorable-"] {
-      &[class*="red-"] {
+    [class*="colorable_"] {
+      &[class*="red_"] {
         background: $red;
 
-        [class*="centerIcon-"] {
+        [class*="centerIcon_"] {
           color: $crust;
         }
       }
 
-      &[class*="primaryDark-"] {
+      &[class*="primaryDark_"] {
         background: $surface1;
         color: $text;
 
-        [class*="centerIcon-"] {
+        [class*="centerIcon_"] {
           color: $text;
         }
 
@@ -435,24 +441,24 @@ div[class|="callContainer"] {
         }
       }
 
-      &[class*="green-"] {
+      &[class*="green_"] {
         background: $green;
 
-        [class*="centerIcon-"] {
+        [class*="centerIcon_"] {
           color: $crust;
         }
       }
 
-      &[class*="white-"] {
+      &[class*="white_"] {
         color: $crust;
         background-color: $subtext1;
 
-        [class*="centerIcon-"] {
+        [class*="centerIcon_"] {
           color: $crust;
         }
 
         &:hover,
-        &[class*="active-"] {
+        &[class*="active_"] {
           background: $text;
         }
       }
@@ -461,11 +467,11 @@ div[class|="callContainer"] {
 }
 
 // Weird gradient thing on forums
-div[class|="chat"]
-  section[class*="forumOrHome-"]
-  div[class|="upperContainer"]
-  > div[class|="children"]:after {
-  background: none;
+div[class^="chat"] section[class*="forumOrHome_"] {
+  background-color: $base;
+  div[class^="upperContainer"] > div[class^="children"]:after {
+    background: none;
+  }
 }
 
 // gifts
@@ -478,20 +484,20 @@ div[class*="giftCodeContainer"] [class*="tile"] {
 }
 
 // channels & roles
-div[class*="chat-"] {
+div[class*="chat_"] {
   // header
-  section[class*="header-"] {
+  section[class*="header_"] {
     background-color: $mantle;
   }
 
-  div[class*="content-"][class*="container-"] {
+  div[class*="content-"][class*="container_"] {
     background-color: $mantle;
 
     div[class*="container"] {
       background-color: $mantle;
     }
 
-    div[class*="search-"] {
+    div[class*="search_"] {
       background-color: $base !important;
 
       input::placeholder {
@@ -504,7 +510,7 @@ div[class*="chat-"] {
         background-color: $base;
       }
 
-      div[class*="checkbox-"] {
+      div[class*="checkbox_"] {
         border-color: $crust !important;
         svg > path {
           fill: $crust;
@@ -512,10 +518,10 @@ div[class*="chat-"] {
       }
     }
 
-    div[class*="scrollerContainer-"] {
+    div[class*="scrollerContainer_"] {
       background-color: $mantle;
 
-      div[class*="checkIcon-"][style*="opacity: 1;"] > svg > path {
+      div[class*="checkIcon_"][style*="opacity: 1;"] > svg > path {
         fill: $crust;
       }
     }
@@ -524,14 +530,14 @@ div[class*="chat-"] {
       background-color: $mantle;
       border-bottom: 2px solid $surface0;
 
-      [class*="textBadge-"] {
+      [class*="textBadge_"] {
         color: $crust;
       }
     }
   }
 }
 
-div[class*="chat-"] {
+div[class*="chat_"] {
   // Search Box
   section[class*="title"] div[class*="searchBar"] span[class*="search"] {
     background-color: $surface0;
@@ -546,26 +552,26 @@ div[class*="chat-"] {
   }
 }
 
-div[class*="chat-"] {
+div[class*="chat_"] {
   // Forum Gallery View
-  li[class*="mainCard-"][class*="container"] {
+  li[class*="mainCard_"][class*="container"] {
     background-color: $surface0;
 
     &:hover {
       background-color: $surface1;
     }
 
-    div[class*="contentPreview-"] {
+    div[class*="contentPreview_"] {
       background-color: $base;
       border: none;
 
-      div[class*="textContentFooter-"] {
+      div[class*="textContentFooter_"] {
         background: none;
       }
     }
 
-    div[class*="tags-"] {
-      div[class*="tagPill-"] {
+    div[class*="tags_"] {
+      div[class*="tagPill_"] {
         background-color: #{adjust-color($surface1, $alpha: -0.2)};
       }
     }
@@ -583,23 +589,23 @@ div[class*="chat-"] {
 }
 
 // spotify listen along invite
-[id*="message-accessories-"] > [class*="invite-"] {
+[id*="message-accessories-"] > [class*="invite_"] {
   background-color: $base;
-  [class*="inFront-"][class*="header-"] {
+  [class*="inFront-"][class*="header_"] {
     color: $subtext0;
   }
-  [class*="partyStatus-"] {
+  [class*="partyStatus_"] {
     color: $text;
   }
 }
 
 // typing indicator
-[class|="avatar"] [class|="dots"] {
+[class^="avatar"] [class^="dots"] {
   color: $base;
 }
 
 // members tab
-div[class|="chat"][class*="page-"] div[class|="content"][class*="container-"] {
+div[class|="chat"][class*="page-"] div[class|="content"][class*="container_"] {
   height: 100%;
 }
 
diff --git a/src/components/_details.scss b/src/components/_details.scss
index 22e2196..fe29626 100644
--- a/src/components/_details.scss
+++ b/src/components/_details.scss
@@ -88,15 +88,10 @@ rect[fill="#593695"] {
 }
 
 // Vencord theme input border should use accent
-#vencordthemes-tab [class*="input-"]:focus {
+#vencordthemes-tab [class*="input_"]:focus {
   border-color: $brand !important;
 }
 
-// dots in typing
-svg[class|="cursorDefault"] svg[class|="dots"] circle {
-  fill: $base !important;
-}
-
 // inline brand color styles...
 [style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)"] {
   background-color: $brand !important;
@@ -104,15 +99,15 @@ svg[class|="cursorDefault"] svg[class|="dots"] circle {
 }
 
 // for those roles that blend in the background
-span[class*="username-"][style*="color: rgb(54, 57, 62)"],
-span[class*="username-"][style*="color: rgb(53, 57, 64)"] {
+span[class*="username_"][style*="color: rgb(54, 57, 62)"],
+span[class*="username_"][style*="color: rgb(53, 57, 64)"] {
   color: var(--background-primary) !important;
 }
 
 // server badges
-div[class*="flowerStarContainer-"] {
+div[class*="flowerStarContainer_"] {
   &[class*="boostedGuildTierIconBackgroundWithVisibleBanner"] {
-    svg[class*="flowerStar-"] * {
+    svg[class*="flowerStar_"] * {
       fill: #fff;
     }
     div[class|="childContainer"] svg * {
@@ -120,11 +115,11 @@ div[class*="flowerStarContainer-"] {
     }
   }
 
-  &[class*="iconBackgroundTierOne-"],
-  &[class*="iconBackgroundTierTwo-"]:not(
+  &[class*="iconBackgroundTierOne_"],
+  &[class*="iconBackgroundTierTwo_"]:not(
       [class*="boostedGuildTierIconBackgroundWithVisibleBanner"]
     ) {
-    svg[class*="flowerStar-"] * {
+    svg[class*="flowerStar_"] * {
       fill: $surface2;
     }
     div[class|="childContainer"] svg * {
@@ -132,8 +127,8 @@ div[class*="flowerStarContainer-"] {
     }
   }
 
-  &[class*="iconBackgroundTierThree-"] {
-    svg[class*="flowerStar-"] * {
+  &[class*="iconBackgroundTierThree_"] {
+    svg[class*="flowerStar_"] * {
       fill: $pink;
     }
     div[class|="childContainer"] svg * {
@@ -141,8 +136,8 @@ div[class*="flowerStarContainer-"] {
     }
   }
 
-  &[class*="verified-"] {
-    svg[class*="flowerStar-"] * {
+  &[class*="verified_"] {
+    svg[class*="flowerStar_"] * {
       fill: $green;
     }
     div[class|="childContainer"] svg * {
@@ -150,8 +145,8 @@ div[class*="flowerStarContainer-"] {
     }
   }
 
-  &[class*="partnered-"] {
-    svg[class*="flowerStar-"] * {
+  &[class*="partnered_"] {
+    svg[class*="flowerStar_"] * {
       fill: $brand;
     }
     div[class|="childContainer"] svg * {
@@ -171,7 +166,7 @@ div[class|="communityInfoPill"] {
 }
 
 // social links on "what's new"
-a[class*="socialLink-"][href*="discord"] {
+a[class*="socialLink_"][href*="discord"] {
   color: $subtext0;
 }
 
@@ -193,15 +188,15 @@ svg[class|="uploadIcon"] {
 }
 
 // anything that uses a color background should have crust text
-div[class*="unreadMentionsBar-"],
-div[class*="unreadBar-"] {
+div[class*="unreadMentionsBar_"],
+div[class*="unreadBar_"] {
   color: $crust;
 }
 
 // make number badges have crust text and bolder
-div[class|="numberBadge"] {
+div[class^="numberBadge"] {
   font-weight: 700;
-  color: $crust;
+  color: $crust !important;
 }
 
 // Channel and role badge
@@ -234,54 +229,64 @@ div[class|="tags"] div[class|="pinIcon"] path {
 }
 
 // speaking indicator
-div[class*="avatarSpeaking-"] {
-  -webkit-box-shadow: inset 0 0 0 2px $green,
+div[class*="avatarSpeaking_"] {
+  -webkit-box-shadow:
+    inset 0 0 0 2px $green,
     inset 0 0 0 3px var(--background-secondary);
-  box-shadow: inset 0 0 0 2px $green,
+  box-shadow:
+    inset 0 0 0 2px $green,
     inset 0 0 0 3px var(--background-secondary);
 }
 
-div[class*="videoLayer-"] > div[class|="tileChild"] > div[class|="border"] {
-  &[class*="speaking-"] {
-    -webkit-box-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
-    box-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
+div[class*="videoLayer_"] > div[class|="tileChild"] > div[class|="border"] {
+  &[class*="speaking_"] {
+    -webkit-box-shadow:
+      inset 0 0 0 2px $green,
+      inset 0 0 0 3px $green;
+    box-shadow:
+      inset 0 0 0 2px $green,
+      inset 0 0 0 3px $green;
   }
 
   // this is when emojis fly across the tile
-  &[class*="voiceChannelEffect-"] {
-    -webkit-box-shadow: inset 0 0 0 2px $brand, inset 0 0 0 3px $brand;
-    box-shadow: inset 0 0 0 2px $brand, inset 0 0 0 3px $brand;
+  &[class*="voiceChannelEffect_"] {
+    -webkit-box-shadow:
+      inset 0 0 0 2px $brand,
+      inset 0 0 0 3px $brand;
+    box-shadow:
+      inset 0 0 0 2px $brand,
+      inset 0 0 0 3px $brand;
   }
 }
 
-div[class*="featureIcon-"] path {
+div[class*="featureIcon_"] path {
   fill: $brand;
 }
 
-div[class*="backgroundAccent-"] {
+div[class*="backgroundAccent_"] {
   color: $crust;
 }
 
-div[class*="profileBadges-"] {
+div[class*="profileBadges_"] {
   div[aria-label="Supports Commands"] img {
     content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($green), 2)}'%3E%3Cpath d='m8.1176653 16.0847263 4.8330812-8.1694527h2.9315882l-4.8330812 8.1694527z'/%3E%3Cpath d='m20.4189453 9.4038086v-2.4311524c0-1.9775391-1.0825195-3.1118164-2.9697266-3.1118164h-1.5581055v1.7802734l.9594727-.0014648c.8540039 0 1.34375.5683594 1.34375 1.5585938v2.3969727c0 .8300781.1806641 1.8422852 1.5893555 2.3100586l.2856445.0947265-.2856445.0947266c-1.4086914.4677734-1.5893555 1.4799804-1.5893555 2.3100586v2.3964844c0 .9907227-.4897461 1.559082-1.34375 1.559082l-.9594727-.0014648v1.7802734h1.5581055c1.887207 0 2.9697266-1.1342773 2.9697266-3.1118164v-2.4316406c0-1.2583008.3432617-1.6264648 1.5810547-1.6445312v-1.9023438c-1.237793-.0180665-1.5810547-.3862305-1.5810547-1.6450196z'/%3E%3Cpath d='m5.8061523 7.1982422c0-.9760742.5024414-1.5585938 1.3432617-1.5585938l.9594727.0014648v-1.7802734h-1.5576172c-1.887207 0-2.9697266 1.1342773-2.9697266 3.1118164v2.4311523c0 1.2587891-.3432617 1.6269531-1.581543 1.6450195v1.9023438c1.2382812.0180664 1.581543.3862305 1.581543 1.6445312v2.4316406c0 1.9775391 1.0825195 3.1118164 2.9697266 3.1118164h1.5576172v-1.7802734l-.9594727.0014648c-.8408203 0-1.3432617-.5830078-1.3432617-1.559082v-2.3964844c0-.8300781-.1806641-1.8422852-1.5898438-2.3100586l-.2856444-.0947264.2856445-.0947266c1.4091797-.4677734 1.5898437-1.4799804 1.5898437-2.3100586z'/%3E%3C/g%3E%3C/svg%3E");
   }
 }
 
-div[class*="newBadge-"],
-div[class*="tryItOutBadge-"] {
+div[class*="newBadge_"],
+div[class*="tryItOutBadge_"] {
   color: $crust;
 }
 
 // Pending Friend Request alert badge
-[class|="tabBar"] [class|="badge"] {
+[class^="tabBar"] [class^="badge"] {
   color: $crust;
 }
 
 span[class*="channelMention"]:hover,
 [class*="mention"]:not(
-    [class*="mentionButton-"],
-    [class*="mentionIcon-"]
+    [class*="mentionButton_"],
+    [class*="mentionIcon_"]
   ):hover {
   color: $crust;
 }
diff --git a/src/components/_icons-bgImg.scss b/src/components/_icons-bgImg.scss
index 52a261b..268b4d1 100644
--- a/src/components/_icons-bgImg.scss
+++ b/src/components/_icons-bgImg.scss
@@ -22,7 +22,7 @@ $bgImg: (
 );
 
 @each $class, $icon in $bgImg {
-  [class*="#{$class}-"] {
+  [class*="#{$class}_"] {
     background-image: url("#{map-get($icon, icon)}") !important;
   }
 }
diff --git a/src/components/_icons-imgContent.scss b/src/components/_icons-imgContent.scss
index 518ffe3..3234899 100644
--- a/src/components/_icons-imgContent.scss
+++ b/src/components/_icons-imgContent.scss
@@ -6,7 +6,7 @@ $imgContent: (
 );
 
 @each $class, $icon in $imgContent {
-  [class*="#{$class}-"] {
+  [class*="#{$class}_"] {
     content: url("#{map-get($icon, icon)}") !important;
   }
 }
diff --git a/src/components/_icons-svgBg.scss b/src/components/_icons-svgBg.scss
index 170276d..76c7abd 100644
--- a/src/components/_icons-svgBg.scss
+++ b/src/components/_icons-svgBg.scss
@@ -7,7 +7,7 @@ $svgBg: (
 @each $class, $color in $svgBg {
   .theme-dark,
   .theme-light {
-    svg[class*="#{$class}-"] {
+    svg[class*="#{$class}_"] {
       background-color: #{map-get($color, color)};
     }
   }
diff --git a/src/components/_icons-svgColor.scss b/src/components/_icons-svgColor.scss
index 9eadcdc..021fd9a 100644
--- a/src/components/_icons-svgColor.scss
+++ b/src/components/_icons-svgColor.scss
@@ -32,9 +32,6 @@ $svgColor: (
   "memberBadgeIcon": (
     color: $pink,
   ),
-  "stickerIcon": (
-    color: $mauve,
-  ),
   "audioQualityIcon": (
     color: $sapphire,
   ),
@@ -70,7 +67,7 @@ $svgColor: (
 @each $class, $color in $svgColor {
   .theme-dark,
   .theme-light {
-    svg[class*="#{$class}-"] {
+    svg[class*="#{$class}_"] {
       color: #{map-get($color, color)} !important;
     }
   }
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index 7efa3e0..62bd20a 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -1,9 +1,9 @@
-nav[class*="guilds-"] {
+nav[class*="guilds_"] {
   // server icons
   foreignObject > div[data-list-item-id*="guildsnav_"] {
     &:hover,
     &[class*="selected"] {
-      > div[class|="childWrapper"] {
+      > div[class^="childWrapper"] {
         color: $crust;
         font-weight: 600;
       }
@@ -19,7 +19,7 @@ nav[class*="guilds-"] {
   span[class|="expandedFolderBackground"] {
     background-color: lighten($base, 3%);
   }
-  div[class|="folder"][class*="hover-"] {
+  div[class|="folder"][class*="hover_"] {
     background-color: lighten($base, 8%);
   }
 
@@ -41,7 +41,7 @@ div[class|="upperBadge"] {
     color: $crust;
   }
 
-  div[class*="participating-"] {
+  div[class*="participating_"] {
     background: $green;
   }
 }
diff --git a/src/components/_pages.scss b/src/components/_pages.scss
index 375f2cb..c0d5606 100644
--- a/src/components/_pages.scss
+++ b/src/components/_pages.scss
@@ -5,7 +5,7 @@ div[class|="sidebarRegion"] {
       fill: $pink !important;
     }
 
-    &[class*="selected-"] {
+    &[class*="selected_"] {
       background-color: $brand !important;
       color: $crust !important;
 
@@ -29,7 +29,7 @@ div[class|="sidebarRegion"] {
     }
   }
 
-  div[class*="tabBarItemContainer-"] [class*="textBadge-"] {
+  div[class*="tabBarItemContainer-"] [class*="textBadge_"] {
     color: $crust;
 
     &[style*="background-color: var(--brand-500);"] {
@@ -39,7 +39,7 @@ div[class|="sidebarRegion"] {
 }
 
 div[class|="contentRegion"] {
-  div[class*="noticeRegion-"] div[style="background-color: rgb(24, 25, 28);"] {
+  div[class*="noticeRegion-"] div[style="background_color: rgb(24, 25, 28);"] {
     background-color: $crust !important;
   }
 
@@ -80,7 +80,7 @@ div[class|="contentRegion"] {
       background-color: $brand;
     }
 
-    div[class*="reducedMotion-"] {
+    div[class*="reducedMotion_"] {
       div[class|="checkbox"] svg path {
         fill: $crust;
       }
@@ -101,7 +101,7 @@ div[class|="contentRegion"] {
       color: $pink;
     }
 
-    div[class*="gemIndicatorContainer-"] {
+    div[class*="gemIndicatorContainer_"] {
       background-color: $base;
 
       div[class|="tierLabel"] {
@@ -109,7 +109,7 @@ div[class|="contentRegion"] {
       }
     }
 
-    button[class*="lookInverted-"] {
+    button[class*="lookInverted_"] {
       color: $crust;
       background-color: $text;
 
@@ -118,8 +118,8 @@ div[class|="contentRegion"] {
       }
     }
 
-    div[class*="card-"],
-    h3[class*="price-"] {
+    div[class*="card_"],
+    h3[class*="price_"] {
       color: $text !important;
     }
   }
@@ -147,19 +147,19 @@ div[class|="contentRegion"] {
       color: $text !important;
     }
 
-    svg[class*="sparkleStar-"] {
+    svg[class*="sparkleStar_"] {
       color: $text;
     }
 
-    div[class*="description-"] {
+    div[class*="description_"] {
       color: $subtext1 !important;
     }
 
-    div[class*="card-"] {
+    div[class*="card_"] {
       color: $text;
     }
 
-    button[class*="lookInverted-"] {
+    button[class*="lookInverted_"] {
       color: $crust;
       background-color: $text;
 
@@ -194,8 +194,8 @@ div[class|="contentRegion"] {
     }
 
     div[class|="paymentPane"],
-    div[class*="paginator-"],
-    div[class*="payment-"] {
+    div[class*="paginator_"],
+    div[class*="payment_"] {
       background-color: $surface0;
       color: $text;
     }
@@ -204,7 +204,7 @@ div[class|="contentRegion"] {
       background-color: $surface1;
     }
 
-    [class*="paymentText-"] {
+    [class*="paymentText_"] {
       color: $subtext1;
     }
 
@@ -222,19 +222,19 @@ div[class|="contentRegion"] {
   }
 
   #notifications-tab {
-    button[class*="marketingUnsubscribeButton-"] {
+    button[class*="marketingUnsubscribeButton_"] {
       color: $text;
     }
   }
 
   #game-activity-tab {
-    div[class*="nowPlayingAdd-"],
-    div[class*="lastPlayed-"],
-    div[class*="overlayStatusText-"] {
+    div[class*="nowPlayingAdd_"],
+    div[class*="lastPlayed_"],
+    div[class*="overlayStatusText_"] {
       color: var(--text-muted);
     }
 
-    div[class*="activeGame-"][class*="nowPlaying"] * {
+    div[class*="activeGame_"][class*="nowPlaying"] * {
       color: $crust;
 
       svg > path {
@@ -246,7 +246,7 @@ div[class|="contentRegion"] {
       color: $text;
     }
 
-    input[class*="gameNameInput-"] {
+    input[class*="gameNameInput_"] {
       &:hover,
       &:focus {
         background-color: $mantle;
@@ -255,18 +255,18 @@ div[class|="contentRegion"] {
       }
     }
 
-    div[class*="game-"] {
+    div[class*="game_"] {
       -webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent);
       box-shadow: 0 1px 0 0 var(--background-modifier-accent);
     }
 
-    div[class*="removeGame-"] {
+    div[class*="removeGame_"] {
       background-color: $surface0;
     }
   }
 
   #emoji-tab {
-    div[class*="emojiRemove-"] {
+    div[class*="emojiRemove_"] {
       background-color: $surface0;
     }
   }
@@ -276,20 +276,20 @@ div[class|="contentRegion"] {
     div[class|="inputSensitivityBar"] {
       background: $surface1;
 
-      &[class*="speaking-"] {
+      &[class*="speaking_"] {
         background: $green !important;
       }
     }
   }
 
-  div[class*="reactionMe-"] {
+  div[class*="reactionMe_"] {
     background-color: $surface0 !important;
   }
 
   // toggles in preferencs
   // checked
-  div[class|="control"] > div[class*="checked-"],
-  div[class|="sensitivity"] div[class*="checked-"],
+  div[class|="control"] > div[class*="checked_"],
+  div[class|="sensitivity"] div[class*="checked_"],
   div[style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] {
     background-color: $green !important;
 
@@ -314,13 +314,13 @@ div[class|="contentRegion"] {
 
   // server boost page
   #guild_premium-tab {
-    [class*="tierAccomplished-"],
-    [class*="tierCurrent-"],
-    [class*="tierFirst-"] {
+    [class*="tierAccomplished_"],
+    [class*="tierCurrent_"],
+    [class*="tierFirst_"] {
       background: $pink;
     }
 
-    [class*="tierInProgress-"] {
+    [class*="tierInProgress_"] {
       background-color: $crust;
     }
 
@@ -349,7 +349,7 @@ div[class|="contentRegion"] {
         color: $pink;
       }
 
-      svg[class*="tierIconLocked-"] {
+      svg[class*="tierIconLocked_"] {
         color: $overlay1;
       }
 
@@ -407,14 +407,14 @@ div[class|="contentRegion"] {
   }
 
   #roles-tab {
-    div[class*="previewContainer-"] {
+    div[class*="previewContainer_"] {
       .theme-light {
-        img[class*="roleIcon-"] {
+        img[class*="roleIcon_"] {
           content: "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0749 1.66667H4.99996C3.15901 1.66667 1.66663 3.15906 1.66663 5.00001V15C1.66663 16.841 3.15901 18.3333 4.99996 18.3333H15C16.8409 18.3333 18.3333 16.841 18.3333 15V8.92511C17.8052 9.08227 17.2458 9.16667 16.6666 9.16667C13.445 9.16667 10.8333 6.555 10.8333 3.33334C10.8333 2.75419 10.9177 2.19476 11.0749 1.66667ZM6.66663 5.00001C7.58596 5.00001 8.33329 5.74601 8.33329 6.66667C8.33329 7.58801 7.58596 8.33334 6.66663 8.33334C5.74529 8.33334 4.99996 7.58801 4.99996 6.66667C4.99996 5.74601 5.74529 5.00001 6.66663 5.00001ZM4.99996 15L7.49996 11.6667L9.16663 13.3333L12.5 9.16667L15 15H4.99996Z' fill='%23#{str-slice(inspect($surface1), 2)}'/%3E%3Cpath d='M17.5 0V2.5H20V4.16667H17.5V6.66667H15.8334V4.16667H13.3334V2.5H15.8334V0H17.5Z' fill='%23#{str-slice(inspect($surface1), 2)}'/%3E%3C/svg%3E";
         }
       }
       .theme-dark {
-        img[class*="roleIcon-"] {
+        img[class*="roleIcon_"] {
           content: "data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($text), 2)}'%3E%3Cpath clip-rule='evenodd' d='m11.0749 1.66667h-6.07488c-1.84095 0-3.33333 1.49239-3.33333 3.33334v9.99999c0 1.841 1.49238 3.3333 3.33333 3.3333h9.99998c1.841 0 3.3334-1.4923 3.3334-3.3333v-6.07489c-.5281.15716-1.0876.24156-1.6667.24156-3.2217 0-5.8333-2.61167-5.8333-5.83333 0-.57915.0844-1.13858.2415-1.66667zm-4.40821 3.33334c.91933 0 1.66666.746 1.66666 1.66666 0 .92134-.74733 1.66667-1.66666 1.66667-.92134 0-1.66667-.74533-1.66667-1.66667 0-.92066.74533-1.66666 1.66667-1.66666zm-1.66667 9.99999 2.5-3.3333 1.66667 1.6666 3.33331-4.16663 2.5 5.83333z' fill-rule='evenodd'/%3E%3Cpath d='m17.5 0v2.5h2.5v1.66667h-2.5v2.5h-1.6667v-2.5h-2.5v-1.66667h2.5v-2.5z'/%3E%3C/g%3E%3C/svg%3E";
         }
       }
@@ -572,10 +572,10 @@ div[class|="sidebar"] div[class|="container"] {
 div[class|="pageWrapper"] {
   background: $base !important;
 
-  div[class*="searchBox-"] {
+  div[class*="searchBox_"] {
     background-color: $mantle;
 
-    input[class*="searchBoxInput-"] {
+    input[class*="searchBoxInput_"] {
       color: var(--text-normal);
     }
 
@@ -584,7 +584,7 @@ div[class|="pageWrapper"] {
     }
   }
 
-  div[class*="categoryPill-"][class*="selected-"] div {
+  div[class*="categoryPill-"][class*="selected_"] div {
     color: $crust !important;
   }
 }
@@ -593,7 +593,7 @@ div[class|="pageWrapper"] {
 div[class|="homeContainer"] {
   background: $base !important;
 
-  > div[class|="homeContent"] div[class*="card-"] {
+  > div[class|="homeContent"] div[class*="card_"] {
     background: $surface0 !important;
   }
 }
@@ -610,12 +610,12 @@ button[class*="lookFilled"] div[class*="addButton"] {
 }
 
 // new label
-div[class|="itemInner"] div[class|="new"] > div[class*="newText-"] {
+div[class|="itemInner"] div[class|="new"] > div[class*="newText_"] {
   color: $crust !important;
 }
 
 // app directory
-div[class*="directoryModal-"] {
+div[class*="directoryModal_"] {
   background-color: $base !important;
 
   & [class*="searchBox"] {
@@ -660,11 +660,11 @@ div[class|="tierPreviews"] {
 }
 
 div[class|="notice"] {
-  div[class*="noticeText-"] {
+  div[class*="noticeText_"] {
     color: $crust;
   }
 
-  div[class*="header-"] {
+  div[class*="header_"] {
     color: $crust;
   }
 
@@ -681,7 +681,7 @@ div[class|="notice"] {
     }
   }
 
-  &[class*="colorStreamerMode-"] {
+  &[class*="colorStreamerMode_"] {
     background-color: $mauve;
     color: $crust;
 
diff --git a/src/components/_popouts.scss b/src/components/_popouts.scss
index 8857817..7aed66c 100644
--- a/src/components/_popouts.scss
+++ b/src/components/_popouts.scss
@@ -10,7 +10,7 @@ div[class|="layerContainer"] [role="menu"] {
 
     &[class*="focused"] {
       &:not([class*="colorDanger"]),
-      [class*="checkbox-"] {
+      [class*="checkbox_"] {
         color: var(--interactive-normal);
       }
     }
@@ -22,7 +22,7 @@ div[class|="layerContainer"] [role="menu"] {
       color: $crust;
 
       [class*="subtext"],
-      [class*="caret-"] {
+      [class*="caret_"] {
         color: $crust;
       }
     }
@@ -32,14 +32,14 @@ div[class|="layerContainer"] [role="menu"] {
     }
 
     // make active items have dark text
-    &:active:not([class*="hideInteraction-"]) {
+    &:active:not([class*="hideInteraction_"]) {
       color: var(--background-floating);
 
-      [class*="check-"] {
+      [class*="check_"] {
         color: var(--interactive-normal);
       }
 
-      [class*="checkbox-"] {
+      [class*="checkbox_"] {
         color: var(--background-floating);
       }
     }
@@ -73,7 +73,7 @@ div[class|="layerContainer"] [role="menu"] {
   }
 
   [class*="colorDanger"][class*="focused"],
-  [class*="colorDefault"] [class*="check-"] {
+  [class*="colorDefault"] [class*="check_"] {
     color: var(--background-floating);
     background-color: $red;
   }
@@ -85,8 +85,8 @@ div[class|="layerContainer"] [role="menu"] {
   }
 
   // user volume slider
-  #user-context-user-volume div[class*="slider-"] {
-    div[class*="bar-"] {
+  #user-context-user-volume div[class*="slider_"] {
+    div[class*="bar_"] {
       background-color: $surface0;
     }
   }
@@ -94,10 +94,10 @@ div[class|="layerContainer"] [role="menu"] {
 
 .theme-dark,
 .theme-light {
-  div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender-"] {
+  div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender_"] {
     &:not([class|="animatorBottom"]) > div {
-      div[class*="flowerStarContainer-"] {
-        svg[class*="flowerStar-"] * {
+      div[class*="flowerStarContainer_"] {
+        svg[class*="flowerStar_"] * {
           fill: $brand;
         }
       }
@@ -116,7 +116,7 @@ div[class|="layerContainer"] [role="menu"] {
     }
 
     div[class*="container"] {
-      div[class*="autocompleteArrow-"],
+      div[class*="autocompleteArrow_"],
       header {
         background-color: $mantle;
       }
@@ -137,7 +137,7 @@ div[class*="recentMentionsPopout"] {
   div[class|="header"] {
     div[class|="tabBar"] {
       div[class|="badge"],
-      div[class|="tab"][class*="active-"] {
+      div[class|="tab"][class*="active_"] {
         color: $base;
       }
     }
@@ -153,7 +153,7 @@ div[class*="recentMentionsPopout"] {
       --background-tertiary: #{adjust-color($subtext0, $alpha: -0.85)};
       --background-floating: #{adjust-color($subtext0, $alpha: -0.88)};
 
-      div[class*="jumpButton-"] {
+      div[class*="jumpButton_"] {
         background-color: $surface0;
       }
     }
@@ -215,7 +215,7 @@ div[class*="layerContainer"] {
 }
 
 // gif/sticker/emoji section
-section[class|="positionContainer"] {
+section[class*="positionContainer_"] {
   // colors tab when active
   button[class*="navButtonActive"] {
     background-color: $brand;
@@ -230,16 +230,16 @@ section[class|="positionContainer"] {
 
 #emoji-picker-tab-panel {
   // more transparent to make things more bearable
-  [class*="stickerInspected-"] [class*="inspectedIndicator"],
-  [class|="emojiItem"][class*="emojiItemSelected-"] {
+  [class*="stickerInspected_"] [class*="inspectedIndicator"],
+  [class|="emojiItem"][class*="emojiItemSelected_"] {
     background-color: var(--brand-experiment-25a);
   }
 
   // newly added thing
-  [class*="newlyAddedHighlight-"] {
+  [class*="newlyAddedHighlight_"] {
     border: 1px solid $green;
 
-    ~ [class*="newlyAddedBadge-"] {
+    ~ [class*="newlyAddedBadge_"] {
       background: $green !important;
       color: $crust;
     }
@@ -247,7 +247,7 @@ section[class|="positionContainer"] {
 }
 
 // same as transparent above, but for stickers
-[class*="stickerInspected-"] [class|="inspectedIndicator"] {
+[class*="stickerInspected_"] [class|="inspectedIndicator"] {
   background-color: var(--brand-experiment-25a);
 }
 
@@ -260,16 +260,18 @@ section[class|="positionContainer"] {
     div[class*="footer"] {
     //     background-color: $mantle;
 
-    &[class*="footerSeparator-"] {
+    &[class*="footerSeparator_"] {
       box-shadow: inset 0 1px 0 $surface0;
       -webkit-box-shadow: inset 0 1px 0 $surface0;
     }
   }
 
   > 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);
   }
 
@@ -283,7 +285,7 @@ section[class|="positionContainer"] {
       color: $text;
     }
 
-    div[class*="footer-"] {
+    div[class*="footer_"] {
       color: $text !important;
       background-color: unset !important;
 
@@ -292,26 +294,26 @@ section[class|="positionContainer"] {
       }
     }
 
-    li[class*="active-"] {
-      a[class*="downloadButton-"] {
+    li[class*="active_"] {
+      a[class*="downloadButton_"] {
         transition: all 0.3s ease-in-out;
         color: $base;
       }
     }
   }
 
-  &[class*="profileColors-"] {
-    [class*="userTagUsernameBase-"],
-    [class*="discrimBase-"],
-    [class*="title-"],
-    [class*="roles-"],
-    [class*="defaultColor-"],
-    [class*="markup-"],
-    [class*="activityUserPopoutV2-"] *,
-    [class*="customStatus-"],
-    [class*="section-"],
-    [class*="additionalActionsIcon-"],
-    [class*="overlayBackground-"] * {
+  &[class*="profileColors_"] {
+    [class*="userTagUsernameBase_"],
+    [class*="discrimBase_"],
+    [class*="title_"],
+    [class*="roles_"],
+    [class*="defaultColor_"],
+    [class*="markup_"],
+    [class*="activityUserPopoutV2_"] *,
+    [class*="customStatus_"],
+    [class*="section_"],
+    [class*="additionalActionsIcon_"],
+    [class*="overlayBackground_"] * {
       --interactive-normal: #{$crust};
       --text-normal: #{$crust};
       --interactive-active: #{$crust};
@@ -347,7 +349,7 @@ div[class|="layerContainer"] {
         }
       }
 
-      div[class*="queryText-"] {
+      div[class*="queryText_"] {
         color: $overlay1;
         strong {
           color: $text;
@@ -380,7 +382,7 @@ div[class|="layerContainer"] {
           color: $crust;
         }
 
-        [class*="footerText-"] {
+        [class*="footerText_"] {
           color: $subtext1;
         }
       }
@@ -400,25 +402,25 @@ div[class|="layerContainer"] {
         }
       }
 
-      div[class*="message-"] {
+      div[class*="message_"] {
         background-color: $surface0;
       }
 
       &[aria-label="Activities"] {
-        div[class*="activityItem-"] {
+        div[class*="activityItem_"] {
           background-color: $crust;
 
-          div[class*="previewBadge-"] {
+          div[class*="previewBadge_"] {
             color: $crust;
           }
         }
-        div[class*="activityTag-"] {
+        div[class*="activityTag_"] {
           background-color: $surface0;
         }
       }
 
       &[aria-label="Manage Accounts"] {
-        div[class*="navRow-"] {
+        div[class*="navRow_"] {
           background-color: $mantle;
         }
       }
@@ -426,7 +428,7 @@ div[class|="layerContainer"] {
 
     // Checkbox toggles
     div[class|="checkbox"] {
-      &[class*="checked-"] {
+      &[class*="checked_"] {
         border: none;
 
         svg path {
@@ -441,9 +443,9 @@ div[class|="layerContainer"] {
     background-color: $mantle;
   }
 
-  div[class*="searchOption-"]::after,
-  div[class*="option-"]::after,
-  li[class*="option-"]::after {
+  div[class*="searchOption_"]::after,
+  div[class*="option_"]::after,
+  li[class*="option_"]::after {
     display: none;
   }
 
@@ -456,9 +458,9 @@ div[class|="layerContainer"] {
   }
 
   // branded and colored tooltips should have dark text
-  [class*="tooltipBrand-"],
-  [class*="tooltipRed-"],
-  [class*="tooltipGreen-"],
+  [class*="tooltipBrand_"],
+  [class*="tooltipRed_"],
+  [class*="tooltipGreen_"],
   [class*="tooltipYellow"] {
     color: $crust;
   }
@@ -476,19 +478,19 @@ div[class|="layerContainer"] {
 }
 
 // add account modal + cards
-form[class*="card-"] {
+form[class*="card_"] {
   background-color: $base;
 }
 
 // user info
-div[class*="userInfoSection-"] {
+div[class*="userInfoSection_"] {
   div[class|="connectedAccountContainer"] {
     background-color: adjust-color($surface0, $alpha: -0.55) !important;
   }
 }
 
 // Warning card popouts ex. admin change username/account deletion
-div[class*="cardWarning-"] div[class*="warning-"] {
+div[class*="cardWarning-"] div[class*="warning_"] {
   color: $crust;
 }
 
@@ -504,7 +506,7 @@ div[class*="cardWarning-"] div[class*="warning-"] {
 
   div[class|="tooltipContainer"] {
     label[class|="label"] {
-      &[class*="labelChecked-"] {
+      &[class*="labelChecked_"] {
         background: -webkit-gradient(
           linear,
           right top,
@@ -532,7 +534,7 @@ div[class*="cardWarning-"] div[class*="warning-"] {
   }
 }
 
-div[class*="keyboardShortcutsModal-"] {
+div[class*="keyboardShortcutsModal_"] {
   background-color: $mantle !important;
 
   div[class|="keybindShortcut"] span[class|="key"] {
@@ -549,7 +551,7 @@ div[class|="planOptionClickableContainer"] {
     fill: $crust !important;
   }
 
-  span[class*="planOptionDiscount-"] {
+  span[class*="planOptionDiscount_"] {
     color: $crust !important;
   }
 }
@@ -572,9 +574,9 @@ div[class|="planOptionClickableContainer"] {
   color: $crust !important;
 }
 
-div[class*="layerContainer-"] {
+div[class*="layerContainer_"] {
   div[class|="control"] {
-    div[class*="checked-"] {
+    div[class*="checked_"] {
       background-color: $green !important;
     }
     div[style*="background-color: rgb(114, 118, 125);"] {
@@ -583,18 +585,18 @@ div[class*="layerContainer-"] {
   }
 }
 
-div[class*="layerContainer-"] {
-  div[class*="guildPopout-"][role="dialog"] {
+div[class*="layerContainer_"] {
+  div[class*="guildPopout_"][role="dialog"] {
     background-color: $base;
 
-    div[class*="guildName-"] {
+    div[class*="guildName_"] {
       color: $text;
     }
   }
 }
 
-div[class*="layerContainer-"] [role*="dialog"] {
-  a[class*="downloadLink-"] {
+div[class*="layerContainer_"] [role*="dialog"] {
+  a[class*="downloadLink_"] {
     color: $overlay1 !important;
     opacity: 1;
     &:hover {
@@ -603,8 +605,8 @@ div[class*="layerContainer-"] [role*="dialog"] {
   }
 }
 
-div[class*="userPopoutOuter-"],
-div[class*="userProfileOuter-"] {
+div[class*="userPopoutOuter_"],
+div[class*="userProfileOuter_"] {
   div[aria-label="HypeSquad Bravery"] img {
     content: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m5.01502 4h13.97008c.1187 0 .215.09992.215.22305v9.97865c0 .0697-.0312.1343-.0837.1767l-6.985 5.5752c-.0389.0313-.0847.0464-.1314.0464-.0466 0-.0924-.0151-.1313-.0464l-6.985-5.5752c-.05252-.0424-.08365-.107-.08365-.1767v-9.97865c0-.12313.0963-.22305.21497-.22305zm7.82148 7.0972 4.1275-2.71296c.1039-.06863.2299.04542.1725.15644l-1.7114 3.36192c-.0403.0807.0182.1756.1079.1756h1.0246c.118 0 .1664.1504.0706.219l-4.6267 3.3175c-.0414.0303-.0978.0303-.1402 0l-4.6267-3.3175c-.0948-.0686-.04639-.219.07059-.219h1.02356c.09076 0 .14925-.0949.10791-.1756l-1.71132-3.36293c-.05648-.11001.06958-.22305.17345-.15543l4.12851 2.71296c.0716.0474.1291.112.1674.1887l.6293 1.2636c.0444.0888.1714.0888.2158 0l.6293-1.2636c.0383-.0767.0958-.1423.1674-.1887z' fill='%23#{str-slice(inspect($mauve), 2)}' fill-rule='evenodd'/%3E%3C/svg%3E");
   }
@@ -629,21 +631,21 @@ div[class*="userProfileOuter-"] {
   }
 }
 
-[class*="layerContainer-"] [id|="slate-toolbar"] {
+[class*="layerContainer-"] [id|="slate_toolbar"] {
   background-color: var(--background-floating);
 
-  [class*="buttons-"] [class*="icon-"] {
+  [class*="buttons-"] [class*="icon_"] {
     color: $text;
   }
 }
 
-[class*="layerContainer-"] div[id="sort-and-view"] {
+[class*="layerContainer-"] div[id="sort-and_view"] {
   div[id="sort-and-view-reset-all"] [style="color: var(--text-normal);"]:hover {
     color: $crust !important;
   }
 }
 
-[class|="layerContainer"] [class|="quickswitcher"] [class*="badge-"] {
+[class|="layerContainer"] [class|="quickswitcher"] [class*="badge_"] {
   color: $crust;
 }
 
diff --git a/src/components/_sidebar.scss b/src/components/_sidebar.scss
index 9892a07..45d2b5f 100644
--- a/src/components/_sidebar.scss
+++ b/src/components/_sidebar.scss
@@ -45,26 +45,26 @@ ul[aria-label$=" threads"] > li:nth-child(6n) {
 }
 
 // bot tag in sidebar
-[class|="botText"] {
+[class*="botText_"] {
   color: $crust;
   font-weight: 600;
 }
 
-svg[class|="botTagVerified"] {
+svg[class*="botTagVerified_"] {
   color: $crust;
 }
 
-div[class*="activePostCount-"] {
+div[class*="activePostCount_"] {
   background-color: $surface0;
   color: $text !important;
 }
 
-div[class*="newPostCount-"] {
+div[class*="newPostCount_"] {
   background-color: $text;
   color: $crust;
 }
 // Live icon
-div[class*="liveSmall-"] {
+div[class*="liveSmall_"] {
   background-color: $red !important;
   color: $crust;
 }
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
index cea0051..87fc155 100644
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@@ -293,8 +293,8 @@ html {
       color: $subtext0;
     }
 
-    [class*="tooltipBrand-"] {
-      [class*="tooltipText-"] {
+    [class*="tooltipBrand_"] {
+      [class*="tooltipText_"] {
         color: $crust;
       }
     }