Update elemental colors

This makes elemental accent colors themed more consistently

components/ElementToggle/index.module.scss

@@ -47,32 +47,32 @@
 
       &.fire {
         background: var(--fire-bg);
-        color: var(--fire-hover-text);
+        color: var(--fire-text-bg);
       }
 
       &.water {
         background: var(--water-bg);
-        color: var(--water-hover-text);
+        color: var(--water-text-bg);
       }
 
       &.earth {
         background: var(--earth-bg);
-        color: var(--earth-hover-text);
+        color: var(--earth-text-bg);
       }
 
       &.wind {
         background: var(--wind-bg);
-        color: var(--wind-hover-text);
+        color: var(--wind-text-bg);
       }
 
       &.dark {
         background: var(--dark-bg);
-        color: var(--dark-hover-text);
+        color: var(--dark-text-bg);
       }
 
       &.light {
         background: var(--light-bg);
-        color: var(--light-hover-text);
+        color: var(--light-text-bg);
       }
     }
   }

styles/themes.scss

@@ -129,35 +129,36 @@
 
   --grid-border-color: #{$grid--border--color--light};
 
-  --wind-bg: #{$wind-bg-10};
+  // Light - Element theming
-  --wind-hover-bg: #{$wind-bg-20};
+  --wind-bg: #{$wind--bg--light};
-  --wind-text: #{$wind-text-10};
+  --wind-hover-bg: #{$wind--bg--hover--light};
-  --wind-hover-text: #{$wind-text-20};
+  --wind-text: #{$wind--text--light};
+  --wind-hover-text: #{$wind--text--hover--light};
 
-  --fire-bg: #{$fire-bg-10};
+  --fire-bg: #{$fire--bg--light};
-  --fire-hover-bg: #{$fire-bg-20};
+  --fire-hover-bg: #{$fire--bg--hover--light};
-  --fire-text: #{$fire-text-10};
+  --fire-text: #{$fire--text--light};
-  --fire-hover-text: #{$fire-text-20};
+  --fire-hover-text: #{$fire--text--hover--light};
 
-  --water-bg: #{$water-bg-10};
+  --water-bg: #{$water--bg--light};
-  --water-hover-bg: #{$water-bg-20};
+  --water-hover-bg: #{$water--bg--hover--light};
-  --water-text: #{$water-text-10};
+  --water-text: #{$water--text--light};
-  --water-hover-text: #{$water-text-20};
+  --water-hover-text: #{$water--text--hover--light};
 
-  --earth-bg: #{$earth-bg-10};
+  --earth-bg: #{$earth--bg--light};
-  --earth-hover-bg: #{$earth-bg-20};
+  --earth-hover-bg: #{$earth--bg--hover--light};
-  --earth-text: #{$earth-text-10};
+  --earth-text: #{$earth--text--light};
-  --earth-hover-text: #{$earth-text-20};
+  --earth-hover-text: #{$earth--text--hover--light};
 
-  --dark-bg: #{$dark-bg-10};
+  --dark-bg: #{$dark--bg--light};
-  --dark-hover-bg: #{$dark-bg-20};
+  --dark-hover-bg: #{$dark--bg--hover--light};
-  --dark-text: #{$dark-text-10};
+  --dark-text: #{$dark--text--light};
-  --dark-hover-text: #{$dark-text-20};
+  --dark-hover-text: #{$dark--text--hover--light};
 
-  --light-bg: #{$light-bg-10};
+  --light-bg: #{$light--bg--light};
-  --light-hover-bg: #{$light-bg-20};
+  --light-hover-bg: #{$light--bg--hover--light};
-  --light-text: #{$light-text-10};
+  --light-text: #{$light--text--light};
-  --light-hover-text: #{$light-text-20};
+  --light-hover-text: #{$light--text--hover--light};
 
   // Gradients
   --hero-gradient: #{$hero--gradient--light};
@@ -295,36 +296,42 @@
 
   --grid-border-color: #{$grid--border--color--dark};
 
-  // Element theming
+  // Dark - Element theming
-  --wind-bg: #{$wind-bg-10};
+  --wind-bg: #{$wind--bg--dark};
-  --wind-hover-bg: #{$wind-bg-00};
+  --wind-hover-bg: #{$wind--bg--hover--dark};
-  --wind-text: #{$wind-text-20};
+  --wind-text: #{$wind--text--dark};
-  --wind-hover-text: #{$wind-text-00};
+  --wind-text-bg: #{$wind--text--bg--dark};
+  --wind-hover-text: #{$wind--text--hover--dark};
 
