From 93b6b2eb2cd14411b8759e252e2823d5a564277a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 9 Mar 2026 15:27:07 -0700
Subject: [PATCH] fix(rwallet): use CSS variable theming + soften global light
 mode

Replace ~30 hardcoded dark hex colors in folk-wallet-viewer with --rs-*
CSS variables so rWallet adapts to both light and dark themes. Warm up
the global light palette from pure white to off-white tones.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../rwallet/components/folk-wallet-viewer.ts  | 72 +++++++++----------
 modules/rwallet/mod.ts                        |  2 +-
 website/public/theme.css                      | 36 +++++-----
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/modules/rwallet/components/folk-wallet-viewer.ts b/modules/rwallet/components/folk-wallet-viewer.ts
index b18f406..9d1dd30 100644
--- a/modules/rwallet/components/folk-wallet-viewer.ts
+++ b/modules/rwallet/components/folk-wallet-viewer.ts
@@ -234,13 +234,13 @@ class FolkWalletViewer extends HTMLElement {
 	private renderStyles(): string {
 		return `
 		<style>
-			:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
+			:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
 			* { box-sizing: border-box; }
 
 			/* ── Hero ── */
 			.hero {
 				text-align: center; padding: 32px 16px 24px;
-				border-bottom: 1px solid #2a2a3e; margin-bottom: 24px;
+				border-bottom: 1px solid var(--rs-border-subtle); margin-bottom: 24px;
 			}
 			.hero-title {
 				font-size: 28px; font-weight: 700; margin: 0 0 6px;
@@ -248,13 +248,13 @@ class FolkWalletViewer extends HTMLElement {
 				-webkit-background-clip: text; -webkit-text-fill-color: transparent;
 				background-clip: text;
 			}
-			.hero-subtitle { font-size: 14px; color: #888; margin: 0 0 20px; }
+			.hero-subtitle { font-size: 14px; color: var(--rs-text-secondary); margin: 0 0 20px; }
 
 			/* ── Address bar ── */
 			.address-bar { display: flex; gap: 8px; margin-bottom: 12px; max-width: 640px; margin-left: auto; margin-right: auto; }
 			.address-bar input {
 				flex: 1; padding: 12px 16px; border-radius: 10px;
-				border: 1px solid #444; background: #1e1e2e; color: #e0e0e0;
+				border: 1px solid var(--rs-input-border); background: var(--rs-bg-surface); color: var(--rs-text-primary);
 				font-family: monospace; font-size: 14px;
 			}
 			.address-bar input:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 0 2px rgba(0,212,255,0.15); }
@@ -272,16 +272,16 @@ class FolkWalletViewer extends HTMLElement {
 			}
 			.testnet-toggle {
 				display: flex; align-items: center; gap: 8px;
-				cursor: pointer; user-select: none; font-size: 13px; color: #888;
+				cursor: pointer; user-select: none; font-size: 13px; color: var(--rs-text-secondary);
 			}
-			.testnet-toggle:hover { color: #bbb; }
+			.testnet-toggle:hover { color: var(--rs-text-primary); }
 			.toggle-track {
-				width: 34px; height: 18px; border-radius: 9px; background: #333;
+				width: 34px; height: 18px; border-radius: 9px; background: var(--rs-border);
 				position: relative; transition: background 0.2s;
 			}
 			.testnet-toggle.active .toggle-track { background: #f59e0b; }
 			.toggle-thumb {
-				width: 14px; height: 14px; border-radius: 50%; background: #666;
+				width: 14px; height: 14px; border-radius: 50%; background: var(--rs-text-muted);
 				position: absolute; top: 2px; left: 2px; transition: all 0.2s;
 			}
 			.testnet-toggle.active .toggle-thumb { left: 18px; background: #fff; }
@@ -300,8 +300,8 @@ class FolkWalletViewer extends HTMLElement {
 			}
 			.supported-chain {
 				display: flex; align-items: center; gap: 5px;
-				padding: 4px 10px; border-radius: 6px; background: #1e1e2e;
-				border: 1px solid #2a2a3e; font-size: 12px; color: #999;
+				padding: 4px 10px; border-radius: 6px; background: var(--rs-bg-surface);
+				border: 1px solid var(--rs-border-subtle); font-size: 12px; color: var(--rs-text-secondary);
 			}
 			.supported-chain .dot { width: 6px; height: 6px; border-radius: 50%; }
 
@@ -311,28 +311,28 @@ class FolkWalletViewer extends HTMLElement {
 				gap: 16px; margin-bottom: 28px;
 			}
 			.feature-card {
-				background: #1e1e2e; border: 1px solid #2a2a3e; border-radius: 12px;
+				background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 12px;
 				padding: 20px; text-align: center; transition: border-color 0.2s;
 			}
-			.feature-card:hover { border-color: #444; }
+			.feature-card:hover { border-color: var(--rs-border-strong); }
 			.feature-icon { font-size: 28px; margin-bottom: 10px; }
-			.feature-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: #e0e0e0; }
-			.feature-card p { font-size: 12px; color: #888; margin: 0; line-height: 1.5; }
+			.feature-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--rs-text-primary); }
+			.feature-card p { font-size: 12px; color: var(--rs-text-secondary); margin: 0; line-height: 1.5; }
 
 			/* ── Example wallets ── */
 			.examples {
 				max-width: 640px; margin: 0 auto 20px;
 			}
-			.examples-label { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
+			.examples-label { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
 			.example-list { display: flex; flex-direction: column; gap: 6px; }
 			.example-item {
 				display: flex; align-items: center; gap: 10px; padding: 10px 14px;
-				background: #1e1e2e; border: 1px solid #2a2a3e; border-radius: 10px;
+				background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 10px;
 				cursor: pointer; transition: all 0.2s;
 			}
-			.example-item:hover { border-color: #00d4ff; background: #252540; }
-			.example-name { font-size: 13px; font-weight: 500; color: #e0e0e0; }
-			.example-addr { font-size: 11px; color: #666; font-family: monospace; }
+			.example-item:hover { border-color: #00d4ff; background: var(--rs-bg-hover); }
+			.example-name { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
+			.example-addr { font-size: 11px; color: var(--rs-text-muted); font-family: monospace; }
 			.example-type {
 				margin-left: auto; font-size: 10px; font-weight: 600;
 				padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
@@ -343,47 +343,47 @@ class FolkWalletViewer extends HTMLElement {
 			/* ── Dashboard: chains ── */
 			.chains { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
 			.chain-btn {
-				padding: 6px 14px; border-radius: 8px; border: 2px solid #333;
-				background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
+				padding: 6px 14px; border-radius: 8px; border: 2px solid var(--rs-border);
+				background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 13px;
 				display: flex; align-items: center; gap: 6px; transition: all 0.2s;
 			}
-			.chain-btn:hover { border-color: #555; }
-			.chain-btn.active { border-color: var(--chain-color); background: rgba(255,255,255,0.05); }
+			.chain-btn:hover { border-color: var(--rs-border-strong); }
+			.chain-btn.active { border-color: var(--chain-color); background: var(--rs-bg-hover); }
 			.chain-dot { width: 8px; height: 8px; border-radius: 50%; }
 
 			/* ── Dashboard: stats ── */
 			.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
 			.stat-card {
-				background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
+				background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 10px;
 				padding: 14px; text-align: center;
 			}
-			.stat-label { font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 6px; }
+			.stat-label { font-size: 11px; color: var(--rs-text-secondary); text-transform: uppercase; margin-bottom: 6px; }
 			.stat-value { font-size: 20px; font-weight: 700; color: #00d4ff; }
 
 			/* ── Dashboard: balance table ── */
 			.balance-table { width: 100%; border-collapse: collapse; }
 			.balance-table th {
-				text-align: left; padding: 10px 8px; border-bottom: 2px solid #333;
-				color: #888; font-size: 11px; text-transform: uppercase;
+				text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--rs-border);
+				color: var(--rs-text-secondary); font-size: 11px; text-transform: uppercase;
 			}
-			.balance-table td { padding: 10px 8px; border-bottom: 1px solid #2a2a3e; }
-			.balance-table tr:hover td { background: rgba(255,255,255,0.02); }
-			.token-symbol { font-weight: 600; color: #e0e0e0; }
-			.token-name { font-size: 12px; color: #888; }
+			.balance-table td { padding: 10px 8px; border-bottom: 1px solid var(--rs-border-subtle); }
+			.balance-table tr:hover td { background: var(--rs-bg-hover); }
+			.token-symbol { font-weight: 600; color: var(--rs-text-primary); }
+			.token-name { font-size: 12px; color: var(--rs-text-secondary); }
 			.amount-cell { text-align: right; font-family: monospace; }
-			.fiat { color: #4ade80; }
+			.fiat { color: var(--rs-success); }
 
 			/* ── States ── */
-			.empty { text-align: center; color: #666; padding: 40px; }
-			.loading { text-align: center; color: #888; padding: 40px; }
+			.empty { text-align: center; color: var(--rs-text-muted); padding: 40px; }
+			.loading { text-align: center; color: var(--rs-text-secondary); padding: 40px; }
 			.loading .spinner {
 				display: inline-block; width: 20px; height: 20px;
-				border: 2px solid #333; border-top-color: #00d4ff; border-radius: 50%;
+				border: 2px solid var(--rs-border); border-top-color: #00d4ff; border-radius: 50%;
 				animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle;
 			}
 			@keyframes spin { to { transform: rotate(360deg); } }
 			.error {
-				text-align: center; color: #ef5350; padding: 16px;
+				text-align: center; color: var(--rs-error); padding: 16px;
 				background: rgba(239,83,80,0.08); border: 1px solid rgba(239,83,80,0.2);
 				border-radius: 10px; margin-bottom: 16px;
 			}
diff --git a/modules/rwallet/mod.ts b/modules/rwallet/mod.ts
index c797044..eb66405 100644
--- a/modules/rwallet/mod.ts
+++ b/modules/rwallet/mod.ts
@@ -422,7 +422,7 @@ routes.get("/", (c) => {
 		modules: getModuleInfoList(),
 		theme: "dark",
 		body: `<folk-wallet-viewer></folk-wallet-viewer>`,
-		scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=3"></script>`,
+		scripts: `<script type="module" src="/modules/rwallet/folk-wallet-viewer.js?v=4"></script>`,
 		styles: `<link rel="stylesheet" href="/modules/rwallet/wallet.css">`,
 	}));
 });
