Fix colors in ElementToggle

components/ElementToggle/index.scss

@@ -1,7 +1,8 @@
 .ToggleGroup {
   $height: 36px;
 
-  border: 1px solid rgba(0, 0, 0, 0.14);
+  background-color: var(--toggle-bg);
+  border: 1px solid var(--toggle-stroke);
   border-radius: $height;
   display: flex;
   height: $height;
@@ -9,10 +10,10 @@
   padding: calc($unit / 2);
 
   .ToggleItem {
-    background: $grey-100;
+    background: var(--toggle-bg);
     border: none;
     border-radius: 18px;
-    color: $grey-50;
+    color: var(--input-secondary);
     flex-grow: 1;
     font-size: $font-regular;
     padding: ($unit) $unit * 2;
@@ -32,33 +33,33 @@
       color: $grey-15;
 
       &.fire {
-        background: $fire-bg-20;
-        color: $fire-text-10;
+        background: var(--fire-bg);
+        color: var(--fire-text);
       }
 
       &.water {
-        background: $water-bg-20;
-        color: $water-text-10;
+        background: var(--water-bg);
+        color: var(--water-text);
       }
 
       &.earth {
-        background: $earth-bg-20;
-        color: $earth-text-10;
+        background: var(--earth-bg);
+        color: var(--earth-text);
       }
 
       &.wind {
-        background: $wind-bg-20;
-        color: $wind-text-10;
+        background: var(--wind-bg);
+        color: var(--wind-text);
       }
 
       &.dark {
-        background: $dark-bg-10;
-        color: $dark-text-10;
+        background: var(--dark-bg);
+        color: var(--dark-text);
       }
 
       &.light {
-        background: $light-bg-20;
-        color: $light-text-10;
+        background: var(--light-bg);
+        color: var(--light-text);
       }
     }
   }

styles/themes.scss

@@ -75,21 +75,39 @@
   --subaura-orange-text: #{$subaura--orange--text--light};
 
   // Light - Element Toggle
+  --toggle-bg: #{$toggle--bg--light};
   --toggle-stroke: #{$toggle--stroke--light};
 
   --grid-border-color: #{$grid--border--color--light};
 
+  --wind-bg: #{$wind-bg-10};
   --wind-hover-bg: #{$wind-bg-20};
+  --wind-text: #{$wind-text-10};
   --wind-hover-text: #{$wind-text-20};
+
+  --fire-bg: #{$fire-bg-10};
   --fire-hover-bg: #{$fire-bg-20};
+  --fire-text: #{$fire-text-10};
   --fire-hover-text: #{$fire-text-20};
+
+  --water-bg: #{$water-bg-10};
   --water-hover-bg: #{$water-bg-20};
+  --water-text: #{$water-text-10};
   --water-hover-text: #{$water-text-20};
+
+  --earth-bg: #{$earth-bg-10};
   --earth-hover-bg: #{$earth-bg-20};
+  --earth-text: #{$earth-text-10};
   --earth-hover-text: #{$earth-text-20};
+
+  --dark-bg: #{$dark-bg-10};
   --dark-hover-bg: #{$dark-bg-20};
+  --dark-text: #{$dark-text-10};
   --dark-hover-text: #{$dark-text-20};
+
+  --light-bg: #{$light-bg-10};
   --light-hover-bg: #{$light-bg-20};
+  --light-text: #{$light-text-10};
   --light-hover-text: #{$light-text-20};
 }
 
@@ -170,18 +188,39 @@
   --subaura-orange-text: #{$subaura--orange--text--dark};
 
   // Dark - Element Toggle
+  --toggle-bg: #{$toggle--bg--dark};
   --toggle-stroke: #{$toggle--stroke--dark};
 
   --grid-border-color: #{$grid--border--color--dark};
 
+  // Element theming
+  --wind-bg: #{$wind-bg-10};
   --wind-hover-bg: #{$wind-bg-00};
+  --wind-text: #{$wind-text-10};
   --wind-hover-text: #{$wind-text-00};
+
+  --fire-bg: #{$fire-bg-10};
   --fire-hover-bg: #{$fire-bg-00};
+  --fire-text: #{$fire-text-10};
   --fire-hover-text: #{$fire-text-00};
+
+  --water-bg: #{$water-bg-10};
+  --water-hover-bg: #{$water-bg-00};
+  --water-text: #{$water-text-10};
+  --water-hover-text: #{$water-text-00};
+
+  --earth-bg: #{$earth-bg-10};
   --earth-hover-bg: #{$earth-bg-00};
+  --earth-text: #{$earth-text-10};
   --earth-hover-text: #{$earth-text-00};
+
+  --dark-bg: #{$dark-bg-10};
   --dark-hover-bg: #{$dark-bg-00};
+  --dark-text: #{$dark-text-10};
   --dark-hover-text: #{$dark-text-00};
+
+  --light-bg: #{$light-bg-10};
   --light-hover-bg: #{$light-bg-00};
+  --light-text: #{$light-text-10};
   --light-hover-text: #{$light-text-00};
 }

styles/variables.scss

@@ -215,6 +215,9 @@ $subaura--orange--secondary--dark: $orange-10;
 $subaura--orange--text--dark: $orange-00;
 
 // Color Definitions: Element Toggle
+$toggle--bg--light: $grey-90;
+$toggle--bg--dark: $grey-15;
+
 $toggle--stroke--light: rgba(0, 0, 0, 0.14);
 $toggle--stroke--dark: rgba(0, 0, 0, 0.8);