-  --fire-bg: #{$fire-bg-10};
+  --fire-bg: #{$fire--bg--dark};
-  --fire-hover-bg: #{$fire-bg-00};
+  --fire-hover-bg: #{$fire--bg--hover--dark};
-  --fire-text: #{$fire-text-20};
+  --fire-text: #{$fire--text--dark};
-  --fire-hover-text: #{$fire-text-00};
+  --fire-text-bg: #{$fire--text--bg--dark};
+  --fire-hover-text: #{$fire--text--hover--dark};
 
-  --water-bg: #{$water-bg-10};
+  --water-bg: #{$water--bg--dark};
-  --water-hover-bg: #{$water-bg-00};
+  --water-hover-bg: #{$water--bg--hover--dark};
-  --water-text: #{$water-text-20};
+  --water-text: #{$water--text--dark};
-  --water-hover-text: #{$water-text-00};
+  --water-text-bg: #{$water--text--bg--dark};
+  --water-hover-text: #{$water--text--hover--dark};
 
-  --earth-bg: #{$earth-bg-10};
+  --earth-bg: #{$earth--bg--dark};
-  --earth-hover-bg: #{$earth-bg-00};
+  --earth-hover-bg: #{$earth--bg--hover--dark};
-  --earth-text: #{$earth-text-20};
+  --earth-text: #{$earth--text--dark};
-  --earth-hover-text: #{$earth-text-00};
+  --earth-text-bg: #{$earth--text--bg--dark};
+  --earth-hover-text: #{$earth--text--hover--dark};
 
-  --dark-bg: #{$dark-bg-10};
+  --dark-bg: #{$dark--bg--dark};
-  --dark-hover-bg: #{$dark-bg-00};
+  --dark-hover-bg: #{$dark--bg--hover--dark};
-  --dark-text: #{$dark-text-20};
+  --dark-text: #{$dark--text--dark};
-  --dark-hover-text: #{$dark-text-00};
+  --dark-text-bg: #{$dark--text--bg--dark};
+  --dark-hover-text: #{$dark--text--hover--dark};
 
-  --light-bg: #{$light-bg-10};
+  --light-bg: #{$light--bg--dark};
-  --light-hover-bg: #{$light-bg-00};
+  --light-hover-bg: #{$light--bg--hover--dark};
-  --light-text: #{$light-text-20};
+  --light-text: #{$light--text--dark};
-  --light-hover-text: #{$light-text-00};
+  --light-text-bg: #{$light--text--bg--dark};
+  --light-hover-text: #{$light--text--hover--dark};
 
   // Gradients
   --hero-gradient: #{$hero--gradient--dark};

styles/variables.scss

@@ -111,45 +111,51 @@ $selected--item--bg--light--hover: #ecbc4c6f;
 
 // Colors -- Elements
 $wind-text-00: #023e28;
-$wind-text-10: #006a43;
+$wind-text-10: #00492f;
-$wind-text-20: #1dc688;
+$wind-text-20: #008758;
+$wind-text-30: #1dc688;
 $wind-bg-00: #4cffbf55;
-$wind-bg-10: #00b551;
+$wind-bg-10: #3ee489;
 $wind-bg-20: #cdffed;
 
 $fire-text-00: #3f0202;
-$fire-text-10: #6e0000;
+$fire-text-10: #3e0000;
-$fire-text-20: #ec5c5c;
+$fire-text-20: #880000;
+$fire-text-30: #ec5c5c;
 $fire-bg-00: #ff4d4d55;
-$fire-bg-10: #ff4d4d;
+$fire-bg-10: #ff7f7f;
 $fire-bg-20: #ffcdcd;
 
 $water-text-00: #03263b;
 $water-text-10: #004b77;
-$water-text-20: #5cb7ec;
+$water-text-20: #00639c;
+$water-text-30: #5cb7ec;
 $water-bg-00: #6cc9ff55;
 $water-bg-10: #6cc9ff;
 $water-bg-20: #cdedff;
 
 $earth-text-00: #321602;
 $earth-text-10: #662a00;
-$earth-text-20: #ec985c;
+$earth-text-20: #913d01;
+$earth-text-30: #ec985c;
 $earth-bg-00: #fd9f5b55;
 $earth-bg-10: #fd9f5b;
 $earth-bg-20: #ffe2cd;
 
 $light-text-00: #433d02;
