Fix more raid color stuff

This should be it for real this time

components/common/Button/index.module.scss

@@ -11,6 +11,7 @@
   gap: 6px;
   transition: 0.18s opacity ease-in-out;
   user-select: none;
+  transition: background-color 0.18s ease-out, color 0.18s ease-out;
 
   .text {
     align-items: center;
@@ -396,22 +397,13 @@
     }
   }
 
-  &.null {
-    background: $grey-90;
-    color: $grey-55;
-
-    &:hover {
-      background: $grey-70;
-      color: $grey-15;
-    }
-  }
-
   &.wind {
     background: var(--wind-bg);
     color: var(--wind-text);
 
     &:hover {
       background: var(--wind-bg-hover);
+      color: var(--wind-text-hover);
     }
   }
 
@@ -421,6 +413,7 @@
 
     &:hover {
       background: var(--fire-bg-hover);
+      color: var(--fire-text-hover);
     }
   }
 
@@ -430,6 +423,7 @@
 
     &:hover {
       background: var(--water-bg-hover);
+      color: var(--water-text-hover);
     }
   }
 
@@ -439,6 +433,7 @@
 
     &:hover {
       background: var(--earth-bg-hover);
+      color: var(--earth-text-hover);
     }
   }
 
@@ -448,6 +443,7 @@
 
     &:hover {
       background: var(--dark-bg-hover);
+      color: var(--dark-text-hover);
     }
   }
 
@@ -457,6 +453,7 @@
 
     &:hover {
       background: var(--light-bg-hover);
+      color: var(--light-text-hover);
     }
   }
 }

components/raids/RaidCombobox/index.module.scss

@@ -192,25 +192,25 @@
 }
 
 .raid.wind {
-  color: var(--wind-text);
+  color: var(--wind-raid-text);
 }
 
 .raid.fire {
-  color: var(--fire-text);
+  color: var(--fire-raid-text);
 }
 
 .raid.water {
-  color: var(--water-text);
+  color: var(--water-raid-text);
 }
 
 .raid.earth {
-  color: var(--earth-text);
+  color: var(--earth-raid-text);
 }
 
 .raid.dark {
-  color: var(--dark-text);
+  color: var(--dark-raid-text);
 }
 
 .raid.light {
-  color: var(--light-text);
+  color: var(--light-raid-text);
 }

styles/themes.scss

@@ -131,34 +131,40 @@
 
   // Light - Element theming
   --wind-bg: #{$wind--bg--light};
-  --wind-hover-bg: #{$wind--bg--hover--light};
+  --wind-bg-hover: #{$wind--bg--hover--light};
   --wind-text: #{$wind--text--light};
-  --wind-hover-text: #{$wind--text--hover--light};
+  --wind-raid-text: #{$wind--text--raid--light};
+  --wind-text-hover: #{$wind--text--hover--light};
 
   --fire-bg: #{$fire--bg--light};
-  --fire-hover-bg: #{$fire--bg--hover--light};
+  --fire-bg-hover: #{$fire--bg--hover--light};
   --fire-text: #{$fire--text--light};
-  --fire-hover-text: #{$fire--text--hover--light};
+  --fire-raid-text: #{$fire--text--raid--light};
+  --fire-text-hover: #{$fire--text--hover--light};
 
   --water-bg: #{$water--bg--light};
-  --water-hover-bg: #{$water--bg--hover--light};
+  --water-bg-hover: #{$water--bg--hover--light};
   --water-text: #{$water--text--light};
-  --water-hover-text: #{$water--text--hover--light};
+  --water-raid-text: #{$water--text--raid--light};
+  --water-text-hover: #{$water--text--hover--light};
 
   --earth-bg: #{$earth--bg--light};
-  --earth-hover-bg: #{$earth--bg--hover--light};
+  --earth-bg-hover: #{$earth--bg--hover--light};
   --earth-text: #{$earth--text--light};
-  --earth-hover-text: #{$earth--text--hover--light};
+  --earth-raid-text: #{$earth--text--raid--light};
+  --earth-text-hover: #{$earth--text--hover--light};
 
   --dark-bg: #{$dark--bg--light};
-  --dark-hover-bg: #{$dark--bg--hover--light};
+  --dark-bg-hover: #{$dark--bg--hover--light};
   --dark-text: #{$dark--text--light};
-  --dark-hover-text: #{$dark--text--hover--light};
+  --dark-raid-text: #{$dark--text--raid--light};
+  --dark-text-hover: #{$dark--text--hover--light};
 
   --light-bg: #{$light--bg--light};
-  --light-hover-bg: #{$light--bg--hover--light};
+  --light-bg-hover: #{$light--bg--hover--light};
   --light-text: #{$light--text--light};
