From ffd6cdcee0266e72dbfa1ddc40ef08f366dd25aa Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 30 Dec 2023 07:27:27 -0800
Subject: [PATCH] Fix elemental coloring for hovercard elements

---
 components/common/Button/index.module.scss | 12 ++++++------
 styles/themes.scss                         | 13 +++++++++++++
 styles/variables.scss                      | 19 +++++++++++++------
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/components/common/Button/index.module.scss b/components/common/Button/index.module.scss
index 407af421..d010617f 100644
--- a/components/common/Button/index.module.scss
+++ b/components/common/Button/index.module.scss
@@ -412,7 +412,7 @@
 
   &.wind {
     background: var(--wind-bg);
-    color: var(--wind-text);
+    color: var(--wind-text-contrast);
 
     &:hover {
       background: var(--wind-bg-hover);
@@ -422,7 +422,7 @@
 
   &.fire {
     background: var(--fire-bg);
-    color: var(--fire-text);
+    color: var(--fire-text-contrast);
 
     &:hover {
       background: var(--fire-bg-hover);
@@ -432,7 +432,7 @@
 
   &.water {
     background: var(--water-bg);
-    color: var(--water-text);
+    color: var(--water-text-contrast);
 
     &:hover {
       background: var(--water-bg-hover);
@@ -442,7 +442,7 @@
 
   &.earth {
     background: var(--earth-bg);
-    color: var(--earth-text);
+    color: var(--earth-text-contrast);
 
     &:hover {
       background: var(--earth-bg-hover);
@@ -452,7 +452,7 @@
 
   &.dark {
     background: var(--dark-bg);
-    color: var(--dark-text);
+    color: var(--dark-text-contrast);
 
     &:hover {
       background: var(--dark-bg-hover);
@@ -462,7 +462,7 @@
 
   &.light {
     background: var(--light-bg);
-    color: var(--light-text);
+    color: var(--light-text-contrast);
 
     &:hover {
       background: var(--light-bg-hover);
diff --git a/styles/themes.scss b/styles/themes.scss
index afeaa451..d4785725 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -178,6 +178,7 @@
   --null-bg: #{$null--bg--light};
   --null-bg-hover: #{$null--bg--hover--light};
   --null-text: #{$null--text--light};
+  --null-text-contrast: #{$null--text--light};
   --null-raid-text: #{$null--text--raid--light};
   --null-text-hover: #{$null--text--hover--light};
   --null-shadow: #{$null--shadow--light};
@@ -196,6 +197,7 @@
   --fire-bg-hover: #{$fire--bg--hover--light};
   --fire-portrait-bg: #{$fire--portrait--bg--light};
   --fire-text: #{$fire--text--light};
+  --fire-text-contrast: #{$fire--text--light};
   --fire-raid-text: #{$fire--text--raid--light};
   --fire-text-hover: #{$fire--text--hover--light};
   --fire-shadow: #{$fire--shadow--light};
@@ -205,6 +207,7 @@
   --water-bg-hover: #{$water--bg--hover--light};
   --water-portrait-bg: #{$water--portrait--bg--light};
   --water-text: #{$water--text--light};
+  --water-text-contrast: #{$water--text--light};
   --water-raid-text: #{$water--text--raid--light};
   --water-text-hover: #{$water--text--hover--light};
   --water-shadow: #{$water--shadow--light};
@@ -214,6 +217,7 @@
   --earth-bg-hover: #{$earth--bg--hover--light};
   --earth-portrait-bg: #{$earth--portrait--bg--light};
   --earth-text: #{$earth--text--light};
+  --earth-text-contrast: #{$earth--text--light};
   --earth-raid-text: #{$earth--text--raid--light};
   --earth-text-hover: #{$earth--text--hover--light};
   --earth-shadow: #{$earth--shadow--light};
@@ -223,6 +227,7 @@
   --dark-bg-hover: #{$dark--bg--hover--light};
   --dark-portrait-bg: #{$dark--portrait--bg--light};
   --dark-text: #{$dark--text--light};
+  --dark-text-contrast: #{$dark--text--light};
   --dark-raid-text: #{$dark--text--raid--light};
   --dark-text-hover: #{$dark--text--hover--light};
   --dark-shadow: #{$dark--shadow--light};
@@ -232,6 +237,7 @@
   --light-bg-hover: #{$light--bg--hover--light};
   --light-portrait-bg: #{$light--portrait--bg--light};
   --light-text: #{$light--text--light};
+  --light-text-contrast: #{$light--text--light};
   --light-raid-text: #{$light--text--raid--light};
   --light-text-hover: #{$light--text--hover--light};
   --light-shadow: #{$light--shadow--light};
@@ -422,6 +428,7 @@
   --null-bg: #{$null--bg--dark};
   --null-bg-hover: #{$null--bg--hover--dark};
   --null-text: #{$null--text--dark};
+  --null-contrast-text: #{$null--text--contrast};
   --null-raid-text: #{$null--text--raid--dark};
   --null-text-hover: #{$null--text--hover--dark};
   --null-shadow: #{$null--shadow--dark};
@@ -432,6 +439,7 @@
   --wind-portrait-bg: #{$wind--portrait--bg--dark};
   --wind-text: #{$wind--text--dark};
   --wind-raid-text: #{$wind--text--raid--dark};
+  --wind-text-contrast: #{$wind--text--contrast};
   --wind-text-hover: #{$wind--text--hover--dark};
   --wind-shadow: #{$wind--shadow--dark};
   --wind-shadow-hover: #{$wind--shadow--dark--hover};
@@ -440,6 +448,7 @@
   --fire-bg-hover: #{$fire--bg--hover--dark};
   --fire-portrait-bg: #{$fire--portrait--bg--dark};
   --fire-text: #{$fire--text--dark};
+  --fire-text-contrast: #{$fire--text--contrast};
   --fire-raid-text: #{$fire--text--raid--dark};
   --fire-text-hover: #{$fire--text--hover--dark};
   --fire-shadow: #{$fire--shadow--dark};
@@ -449,6 +458,7 @@
   --water-bg-hover: #{$water--bg--hover--dark};
   --water-portrait-bg: #{$water--portrait--bg--dark};
   --water-text: #{$water--text--dark};
+  --water-text-contrast: #{$water--text--contrast};
   --water-raid-text: #{$water--text--raid--dark};
   --water-text-hover: #{$water--text--hover--dark};
   --water-shadow: #{$water--shadow--dark};
@@ -458,6 +468,7 @@
   --earth-bg-hover: #{$earth--bg--hover--dark};
   --earth-portrait-bg: #{$earth--portrait--bg--dark};
   --earth-text: #{$earth--text--dark};
+  --earth-text-contrast: #{$earth--text--contrast};
   --earth-raid-text: #{$earth--text--raid--dark};
   --earth-text-hover: #{$earth--text--hover--dark};
   --earth-shadow: #{$earth--shadow--dark};
@@ -467,6 +478,7 @@
   --dark-bg-hover: #{$dark--bg--hover--dark};
   --dark-portrait-bg: #{$dark--portrait--bg--dark};
   --dark-text: #{$dark--text--dark};
+  --dark-text-contrast: #{$dark--text--contrast};
   --dark-raid-text: #{$dark--text--raid--dark};
   --dark-text-hover: #{$dark--text--hover--dark};
   --dark-shadow: #{$dark--shadow--dark};
@@ -476,6 +488,7 @@
   --light-bg-hover: #{$light--bg--hover--dark};
   --light-portrait-bg: #{$light--portrait--bg--dark};
   --light-text: #{$light--text--dark};
+  --light-text-contrast: #{$light--text--contrast};
   --light-raid-text: #{$light--text--raid--dark};
   --light-text-hover: #{$light--text--hover--dark};
   --light-shadow: #{$light--shadow--dark};
diff --git a/styles/variables.scss b/styles/variables.scss
index 80b7e2b7..e2d1c2de 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -485,7 +485,8 @@ $wind--bg--hover--light: $wind-bg-00;
 $wind--bg--hover--dark: $wind-bg-00;
 
 $wind--text--light: $wind-text-20;
-$wind--text--dark: $wind-text-20;
+$wind--text--dark: $wind-text-30;
+$wind--text--contrast: $wind-text-10;
 
 $wind--text--raid--light: $wind-text-20;
 $wind--text--raid--dark: $wind-bg-10;
@@ -508,6 +509,7 @@ $null--bg--hover--dark: $grey-30;
 
 $null--text--light: $grey-40;
 $null--text--dark: $grey-90;
+$null--text--contrast: $grey-90;
 
 $null--text--raid--light: $grey-40;
 $null--text--raid--dark: $grey-90;
@@ -532,7 +534,8 @@ $fire--bg--hover--light: $fire-bg-00;
 $fire--bg--hover--dark: $fire-bg-00;
 
 $fire--text--light: $fire-text-20;
-$fire--text--dark: $fire-text-10;
+$fire--text--dark: $fire-text-30;
+$fire--text--contrast: $fire-text-10;
 
 $fire--text--raid--light: $fire-text-20;
 $fire--text--raid--dark: $fire-bg-10;
@@ -557,7 +560,8 @@ $water--bg--hover--light: $water-bg-00;
 $water--bg--hover--dark: $water-bg-00;
 
 $water--text--light: $water-text-20;
-$water--text--dark: $water-text-10;
+$water--text--dark: $water-text-30;
+$water--text--contrast: $water-text-10;
 
 $water--text--raid--light: $water-text-20;
 $water--text--raid--dark: $water-bg-10;
@@ -582,7 +586,8 @@ $earth--bg--hover--light: $earth-bg-00;
 $earth--bg--hover--dark: $earth-bg-00;
 
 $earth--text--light: $earth-text-20;
-$earth--text--dark: $earth-text-10;
+$earth--text--dark: $earth-text-30;
+$earth--text--contrast: $earth-text-10;
 
 $earth--text--raid--light: $earth-text-20;
 $earth--text--raid--dark: $earth-bg-10;
@@ -607,7 +612,8 @@ $dark--bg--hover--light: $dark-bg-00;
 $dark--bg--hover--dark: $dark-bg-00;
 
 $dark--text--light: $dark-text-20;
-$dark--text--dark: $dark-text-10;
+$dark--text--dark: $dark-text-30;
+$dark--text--contrast: $dark-text-10;
 
 $dark--text--raid--light: $dark-text-20;
 $dark--text--raid--dark: $dark-bg-10;
@@ -632,7 +638,8 @@ $light--bg--hover--light: $light-bg-00;
 $light--bg--hover--dark: $light-bg-00;
 
 $light--text--light: $light-text-20;
-$light--text--dark: $light-text-10;
+$light--text--dark: $light-text-30;
+$light--text--contrast: $light-text-10;
 
 $light--text--raid--light: $light-text-20;
 $light--text--raid--dark: $light-bg-10;