diff --git a/website/public/theme.css b/website/public/theme.css
index bc09b22..c612df5 100644
--- a/website/public/theme.css
+++ b/website/public/theme.css
@@ -84,10 +84,10 @@
   color-scheme: light;
 
   /* Surface */
-  --rs-bg-page:            #f8fafc;
-  --rs-bg-surface:         #ffffff;
-  --rs-bg-surface-raised:  #f1f5f9;
-  --rs-bg-surface-sunken:  #f8fafc;
+  --rs-bg-page:            #f5f5f0;
+  --rs-bg-surface:         #fafaf7;
+  --rs-bg-surface-raised:  #f0efe9;
+  --rs-bg-surface-sunken:  #eeedea;
   --rs-bg-overlay:         rgba(255, 255, 255, 0.9);
   --rs-bg-hover:           rgba(0, 0, 0, 0.04);
   --rs-bg-active:          #e0f2fe;
@@ -117,7 +117,7 @@
   --rs-spinner-head:       #14b8a6;
 
   /* Component-specific tokens */
-  --rs-input-bg:           #f8fafc;
+  --rs-input-bg:           #f5f5f0;
   --rs-input-border:       #e2e8f0;
   --rs-input-text:         #334155;
   --rs-btn-secondary-bg:   rgba(0, 0, 0, 0.05);
