From 31528bdc1f63711b8d05df80f4307a10efc60e25 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Jan 2026 16:07:24 -0800
Subject: [PATCH] add element hover bg colors to design system

---
 src/themes/_colors.scss |  6 ++++++
 src/themes/themes.scss  | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/themes/_colors.scss b/src/themes/_colors.scss
index aa794e6c..ae30fb34 100644
--- a/src/themes/_colors.scss
+++ b/src/themes/_colors.scss
@@ -94,6 +94,7 @@ $wind-text-20: #006a45;
 $wind-text-30: #1dc688;
 $wind-bg-00: #30c372;
 $wind-bg-10: #3ee489;
+$wind-bg-15: #86f2bb;
 $wind-bg-20: #cdffed;
 
 $fire-text-00: #3f0202;
@@ -102,6 +103,7 @@ $fire-text-20: #6e0000;
 $fire-text-30: #ec5c5c;
 $fire-bg-00: #e05555;
 $fire-bg-10: #fa6d6d;
+$fire-bg-15: #fd9d9d;
 $fire-bg-20: #ffcdcd;
 
 $water-text-00: #03263b;
@@ -110,6 +112,7 @@ $water-text-20: #00639c;
 $water-text-30: #5cb7ec;
 $water-bg-00: #4aabe3;
 $water-bg-10: #6cc9ff;
+$water-bg-15: #9ddbff;
 $water-bg-20: #cdedff;
 
 $earth-text-00: #321602;
@@ -119,6 +122,7 @@ $earth-text-20: #8e3c0b;
 $earth-text-30: #ec985c;
 $earth-bg-00: #df8849;
 $earth-bg-10: #fd9f5b;
+$earth-bg-15: #fec194;
 $earth-bg-20: #ffe2cd;
 
 $light-text-00: #3d3700;
@@ -127,6 +131,7 @@ $light-text-20: #715100;
 $light-text-30: #c59c0c;
 $light-bg-00: #cab91c;
 $light-bg-10: #e8d633;
+$light-bg-15: #f4e880;
 $light-bg-20: #fffacd;
 
 $dark-text-00: #23002f;
@@ -135,6 +140,7 @@ $dark-text-20: #560075;
 $dark-text-30: #c65cec;
 $dark-bg-00: #ba63d8;
 $dark-bg-10: #de7bff;
+$dark-bg-15: #e8a4ff;
 $dark-bg-20: #f2cdff;
 
 $transparent--stroke--light: rgba(0, 0, 0, 0.9);
diff --git a/src/themes/themes.scss b/src/themes/themes.scss
index ac6270ff..b2811bf8 100644
--- a/src/themes/themes.scss
+++ b/src/themes/themes.scss
@@ -297,6 +297,15 @@
 	--light-nav-selected-bg: #{colors.$light-bg-20};
 	--dark-nav-selected-bg: #{colors.$dark-bg-20};
 
+	// Light - Element navigation hover background (between bg and nav-selected)
+	--null-nav-hover-bg: #{colors.$grey-80};
+	--wind-nav-hover-bg: #{colors.$wind-bg-15};
+	--fire-nav-hover-bg: #{colors.$fire-bg-15};
+	--water-nav-hover-bg: #{colors.$water-bg-15};
+	--earth-nav-hover-bg: #{colors.$earth-bg-15};
+	--light-nav-hover-bg: #{colors.$light-bg-15};
+	--dark-nav-hover-bg: #{colors.$dark-bg-15};
+
 	// Item detail backgrounds (same colors as nav selected)
 	--null-item-detail-bg: #{colors.$grey-85};
 	--wind-item-detail-bg: #{colors.$wind-bg-20};
@@ -666,6 +675,15 @@ html[data-theme='dark'] {
 	--light-nav-selected-bg: #{colors.$light-bg-20};
 	--dark-nav-selected-bg: #{colors.$dark-bg-20};
 
+	// Dark - Element navigation hover background (same as light theme)
+	--null-nav-hover-bg: #{colors.$grey-80};
+	--wind-nav-hover-bg: #{colors.$wind-bg-15};
+	--fire-nav-hover-bg: #{colors.$fire-bg-15};
+	--water-nav-hover-bg: #{colors.$water-bg-15};
+	--earth-nav-hover-bg: #{colors.$earth-bg-15};
+	--light-nav-hover-bg: #{colors.$light-bg-15};
+	--dark-nav-hover-bg: #{colors.$dark-bg-15};
+
 	// Item detail backgrounds (same colors as nav selected)
 	--null-item-detail-bg: #{colors.$grey-85};
 	--wind-item-detail-bg: #{colors.$wind-bg-20};