fix: unhovered focused menu text + reply bar with threads + channels & roles hover + actually theme matchingPostsRow (#328)

* fix unhovered focused menu text

* fix reply bar with threads + channels & roles hover

* actually theme matchingPostsRow

* variable moment

* fix account switch hover + distinguish user popout message box

* fix nitro thought bubbles being themed over

* update attachedBars new name

Author: DokterKaj

src/components/_chat.scss

@@ -14,12 +14,8 @@
   }
 
   // reply bar
-  [class^="attachedBars_"] {
-    background: $crust;
-
-    [class^="replyBar_"] {
-        background: $crust;
-    }
+  [class^="attachedBars_"], [class^="stackedBars_"] {
+    --background-secondary: $crust;
   }
 
   // text input area
@@ -555,42 +551,26 @@ div[class*="giftCodeContainer"] [class*="tile"] {
 div[class*="chat_"] {
   div[class*="content_"][class*="container_"] {
     // customise
-    div[class^="profileCard_"] {
-      background-color: $surface0;
-      div[class^="role_"] {
-        background-color: $mantle;
-      }
-    }
-
-    div[class^="prompt_"] {
-      background-color: $surface0;
-      div[class^="optionButtonWrapper_"][class*="selected_"] {
-        background-color: $mantle;
-        border-color: $mantle;
-      }
-      div[class^="select_"] {
-        div[class$="control"] {
-          background-color: $mantle;
-          border-color: $mantle;
-          div[class^="selectValuePill_"] {
-            background-color: $surface0;
-          }
-        }
-        div[class$="menu"] {
-          background-color: $base;
-          border-color: $mantle;
-        }
-      }
-    }
+    --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;
     }
     div[class^="channelRow_"] {
-      background-color: $surface0;
       &:hover:not([class*="disabled_"]) {
-          background-color: $base;
+        background-color: $surface1;
+      }
+      button {
+        border-color: $overlay0;
+        &:hover {
+          background-color: $overlay0;
+        }
       }
     }
   }

src/components/_popouts.scss

@@ -2,90 +2,28 @@ 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;
 
-  [class*="colorDefault"] {
-    &[class*="colorBrand"] {
-      color: $brand;
-    }
-
-    &[class*="focused"] {
-      &:not([class*="colorDanger"]),
-      [class*="checkbox_"] {
-        color: var(--interactive-normal);
-      }
-    }
-
-    &[role="menuitem"]:not(
-        [class*="colorDanger"],
-        [id*="user-context-user-volume"]
-      ):hover {
-      &:not([class*="colorPremiumGradient"]) {
-        background: var(--background-accent);
-      }
-
-      color: $crust;
-
-      [class*="subtext"],
-      [class*="caret_"] {
-        color: $crust;
-      }
-    }
-
-    [class*="caret"] {
-      color: $text;
-    }
+  // make active items have dark text
+  [class*="colorDefault"]:active:not([class*="hideInteraction_"]) {
+    color: var(--background-floating);
 
-    &:hover [class*="caret"] {
-      color: $crust;
+    [class*="check_"] {
+      color: var(--interactive-normal);
     }
 
-    // make active items have dark text
-    &:active:not([class*="hideInteraction_"]) {
+    [class*="checkbox_"] {
       color: var(--background-floating);
-
-      [class*="check_"] {
-        color: var(--interactive-normal);
-      }
-
-      [class*="checkbox_"] {
-        color: var(--background-floating);
-      }
-
-      [class*="colorPremiumGradient"] {
-        background: linear-gradient(
-          270deg,
-          var(--premium-tier-2-pink-for-gradients) 0%,
-          var(--premium-tier-2-pink-for-gradients-2) 33.63%,
-          var(--premium-tier-2-purple-for-gradients) 100%
-        );
-      }
-    }
-  }
-
-  // Account switcher submenu
-  div[id^="account-switch-account"] {
-    &[class*="focused"] {
-      div[class*="userMenuUsername"] div {
-        color: $crust;
-      }
-
-      svg[class^="activeIcon"] {
-        circle {
-          fill: $blue;
-        }
-        g path {
-          fill: $crust;
-        }
-      }
     }
 
-    svg[class^="activeIcon"] {
-      circle {
-        fill: $crust;
-      }
-      g path {
-        fill: $blue;
-      }
+    [class*="colorPremiumGradient"] {
+      background: linear-gradient(
+        270deg,
+        var(--premium-tier-2-pink-for-gradients) 0%,
+        var(--premium-tier-2-pink-for-gradients-2) 33.63%,
+        var(--premium-tier-2-purple-for-gradients) 100%
+      );
     }
   }
 
@@ -351,14 +289,6 @@ section[class*="positionContainer_"] {
 }
 
 div[class^="layerContainer"] {
-  // right-click popups for guild, channels, and user
-  #guild-header-popout,
-  #guild-context,
-  div[id^="channel-context"],
-  div[id^="user-context"] {
-    background: $crust;
-  }
-
   > div[class*="layer"] {
     // search popout
     div[role="listbox"] {
@@ -653,14 +583,8 @@ div[class*="userProfileOuter_"] {
     > button:nth-child(2) {
     background: $brand;
   }
-}
-
-// Thought bubble
-div[class^="statusBubbleOuter"] {
-  &:before,
-  &:after,
-  span[class^="statusBubble"] {
-    background-color: $mantle;
+  div[class^="inner_"] {
+    --input-background: $mantle;
   }
 }
 

src/components/_variables.scss

@@ -73,7 +73,7 @@ html {
   --background-mobile-primary: #{$base};
   --background-mobile-secondary: #{$mantle};
   --bg-base-secondary: #{$mantle};
-  --bg-surface-raised: #{$base};
+  --bg-surface-raised: #{$mantle};
 
   --home-background: #{$base};
   --chat-background: #{$base};
@@ -273,7 +273,7 @@ html {
   --deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};
 
   --bg-mod-faint: #{$mantle};
-  --bg-mod-subtle: #{surface1};
+  --bg-mod-subtle: #{$surface1};
 
   --deprecated-store-bg: #{$base};
   --deprecated-quickswitcher-input-background: #{darken(