-$light-text-10: #716500;
+$light-text-10: #564d00;
-$light-text-20: #c5b20c;
+$light-text-20: #817400;
+$light-text-30: #c5b20c;
 $light-bg-00: #ffed4c55;
-$light-bg-10: #d9c50f;
+$light-bg-10: #e8d633;
 $light-bg-20: #fffacd;
 
 $dark-text-00: #260134;
-$dark-text-10: #560075;
+$dark-text-10: #4c0068;
-$dark-text-20: #c65cec;
+$dark-text-20: #6c0093;
+$dark-text-30: #c65cec;
 $dark-bg-00: #d565fb55;
-$dark-bg-10: #d565fb;
+$dark-bg-10: #de7bff;
 $dark-bg-20: #f2cdff;
 
 $page--bg--light: $grey-90;
@@ -361,6 +367,102 @@ $tag--bg--dark: $grey-00;
 $tag--text--light: $grey-100;
 $tag--text--dark: $grey-50;
 
+// Color Definitions: Element / Wind
+$wind--bg--light: $wind-bg-10;
+$wind--bg--dark: $wind-bg-10;
+
+$wind--bg--hover--light: $wind-bg-20;
+$wind--bg--hover--dark: $wind-bg-00;
+
+$wind--text--light: $wind-text-20;
+$wind--text--dark: $wind-bg-10;
+
+$wind--text--bg--light: $wind-text-10;
+$wind--text--bg--dark: $wind-text-10;
+
+$wind--text--hover--light: $wind-text-10;
+$wind--text--hover--dark: $wind-text-00;
+
+// Color Definitions: Element / Fire
+$fire--bg--light: $fire-bg-10;
+$fire--bg--dark: $fire-bg-10;
+
+$fire--bg--hover--light: $fire-bg-20;
+$fire--bg--hover--dark: $fire-bg-00;
+
+$fire--text--light: $fire-text-20;
+$fire--text--dark: $fire-bg-10;
+
+$fire--text--bg--light: $fire-text-10;
+$fire--text--bg--dark: $fire-text-10;
+
+$fire--text--hover--light: $fire-text-10;
+$fire--text--hover--dark: $fire-text-00;
+
+// Color Definitions: Element / Water
+$water--bg--light: $water-bg-10;
+$water--bg--dark: $water-bg-10;
+
+$water--bg--hover--light: $water-bg-20;
+$water--bg--hover--dark: $water-bg-00;
+
+$water--text--light: $water-text-20;
+$water--text--dark: $water-bg-10;
+
+$water--text--bg--light: $water-text-10;
+$water--text--bg--dark: $water-text-10;
+
+$water--text--hover--light: $water-text-10;
+$water--text--hover--dark: $water-text-00;
+
+// Color Definitions: Element / Earth
+$earth--bg--light: $earth-bg-10;
+$earth--bg--dark: $earth-bg-10;
+
+$earth--bg--hover--light: $earth-bg-20;
+$earth--bg--hover--dark: $earth-bg-00;
+
+$earth--text--light: $earth-text-20;
+$earth--text--dark: $earth-bg-10;
+
+$earth--text--bg--light: $earth-text-10;
+$earth--text--bg--dark: $earth-text-10;
+
+$earth--text--hover--light: $earth-text-10;
+$earth--text--hover--dark: $earth-text-00;
+
+// Color Definitions: Element / Dark
+$dark--bg--light: $dark-bg-10;
+$dark--bg--dark: $dark-bg-10;
+
+$dark--bg--hover--light: $dark-bg-20;
+$dark--bg--hover--dark: $dark-bg-00;
+
+$dark--text--light: $dark-text-20;
+$dark--text--dark: $dark-bg-10;
+
+$dark--text--bg--light: $dark-text-10;
+$dark--text--bg--dark: $dark-text-10;
+
+$dark--text--hover--light: $dark-text-10;
+$dark--text--hover--dark: $dark-text-00;
+
+// Color Definitions: Element / Light
+$light--bg--light: $light-bg-10;
+$light--bg--dark: $light-bg-10;
+
+$light--bg--hover--light: $light-bg-20;
+$light--bg--hover--dark: $light-bg-00;
+
+$light--text--light: $light-text-20;
+$light--text--dark: $light-bg-10;
+
+$light--text--bg--light: $light-text-10;
+$light--text--bg--dark: $light-text-10;
+
+$light--text--hover--light: $light-text-10;
+$light--text--hover--dark: $light-text-00;
+
 // Font-weight
 $normal: 400;
 $medium: 500;