@@ -126,16 +126,16 @@
   --rs-card-border:        rgba(0, 0, 0, 0.06);
 
   /* Canvas */
-  --rs-canvas-bg:          #ffffff;
+  --rs-canvas-bg:          #fafaf7;
   --rs-canvas-grid:        #f1f5f9;
 
   /* Toolbar */
-  --rs-toolbar-bg:         #ffffff;
-  --rs-toolbar-btn-bg:     #f1f5f9;
+  --rs-toolbar-bg:         #fafaf7;
+  --rs-toolbar-btn-bg:     #f0efe9;
   --rs-toolbar-btn-hover:  #e2e8f0;
   --rs-toolbar-btn-text:   #0f172a;
   --rs-toolbar-sep:        #e2e8f0;
-  --rs-toolbar-panel-bg:   #ffffff;
+  --rs-toolbar-panel-bg:   #fafaf7;
   --rs-toolbar-panel-border: #e2e8f0;
 }
 
@@ -144,10 +144,10 @@
   :root:not([data-theme]) {
     color-scheme: light;
 
-    --rs-bg-page:            #f8fafc;
-    --rs-bg-surface:         #ffffff;
-    --rs-bg-surface-raised:  #f1f5f9;
-    --rs-bg-surface-sunken:  #f8fafc;
+    --rs-bg-page:            #f5f5f0;
+    --rs-bg-surface:         #fafaf7;
+    --rs-bg-surface-raised:  #f0efe9;
+    --rs-bg-surface-sunken:  #eeedea;
     --rs-bg-overlay:         rgba(255, 255, 255, 0.9);
     --rs-bg-hover:           rgba(0, 0, 0, 0.04);
     --rs-bg-active:          #e0f2fe;
@@ -171,7 +171,7 @@
     --rs-spinner-track:      rgba(0, 0, 0, 0.08);
     --rs-spinner-head:       #14b8a6;
 
-    --rs-input-bg:           #f8fafc;
+    --rs-input-bg:           #f5f5f0;
     --rs-input-border:       #e2e8f0;
     --rs-input-text:         #334155;
     --rs-btn-secondary-bg:   rgba(0, 0, 0, 0.05);
@@ -179,15 +179,15 @@
     --rs-card-bg:            rgba(0, 0, 0, 0.02);
     --rs-card-border:        rgba(0, 0, 0, 0.06);
 
-    --rs-canvas-bg:          #ffffff;
+    --rs-canvas-bg:          #fafaf7;
     --rs-canvas-grid:        #f1f5f9;
 
-    --rs-toolbar-bg:         #ffffff;
-    --rs-toolbar-btn-bg:     #f1f5f9;
+    --rs-toolbar-bg:         #fafaf7;
+    --rs-toolbar-btn-bg:     #f0efe9;
     --rs-toolbar-btn-hover:  #e2e8f0;
     --rs-toolbar-btn-text:   #0f172a;
     --rs-toolbar-sep:        #e2e8f0;
-    --rs-toolbar-panel-bg:   #ffffff;
+    --rs-toolbar-panel-bg:   #fafaf7;
     --rs-toolbar-panel-border: #e2e8f0;
   }
 }