-  --light-hover-text: #{$light--text--hover--light};
+  --light-raid-text: #{$light--text--raid--light};
+  --light-text-hover: #{$light--text--hover--light};
 
   // Gradients
   --hero-gradient: #{$hero--gradient--light};
@@ -298,40 +304,40 @@
 
   // Dark - Element theming
   --wind-bg: #{$wind--bg--dark};
-  --wind-hover-bg: #{$wind--bg--hover--dark};
+  --wind-bg-hover: #{$wind--bg--hover--dark};
   --wind-text: #{$wind--text--dark};
-  --wind-text-bg: #{$wind--text--bg--dark};
+  --wind-raid-text: #{$wind--text--raid--dark};
-  --wind-hover-text: #{$wind--text--hover--dark};
+  --wind-text-hover: #{$wind--text--hover--dark};
 
   --fire-bg: #{$fire--bg--dark};
-  --fire-hover-bg: #{$fire--bg--hover--dark};
+  --fire-bg-hover: #{$fire--bg--hover--dark};
   --fire-text: #{$fire--text--dark};
-  --fire-text-bg: #{$fire--text--bg--dark};
+  --fire-raid-text: #{$fire--text--raid--dark};
-  --fire-hover-text: #{$fire--text--hover--dark};
+  --fire-text-hover: #{$fire--text--hover--dark};
 
   --water-bg: #{$water--bg--dark};
-  --water-hover-bg: #{$water--bg--hover--dark};
+  --water-bg-hover: #{$water--bg--hover--dark};
   --water-text: #{$water--text--dark};
-  --water-text-bg: #{$water--text--bg--dark};
+  --water-raid-text: #{$water--text--raid--dark};
-  --water-hover-text: #{$water--text--hover--dark};
+  --water-text-hover: #{$water--text--hover--dark};
 
   --earth-bg: #{$earth--bg--dark};
-  --earth-hover-bg: #{$earth--bg--hover--dark};
+  --earth-bg-hover: #{$earth--bg--hover--dark};
   --earth-text: #{$earth--text--dark};
-  --earth-text-bg: #{$earth--text--bg--dark};
+  --earth-raid-text: #{$earth--text--raid--dark};
-  --earth-hover-text: #{$earth--text--hover--dark};
+  --earth-text-hover: #{$earth--text--hover--dark};
 
   --dark-bg: #{$dark--bg--dark};
-  --dark-hover-bg: #{$dark--bg--hover--dark};
+  --dark-bg-hover: #{$dark--bg--hover--dark};
   --dark-text: #{$dark--text--dark};
-  --dark-text-bg: #{$dark--text--bg--dark};
+  --dark-raid-text: #{$dark--text--raid--dark};
-  --dark-hover-text: #{$dark--text--hover--dark};
+  --dark-text-hover: #{$dark--text--hover--dark};
 
   --light-bg: #{$light--bg--dark};
-  --light-hover-bg: #{$light--bg--hover--dark};
+  --light-bg-hover: #{$light--bg--hover--dark};
   --light-text: #{$light--text--dark};
-  --light-text-bg: #{$light--text--bg--dark};
+  --light-raid-text: #{$light--text--raid--dark};
-  --light-hover-text: #{$light--text--hover--dark};
+  --light-text-hover: #{$light--text--hover--dark};
 
   // Gradients
   --hero-gradient: #{$hero--gradient--dark};

styles/variables.scss

@@ -112,25 +112,25 @@ $selected--item--bg--light--hover: #ecbc4c6f;
 // Colors -- Elements
 $wind-text-00: #023e28;
 $wind-text-10: #00492f;
-$wind-text-20: #008758;
+$wind-text-20: #006a45;
 $wind-text-30: #1dc688;
-$wind-bg-00: #4cffbf55;
+$wind-bg-00: #30c372;
 $wind-bg-10: #3ee489;
 $wind-bg-20: #cdffed;
 
 $fire-text-00: #3f0202;
 $fire-text-10: #3e0000;
-$fire-text-20: #880000;
+$fire-text-20: #700101;
 $fire-text-30: #ec5c5c;
-$fire-bg-00: #ff4d4d55;
+$fire-bg-00: #e05555;
-$fire-bg-10: #ff7f7f;
+$fire-bg-10: #fa6d6d;
 $fire-bg-20: #ffcdcd;
 
 $water-text-00: #03263b;
 $water-text-10: #004b77;
 $water-text-20: #00639c;
 $water-text-30: #5cb7ec;
-$water-bg-00: #6cc9ff55;
+$water-bg-00: #4aabe3;
 $water-bg-10: #6cc9ff;
 $water-bg-20: #cdedff;
 
@@ -138,23 +138,23 @@ $earth-text-00: #321602;
 $earth-text-10: #662a00;
 $earth-text-20: #913d01;
 $earth-text-30: #ec985c;
