update vars and fix typo (#404)

* update vars and fix typo

--bg-mod-* and --text-normal vars were dropped. despite this they are still in use by client mods so keep to prevent breakage

also fix a typo

* Update _dark.scss

* message box

Author: Covkie

src/components/_sidebar.scss

@@ -18,7 +18,7 @@
   --interactive-muted: var(--thread-muted, #{mix($colour, $crust, 50%)});
 }
 
-@mixin raindbow-thread($n, $colour) {
+@mixin rainbow-thread($n, $colour) {
   & > li:nth-of-type(6n + #{$n}) {
     @include rainbow-vars($colour);
   }
@@ -56,12 +56,12 @@ ul[class^="content_"] > li[class^="container_"] > ul[role="group"] {
     );
   }
 
-  @include raindbow-thread(1, $red);
-  @include raindbow-thread(2, $peach);
-  @include raindbow-thread(3, $yellow);
-  @include raindbow-thread(4, $green);
-  @include raindbow-thread(5, $blue);
-  @include raindbow-thread(6, $mauve);
+  @include rainbow-thread(1, $red);
+  @include rainbow-thread(2, $peach);
+  @include rainbow-thread(3, $yellow);
+  @include rainbow-thread(4, $green);
+  @include rainbow-thread(5, $blue);
+  @include rainbow-thread(6, $mauve);
 
   // A singular thread is brand coloured
   & li:only-of-type {

src/components/_variables.scss

@@ -53,7 +53,7 @@
   --header-secondary: #{$subtext0} !important;
   --__header-bar-background: #{$mantle} !important;
 
-  --text-normal: #{$text} !important;
+  --text-normal: #{$text} !important; // TODO: LEGACY
   --text-default: #{$text};
   --text-muted: #{$subtext0} !important;
   --text-link: #{$blue} !important;
@@ -117,6 +117,7 @@
   --home-background: #{$base};
 
   --chat-background: #{$base};
+  --chat-background-default: #{$base};
   --chat-border: #{$crust};
   --chat-input-container-background: #{$base};
   --chat-text-muted: #{$subtext0};
@@ -131,10 +132,10 @@
   --background-modifier-selected: #{adjust-color($overlay0, $alpha: -0.8)};
   --background-modifier-accent: #{adjust-color($text, $alpha: -0.74)};
   --background-modifier-active: #{adjust-color($text, $alpha: -0.83)};
-  --background-mod-faint: #{$surface2};
-  --background-mod-normal: #{$surface1};
-  --background-mod-strong: #{$base};
-  --background-mod-subtle: #{$surface0};
+  --background-mod-faint: #{adjust-color($surface2, $alpha: -0.95)};
+  --background-mod-normal: #{adjust-color($surface2, $alpha: -0.85)};
+  --background-mod-subtle: #{adjust-color($surface2, $alpha: -0.75)} !important;
+  --background-mod-strong: #{adjust-color($surface2, $alpha: -0.55)} !important;
   --custom-channel-members-bg: #{$mantle};
   --custom-status-bubble-background: #{$crust} !important;
   --custom-status-bubble-background-color: #{$mantle} !important;
@@ -377,6 +378,7 @@
   --deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
   --deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};
 
+  // TODO: LEGACY
   --bg-mod-faint: #{adjust-color($surface2, $alpha: -0.9)};
   --bg-mod-subtle: #{adjust-color($surface2, $alpha: -0.75)} !important;
   --bg-mod-strong: #{adjust-color($surface2, $alpha: -0.55)} !important;

src/components/tweaks/_dark.scss

@@ -53,7 +53,19 @@ div[class^="friendRequestContainer_"] > button[class*="colorGreen_"] {
 }
 
 .vcd-screen-picker-option-radio[data-checked="true"] {
-  --text-normal: #{$crust};
+  --text-default: #{$crust};
+}
+button {
+  &[class*="selectorButtonSelected_"],
+  &:hover {
+    div[class*="selectorText_"] {
+      color: #{$crust};
+    }
+  }
+}
+
+svg[class^="selectedIcon_"] > circle[fill="white"] {
+  fill: #{$crust};
 }
 
 // Channels & Roles Browse channels count