From cdc82e534864b59789dc9ce3548f5340b9a6c322 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Dec 2022 09:45:58 -0800
Subject: [PATCH] Rename element colors to use numeric scale

---
 components/AccountModal/index.scss   | 12 +++++-----
 components/Button/index.scss         | 36 ++++++++++++++--------------
 components/ElementToggle/index.scss  | 24 +++++++++----------
 components/JobSkillResult/index.scss | 20 ++++++++--------
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss
index 9e3d3f18..4cce8aad 100644
--- a/components/AccountModal/index.scss
+++ b/components/AccountModal/index.scss
@@ -118,27 +118,27 @@
         }
 
         &.fire {
-          background: $fire-bg-light;
+          background: $fire-bg-20;
         }
 
         &.water {
-          background: $water-bg-light;
+          background: $water-bg-20;
         }
 
         &.wind {
-          background: $wind-bg-light;
+          background: $wind-bg-20;
         }
 
         &.earth {
-          background: $earth-bg-light;
+          background: $earth-bg-20;
         }
 
         &.dark {
-          background: $dark-bg-light;
+          background: $dark-bg-10;
         }
 
         &.light {
-          background: $light-bg-light;
+          background: $light-bg-20;
         }
       }
     }
diff --git a/components/Button/index.scss b/components/Button/index.scss
index f562cdd6..275d92ee 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -152,56 +152,56 @@
   }
 
   &.wind {
-    background: $wind-bg-light;
-    color: $wind-text-dark;
+    background: $wind-bg-20;
+    color: $wind-text-10;
 
     &:hover {
-      background: darken($wind-bg-light, 10);
+      background: darken($wind-bg-20, 10);
     }
   }
 
   &.fire {
-    background: $fire-bg-light;
-    color: $fire-text-dark;
+    background: $fire-bg-20;
+    color: $fire-text-10;
 
     &:hover {
-      background: darken($fire-bg-light, 10);
+      background: darken($fire-bg-20, 10);
     }
   }
 
   &.water {
-    background: $water-bg-light;
-    color: $water-text-dark;
+    background: $water-bg-20;
+    color: $water-text-10;
 
     &:hover {
-      background: darken($water-bg-light, 10);
+      background: darken($water-bg-20, 10);
     }
   }
 
   &.earth {
-    background: $earth-bg-light;
-    color: $earth-text-dark;
+    background: $earth-bg-20;
+    color: $earth-text-10;
 
     &:hover {
-      background: darken($earth-bg-light, 10);
+      background: darken($earth-bg-20, 10);
     }
   }
 
   &.dark {
-    background: $dark-bg-light;
-    color: $dark-text-dark;
+    background: $dark-bg-10;
+    color: $dark-text-10;
 
     &:hover {
-      background: darken($dark-bg-light, 10);
+      background: darken($dark-bg-10, 10);
     }
   }
 
   &.light {
-    background: $light-bg-light;
-    color: $light-text-dark;
+    background: $light-bg-20;
+    color: $light-text-10;
 
     &:hover {
-      background: darken($light-bg-light, 10);
+      background: darken($light-bg-20, 10);
     }
   }
 
diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.scss
index 74248050..9821af32 100644
--- a/components/ElementToggle/index.scss
+++ b/components/ElementToggle/index.scss
@@ -32,33 +32,33 @@
       color: $grey-10;
 
       &.fire {
-        background: $fire-bg-light;
-        color: $fire-text-dark;
+        background: $fire-bg-20;
+        color: $fire-text-10;
       }
 
       &.water {
-        background: $water-bg-light;
-        color: $water-text-dark;
+        background: $water-bg-20;
+        color: $water-text-10;
       }
 
       &.earth {
-        background: $earth-bg-light;
-        color: $earth-text-dark;
+        background: $earth-bg-20;
+        color: $earth-text-10;
       }
 
       &.wind {
-        background: $wind-bg-light;
-        color: $wind-text-dark;
+        background: $wind-bg-20;
+        color: $wind-text-10;
       }
 
       &.dark {
-        background: $dark-bg-light;
-        color: $dark-text-dark;
+        background: $dark-bg-10;
+        color: $dark-text-10;
       }
 
       &.light {
-        background: $light-bg-light;
-        color: $light-text-dark;
+        background: $light-bg-20;
+        color: $light-text-10;
       }
     }
   }
diff --git a/components/JobSkillResult/index.scss b/components/JobSkillResult/index.scss
index e1b46c92..3dd464c8 100644
--- a/components/JobSkillResult/index.scss
+++ b/components/JobSkillResult/index.scss
@@ -30,28 +30,28 @@
       padding: calc($unit / 2) $unit;
 
       &.buffing {
-        background-color: $light-bg-dark;
-        color: $light-text-dark;
+        background-color: $light-bg-10;
+        color: $light-text-10;
       }
 
       &.debuffing {
-        background-color: $water-bg-dark;
-        color: $water-text-dark;
+        background-color: $water-bg-10;
+        color: $water-text-10;
       }
 
       &.healing {
-        background-color: $wind-bg-dark;
-        color: $wind-text-dark;
+        background-color: $wind-bg-10;
+        color: $wind-text-10;
       }
 
       &.damaging {
-        background-color: $fire-bg-dark;
-        color: $fire-text-dark;
+        background-color: $fire-bg-10;
+        color: $fire-text-10;
       }
 
       &.field {
-        background-color: $dark-bg-dark;
-        color: $dark-text-dark;
+        background-color: $dark-bg-20;
+        color: $dark-text-10;
       }
     }