From d09aaff78f858d64b459bc2370eea6ca168845b5 Mon Sep 17 00:00:00 2001
From: dcccrypto <dcccrypto@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:43:28 +0100
Subject: [PATCH] fix(theme): light-mode contrast stragglers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DEVNET header pill: var(--warning) instead of hardcoded amber-400
  (#fbbf24 is ~1.7:1 on the light theme's white header)
- Trade utility row: address chip, copy button, Analytics link, usd/tokens
  toggle, and the mobile sheet close button move from --text-dim (ghost
  decoration tier, ~1.5:1) to --text-muted — they carry information or are
  interactive, so they shouldn't sit in the deliberately-invisible tier
- Dashboard connect-gate preview: crisp ghost (opacity only) instead of
  blur-sm, which dissolved into shapeless smudges on the light theme

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 app/app/dashboard/page.tsx       |  7 +++++--
 app/app/trade/[slab]/page.tsx    | 12 ++++++------
 app/components/layout/Header.tsx |  7 +++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/app/dashboard/page.tsx b/app/app/dashboard/page.tsx
index b9998fba..7e441de4 100644
--- a/app/app/dashboard/page.tsx
+++ b/app/app/dashboard/page.tsx
@@ -240,9 +240,12 @@ export default function DashboardPage() {
             Your personal command centre for trading on Percolator
           </p>
 
-          {/* Blurred preview */}
+          {/* Ghost preview of the dashboard layout behind the connect gate.
+              Crisp at reduced opacity, NOT blurred: blur-sm + near-white
+              panels on the light theme's white bg dissolved into shapeless
+              smudges that read as a rendering glitch rather than a preview. */}
           <div className="relative">
-            <div className="pointer-events-none select-none blur-sm opacity-40">
+            <div className="pointer-events-none select-none opacity-40">
               <div className="grid grid-cols-2 gap-px border border-[var(--border)] bg-[var(--border)] lg:grid-cols-4">
                 {[1, 2, 3, 4].map((i) => (
                   <div key={i} className="bg-[var(--panel-bg)] p-5 h-20" />
diff --git a/app/app/trade/[slab]/page.tsx b/app/app/trade/[slab]/page.tsx
index 651ba6a0..5706fcab 100644
--- a/app/app/trade/[slab]/page.tsx
+++ b/app/app/trade/[slab]/page.tsx
@@ -93,7 +93,7 @@ function UsdToggleButton() {
           "rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
           !showUsd
             ? "bg-[var(--accent)]/10 text-[var(--accent)]"
-            : "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
+            : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
         ].join(" ")}
       >
         tokens
@@ -104,7 +104,7 @@ function UsdToggleButton() {
           "rounded-sm px-2 py-0.5 text-[9px] font-medium transition-colors duration-150",
           showUsd
             ? "bg-[var(--accent)]/10 text-[var(--accent)]"
-            : "text-[var(--text-dim)] hover:text-[var(--text-secondary)]",
+            : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]",
         ].join(" ")}
       >
         usd
@@ -124,7 +124,7 @@ function CopyButton({ text }: { text: string }) {
         toast("Address copied to clipboard!", "success");
         setTimeout(() => setCopied(false), 1500);
       }}
-      className="inline-flex items-center text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
+      className="inline-flex items-center text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
       title="Copy address"
     >
       {copied ? (
@@ -301,7 +301,7 @@ function MobileOrderSheet({ slab }: { slab: string }) {
       >
         <div className="sticky top-0 z-10 flex items-center justify-between border-b border-[var(--border)]/50 bg-[var(--bg)] px-3 py-2">
           <span className="text-[10px] uppercase tracking-[0.15em] text-[var(--text-dim)]">Order ticket</span>
-          <button onClick={() => setOpen(false)} className="text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
+          <button onClick={() => setOpen(false)} className="text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--text)]" aria-label="Close">
             ✕
           </button>
         </div>
@@ -517,7 +517,7 @@ function TradePageInner({ slab }: { slab: string }) {
           Shown on all breakpoints (the pre-rebuild page only showed this on
           mobile; desktop had no equivalent, which was inconsistent). */}
       <div className="flex items-center gap-3 border-b border-[var(--border)]/30 px-3 py-1.5 overflow-x-auto whitespace-nowrap scrollbar-none">
-        <span className="flex items-center gap-1 text-[10px] text-[var(--text-dim)]" style={{ fontFamily: "var(--font-mono)" }}>
+        <span className="flex items-center gap-1 text-[10px] text-[var(--text-muted)]" style={{ fontFamily: "var(--font-mono)" }}>
           {shortAddress}
           <CopyButton text={slab} />
         </span>
@@ -542,7 +542,7 @@ function TradePageInner({ slab }: { slab: string }) {
         <UsdToggleButton />
         <a
           href={`/analytics/${slab}`}
-          className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-dim)] transition-colors duration-150 hover:text-[var(--accent)]"
+          className="ml-auto shrink-0 text-[10px] uppercase tracking-[0.12em] text-[var(--text-muted)] transition-colors duration-150 hover:text-[var(--accent)]"
         >
           Analytics →
         </a>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index f32851b3..14dd6c42 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -207,12 +207,15 @@ export const Header: FC = () => {
 
         {/* Right */}
         <div className="ml-auto flex shrink-0 items-center gap-2 sm:gap-2.5">
-          {/* DEVNET badge — non-interactive pill */}
+          {/* DEVNET badge — non-interactive pill. var(--warning), not
+              hardcoded amber-400: #fbbf24 lands at ~1.7:1 on the light
+              theme's white header (near-invisible); the token resolves to a
+              readable amber-700 in light mode and stays amber in dark. */}
           {network === "devnet" && (
             <span
               ref={badgeRef}
               title="You are on devnet - no real funds"
-              className="inline-flex items-center gap-1 rounded-full border border-[#fbbf24]/35 bg-[#fbbf24]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[#fbbf24] cursor-default pointer-events-none select-none"
+              className="inline-flex items-center gap-1 rounded-full border border-[var(--warning)]/35 bg-[var(--warning)]/[0.12] px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-[0.06em] text-[var(--warning)] cursor-default pointer-events-none select-none"
             >
               devnet
             </span>