fix(explore/ui): utilization status colors AA >=4.5:1 on #FAFAFA card bg (v1.1.12)

v1.1.11 landed the three money values (Reward/Value/Fee) at 4.54:1 and
killed the overflow + Menu-button clip, but the network-utilization %
mapped to --color-badge-bright-green-fg (#25855A) measured 4.39:1 on the
real #FAFAFA card background (not pure white) -- 0.11 under bar.

Add dedicated semantic status tokens (--color-status-good/warn/bad) with
darker light-theme shades (#1A7A47 / #B45309 / #B91C1C -> 5.1 / 4.8 / 6.1
:1 on #FAFAFA) and light shades for dark theme, and point
getNetworkUtilizationParams at them. All four home-page values now clear
4.5:1 on every brand.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>

deploy/k8s/explore-fe/deployments-mainnet.yaml

@@ -20,7 +20,7 @@ spec:
       imagePullSecrets: [{name: ghcr-luxfi}]
       containers:
         - name: explore
-          image: ghcr.io/luxfi/explore:v1.1.11
+          image: ghcr.io/luxfi/explore:v1.1.12
           imagePullPolicy: IfNotPresent
           ports: [{containerPort: 3000, name: ui}]
           env:
@@ -81,7 +81,7 @@ spec:
       imagePullSecrets: [{name: ghcr-luxfi}]
       containers:
         - name: explore
-          image: ghcr.io/zooai/explore:v1.1.11
+          image: ghcr.io/zooai/explore:v1.1.12
           imagePullPolicy: IfNotPresent
           ports: [{containerPort: 3000, name: ui}]
           env:
@@ -142,7 +142,7 @@ spec:
       imagePullSecrets: [{name: ghcr-luxfi}]
       containers:
         - name: explore
-          image: ghcr.io/hanzoai/explore:v1.1.11
+          image: ghcr.io/hanzoai/explore:v1.1.12
           imagePullPolicy: IfNotPresent
           ports: [{containerPort: 3000, name: ui}]
           env:
@@ -203,7 +203,7 @@ spec:
       imagePullSecrets: [{name: ghcr-luxfi}]
       containers:
         - name: explore
-          image: ghcr.io/parsdao/explore:v1.1.11
+          image: ghcr.io/parsdao/explore:v1.1.12
           imagePullPolicy: IfNotPresent
           ports: [{containerPort: 3000, name: ui}]
           env:

lib/networks/getNetworkUtilizationParams.ts

@@ -11,15 +11,14 @@ export default function getNetworkUtilizationParams(value: number) {
     return 'low';
   })();
 
-  // Theme CSS vars (defined in styles/tokens.css for both light + dark). The
-  // previous Chakra dot-tokens (red.600 etc.) had no matching --color-*-600 var,
-  // so they rendered as invalid CSS and the % inherited white-on-white. The
-  // "bright" badge foregrounds are the darkest semantic status shades and clear
-  // 4.5:1 on the light card background.
+  // Semantic status vars (styles/tokens.css, both light + dark). The previous
+  // Chakra dot-tokens (red.600 etc.) had no matching --color-*-600 var, so they
+  // rendered as invalid CSS and the % inherited white-on-white. These shades
+  // clear 4.5:1 on the #FAFAFA card background.
   const colors = {
-    high: 'var(--color-badge-bright-red-fg)',
-    medium: 'var(--color-badge-bright-orange-fg)',
-    low: 'var(--color-badge-bright-green-fg)',
+    high: 'var(--color-status-bad)',
+    medium: 'var(--color-status-warn)',
+    low: 'var(--color-status-good)',
   };
   const color = colors[load];
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/explore",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "private": false,
   "homepage": "https://github.com/luxfi/explore#readme",
   "engines": {

styles/tokens.css

@@ -45,6 +45,11 @@
   --color-text-error: #E53E3E;
   --color-text-success: #38A169;
 
+  /* --- Status foreground (AA >=4.5:1 on the #FAFAFA card bg) --- */
+  --color-status-good: #1A7A47;
+  --color-status-warn: #B45309;
+  --color-status-bad: #B91C1C;
+
   /* --- Headings --- */
   --color-heading: rgba(16, 17, 18, 0.80);
 
@@ -295,6 +300,11 @@
   --color-text-error: #E53E3E;
   --color-text-success: #9AE6B4;
 
+  /* --- Status foreground (light shades for the dark bg) --- */
+  --color-status-good: #6EE7A8;
+  --color-status-warn: #FBBF7A;
+  --color-status-bad: #FCA5A5;
+
   /* --- Headings --- */
   --color-heading: rgba(255, 255, 255, 0.80);