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