From e70b40df9a4882b00b7d452a35b9ad8d7f92343c Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Mar 2026 17:39:40 -0700
Subject: [PATCH] fix(collab): theme-aware N-online badge and people panel

The collab overlay badge used --rs-bg-secondary (which doesn't exist in
the theme system), causing it to always fall back to dark hardcoded values.
Updated all Shadow DOM CSS to use proper theme variables (--rs-glass-bg,
--rs-glass-border, --rs-text-primary, etc.) with light-mode-safe fallbacks
so the badge and panel are readable in both dark and light themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/components/rstack-collab-overlay.ts | 26 +++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/shared/components/rstack-collab-overlay.ts b/shared/components/rstack-collab-overlay.ts
index b86cccd..38e138a 100644
--- a/shared/components/rstack-collab-overlay.ts
+++ b/shared/components/rstack-collab-overlay.ts
@@ -722,7 +722,7 @@ const OVERLAY_CSS = `
 	}
 
 	.count.solo {
-		color: var(--rs-text-muted, #888);
+		color: var(--rs-text-muted, #64748b);
 	}
 
 	.dot {
@@ -792,9 +792,9 @@ const OVERLAY_CSS = `
 	.conn-notice {
 		padding: 8px 16px;
 		font-size: 12px;
-		color: var(--rs-text-muted, #888);
-		background: var(--rs-bg-surface-raised, rgba(255,255,255,0.04));
-		border-bottom: 1px solid var(--rs-border-subtle, rgba(255,255,255,0.06));
+		color: var(--rs-text-muted, #64748b);
+		background: var(--rs-bg-surface-raised, #f0efe9);
+		border-bottom: 1px solid var(--rs-border-subtle, rgba(0,0,0,0.06));
 	}
 
 	.people-row {
@@ -807,7 +807,7 @@ const OVERLAY_CSS = `
 	}
 
 	.people-row:hover {
-		background: var(--rs-bg-hover, rgba(255,255,255,0.08));
+		background: var(--rs-bg-hover, rgba(0,0,0,0.04));
 	}
 
 	.people-row .dot {
@@ -824,7 +824,7 @@ const OVERLAY_CSS = `
 
 	.people-row .name {
 		font-size: 13px;
-		color: var(--rs-text-primary, #fff);
+		color: var(--rs-text-primary, #0f172a);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -832,7 +832,7 @@ const OVERLAY_CSS = `
 
 	.peer-context {
 		font-size: 11px;
-		color: var(--rs-text-muted, #888);
+		color: var(--rs-text-muted, #64748b);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -851,7 +851,7 @@ const OVERLAY_CSS = `
 		display: flex;
 		align-items: center;
 		gap: 0;
-		border: 1px solid var(--rs-border, rgba(255,255,255,0.12));
+		border: 1px solid var(--rs-border, rgba(0,0,0,0.1));
 		border-radius: 6px;
 		overflow: hidden;
 		flex-shrink: 0;
@@ -862,19 +862,19 @@ const OVERLAY_CSS = `
 		border: none;
 		background: none;
 		font-size: 11px;
-		color: var(--rs-text-muted, #888);
+		color: var(--rs-text-muted, #64748b);
 		cursor: pointer;
 		transition: background 0.15s, color 0.15s;
 		white-space: nowrap;
 	}
 
 	.mode-toggle button.active {
-		background: var(--rs-accent, #3b82f6);
+		background: var(--rs-accent, #14b8a6);
 		color: #fff;
 	}
 
 	.mode-toggle button:not(.active):hover {
-		background: var(--rs-bg-hover, rgba(255,255,255,0.08));
+		background: var(--rs-bg-hover, rgba(0,0,0,0.04));
 	}
 
 	/* ── Peer action buttons (canvas only) ── */
@@ -906,14 +906,14 @@ const OVERLAY_CSS = `
 		background: none;
 		text-align: left;
 		font-size: 12px;
-		color: var(--rs-text-secondary, #ccc);
+		color: var(--rs-text-secondary, #374151);
 		cursor: pointer;
 		border-radius: 6px;
 		transition: background 0.15s;
 	}
 
 	.people-actions button:hover {
-		background: var(--rs-bg-hover, rgba(255,255,255,0.08));
+		background: var(--rs-bg-hover, rgba(0,0,0,0.04));
 	}
 
 	/* ── Cursors ── */