From 21ca364d80e41e15489c53249828a9181c4f2ddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CBeeRad=E2=80=9D?= <bradwmorriswork@gmail.com>
Date: Tue, 17 Mar 2026 20:21:29 +1100
Subject: [PATCH] fix: light mode for skills cards and map background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SkillCard: hardcoded dark bg/border/text → CSS vars
- map-styles.css: migrate all hardcoded hex to CSS vars so map
  canvas, nodes, edges, and minimap respond to theme

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/panes/map/map-styles.css | 28 ++++++++++++-------------
 src/components/skills/SkillCard.tsx     | 16 +++++++-------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/panes/map/map-styles.css b/src/components/panes/map/map-styles.css
index 7b0b379..dbea17f 100644
--- a/src/components/panes/map/map-styles.css
+++ b/src/components/panes/map/map-styles.css
@@ -1,7 +1,7 @@
-/* React Flow dark theme overrides for RA-H Map */
+/* React Flow theme overrides for RA-H Map */
 
 .rah-map-wrapper .react-flow__background {
-  background: #080808 !important;
+  background: var(--rah-bg-base) !important;
 }
 
 .rah-map-wrapper .react-flow__pane {
@@ -14,7 +14,7 @@
 
 /* Edges */
 .rah-map-wrapper .react-flow__edge-path {
-  stroke: #374151;
+  stroke: var(--rah-border-strong);
   stroke-width: 1.5;
 }
 
@@ -48,11 +48,11 @@
 
 /* Custom node styles */
 .rah-map-node {
-  background: #0f0f0f;
-  border: 1px solid #2a2a2a;
+  background: var(--rah-bg-surface);
+  border: 1px solid var(--rah-border-strong);
   border-radius: 8px;
   padding: 8px 12px;
-  color: #e5e7eb;
+  color: var(--rah-text-base);
   font-size: 12px;
   min-width: 60px;
   max-width: 180px;
@@ -61,7 +61,7 @@
 }
 
 .rah-map-node:hover {
-  border-color: #3a3a3a;
+  border-color: var(--rah-border-stronger);
 }
 
 .rah-map-node--selected {
@@ -71,12 +71,12 @@
 
 .rah-map-node--top {
   border-color: #166534;
-  background: #0a1a0f;
+  background: var(--rah-bg-panel);
 }
 
 .rah-map-node--expanded {
   border-color: #b45309;
-  background: #1a150a;
+  background: var(--rah-bg-panel);
 }
 
 .rah-map-node--expanded .rah-map-node__title {
@@ -103,7 +103,7 @@
 .rah-map-node__dims {
   margin-top: 4px;
   font-size: 10px;
-  color: #a1a1aa;
+  color: var(--rah-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -114,7 +114,7 @@
   width: 8px !important;
   height: 8px !important;
   background: #22c55e !important;
-  border: 2px solid #0f0f0f !important;
+  border: 2px solid var(--rah-bg-surface) !important;
   opacity: 0;
   transition: opacity 0.15s ease;
 }
@@ -140,9 +140,9 @@
   opacity: 0.6;
 }
 
-/* MiniMap dark theme */
+/* MiniMap */
 .rah-map-wrapper .react-flow__minimap {
-  background: #0a0a0a;
-  border: 1px solid #1f1f1f;
+  background: var(--rah-bg-base);
+  border: 1px solid var(--rah-border);
   border-radius: 6px;
 }
diff --git a/src/components/skills/SkillCard.tsx b/src/components/skills/SkillCard.tsx
index 6d0d181..fb5c5a9 100644
--- a/src/components/skills/SkillCard.tsx
+++ b/src/components/skills/SkillCard.tsx
@@ -26,20 +26,20 @@ export default function SkillCard({
   return (
     <div
       onMouseEnter={(e) => {
-        e.currentTarget.style.background = '#1a1a1a';
-        e.currentTarget.style.borderColor = '#383838';
+        e.currentTarget.style.background = 'var(--rah-bg-active)';
+        e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
       }}
       onMouseLeave={(e) => {
-        e.currentTarget.style.background = '#161616';
-        e.currentTarget.style.borderColor = '#222';
+        e.currentTarget.style.background = 'var(--rah-bg-elevated)';
+        e.currentTarget.style.borderColor = 'var(--rah-border-strong)';
       }}
       style={{
         display: 'flex',
         alignItems: 'center',
         gap: '10px',
         padding: '10px',
-        background: '#161616',
-        border: '1px solid #222',
+        background: 'var(--rah-bg-elevated)',
+        border: '1px solid var(--rah-border-strong)',
         borderRadius: '8px',
       }}
     >
@@ -56,10 +56,10 @@ export default function SkillCard({
           padding: 0,
         }}
       >
-        <span style={{ color: '#ddd', fontSize: '13px', fontWeight: 500, display: 'block' }}>{skill.name}</span>
+        <span style={{ color: 'var(--rah-text-base)', fontSize: '13px', fontWeight: 500, display: 'block' }}>{skill.name}</span>
         <span
           style={{
-            color: '#777',
+            color: 'var(--rah-text-muted)',
             fontSize: '12px',
             lineHeight: '1.4',
             display: 'block',