jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: migrate folk-rapp shadow DOM colors to --rs-* CSS variables 

folk-rapp.ts (the wrapper for all rApps on canvas) had ~30 hardcoded
dark-mode hex colors in its shadow DOM styles, preventing rApp cards
from responding to light/dark theme switching.

Replaces all hardcoded colors with var(--rs-*) tokens: bg-surface,
text-primary, text-secondary, text-muted, text-inverse, border,
shadow, bg-hover, bg-active, etc.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-10 19:13:28 -07:00
parent 8072b250ea
commit 1c336c8616
1 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
lib/folk-rapp.ts
View File

@ -47,9 +47,9 @@ const styles = css`
:host {
display: flex;
flex-direction: column;
background: #1e293b;
background: var(--rs-bg-surface);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
box-shadow: var(--rs-shadow-md);
min-width: 200px;
min-height: 120px;
overflow: hidden;
@ -67,8 +67,8 @@ const styles = css`
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: var(--rapp-color, #334155);
color: #0f172a;
background: var(--rapp-color, var(--rs-bg-surface-raised));
color: var(--rs-text-inverse);
font-size: 12px;
font-weight: 700;
cursor: move;
@ -115,7 +115,7 @@ const styles = css`
.rapp-actions button {
background: transparent;
border: none;
color: #0f172a;
color: var(--rs-text-inverse);
cursor: pointer;
padding: 2px 5px;
border-radius: 4px;
@ -163,15 +163,15 @@ const styles = css`
justify-content: center;
height: 100%;
gap: 12px;
color: #64748b;
color: var(--rs-text-muted);
font-size: 13px;
}
.rapp-loading .spinner {
width: 24px;
height: 24px;
border: 2px solid rgba(100, 116, 139, 0.3);
border-top-color: #64748b;
border: 2px solid var(--rs-spinner-track);
border-top-color: var(--rs-text-muted);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@ -187,7 +187,7 @@ const styles = css`
justify-content: center;
height: 100%;
gap: 8px;
color: #ef4444;
color: var(--rs-error);
font-size: 13px;
padding: 16px;
text-align: center;
@ -206,7 +206,7 @@ const styles = css`
.rapp-picker-title {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
color: var(--rs-text-secondary);
margin-bottom: 4px;
}
@ -218,7 +218,7 @@ const styles = css`
border-radius: 6px;
cursor: pointer;
transition: background 0.12s;
color: #e2e8f0;
color: var(--rs-text-primary);
font-size: 13px;
border: none;
background: transparent;
@ -227,7 +227,7 @@ const styles = css`
}
.rapp-picker-item:hover {
background: rgba(255, 255, 255, 0.08);
background: var(--rs-bg-hover);
}
.rapp-picker-badge {
@ -239,7 +239,7 @@ const styles = css`
border-radius: 5px;
font-size: 0.5rem;
font-weight: 900;
color: #0f172a;
color: var(--rs-text-inverse);
flex-shrink: 0;
}
@ -252,10 +252,10 @@ const styles = css`
min-width: 180px;
max-height: 300px;
overflow-y: auto;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--rs-bg-surface);
border: 1px solid var(--rs-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
box-shadow: var(--rs-shadow-lg);
padding: 4px;
z-index: 100;
display: none;
@ -272,7 +272,7 @@ const styles = css`
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
color: #e2e8f0;
color: var(--rs-text-primary);
font-size: 12px;
border: none;
background: transparent;
@ -282,11 +282,11 @@ const styles = css`
}
.rapp-switcher-item:hover {
background: rgba(255, 255, 255, 0.08);
background: var(--rs-bg-hover);
}
.rapp-switcher-item.active {
background: rgba(6, 182, 212, 0.15);
background: var(--rs-bg-active);
}
.rapp-switcher-badge {
@ -298,7 +298,7 @@ const styles = css`
border-radius: 4px;
font-size: 0.45rem;
font-weight: 900;
color: #0f172a;
color: var(--rs-text-inverse);
flex-shrink: 0;
}
@ -307,13 +307,13 @@ const styles = css`
width: 6px;
height: 6px;
border-radius: 50%;
background: #475569;
background: var(--rs-text-muted);
flex-shrink: 0;
transition: background 0.3s;
}
.rapp-status.connected {
background: #22c55e;
background: var(--rs-success);
}
/* Widget mode styles */
@ -322,26 +322,26 @@ const styles = css`
flex-direction: column;
height: 100%;
padding: 10px 12px;
color: #e2e8f0;
color: var(--rs-text-primary);
font-size: 13px;
cursor: pointer;
overflow: hidden;
}
.rapp-widget:hover {
background: rgba(255, 255, 255, 0.03);
background: var(--rs-bg-hover);
}
.rapp-widget-stat {
font-size: 20px;
font-weight: 700;
color: #f8fafc;
color: var(--rs-text-primary);
margin-bottom: 6px;
}
.rapp-widget-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--rs-border-subtle);
margin: 6px 0;
}
@ -358,14 +358,14 @@ const styles = css`
align-items: center;
gap: 6px;
font-size: 12px;
color: #cbd5e1;
color: var(--rs-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rapp-widget-row .bullet {
color: #64748b;
color: var(--rs-text-muted);
flex-shrink: 0;
}
@ -376,12 +376,12 @@ const styles = css`
.rapp-widget-row .value {
margin-left: auto;
color: #94a3b8;
color: var(--rs-text-secondary);
flex-shrink: 0;
}
.rapp-widget-empty {
color: #64748b;
color: var(--rs-text-muted);
font-size: 12px;
font-style: italic;
}
@ -399,7 +399,7 @@ const styles = css`
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
background: #334155;
background: var(--rs-bg-surface-raised);
}
/* Mode toggle button active state */