From 2140d58fe84cce9a715f5dce08f2b3d431e760cc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Jan 2026 19:52:26 -0800
Subject: [PATCH] add picker item CSS variables for hover/selected states

---
 src/themes/_colors.scss | 7 +++++++
 src/themes/themes.scss  | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/themes/_colors.scss b/src/themes/_colors.scss
index ae30fb34..2ac9f9ed 100644
--- a/src/themes/_colors.scss
+++ b/src/themes/_colors.scss
@@ -534,6 +534,13 @@ $segmented--control--background--segment--text--dark: $grey-60;
 $segmented--control--background--segment--text--hover--dark: $grey-70;
 $segmented--control--background--segment--text--checked--dark: $grey-90;
 
+// Color Definitions: Picker (icon-based pickers like Element, Rarity, Proficiency)
+// Uses darker backgrounds than segmented controls for better visibility
+$picker--item--bg--hover--light: $grey-70;
+$picker--item--bg--hover--dark: $grey-40;
+$picker--item--bg--selected--light: $grey-75;
+$picker--item--bg--selected--dark: $grey-45;
+
 // Color Definitions: Element / Wind
 $wind--bg--light: $wind-bg-10;
 $wind--bg--dark: $wind-bg-10;
diff --git a/src/themes/themes.scss b/src/themes/themes.scss
index b2811bf8..b31c6664 100644
--- a/src/themes/themes.scss
+++ b/src/themes/themes.scss
@@ -229,6 +229,10 @@
 	--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--light};
 	--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--light};
 
+	// Light - Picker (icon-based pickers)
+	--picker-item-bg-hover: #{colors.$picker--item--bg--hover--light};
+	--picker-item-bg-selected: #{colors.$picker--item--bg--selected--light};
+
 	// Light - Extra Weapons
 	--extra-purple-bg: #{colors.$extra--purple--bg--light};
 	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--light};
@@ -607,6 +611,10 @@ html[data-theme='dark'] {
 	--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--dark};
 	--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--dark};
 
+	// Dark - Picker (icon-based pickers)
+	--picker-item-bg-hover: #{colors.$picker--item--bg--hover--dark};
+	--picker-item-bg-selected: #{colors.$picker--item--bg--selected--dark};
+
 	// Dark - Extra Weapons
 	--extra-purple-bg: #{colors.$extra--purple--bg--dark};
 	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};