From 06a58f1bbabcea3fce8c98dcf35b308b8dc4615a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 25 Mar 2026 11:39:14 -0700
Subject: [PATCH] fix(ui): theme-adaptive rSocials buttons + device link
 textbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- campaign-wizard.css: fix undefined --rs-surface-hover → --rs-bg-hover
- campaign-workflow.css: replace hardcoded blue colors with theme vars
  (--rs-primary-hover, --rs-bg-active, --rs-border, --rs-primary)
- rstack-identity.ts: device link URL input --rs-bg-inset → --rs-input-bg
  (--rs-bg-inset was never defined in theme.css, dark fallback always won)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../rsocials/components/campaign-wizard.css    |  2 +-
 .../rsocials/components/campaign-workflow.css  | 18 +++++++++---------
 shared/components/rstack-identity.ts           |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/modules/rsocials/components/campaign-wizard.css b/modules/rsocials/components/campaign-wizard.css
index 046e6ae..88c02a7 100644
--- a/modules/rsocials/components/campaign-wizard.css
+++ b/modules/rsocials/components/campaign-wizard.css
@@ -157,7 +157,7 @@
 
 .cw-btn:hover {
 	border-color: var(--rs-accent, #14b8a6);
-	background: var(--rs-surface-hover, #2a2a40);
+	background: var(--rs-bg-hover);
 }
 
 .cw-btn:disabled {
diff --git a/modules/rsocials/components/campaign-workflow.css b/modules/rsocials/components/campaign-workflow.css
index 1deff4d..c5675c0 100644
--- a/modules/rsocials/components/campaign-workflow.css
+++ b/modules/rsocials/components/campaign-workflow.css
@@ -75,26 +75,26 @@ folk-campaign-workflow {
 
 .cw-btn--back {
 	text-decoration: none;
-	color: #93c5fd;
-	border-color: #3b82f644;
+	color: var(--rs-primary-hover, #6366f1);
+	border-color: var(--rs-border, rgba(59,130,246,0.27));
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 }
 .cw-btn--back:hover {
-	background: #3b82f622;
-	border-color: #3b82f6;
+	background: var(--rs-bg-active, rgba(59,130,246,0.13));
+	border-color: var(--rs-primary, #4f46e5);
 }
 
 .cw-btn--run {
-	background: #3b82f622;
-	border-color: #3b82f655;
-	color: #60a5fa;
+	background: var(--rs-bg-active, rgba(59,130,246,0.13));
+	border-color: var(--rs-border, rgba(59,130,246,0.33));
+	color: var(--rs-primary-hover, #6366f1);
 }
 
 .cw-btn--run:hover {
-	background: #3b82f633;
-	border-color: #3b82f6;
+	background: var(--rs-bg-active, rgba(59,130,246,0.2));
+	border-color: var(--rs-primary, #4f46e5);
 }
 
 .cw-toggle {
diff --git a/shared/components/rstack-identity.ts b/shared/components/rstack-identity.ts
index 840caa3..f1a821a 100644
--- a/shared/components/rstack-identity.ts
+++ b/shared/components/rstack-identity.ts
@@ -470,7 +470,7 @@ export class RStackIdentity extends HTMLElement {
 					.eid-nudge-link-row { display: flex; gap: 6px; margin-bottom: 0.4rem; }
 					.eid-nudge-link-input {
 						flex: 1; font-size: 0.72rem; padding: 5px 8px; border-radius: 6px;
-						border: 1px solid var(--rs-border, #334155); background: var(--rs-bg-inset, #0f172a);
+						border: 1px solid var(--rs-border, #334155); background: var(--rs-input-bg, #0f172a);
 						color: var(--rs-text-secondary, #94a3b8); min-width: 0; outline: none;
 					}
 					.eid-nudge-btn--copy {