From 4cf87e8fdb1150c74b5cc3305cc8d5f5461277ca Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 3 Jul 2023 21:03:32 -0700
Subject: [PATCH] Use new element variables

* h5 in globals
* Buttons
---
 components/common/Button/index.module.scss | 36 +++++++++++-----------
 styles/globals.scss                        | 12 ++++----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/components/common/Button/index.module.scss b/components/common/Button/index.module.scss
index f214d29f..4f1ad567 100644
--- a/components/common/Button/index.module.scss
+++ b/components/common/Button/index.module.scss
@@ -407,56 +407,56 @@
   }
 
   &.wind {
-    background: $wind-bg-20;
-    color: $wind-text-10;
+    background: var(--wind-bg);
+    color: var(--wind-text);
 
     &:hover {
-      background: darken($wind-bg-20, 10);
+      background: var(--wind-bg-hover);
     }
   }
 
   &.fire {
-    background: $fire-bg-20;
-    color: $fire-text-10;
+    background: var(--fire-bg);
+    color: var(--fire-text);
 
     &:hover {
-      background: darken($fire-bg-20, 10);
+      background: var(--fire-bg-hover);
     }
   }
 
   &.water {
-    background: $water-bg-20;
-    color: $water-text-10;
+    background: var(--water-bg);
+    color: var(--water-text);
 
     &:hover {
-      background: darken($water-bg-20, 10);
+      background: var(--water-bg-hover);
     }
   }
 
   &.earth {
-    background: $earth-bg-20;
-    color: $earth-text-10;
+    background: var(--earth-bg);
+    color: var(--earth-text);
 
     &:hover {
-      background: darken($earth-bg-20, 10);
+      background: var(--earth-bg-hover);
     }
   }
 
   &.dark {
-    background: $dark-bg-10;
-    color: $dark-text-10;
+    background: var(--dark-bg);
+    color: var(--dark-text);
 
     &:hover {
-      background: darken($dark-bg-10, 10);
+      background: var(--dark-bg-hover);
     }
   }
 
   &.light {
-    background: $light-bg-20;
-    color: $light-text-10;
+    background: var(--light-bg);
+    color: var(--light-text);
 
     &:hover {
-      background: darken($light-bg-20, 10);
+      background: var(--light-bg-hover);
     }
   }
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index 8a43b512..0281acf9 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -96,27 +96,27 @@ h5 {
   // opacity: 0.7;
 
   &.wind {
-    color: $wind-bg-20;
+    color: var(--wind-text);
   }
 
   &.fire {
-    color: $fire-bg-20;
+    color: var(--fire-text);
   }
 
   &.water {
-    color: $water-bg-20;
+    color: var(--water-text);
   }
 
   &.earth {
-    color: $earth-bg-20;
+    color: var(--earth-text);
   }
 
   &.dark {
-    color: $dark-bg-10;
+    color: var(--dark-text);
   }
 
   &.light {
-    color: $light-bg-20;
+    color: var(--light-text);
   }
 }