From 58c6a40b063dd0f510faff58f1382f366f616ef0 Mon Sep 17 00:00:00 2001
From: vkuchenik <vkuchenik@contractor.usgs.gov>
Date: Fri, 6 Nov 2026 10:52:58 -0800
Subject: [PATCH] refactor: adjusting colors in themes file for better
 visibility/distinction of entries in widgets like al changes, ivans, and rs
 in both lt and dark mode

---
 client/src/theme.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/client/src/theme.js b/client/src/theme.js
index f1ff888..ff53040 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -2,7 +2,7 @@ import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecip
 
 // REUSABLE GLASS SURFACE
 const glassSurface = {
-  bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+  bg: {base: "rgb(253 253 253 / 0.4)", _dark: "rgb(37 38 46 / 0.8)"},
   backdropFilter: "blur(12px)",
   WebkitBackdropFilter: "blur(12px)",
   border: "1px solid",
@@ -353,7 +353,7 @@ const glassPopoverRecipe = defineSlotRecipe({
       borderRadius: "xl",
       p: 3,
       boxShadow: "lg",
-      bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "rgba(20, 22, 25, 0.95)"},
+      bg: {base: "rgba(255, 255, 255, 0.95)", _dark: "#353742"},
       backdropFilter: "blur(15px)",
       WebkitBackdropFilter: "blur(15px)",
     },
@@ -381,7 +381,7 @@ const glassDialogRecipe = defineSlotRecipe({
       maxW: "60%",
       minH: "80%",
       overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"},
+      bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgb(22 23 28 / 0.9)"},
       backdropFilter: "blur(15px)",
       WebkitBackdropFilter: "blur(15px)",
     },
@@ -471,7 +471,7 @@ const glassTabRecipe = defineRecipe({
 
     // --- THE GLASS EFFECT (Inactive) ---
     // Uses a highly transparent white/black depending on mode
-    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
+    bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "#1e2027"},
     backdropFilter: "blur(12px)",
     WebkitBackdropFilter: "blur(12px)",
     border: "1px solid",
@@ -485,7 +485,7 @@ const glassTabRecipe = defineRecipe({
       pr: "16px",
       // --- THE GLASS EFFECT (Hover) ---
       // Becomes slightly more opaque when you mouse over
-      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
+      bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "#191a22"},
       borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
       color: "fg",
       textDecoration: "none",
@@ -538,7 +538,7 @@ const config = defineConfig({
       opacity: "1 !important",
       borderRadius: "3xl",
       _dark: {
-        background: "#393c3fff !important",
+        background: "#3B3D49FF !important",
         borderColor: "#000000ff !important",
         boxShadow: "0 0 10px #16181bff !important",
         opacity: "1 !important",
@@ -581,19 +581,20 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        text: { value: { base: "#000000", _dark: "#FFFFFF" } },
+        text: { value: { base: "#131315", _dark: "rgb(234 234 234 / 0.94)" } },
         textInverted: { value: { base: "#000000", _dark: "#FFFFFF" } }, // Fixed: Properly inverted
-        MainBackground: { value: { base: "#F9F9F9", _dark: "#141414" } },
-        titleColor: { value: { base: "colors.gray.800", _dark: "#FFFFFF" } },
-        iconColor: { value: { base: "colors.gray.600", _dark: "colors.gray.300" } }, // Fixed: Visible in dark mode
+        MainBackground: { value: { base: "#f1f1f1", _dark: "#16171c" } },
+        titleColor: { value: { base: "colors.gray.800", _dark: "#e1e1e1" } },
+        iconColor: { value: { base: "#191919", _dark: "rgb(255 255 255 / 0.82)" } }, // Fixed: Visible in dark mode
         glassSeperator: { value: { base: "#0000001A", _dark: "#FFFFFF3F" } },
-        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
+        gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
 
         // WIDGET SPECIFIC VALUES
-        widgetItemBg: { value: { base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" } },
-        widgetItemExpandedBg: { value: { base: "rgba(0, 0, 0, 0.08)", _dark: "rgba(0, 0, 0, 0.3)" } },
-        widgetBadgeBg: { value: { base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.5)" } },
-        widgetTextMuted: { value: { base: "colors.gray.600", _dark: "colors.gray.400" } },
+        widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
+        widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
+        widgetInnerBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(100 103 119)" } },
+        widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
 
         // ALERT COLORS
         alertRed: { value: { base: "colors.red.600", _dark: "colors.red.400" } },