-$earth-bg-00: #fd9f5b55;
+$earth-bg-00: #df8849;
 $earth-bg-10: #fd9f5b;
 $earth-bg-20: #ffe2cd;
 
-$light-text-00: #433d02;
+$light-text-00: #3d3700;
-$light-text-10: #564d00;
+$light-text-10: #4b4300;
-$light-text-20: #817400;
+$light-text-20: #706500;
 $light-text-30: #c5b20c;
-$light-bg-00: #ffed4c55;
+$light-bg-00: #cab91c;
 $light-bg-10: #e8d633;
 $light-bg-20: #fffacd;
 
-$dark-text-00: #260134;
+$dark-text-00: #23002f;
-$dark-text-10: #4c0068;
+$dark-text-10: #3e0054;
-$dark-text-20: #6c0093;
+$dark-text-20: #5b017b;
 $dark-text-30: #c65cec;
-$dark-bg-00: #d565fb55;
+$dark-bg-00: #ba63d8;
 $dark-bg-10: #de7bff;
 $dark-bg-20: #f2cdff;
 
@@ -371,96 +371,96 @@ $tag--text--dark: $grey-50;
 $wind--bg--light: $wind-bg-10;
 $wind--bg--dark: $wind-bg-10;
 
-$wind--bg--hover--light: $wind-bg-20;
+$wind--bg--hover--light: $wind-bg-00;
 $wind--bg--hover--dark: $wind-bg-00;
 
 $wind--text--light: $wind-text-20;
-$wind--text--dark: $wind-bg-10;
+$wind--text--dark: $wind-text-20;
 
-$wind--text--bg--light: $wind-text-10;
+$wind--text--raid--light: $wind-text-20;
-$wind--text--bg--dark: $wind-text-10;
+$wind--text--raid--dark: $wind-bg-10;
 
-$wind--text--hover--light: $wind-text-10;
+$wind--text--hover--light: $wind-text-00;
 $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--light: $fire-bg-00;
 $fire--bg--hover--dark: $fire-bg-00;
 
 $fire--text--light: $fire-text-20;
-$fire--text--dark: $fire-bg-10;
+$fire--text--dark: $fire-text-10;
 
-$fire--text--bg--light: $fire-text-10;
+$fire--text--raid--light: $fire-text-20;
-$fire--text--bg--dark: $fire-text-10;
+$fire--text--raid--dark: $fire-bg-10;
 
-$fire--text--hover--light: $fire-text-10;
+$fire--text--hover--light: $fire-text-00;
 $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--light: $water-bg-00;
 $water--bg--hover--dark: $water-bg-00;
 
 $water--text--light: $water-text-20;
-$water--text--dark: $water-bg-10;
+$water--text--dark: $water-text-10;
 
-$water--text--bg--light: $water-text-10;
+$water--text--raid--light: $water-text-20;
-$water--text--bg--dark: $water-text-10;
+$water--text--raid--dark: $water-bg-10;
 
-$water--text--hover--light: $water-text-10;
+$water--text--hover--light: $water-text-00;
 $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--light: $earth-bg-00;
 $earth--bg--hover--dark: $earth-bg-00;
 
 $earth--text--light: $earth-text-20;
-$earth--text--dark: $earth-bg-10;
+$earth--text--dark: $earth-text-10;
 
-$earth--text--bg--light: $earth-text-10;
+$earth--text--raid--light: $earth-text-20;
-$earth--text--bg--dark: $earth-text-10;
+$earth--text--raid--dark: $earth-bg-10;
 
-$earth--text--hover--light: $earth-text-10;
+$earth--text--hover--light: $earth-text-00;
 $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--light: $dark-bg-00;
 $dark--bg--hover--dark: $dark-bg-00;
 
 $dark--text--light: $dark-text-20;
-$dark--text--dark: $dark-bg-10;
+$dark--text--dark: $dark-text-10;
 
-$dark--text--bg--light: $dark-text-10;
+$dark--text--raid--light: $dark-text-20;
-$dark--text--bg--dark: $dark-text-10;
+$dark--text--raid--dark: $dark-bg-10;
 
-$dark--text--hover--light: $dark-text-10;
+$dark--text--hover--light: $dark-text-00;
 $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--light: $light-bg-00;
 $light--bg--hover--dark: $light-bg-00;
 
 $light--text--light: $light-text-20;
-$light--text--dark: $light-bg-10;
+$light--text--dark: $light-text-10;
 
-$light--text--bg--light: $light-text-10;
+$light--text--raid--light: $light-text-20;
-$light--text--bg--dark: $light-text-10;
+$light--text--raid--dark: $light-bg-10;
 
-$light--text--hover--light: $light-text-10;
+$light--text--hover--light: $light-text-00;
 $light--text--hover--dark: $light-text-00;
 
 // Font-weight