From 9c6c8c8dab5e80f50f0944263c112dfd09b6b8a7 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 4 Mar 2026 12:55:07 -0800 Subject: [PATCH] fix: migrate all rApp components to theme variables for dark/light mode Replace hardcoded dark-specific colors with CSS custom properties across rcal, rflows, rbooks, rschedule, rtrips, and rwork modules. Adds [data-theme="light"] overrides for rFlows node type buttons, danger buttons, and overlay elements. SVG fills switched to style attributes for theme variable support. Co-Authored-By: Claude Opus 4.6 --- modules/rbooks/components/folk-book-reader.ts | 46 +-- modules/rcal/components/folk-calendar-view.ts | 256 ++++++++-------- modules/rflows/components/flows.css | 278 ++++++++++-------- modules/rflows/components/folk-flow-river.ts | 44 +-- modules/rflows/components/folk-flows-app.ts | 108 +++---- .../components/folk-reminders-widget.ts | 18 +- .../rschedule/components/folk-schedule-app.ts | 66 ++--- .../rtrips/components/folk-trips-planner.ts | 64 ++-- modules/rwork/components/folk-work-board.ts | 58 ++-- 9 files changed, 482 insertions(+), 456 deletions(-) diff --git a/modules/rbooks/components/folk-book-reader.ts b/modules/rbooks/components/folk-book-reader.ts index 743c59e..f97348a 100644 --- a/modules/rbooks/components/folk-book-reader.ts +++ b/modules/rbooks/components/folk-book-reader.ts @@ -366,8 +366,8 @@ export class FolkBookReader extends HTMLElement { width: 100%; height: 100%; min-height: calc(100vh - 52px); - background: #0f172a; - color: #f1f5f9; + background: var(--rs-bg-page); + color: var(--rs-text-primary); } .loading { @@ -382,7 +382,7 @@ export class FolkBookReader extends HTMLElement { .loading-spinner { width: 40px; height: 40px; - border: 3px solid #334155; + border: 3px solid var(--rs-border-strong); border-top-color: #60a5fa; border-radius: 50%; animation: spin 0.8s linear infinite; @@ -390,14 +390,14 @@ export class FolkBookReader extends HTMLElement { @keyframes spin { to { transform: rotate(360deg); } } .loading-status { - color: #94a3b8; + color: var(--rs-text-secondary); font-size: 0.9rem; } .loading-bar { width: 200px; height: 4px; - background: #1e293b; + background: var(--rs-bg-surface); border-radius: 2px; overflow: hidden; } @@ -417,15 +417,15 @@ export class FolkBookReader extends HTMLElement { height: calc(100vh - 52px); gap: 0.5rem; } - .error h3 { color: #f87171; margin: 0; } - .error p { color: #94a3b8; margin: 0; } + .error h3 { color: var(--rs-error); margin: 0; } + .error p { color: var(--rs-text-secondary); margin: 0; } .error button { margin-top: 1rem; padding: 0.5rem 1.5rem; - border: 1px solid #334155; + border: 1px solid var(--rs-border-strong); border-radius: 0.5rem; - background: #1e293b; - color: #f1f5f9; + background: var(--rs-bg-surface); + color: var(--rs-text-primary); cursor: pointer; } @@ -446,23 +446,23 @@ export class FolkBookReader extends HTMLElement { min-height: 36px; } .rapp-nav__back { - padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); - background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; + padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rs-border-subtle); + background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; text-decoration: none; transition: color 0.15s, border-color 0.15s; } - .rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } + .rapp-nav__back:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); } .rapp-nav__title { - font-size: 15px; font-weight: 600; color: #e2e8f0; + font-size: 15px; font-weight: 600; color: var(--rs-text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rapp-nav__subtitle { font-size: 0.8rem; - color: #94a3b8; + color: var(--rs-text-secondary); margin-left: 4px; } .rapp-nav__meta { font-size: 0.85rem; - color: #94a3b8; + color: var(--rs-text-secondary); white-space: nowrap; } @@ -481,10 +481,10 @@ export class FolkBookReader extends HTMLElement { .nav-btn { width: 44px; height: 80px; - border: 1px solid #334155; + border: 1px solid var(--rs-border-strong); border-radius: 0.5rem; - background: #1e293b; - color: #f1f5f9; + background: var(--rs-bg-surface); + color: var(--rs-text-primary); font-size: 1.5rem; cursor: pointer; display: flex; @@ -492,7 +492,7 @@ export class FolkBookReader extends HTMLElement { justify-content: center; transition: background 0.15s; } - .nav-btn:hover { background: #334155; } + .nav-btn:hover { background: var(--rs-border-strong); } .reader-footer { display: flex; @@ -501,14 +501,14 @@ export class FolkBookReader extends HTMLElement { .nav-text-btn { padding: 0.375rem 1rem; - border: 1px solid #334155; + border: 1px solid var(--rs-border-strong); border-radius: 0.375rem; background: transparent; - color: #94a3b8; + color: var(--rs-text-secondary); font-size: 0.8rem; cursor: pointer; } - .nav-text-btn:hover { border-color: #60a5fa; color: #f1f5f9; } + .nav-text-btn:hover { border-color: #60a5fa; color: var(--rs-text-primary); } `; } diff --git a/modules/rcal/components/folk-calendar-view.ts b/modules/rcal/components/folk-calendar-view.ts index 5cac8c3..055a333 100644 --- a/modules/rcal/components/folk-calendar-view.ts +++ b/modules/rcal/components/folk-calendar-view.ts @@ -810,7 +810,7 @@ class FolkCalendarView extends HTMLElement { ${dayEvents.length > 0 ? `
${dayEvents.slice(0, 5).map(e => ``).join("")} - ${dayEvents.length > 5 ? `+${dayEvents.length - 5}` : ""} + ${dayEvents.length > 5 ? `+${dayEvents.length - 5}` : ""}
${dayEvents.slice(0, 2).map(e => { const evColor = e.source_color || "#6366f1"; @@ -1366,10 +1366,10 @@ class FolkCalendarView extends HTMLElement { ${e.description ? `
${this.esc(e.description)}
` : ""}
${new Date(e.start_time).toLocaleString()}${e.end_time ? ` \u2013 ${new Date(e.end_time).toLocaleString()}` : ""}
${e.location_name ? `
\u{1F4CD} ${this.esc(e.location_name)}
` : ""} - ${e.location_breadcrumb ? `
${this.esc(e.location_breadcrumb)}
` : ""} + ${e.location_breadcrumb ? `
${this.esc(e.location_breadcrumb)}
` : ""} ${e.source_name ? `
${this.esc(e.source_name)}
` : ""} - ${e.is_virtual ? `
\u{1F4BB} ${this.esc(e.virtual_platform || "Virtual")} ${e.virtual_url ? `Join` : ""}
` : ""} - ${e.latitude != null ? `
\u{1F4CD} ${e.latitude.toFixed(4)}, ${e.longitude.toFixed(4)}
` : ""} + ${e.is_virtual ? `
\u{1F4BB} ${this.esc(e.virtual_platform || "Virtual")} ${e.virtual_url ? `Join` : ""}
` : ""} + ${e.latitude != null ? `
\u{1F4CD} ${e.latitude.toFixed(4)}, ${e.longitude.toFixed(4)}
` : ""} `; } @@ -1738,52 +1738,52 @@ class FolkCalendarView extends HTMLElement { private getStyles(): string { return ` - :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; padding: 0.5rem; } + :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); padding: 0.5rem; } * { box-sizing: border-box; } - .error { color: #ef5350; text-align: center; padding: 8px; } + .error { color: var(--rs-error); text-align: center; padding: 8px; } /* ── Nav ── */ .nav { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; min-height: 36px; flex-wrap: wrap; } - .nav-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: #94a3b8; cursor: pointer; font-size: 14px; -webkit-tap-highlight-color: transparent; } - .nav-btn:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } - .nav-btn.active { border-color: #6366f1; color: #6366f1; } - .nav-title { font-size: 15px; font-weight: 600; flex: 1; text-align: center; color: #e2e8f0; } - .nav-primary { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; } + .nav-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 14px; -webkit-tap-highlight-color: transparent; } + .nav-btn:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); } + .nav-btn.active { border-color: var(--rs-primary-hover); color: var(--rs-primary-hover); } + .nav-title { font-size: 15px; font-weight: 600; flex: 1; text-align: center; color: var(--rs-text-primary); } + .nav-primary { padding: 6px 14px; border-radius: 6px; border: none; background: var(--rs-primary); color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; } /* ── Lunar Overlay ── */ - .lunar-overlay { background: #16161e; border: 1px solid #222; border-radius: 8px; padding: 0; margin-bottom: 12px; overflow: hidden; } + .lunar-overlay { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 0; margin-bottom: 12px; overflow: hidden; } .lunar-summary { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; user-select: none; transition: background 0.15s; } - .lunar-summary:hover { background: rgba(255,255,255,0.04); } - .lunar-summary-phase { font-size: 13px; font-weight: 600; color: #e2e8f0; text-transform: capitalize; white-space: nowrap; } - .lunar-summary-stats { font-size: 11px; color: #94a3b8; white-space: nowrap; } - .lunar-summary-chevron { margin-left: auto; font-size: 10px; color: #64748b; } - .lunar-expanded { border-top: 1px solid #222; padding: 12px; } + .lunar-summary:hover { background: var(--rs-bg-hover); } + .lunar-summary-phase { font-size: 13px; font-weight: 600; color: var(--rs-text-primary); text-transform: capitalize; white-space: nowrap; } + .lunar-summary-stats { font-size: 11px; color: var(--rs-text-secondary); white-space: nowrap; } + .lunar-summary-chevron { margin-left: auto; font-size: 10px; color: var(--rs-text-muted); } + .lunar-expanded { border-top: 1px solid var(--rs-border); padding: 12px; } .phase-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; } - .phase-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; border: 1px solid #333; font-size: 11px; color: #94a3b8; white-space: nowrap; flex-shrink: 0; transition: all 0.15s; } - .phase-chip.current { border-color: #6366f1; color: #818cf8; background: rgba(99,102,241,0.08); } + .phase-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--rs-border-strong); font-size: 11px; color: var(--rs-text-secondary); white-space: nowrap; flex-shrink: 0; transition: all 0.15s; } + .phase-chip.current { border-color: var(--rs-primary-hover); color: #818cf8; background: var(--rs-bg-active); } .phase-chip.past { opacity: 0.4; } .phase-chip-label { text-transform: capitalize; } /* ── Zoom Controller ── */ - .zoom-ctrl { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 8px 10px; background: #16161e; border: 1px solid #222; border-radius: 8px; flex-wrap: wrap; } - .zoom-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #333; background: transparent; color: #94a3b8; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } - .zoom-btn:hover { border-color: #6366f1; color: #e2e8f0; } + .zoom-ctrl { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 8px 10px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; flex-wrap: wrap; } + .zoom-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rs-border-strong); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } + .zoom-btn:hover { border-color: var(--rs-primary-hover); color: var(--rs-text-primary); } .zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; } - .zoom-btn:disabled:hover { border-color: #333; color: #94a3b8; } + .zoom-btn:disabled:hover { border-color: var(--rs-border-strong); color: var(--rs-text-secondary); } .zoom-track { flex: 1; display: flex; align-items: center; gap: 0; min-width: 200px; } .zoom-tick { flex: 1; text-align: center; cursor: pointer; padding: 4px 0; } - .zoom-tick-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #333; background: #16161e; margin: 0 auto; transition: all 0.15s; } - .zoom-tick-dot.active { border-color: #6366f1; background: #4f46e5; transform: scale(1.2); } - .zoom-tick-label { font-size: 9px; color: #4a5568; margin-top: 3px; transition: color 0.15s; } + .zoom-tick-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rs-border-strong); background: var(--rs-bg-surface); margin: 0 auto; transition: all 0.15s; } + .zoom-tick-dot.active { border-color: var(--rs-primary-hover); background: var(--rs-primary); transform: scale(1.2); } + .zoom-tick-label { font-size: 9px; color: var(--rs-text-muted); margin-top: 3px; transition: color 0.15s; } .zoom-tick-label.active { color: #818cf8; font-weight: 600; } - .coupling-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid #333; background: transparent; color: #64748b; cursor: pointer; font-size: 11px; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; } - .coupling-btn:hover { border-color: #555; color: #94a3b8; } - .coupling-btn.coupled { border-color: #6366f1; color: #818cf8; background: rgba(99,102,241,0.08); } + .coupling-btn { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--rs-border-strong); background: transparent; color: var(--rs-text-muted); cursor: pointer; font-size: 11px; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; } + .coupling-btn:hover { border-color: var(--rs-border-strong); color: var(--rs-text-secondary); } + .coupling-btn.coupled { border-color: var(--rs-primary-hover); color: #818cf8; background: var(--rs-bg-active); } /* ── Sources ── */ .sources { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } - .src-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; border: 1px solid #333; cursor: pointer; transition: opacity 0.15s; user-select: none; } + .src-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; border: 1px solid var(--rs-border-strong); cursor: pointer; transition: opacity 0.15s; user-select: none; } .src-badge:hover { filter: brightness(1.2); } .src-badge.filtered { opacity: 0.3; text-decoration: line-through; } @@ -1793,137 +1793,137 @@ class FolkCalendarView extends HTMLElement { .calendar-pane { overflow: auto; min-width: 0; } /* ── Map Panel ── */ - .map-panel { background: #0d1117; border: 1px solid #333; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } - .map-panel--floating { position: absolute; bottom: 8px; right: 8px; width: 380px; height: 320px; resize: both; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } + .map-panel { background: var(--rs-bg-surface-sunken); border: 1px solid var(--rs-border-strong); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } + .map-panel--floating { position: absolute; bottom: 8px; right: 8px; width: 380px; height: 320px; resize: both; z-index: 100; box-shadow: var(--rs-shadow-lg); } .map-panel--docked { min-height: 400px; } - .map-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #16161e; border-bottom: 1px solid #222; cursor: default; flex-shrink: 0; } - .map-panel-title { font-size: 12px; font-weight: 500; color: #94a3b8; } + .map-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--rs-bg-surface); border-bottom: 1px solid var(--rs-border); cursor: default; flex-shrink: 0; } + .map-panel-title { font-size: 12px; font-weight: 500; color: var(--rs-text-secondary); } .map-panel-controls { display: flex; gap: 4px; } - .map-ctrl-btn { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #333; background: transparent; color: #94a3b8; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; } - .map-ctrl-btn:hover { border-color: #6366f1; color: #e2e8f0; } + .map-ctrl-btn { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--rs-border-strong); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; } + .map-ctrl-btn:hover { border-color: var(--rs-primary-hover); color: var(--rs-text-primary); } .map-body { flex: 1; position: relative; min-height: 200px; } - .map-overlay-label { position: absolute; top: 8px; right: 8px; z-index: 500; background: rgba(22,22,30,0.9); border: 1px solid #333; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #94a3b8; pointer-events: none; } - .map-fab { position: absolute; bottom: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #333; background: #16161e; color: #e2e8f0; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: all 0.15s; } - .map-fab:hover { border-color: #6366f1; background: #1e1e2e; transform: scale(1.1); } + .map-overlay-label { position: absolute; top: 8px; right: 8px; z-index: 500; background: var(--rs-bg-overlay); border: 1px solid var(--rs-border-strong); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--rs-text-secondary); pointer-events: none; } + .map-fab { position: absolute; bottom: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rs-border-strong); background: var(--rs-bg-surface); color: var(--rs-text-primary); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; z-index: 100; box-shadow: var(--rs-shadow-md); transition: all 0.15s; } + .map-fab:hover { border-color: var(--rs-primary-hover); background: var(--rs-bg-surface-raised); transform: scale(1.1); } /* ── Synodic (reused in overlay) ── */ .synodic-section { margin: 0 0 8px; } - .synodic-labels { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-bottom: 6px; } - .synodic-bar { height: 14px; background: #222; border-radius: 7px; overflow: visible; position: relative; } - .synodic-fill { height: 100%; background: linear-gradient(to right, #1a1a2e, #e2e8f0, #1a1a2e); border-radius: 7px; transition: width 0.3s; } + .synodic-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--rs-text-muted); margin-bottom: 6px; } + .synodic-bar { height: 14px; background: var(--rs-border); border-radius: 7px; overflow: visible; position: relative; } + .synodic-fill { height: 100%; background: linear-gradient(to right, var(--rs-bg-surface), var(--rs-text-primary), var(--rs-bg-surface)); border-radius: 7px; transition: width 0.3s; } .synodic-marker { position: absolute; top: -2px; font-size: 12px; transform: translateX(-50%); pointer-events: none; } /* ── Month Grid ── */ .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } - .wd { text-align: center; font-size: 11px; color: #64748b; padding: 4px; font-weight: 600; } + .wd { text-align: center; font-size: 11px; color: var(--rs-text-muted); padding: 4px; font-weight: 600; } .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } - .day { background: #16161e; border: 1px solid #222; border-radius: 6px; min-height: 80px; padding: 6px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; } - .day:hover { border-color: #444; } - .day.today { border-color: #6366f1; background: rgba(99,102,241,0.06); } - .day.expanded { border-color: #6366f1; background: rgba(99,102,241,0.1); } + .day { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 6px; min-height: 80px; padding: 6px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; } + .day:hover { border-color: var(--rs-border-strong); } + .day.today { border-color: var(--rs-primary-hover); background: var(--rs-bg-active); } + .day.expanded { border-color: var(--rs-primary-hover); background: rgba(99,102,241,0.1); } .day.other { opacity: 0.3; } .day-num { font-size: 12px; font-weight: 600; margin-bottom: 2px; display: flex; justify-content: space-between; } .moon { font-size: 10px; opacity: 0.7; } .dots { display: flex; flex-wrap: wrap; gap: 1px; } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 1px; } - .ev-label { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; line-height: 1.4; padding: 1px 3px; border-radius: 3px; cursor: pointer; } - .ev-label:hover { background: rgba(255,255,255,0.08); } - .ev-time { color: #666; font-size: 8px; margin-right: 2px; } + .ev-label { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rs-text-secondary); line-height: 1.4; padding: 1px 3px; border-radius: 3px; cursor: pointer; } + .ev-label:hover { background: var(--rs-bg-hover); } + .ev-time { color: var(--rs-text-muted); font-size: 8px; margin-right: 2px; } .ev-bell { margin-right: 2px; font-size: 8px; } - .ev-loc { color: #64748b; font-size: 7px; margin-left: 3px; } + .ev-loc { color: var(--rs-text-muted); font-size: 7px; margin-left: 3px; } .ev-virtual { font-size: 8px; margin-right: 2px; vertical-align: middle; } /* ── Drop Target ── */ - .day.drop-target { background: rgba(245,158,11,0.15); border: 2px dashed #f59e0b; } + .day.drop-target { background: rgba(245,158,11,0.15); border: 2px dashed var(--rs-warning); } /* ── Day Detail Panel ── */ - .day-detail { grid-column: 1 / -1; background: #1a1a2e; border: 1px solid #334155; border-radius: 8px; padding: 12px; } + .day-detail { grid-column: 1 / -1; background: var(--rs-bg-surface); border: 1px solid var(--rs-bg-surface-raised); border-radius: 8px; padding: 12px; } .dd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } - .dd-date { font-size: 14px; font-weight: 600; color: #e2e8f0; } - .dd-close { background: none; border: none; color: #64748b; font-size: 18px; cursor: pointer; padding: 4px 8px; } + .dd-date { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); } + .dd-close { background: none; border: none; color: var(--rs-text-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; } .dd-event { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 6px; margin-bottom: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; } - .dd-event:hover { background: rgba(255,255,255,0.05); } + .dd-event:hover { background: var(--rs-bg-hover); } .dd-color { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; } .dd-info { flex: 1; min-width: 0; } - .dd-title { font-size: 13px; font-weight: 500; color: #e2e8f0; } - .dd-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; } - .dd-empty { font-size: 12px; color: #64748b; padding: 8px 0; } - .dd-desc { font-size: 11px; color: #64748b; margin-top: 3px; line-height: 1.4; } + .dd-title { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); } + .dd-meta { font-size: 11px; color: var(--rs-text-secondary); margin-top: 2px; } + .dd-empty { font-size: 12px; color: var(--rs-text-muted); padding: 8px 0; } + .dd-desc { font-size: 11px; color: var(--rs-text-muted); margin-top: 3px; line-height: 1.4; } .dd-source { font-size: 9px; padding: 1px 6px; border-radius: 8px; border: 1px solid; margin-left: 6px; vertical-align: middle; } /* ── Event Modal ── */ .modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; } - .modal { background: #1e1e2e; border: 1px solid #333; border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; } + .modal { background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; } .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; } - .modal-field { font-size: 13px; color: #aaa; margin-bottom: 6px; } - .modal-close { float: right; background: none; border: none; color: #888; font-size: 18px; cursor: pointer; } + .modal-field { font-size: 13px; color: var(--rs-text-secondary); margin-bottom: 6px; } + .modal-close { float: right; background: none; border: none; color: var(--rs-text-muted); font-size: 18px; cursor: pointer; } /* ── Day View ── */ .day-view { position: relative; } - .day-view-header { font-size: 13px; color: #94a3b8; margin-bottom: 8px; font-weight: 500; } - .day-allday { background: #16161e; border: 1px solid #222; border-radius: 8px; padding: 8px; margin-bottom: 8px; } - .day-allday-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } - .timeline { position: relative; border-left: 1px solid #222; margin-left: 44px; } - .hour-row { display: flex; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; } - .hour-label { position: absolute; left: -48px; top: -7px; width: 40px; text-align: right; font-size: 10px; color: #4a5568; font-variant-numeric: tabular-nums; } + .day-view-header { font-size: 13px; color: var(--rs-text-secondary); margin-bottom: 8px; font-weight: 500; } + .day-allday { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 8px; margin-bottom: 8px; } + .day-allday-label { font-size: 10px; color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } + .timeline { position: relative; border-left: 1px solid var(--rs-border); margin-left: 44px; } + .hour-row { display: flex; min-height: 48px; border-bottom: 1px solid var(--rs-border-subtle); position: relative; } + .hour-label { position: absolute; left: -48px; top: -7px; width: 40px; text-align: right; font-size: 10px; color: var(--rs-text-muted); font-variant-numeric: tabular-nums; } .hour-content { flex: 1; position: relative; padding-left: 8px; } .tl-event { position: absolute; left: 8px; right: 8px; border-radius: 6px; padding: 4px 8px; font-size: 11px; overflow: hidden; cursor: pointer; border-left: 3px solid; z-index: 1; transition: opacity 0.15s; } .tl-event:hover { opacity: 0.85; } - .tl-event-title { font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .tl-event-time { font-size: 10px; color: #94a3b8; } - .tl-event-loc { font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .tl-event-desc { font-size: 9px; color: #64748b; margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .tl-breadcrumb { font-size: 8px; color: #4a5568; background: rgba(255,255,255,0.04); padding: 1px 5px; border-radius: 3px; margin-top: 2px; display: inline-block; } + .tl-event-title { font-weight: 600; color: var(--rs-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .tl-event-time { font-size: 10px; color: var(--rs-text-secondary); } + .tl-event-loc { font-size: 10px; color: var(--rs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .tl-event-desc { font-size: 9px; color: var(--rs-text-muted); margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .tl-breadcrumb { font-size: 8px; color: var(--rs-text-muted); background: var(--rs-bg-hover); padding: 1px 5px; border-radius: 3px; margin-top: 2px; display: inline-block; } .tl-virtual { font-size: 9px; color: #818cf8; margin-left: 6px; } - .now-line { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 5; } - .now-dot { position: absolute; left: -5px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } + .now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--rs-error); z-index: 5; } + .now-dot { position: absolute; left: -5px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-error); } /* ── Week View ── */ .week-view { overflow-x: auto; } .week-header { display: grid; grid-template-columns: 44px repeat(7, 1fr); gap: 0; margin-bottom: 0; } - .week-day-header { text-align: center; padding: 8px 4px; font-size: 11px; color: #64748b; font-weight: 600; border-bottom: 1px solid #222; cursor: pointer; } - .week-day-header:hover { color: #e2e8f0; } - .week-day-header.today { color: #6366f1; border-bottom-color: #6366f1; } + .week-day-header { text-align: center; padding: 8px 4px; font-size: 11px; color: var(--rs-text-muted); font-weight: 600; border-bottom: 1px solid var(--rs-border); cursor: pointer; } + .week-day-header:hover { color: var(--rs-text-primary); } + .week-day-header.today { color: var(--rs-primary-hover); border-bottom-color: var(--rs-primary-hover); } .week-day-num { font-size: 16px; font-weight: 700; display: block; } .week-day-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; } .week-grid { display: grid; grid-template-columns: 44px repeat(7, 1fr); } - .week-time-label { font-size: 10px; color: #4a5568; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; height: 48px; } - .week-cell { border-left: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); min-height: 48px; position: relative; } + .week-time-label { font-size: 10px; color: var(--rs-text-muted); text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; height: 48px; } + .week-cell { border-left: 1px solid var(--rs-border-subtle); border-bottom: 1px solid var(--rs-border-subtle); min-height: 48px; position: relative; } .week-cell.today { background: rgba(99,102,241,0.04); } .week-event { position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: 2px 4px; font-size: 10px; overflow: hidden; cursor: pointer; border-left: 2px solid; z-index: 1; } .week-event:hover { opacity: 0.85; } - .week-event-title { font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .week-event-meta { font-size: 9px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .week-event-time { color: #64748b; } - .week-event-loc { margin-left: 3px; color: #4a5568; } + .week-event-title { font-weight: 600; color: var(--rs-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .week-event-meta { font-size: 9px; color: var(--rs-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .week-event-time { color: var(--rs-text-muted); } + .week-event-loc { margin-left: 3px; color: var(--rs-text-muted); } .wk-virtual { font-size: 9px; margin-right: 2px; vertical-align: middle; } /* ── Season View ── */ - .season-header { text-align: center; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #e2e8f0; } - .season-q { font-size: 12px; color: #64748b; font-weight: 400; margin-left: 4px; } + .season-header { text-align: center; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--rs-text-primary); } + .season-q { font-size: 12px; color: var(--rs-text-muted); font-weight: 400; margin-left: 4px; } .season-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .season-month-wrap { display: flex; flex-direction: column; gap: 4px; } .season-cities { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px 4px; } - .season-city-chip { font-size: 9px; color: #94a3b8; background: rgba(255,255,255,0.04); border: 1px solid #333; border-radius: 8px; padding: 1px 6px; white-space: nowrap; } + .season-city-chip { font-size: 9px; color: var(--rs-text-secondary); background: var(--rs-bg-hover); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 1px 6px; white-space: nowrap; } /* ── Year View ── */ .year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } /* ── Mini-Month (shared) ── */ - .mini-month { background: #16161e; border: 1px solid #222; border-radius: 8px; padding: 8px; cursor: pointer; transition: border-color 0.15s; } - .mini-month:hover { border-color: #444; } - .mini-month.current { border-color: #6366f1; background: rgba(99,102,241,0.06); } - .mini-month-title { font-size: 12px; font-weight: 600; text-align: center; color: #e2e8f0; margin-bottom: 4px; } + .mini-month { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 8px; cursor: pointer; transition: border-color 0.15s; } + .mini-month:hover { border-color: var(--rs-border-strong); } + .mini-month.current { border-color: var(--rs-primary-hover); background: var(--rs-bg-active); } + .mini-month-title { font-size: 12px; font-weight: 600; text-align: center; color: var(--rs-text-primary); margin-bottom: 4px; } .mini-wd-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 2px; } - .mini-wd { text-align: center; font-size: 8px; color: #4a5568; font-weight: 600; } + .mini-wd { text-align: center; font-size: 8px; color: var(--rs-text-muted); font-weight: 600; } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } - .mini-day { position: relative; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #94a3b8; border-radius: 3px; aspect-ratio: 1; cursor: pointer; } - .mini-day:hover { background: rgba(255,255,255,0.08); } - .mini-day.today { background: #4f46e5; color: #fff; font-weight: 700; } + .mini-day { position: relative; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--rs-text-secondary); border-radius: 3px; aspect-ratio: 1; cursor: pointer; } + .mini-day:hover { background: var(--rs-bg-hover); } + .mini-day.today { background: var(--rs-primary); color: #fff; font-weight: 700; } .mini-day.empty { cursor: default; } .mini-dots { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; } .mini-dot { width: 3px; height: 3px; border-radius: 50%; flex-shrink: 0; } - .mini-hint { text-align: center; font-size: 11px; color: #4a5568; margin-top: 8px; } + .mini-hint { text-align: center; font-size: 11px; color: var(--rs-text-muted); margin-top: 8px; } /* ── Transition Animations ── */ .calendar-pane { position: relative; overflow: hidden; } @@ -1958,68 +1958,68 @@ class FolkCalendarView extends HTMLElement { /* ── Variant Indicator ── */ .variant-indicator { display: flex; gap: 4px; align-items: center; padding: 0 6px; } - .variant-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #555; background: transparent; transition: all 0.15s; } - .variant-dot.active { background: #6366f1; border-color: #6366f1; } + .variant-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--rs-border-strong); background: transparent; transition: all 0.15s; } + .variant-dot.active { background: var(--rs-primary-hover); border-color: var(--rs-primary-hover); } /* ── Horizontal Day View ── */ .dh-container { overflow-x: auto; overflow-y: hidden; position: relative; min-height: 180px; padding: 0 0 8px; } - .dh-hours { position: relative; height: 24px; border-bottom: 1px solid #222; } - .dh-hour { position: absolute; top: 0; height: 24px; font-size: 10px; color: #4a5568; text-align: center; border-left: 1px solid rgba(255,255,255,0.04); line-height: 24px; } + .dh-hours { position: relative; height: 24px; border-bottom: 1px solid var(--rs-border); } + .dh-hour { position: absolute; top: 0; height: 24px; font-size: 10px; color: var(--rs-text-muted); text-align: center; border-left: 1px solid var(--rs-border-subtle); line-height: 24px; } .dh-events { position: relative; min-height: 140px; padding-top: 8px; } .dh-event { position: absolute; top: 32px; height: auto; min-height: 48px; border-radius: 6px; padding: 4px 8px; font-size: 11px; overflow: hidden; cursor: pointer; border-top: 3px solid; z-index: 1; } .dh-event:hover { opacity: 0.85; } - .dh-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 5; } - .dh-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } - .dh-event-loc { font-size: 9px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .dh-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rs-error); z-index: 5; } + .dh-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-error); } + .dh-event-loc { font-size: 9px; color: var(--rs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-virtual { font-size: 9px; margin-right: 2px; vertical-align: middle; } /* ── Month Transposed View ── */ .month-transposed { overflow-x: auto; } .mt-header-row { display: flex; gap: 2px; margin-bottom: 4px; } - .mt-week-header { flex: 1; min-width: 48px; text-align: center; font-size: 10px; color: #4a5568; font-weight: 600; padding: 4px; } + .mt-week-header { flex: 1; min-width: 48px; text-align: center; font-size: 10px; color: var(--rs-text-muted); font-weight: 600; padding: 4px; } .mt-row { display: flex; gap: 2px; margin-bottom: 2px; } - .mt-day-name { width: 40px; flex-shrink: 0; font-size: 11px; color: #64748b; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; } - .mt-cell { flex: 1; min-width: 48px; min-height: 36px; background: #16161e; border: 1px solid #222; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; } - .mt-cell:hover { border-color: #444; } - .mt-cell.today { border-color: #6366f1; background: rgba(99,102,241,0.06); } - .mt-cell.weekend { background: rgba(255,255,255,0.02); } + .mt-day-name { width: 40px; flex-shrink: 0; font-size: 11px; color: var(--rs-text-muted); font-weight: 600; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; } + .mt-cell { flex: 1; min-width: 48px; min-height: 36px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; } + .mt-cell:hover { border-color: var(--rs-border-strong); } + .mt-cell.today { border-color: var(--rs-primary-hover); background: var(--rs-bg-active); } + .mt-cell.weekend { background: var(--rs-bg-hover); } .mt-cell.empty { background: transparent; border-color: transparent; cursor: default; } - .mt-num { font-size: 12px; color: #94a3b8; font-weight: 500; } + .mt-num { font-size: 12px; color: var(--rs-text-secondary); font-weight: 500; } .mt-color-bar { display: flex; height: 3px; border-radius: 2px; overflow: hidden; width: 100%; position: absolute; bottom: 2px; left: 0; } .mt-seg { height: 100%; min-width: 2px; } - .mt-count-num { font-size: 9px; color: #94a3b8; font-weight: 600; } + .mt-count-num { font-size: 9px; color: var(--rs-text-secondary); font-weight: 600; } /* ── Year Vertical View ── */ .year-vertical { max-height: 600px; overflow-y: auto; } - .yv-month { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1a1a2e; cursor: pointer; } - .yv-month:hover { background: rgba(255,255,255,0.02); } - .yv-label { width: 36px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #94a3b8; text-align: right; padding-top: 2px; } + .yv-month { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rs-border-subtle); cursor: pointer; } + .yv-month:hover { background: var(--rs-bg-hover); } + .yv-label { width: 36px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--rs-text-secondary); text-align: right; padding-top: 2px; } .yv-days { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; } - .yv-day { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #64748b; border-radius: 3px; cursor: pointer; } - .yv-day:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; } - .yv-day.today { background: #4f46e5; color: #fff; font-weight: 700; } + .yv-day { position: relative; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--rs-text-muted); border-radius: 3px; cursor: pointer; } + .yv-day:hover { background: var(--rs-bg-hover); color: var(--rs-text-primary); } + .yv-day.today { background: var(--rs-primary); color: #fff; font-weight: 700; } .yv-day.weekend { opacity: 0.5; } .yv-dots { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; } .yv-dot { width: 3px; height: 3px; border-radius: 50%; flex-shrink: 0; } - .yv-country { font-size: 9px; color: #4a5568; margin-left: 6px; font-weight: 400; } + .yv-country { font-size: 9px; color: var(--rs-text-muted); margin-left: 6px; font-weight: 400; } /* ── Multi-Year View ── */ .multi-year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } - .my-year { background: #16161e; border: 1px solid #222; border-radius: 8px; padding: 8px; cursor: pointer; transition: border-color 0.15s; } - .my-year:hover { border-color: #444; } - .my-year.current { border-color: #6366f1; background: rgba(99,102,241,0.06); } - .my-year-label { font-size: 14px; font-weight: 700; text-align: center; color: #e2e8f0; margin-bottom: 6px; } + .my-year { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; padding: 8px; cursor: pointer; transition: border-color 0.15s; } + .my-year:hover { border-color: var(--rs-border-strong); } + .my-year.current { border-color: var(--rs-primary-hover); background: var(--rs-bg-active); } + .my-year-label { font-size: 14px; font-weight: 700; text-align: center; color: var(--rs-text-primary); margin-bottom: 6px; } .my-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .micro-month { display: flex; align-items: center; gap: 2px; padding: 2px 3px; border-radius: 3px; cursor: pointer; overflow: hidden; } - .micro-month:hover { background: rgba(255,255,255,0.08); } - .micro-label { font-size: 8px; color: #4a5568; font-weight: 600; width: 8px; flex-shrink: 0; } + .micro-month:hover { background: var(--rs-bg-hover); } + .micro-label { font-size: 8px; color: var(--rs-text-muted); font-weight: 600; width: 8px; flex-shrink: 0; } .micro-bar-stack { height: 3px; border-radius: 2px; flex-shrink: 0; display: flex; overflow: hidden; } .micro-seg { height: 100%; min-width: 1px; } - .micro-count { font-size: 7px; color: #64748b; flex-shrink: 0; } + .micro-count { font-size: 7px; color: var(--rs-text-muted); flex-shrink: 0; } /* ── Keyboard Hint ── */ - .kbd-hint { text-align: center; font-size: 10px; color: #333; margin-top: 12px; padding-top: 8px; border-top: 1px solid #1a1a2e; } - .kbd-hint kbd { padding: 1px 4px; background: #16161e; border: 1px solid #222; border-radius: 3px; font-family: inherit; font-size: 9px; } + .kbd-hint { text-align: center; font-size: 10px; color: var(--rs-text-muted); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rs-border-subtle); } + .kbd-hint kbd { padding: 1px 4px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 3px; font-family: inherit; font-size: 9px; } /* ── Mobile ── */ @media (max-width: 768px) { diff --git a/modules/rflows/components/flows.css b/modules/rflows/components/flows.css index c346011..51e1d94 100644 --- a/modules/rflows/components/flows.css +++ b/modules/rflows/components/flows.css @@ -11,11 +11,11 @@ .flows-detail ::-webkit-scrollbar-track, .flows-landing ::-webkit-scrollbar-track { background: transparent; } .flows-detail ::-webkit-scrollbar-thumb, -.flows-landing ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; } +.flows-landing ::-webkit-scrollbar-thumb { background: var(--rs-bg-surface-raised); border-radius: 3px; } /* ── Shared utility classes ──────────────────────────── */ -.flows-loading { text-align: center; color: #64748b; padding: 48px 16px; font-size: 14px; } -.flows-error { text-align: center; color: #ef4444; padding: 20px 16px; font-size: 14px; } +.flows-loading { text-align: center; color: var(--rs-text-muted); padding: 48px 16px; font-size: 14px; } +.flows-error { text-align: center; color: var(--rs-error); padding: 20px 16px; font-size: 14px; } /* ── Landing page ────────────────────────────────────── */ .flows-landing { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; } @@ -26,63 +26,63 @@ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .flows-features__card { - background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 20px; transition: border-color 0.2s; } -.flows-features__card:hover { border-color: #475569; } +.flows-features__card:hover { border-color: var(--rs-bg-surface-raised); } .flows-features__icon { font-size: 24px; margin-bottom: 8px; } -.flows-features__card h3 { font-size: 14px; font-weight: 600; color: #e2e8f0; margin: 0 0 6px; } -.flows-features__card p { font-size: 12px; color: #94a3b8; line-height: 1.6; margin: 0; } +.flows-features__card h3 { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); margin: 0 0 6px; } +.flows-features__card p { font-size: 12px; color: var(--rs-text-secondary); line-height: 1.6; margin: 0; } /* Flow list */ .flows-flows { margin-bottom: 48px; } .flows-flows__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } -.flows-flows__heading { font-size: 18px; font-weight: 600; color: #e2e8f0; margin: 0; } -.flows-flows__user { font-size: 12px; color: #64748b; } +.flows-flows__heading { font-size: 18px; font-weight: 600; color: var(--rs-text-primary); margin: 0; } +.flows-flows__user { font-size: 12px; color: var(--rs-text-muted); } .flows-flows__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .flows-flows__empty { - text-align: center; color: #64748b; padding: 32px 16px; font-size: 14px; - background: #1e293b; border: 1px solid #334155; border-radius: 8px; + text-align: center; color: var(--rs-text-muted); padding: 32px 16px; font-size: 14px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; } -.flows-flows__empty a { color: #6366f1; text-decoration: none; } +.flows-flows__empty a { color: var(--rs-primary-hover); text-decoration: none; } .flows-flows__empty a:hover { text-decoration: underline; } .flows-flow-card { display: block; text-decoration: none; - background: #1e293b; border: 1px solid #334155; border-radius: 8px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color 0.2s, transform 0.15s; } -.flows-flow-card:hover { border-color: #6366f1; transform: translateY(-1px); } -.flows-flow-card__name { font-size: 15px; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } +.flows-flow-card:hover { border-color: var(--rs-primary-hover); transform: translateY(-1px); } +.flows-flow-card__name { font-size: 15px; font-weight: 600; color: var(--rs-text-primary); margin-bottom: 4px; } .flows-flow-card__value { font-size: 20px; font-weight: 700; color: #0ea5e9; margin-bottom: 4px; } -.flows-flow-card__meta { font-size: 12px; color: #64748b; } +.flows-flow-card__meta { font-size: 12px; color: var(--rs-text-muted); } /* About / how-it-works section */ .flows-about { margin-bottom: 48px; } -.flows-about__heading { font-size: 18px; font-weight: 600; color: #e2e8f0; margin: 0 0 20px; } +.flows-about__heading { font-size: 18px; font-weight: 600; color: var(--rs-text-primary); margin: 0 0 20px; } /* Steps layout (replaces the old card grid for "how it works") */ .flows-about__steps { display: flex; flex-direction: column; gap: 16px; } .flows-about__step { display: flex; gap: 16px; align-items: flex-start; - background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 20px; } .flows-about__step-num { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; - background: #4f46e5; color: #fff; font-weight: 700; font-size: 14px; + background: var(--rs-primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } -.flows-about__step h3 { font-size: 14px; font-weight: 600; color: #e2e8f0; margin: 0 0 4px; } -.flows-about__step p { font-size: 13px; color: #94a3b8; line-height: 1.6; margin: 0; } +.flows-about__step h3 { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); margin: 0 0 4px; } +.flows-about__step p { font-size: 13px; color: var(--rs-text-secondary); line-height: 1.6; margin: 0; } /* Legacy about grid (kept for compat) */ .flows-about__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .flows-about__card { - background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 20px; } .flows-about__icon { font-size: 28px; margin-bottom: 8px; } -.flows-about__card h3 { font-size: 15px; font-weight: 600; color: #e2e8f0; margin: 0 0 8px; } -.flows-about__card p { font-size: 13px; color: #94a3b8; line-height: 1.6; margin: 0; } +.flows-about__card h3 { font-size: 15px; font-weight: 600; color: var(--rs-text-primary); margin: 0 0 8px; } +.flows-about__card p { font-size: 13px; color: var(--rs-text-secondary); line-height: 1.6; margin: 0; } /* ── Detail view ─────────────────────────────────────── */ .flows-detail { max-width: 1100px; margin: 0 auto; padding: 16px 20px 64px; } @@ -91,27 +91,27 @@ /* ── Table tab — card grid ───────────────────────────── */ .flows-table { } .flows-section { margin-bottom: 28px; } -.flows-section__title { font-size: 14px; font-weight: 600; color: #94a3b8; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em; } +.flows-section__title { font-size: 14px; font-weight: 600; color: var(--rs-text-secondary); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em; } .flows-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .flows-card { - background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 16px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; padding: 16px; } .flows-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .flows-card__icon { font-size: 18px; } -.flows-card__label { font-size: 14px; font-weight: 600; color: #e2e8f0; flex: 1; } -.flows-card__type { font-size: 11px; color: #64748b; text-transform: uppercase; } +.flows-card__label { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); flex: 1; } +.flows-card__type { font-size: 11px; color: var(--rs-text-muted); text-transform: uppercase; } .flows-card__status { font-size: 11px; font-weight: 600; text-transform: capitalize; } -.flows-card__desc { font-size: 12px; color: #94a3b8; margin-bottom: 10px; line-height: 1.5; } +.flows-card__desc { font-size: 12px; color: var(--rs-text-secondary); margin-bottom: 10px; line-height: 1.5; } .flows-card__stat { margin-bottom: 10px; } -.flows-card__stat-value { font-size: 18px; font-weight: 700; color: #e2e8f0; } -.flows-card__stat-label { font-size: 12px; color: #64748b; margin-left: 4px; } +.flows-card__stat-value { font-size: 18px; font-weight: 700; color: var(--rs-text-primary); } +.flows-card__stat-label { font-size: 12px; color: var(--rs-text-muted); margin-left: 4px; } .flows-card__stats { display: flex; justify-content: space-between; margin-bottom: 8px; } /* Progress bar */ .flows-card__bar-container { - position: relative; height: 6px; background: #334155; border-radius: 3px; + position: relative; height: 6px; background: var(--rs-border-strong); border-radius: 3px; margin-bottom: 10px; overflow: visible; } .flows-card__bar { @@ -121,29 +121,29 @@ .flows-card__bar--outcome { opacity: 0.8; } .flows-card__bar-threshold { position: absolute; top: -3px; width: 2px; height: 12px; - background: #fbbf24; border-radius: 1px; + background: var(--rs-warning); border-radius: 1px; } .flows-card__thresholds { - display: flex; gap: 12px; font-size: 11px; color: #64748b; margin-bottom: 8px; + display: flex; gap: 12px; font-size: 11px; color: var(--rs-text-muted); margin-bottom: 8px; } /* Allocation lists */ -.flows-card__allocs { margin-top: 8px; padding-top: 8px; border-top: 1px solid #334155; } -.flows-card__alloc-title { font-size: 11px; color: #64748b; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; } -.flows-card__alloc { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 6px; margin: 2px 0; } +.flows-card__allocs { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rs-border-strong); } +.flows-card__alloc-title { font-size: 11px; color: var(--rs-text-muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; } +.flows-card__alloc { font-size: 12px; color: var(--rs-text-secondary); display: flex; align-items: center; gap: 6px; margin: 2px 0; } .flows-card__alloc-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } /* Status colors */ -.flows-status--abundant { color: #fbbf24; } -.flows-status--sufficient { color: #10b981; } +.flows-status--abundant { color: var(--rs-warning); } +.flows-status--sufficient { color: var(--rs-success); } .flows-status--seeking { color: #0ea5e9; } -.flows-status--critical { color: #ef4444; } +.flows-status--critical { color: var(--rs-error); } /* ── Interactive canvas (Diagram tab) ───────────────── */ .flows-canvas-container { position: relative; height: 70vh; min-height: 400px; - background: #0f172a; border-radius: 12px; border: 1px solid #334155; + background: var(--rs-bg-page); border-radius: 12px; border: 1px solid var(--rs-border-strong); overflow: hidden; user-select: none; touch-action: none; } .flows-canvas-container--fullpage { @@ -154,14 +154,14 @@ .flows-nav-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 15; height: 44px; display: flex; align-items: center; padding: 0 16px; gap: 12px; - background: linear-gradient(to bottom, rgba(15,23,42,0.9) 0%, transparent 100%); + background: linear-gradient(to bottom, var(--rs-bg-overlay) 0%, transparent 100%); pointer-events: none; } .flows-nav-overlay > * { pointer-events: auto; } -.flows-nav-overlay .rapp-nav__back { color: #94a3b8; text-decoration: none; font-size: 13px; } -.flows-nav-overlay .rapp-nav__back:hover { color: #e2e8f0; } -.flows-nav-overlay .rapp-nav__title { color: #e2e8f0; font-size: 14px; font-weight: 600; } -.flows-nav-overlay .rapp-nav__badge { font-size: 10px; color: #fbbf24; background: rgba(251,191,36,0.15); padding: 2px 8px; border-radius: 4px; } +.flows-nav-overlay .rapp-nav__back { color: var(--rs-text-secondary); text-decoration: none; font-size: 13px; } +.flows-nav-overlay .rapp-nav__back:hover { color: var(--rs-text-primary); } +.flows-nav-overlay .rapp-nav__title { color: var(--rs-text-primary); font-size: 14px; font-weight: 600; } +.flows-nav-overlay .rapp-nav__badge { font-size: 10px; color: var(--rs-warning); background: rgba(251,191,36,0.15); padding: 2px 8px; border-radius: 4px; } /* Badge offset when nav overlay present */ .flows-canvas-container--fullpage .flows-canvas-badge { top: 54px; } @@ -179,32 +179,32 @@ display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .flows-canvas-btn { - padding: 5px 10px; border: 1px solid #475569; border-radius: 6px; - background: #1e293b; color: #e2e8f0; font-size: 11px; font-weight: 500; + padding: 5px 10px; border: 1px solid var(--rs-bg-surface-raised); border-radius: 6px; + background: var(--rs-bg-surface); color: var(--rs-text-primary); font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } -.flows-canvas-btn:hover { background: #334155; border-color: #64748b; } -.flows-canvas-btn--source { border-color: #10b981; color: #6ee7b7; } -.flows-canvas-btn--source:hover { background: #064e3b; } -.flows-canvas-btn--funnel { border-color: #3b82f6; color: #93c5fd; } -.flows-canvas-btn--funnel:hover { background: #1e3a5f; } -.flows-canvas-btn--outcome { border-color: #ec4899; color: #f9a8d4; } -.flows-canvas-btn--outcome:hover { background: #4a1942; } -.flows-canvas-btn--active { background: #4f46e5; border-color: #6366f1; color: #fff; } +.flows-canvas-btn:hover { background: var(--rs-border-strong); border-color: var(--rs-text-muted); } +.flows-canvas-btn--source { border-color: #10b981; color: var(--rflows-source-text, #6ee7b7); } +.flows-canvas-btn--source:hover { background: var(--rflows-source-hover-bg, #064e3b); } +.flows-canvas-btn--funnel { border-color: #3b82f6; color: var(--rflows-funnel-text, #93c5fd); } +.flows-canvas-btn--funnel:hover { background: var(--rflows-funnel-hover-bg, #1e3a5f); } +.flows-canvas-btn--outcome { border-color: #ec4899; color: var(--rflows-outcome-text, #f9a8d4); } +.flows-canvas-btn--outcome:hover { background: var(--rflows-outcome-hover-bg, #4a1942); } +.flows-canvas-btn--active { background: var(--rs-primary); border-color: var(--rs-primary-hover); color: #fff; } .flows-canvas-sep { - width: 1px; height: 20px; background: #334155; margin: 0 4px; + width: 1px; height: 20px; background: var(--rs-border-strong); margin: 0 4px; } /* SVG node styles */ .flow-node { cursor: pointer; } .flow-node:hover .node-bg { filter: brightness(1.15); } -.flow-node.selected .node-bg { stroke: #6366f1; stroke-width: 3; } +.flow-node.selected .node-bg { stroke: var(--rs-primary-hover); stroke-width: 3; } .node-glow { filter: drop-shadow(0 0 6px rgba(251,191,36,0.5)); } /* Editor panel — right side slide-in */ .flows-editor-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; z-index: 20; - background: #1e293b; border-left: 1px solid #334155; + background: var(--rs-bg-surface); border-left: 1px solid var(--rs-border-strong); transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; @@ -214,16 +214,16 @@ .editor-header { display: flex; align-items: center; justify-content: space-between; } -.editor-title { font-size: 14px; font-weight: 600; color: #e2e8f0; } +.editor-title { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); } .editor-close { - background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; padding: 2px 6px; + background: none; border: none; color: var(--rs-text-secondary); font-size: 18px; cursor: pointer; padding: 2px 6px; } -.editor-close:hover { color: #e2e8f0; } +.editor-close:hover { color: var(--rs-text-primary); } /* Analytics popout panel (left side) */ .flows-analytics-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 380px; z-index: 20; - background: #1e293b; border-right: 1px solid #334155; + background: var(--rs-bg-surface); border-right: 1px solid var(--rs-border-strong); transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; display: flex; flex-direction: column; } @@ -231,68 +231,68 @@ .analytics-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; - border-bottom: 1px solid #334155; flex-shrink: 0; + border-bottom: 1px solid var(--rs-border-strong); flex-shrink: 0; } -.analytics-title { font-size: 14px; font-weight: 600; color: #e2e8f0; flex: 1; } +.analytics-title { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); flex: 1; } .analytics-close { - background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; + background: none; border: none; color: var(--rs-text-secondary); font-size: 18px; cursor: pointer; } -.analytics-close:hover { color: #e2e8f0; } +.analytics-close:hover { color: var(--rs-text-primary); } .analytics-tabs { display: flex; gap: 4px; } .analytics-tab { - padding: 4px 10px; border: 1px solid #334155; border-radius: 4px; - background: transparent; color: #94a3b8; font-size: 11px; cursor: pointer; + padding: 4px 10px; border: 1px solid var(--rs-border-strong); border-radius: 4px; + background: transparent; color: var(--rs-text-secondary); font-size: 11px; cursor: pointer; } -.analytics-tab:hover { background: #334155; color: #e2e8f0; } -.analytics-tab--active { background: #334155; color: #e2e8f0; } +.analytics-tab:hover { background: var(--rs-border-strong); color: var(--rs-text-primary); } +.analytics-tab--active { background: var(--rs-border-strong); color: var(--rs-text-primary); } .analytics-content { padding: 16px; flex: 1; overflow-y: auto; } .editor-field { display: flex; flex-direction: column; gap: 4px; } -.editor-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } +.editor-label { font-size: 11px; color: var(--rs-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .editor-input { - padding: 6px 10px; border: 1px solid #334155; border-radius: 6px; - background: #0f172a; color: #e2e8f0; font-size: 13px; + padding: 6px 10px; border: 1px solid var(--rs-border-strong); border-radius: 6px; + background: var(--rs-bg-page); color: var(--rs-text-primary); font-size: 13px; } -.editor-input:focus { outline: none; border-color: #6366f1; } +.editor-input:focus { outline: none; border-color: var(--rs-primary-hover); } .editor-select { - padding: 6px 10px; border: 1px solid #334155; border-radius: 6px; - background: #0f172a; color: #e2e8f0; font-size: 13px; + padding: 6px 10px; border: 1px solid var(--rs-border-strong); border-radius: 6px; + background: var(--rs-bg-page); color: var(--rs-text-primary); font-size: 13px; } .editor-alloc-row { - display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; + display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rs-text-secondary); } .editor-alloc-row .editor-input { width: 60px; text-align: right; } .editor-alloc-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .editor-section { - padding-top: 8px; border-top: 1px solid #334155; + padding-top: 8px; border-top: 1px solid var(--rs-border-strong); } -.editor-section-title { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; } +.editor-section-title { font-size: 12px; font-weight: 600; color: var(--rs-text-muted); margin-bottom: 6px; } .editor-btn { - padding: 6px 14px; border: 1px solid #475569; border-radius: 6px; - background: #334155; color: #e2e8f0; font-size: 12px; cursor: pointer; + padding: 6px 14px; border: 1px solid var(--rs-bg-surface-raised); border-radius: 6px; + background: var(--rs-border-strong); color: var(--rs-text-primary); font-size: 12px; cursor: pointer; transition: background 0.15s; } -.editor-btn:hover { background: #475569; } -.editor-btn--danger { border-color: #ef4444; color: #fca5a5; } -.editor-btn--danger:hover { background: #7f1d1d; } +.editor-btn:hover { background: var(--rs-bg-surface-raised); } +.editor-btn--danger { border-color: var(--rs-error); color: var(--rflows-danger-text, #fca5a5); } +.editor-btn--danger:hover { background: var(--rflows-danger-hover-bg, #7f1d1d); } /* Edge +/- controls */ .edge-controls { display: flex; align-items: center; gap: 2px; font-size: 11px; } .edge-btn { - width: 18px; height: 18px; border: 1px solid #475569; border-radius: 4px; - background: #1e293b; color: #e2e8f0; font-size: 12px; cursor: pointer; + width: 18px; height: 18px; border: 1px solid var(--rs-bg-surface-raised); border-radius: 4px; + background: var(--rs-bg-surface); color: var(--rs-text-primary); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } -.edge-btn:hover { background: #334155; } -.edge-pct { color: #e2e8f0; font-weight: 600; min-width: 30px; text-align: center; } +.edge-btn:hover { background: var(--rs-border-strong); } +.edge-pct { color: var(--rs-text-primary); font-weight: 600; min-width: 30px; text-align: center; } /* Legend — bottom-left */ .flows-canvas-legend { position: absolute; bottom: 10px; left: 10px; z-index: 10; display: flex; flex-wrap: wrap; gap: 12px; - font-size: 11px; color: #94a3b8; background: rgba(15,23,42,0.85); + font-size: 11px; color: var(--rs-text-secondary); background: var(--rs-glass-bg); padding: 6px 10px; border-radius: 8px; } .flows-canvas-legend-item { display: flex; align-items: center; gap: 4px; } @@ -307,18 +307,18 @@ /* Sufficiency badge — top-left */ .flows-canvas-badge { position: absolute; top: 10px; left: 10px; z-index: 10; - background: rgba(15,23,42,0.85); border-radius: 8px; padding: 8px 14px; + background: var(--rs-glass-bg); border-radius: 8px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; } .flows-canvas-badge__score { font-size: 20px; font-weight: 700; } -.flows-canvas-badge__label { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; } +.flows-canvas-badge__label { font-size: 10px; color: var(--rs-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } /* Legacy diagram (kept for compat) */ .flows-diagram { overflow-x: auto; } .flows-diagram svg { display: block; margin: 0 auto; } .flows-diagram__legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; - margin-top: 12px; font-size: 12px; color: #94a3b8; + margin-top: 12px; font-size: 12px; color: var(--rs-text-secondary); } .flows-diagram__legend-item { display: flex; align-items: center; gap: 5px; } .flows-diagram__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } @@ -328,20 +328,20 @@ /* ── Transactions tab ────────────────────────────────── */ .flows-tx-list { display: flex; flex-direction: column; gap: 4px; } -.flows-tx-empty { text-align: center; color: #64748b; padding: 48px 16px; font-size: 14px; } +.flows-tx-empty { text-align: center; color: var(--rs-text-muted); padding: 48px 16px; font-size: 14px; } .flows-tx { display: flex; align-items: center; gap: 12px; padding: 12px 16px; - background: #1e293b; border: 1px solid #334155; border-radius: 8px; + background: var(--rs-bg-surface); border: 1px solid var(--rs-border-strong); border-radius: 8px; } .flows-tx__icon { font-size: 16px; flex-shrink: 0; } .flows-tx__body { flex: 1; min-width: 0; } -.flows-tx__desc { font-size: 13px; color: #e2e8f0; font-weight: 500; } -.flows-tx__meta { font-size: 11px; color: #64748b; margin-top: 2px; } +.flows-tx__desc { font-size: 13px; color: var(--rs-text-primary); font-weight: 500; } +.flows-tx__meta { font-size: 11px; color: var(--rs-text-muted); margin-top: 2px; } .flows-tx__amount { font-size: 14px; font-weight: 600; white-space: nowrap; } -.flows-tx__amount--positive { color: #10b981; } -.flows-tx__amount--negative { color: #ef4444; } -.flows-tx__time { font-size: 11px; color: #64748b; white-space: nowrap; } +.flows-tx__amount--positive { color: var(--rs-success); } +.flows-tx__amount--negative { color: var(--rs-error); } +.flows-tx__time { font-size: 11px; color: var(--rs-text-muted); white-space: nowrap; } /* ── Port & wiring ──────────────────────────────────── */ .port-group { pointer-events: all; } @@ -354,7 +354,7 @@ .port-group--wiring-dimmed { opacity: 0.15; pointer-events: none; } .wiring-temp-path { - fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 8 4; + fill: none; stroke: var(--rs-text-secondary); stroke-width: 2; stroke-dasharray: 8 4; stroke-linecap: round; animation: wire-dash 0.6s linear infinite; } @@ -390,77 +390,77 @@ /* ── Node detail modals ──────────────────────────────── */ .flows-modal-backdrop { position: fixed; inset: 0; z-index: 50; - background: rgba(0,0,0,0.6); display: flex; + background: var(--rs-bg-overlay); display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.15s ease-out; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .flows-modal { - background: #1e293b; border-radius: 16px; padding: 24px; + background: var(--rs-bg-surface); border-radius: 16px; padding: 24px; width: 440px; max-height: 85vh; overflow-y: auto; - border: 1px solid #334155; box-shadow: 0 20px 60px rgba(0,0,0,0.5); + border: 1px solid var(--rs-border-strong); box-shadow: var(--rs-shadow-lg); animation: modalSlideIn 0.2s ease-out; } @keyframes modalSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .flows-modal::-webkit-scrollbar { width: 6px; } .flows-modal::-webkit-scrollbar-track { background: transparent; } -.flows-modal::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; } +.flows-modal::-webkit-scrollbar-thumb { background: var(--rs-bg-surface-raised); border-radius: 3px; } .flows-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .flows-modal__close { - background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; + background: none; border: none; color: var(--rs-text-secondary); font-size: 24px; cursor: pointer; padding: 2px 8px; border-radius: 4px; transition: color 0.15s; } -.flows-modal__close:hover { color: #e2e8f0; } +.flows-modal__close:hover { color: var(--rs-text-primary); } .flows-modal__progress-bar { - height: 8px; background: #334155; border-radius: 4px; overflow: hidden; margin-top: 8px; + height: 8px; background: var(--rs-border-strong); border-radius: 4px; overflow: hidden; margin-top: 8px; } .flows-modal__progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; } /* Phase accordion */ .phase-tier-bar { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 16px; } .phase-tier-segment { flex: 1; transition: background 0.3s; } -.phase-card { border: 1px solid #334155; border-radius: 8px; overflow: hidden; margin-bottom: 8px; } +.phase-card { border: 1px solid var(--rs-border-strong); border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .phase-card--locked { opacity: 0.5; } .phase-header { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; - background: #0f172a; transition: background 0.15s; + background: var(--rs-bg-page); transition: background 0.15s; } -.phase-header:hover { background: #1e293b; } -.phase-content { padding: 8px 14px 14px; border-top: 1px solid #334155; } +.phase-header:hover { background: var(--rs-bg-surface); } +.phase-content { padding: 8px 14px 14px; border-top: 1px solid var(--rs-border-strong); } .phase-task { - display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94a3b8; padding: 4px 0; + display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rs-text-secondary); padding: 4px 0; } .phase-task input[type="checkbox"] { accent-color: #10b981; cursor: pointer; } -.phase-task--done { color: #64748b; text-decoration: line-through; } +.phase-task--done { color: var(--rs-text-muted); text-decoration: line-through; } .phase-add-btn { - display: flex; align-items: center; gap: 4px; font-size: 12px; color: #64748b; - background: none; border: 1px dashed #334155; border-radius: 6px; + display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--rs-text-muted); + background: none; border: 1px dashed var(--rs-border-strong); border-radius: 6px; padding: 4px 10px; cursor: pointer; margin-top: 6px; transition: all 0.15s; } -.phase-add-btn:hover { color: #94a3b8; border-color: #475569; } +.phase-add-btn:hover { color: var(--rs-text-secondary); border-color: var(--rs-bg-surface-raised); } /* Source type picker */ .source-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .source-type-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; - padding: 14px 8px; border-radius: 8px; border: 2px solid #334155; - background: #0f172a; color: #94a3b8; cursor: pointer; transition: all 0.15s; + padding: 14px 8px; border-radius: 8px; border: 2px solid var(--rs-border-strong); + background: var(--rs-bg-page); color: var(--rs-text-secondary); cursor: pointer; transition: all 0.15s; font-size: 12px; font-weight: 500; } -.source-type-btn:hover { border-color: #475569; background: #1e293b; } -.source-type-btn--active { border-color: #10b981; background: #064e3b; color: #6ee7b7; } +.source-type-btn:hover { border-color: var(--rs-bg-surface-raised); background: var(--rs-bg-surface); } +.source-type-btn--active { border-color: #10b981; background: var(--rflows-source-hover-bg, #064e3b); color: var(--rflows-source-text, #6ee7b7); } /* Node hover tooltip */ .flows-node-tooltip { position: absolute; z-index: 30; pointer-events: none; - background: rgba(15,23,42,0.95); border: 1px solid #475569; border-radius: 8px; - padding: 8px 12px; font-size: 12px; color: #e2e8f0; - box-shadow: 0 4px 12px rgba(0,0,0,0.4); white-space: nowrap; + background: var(--rs-glass-bg); border: 1px solid var(--rs-bg-surface-raised); border-radius: 8px; + padding: 8px 12px; font-size: 12px; color: var(--rs-text-primary); + box-shadow: var(--rs-shadow-md); white-space: nowrap; } .flows-node-tooltip__label { font-weight: 600; margin-bottom: 2px; } -.flows-node-tooltip__stat { color: #94a3b8; font-size: 11px; } +.flows-node-tooltip__stat { color: var(--rs-text-secondary); font-size: 11px; } /* Sufficiency glow on funnel status text */ @keyframes sufficiencyPulse { @@ -478,8 +478,8 @@ /* Inline edit inputs (foreignObject) */ .inline-edit-input { - background: transparent; border: none; border-bottom: 1px solid #6366f1; - color: #e2e8f0; font-size: 13px; font-weight: 600; width: 100%; + background: transparent; border: none; border-bottom: 1px solid var(--rs-primary-hover); + color: var(--rs-text-primary); font-size: 13px; font-weight: 600; width: 100%; outline: none; padding: 2px 4px; box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; } @@ -512,6 +512,30 @@ .port-group[data-port-side="left"] .port-arrow { /* horizontal arrow left handled inline */ } .port-group[data-port-side="right"] .port-arrow { /* horizontal arrow right handled inline */ } +/* ── Light theme overrides ──────────────────────────── */ +[data-theme="light"] { + --rflows-source-text: #059669; + --rflows-source-hover-bg: #d1fae5; + --rflows-funnel-text: #2563eb; + --rflows-funnel-hover-bg: #dbeafe; + --rflows-outcome-text: #db2777; + --rflows-outcome-hover-bg: #fce7f3; + --rflows-danger-text: #dc2626; + --rflows-danger-hover-bg: #fee2e2; +} +@media (prefers-color-scheme: light) { + :root:not([data-theme]) { + --rflows-source-text: #059669; + --rflows-source-hover-bg: #d1fae5; + --rflows-funnel-text: #2563eb; + --rflows-funnel-hover-bg: #dbeafe; + --rflows-outcome-text: #db2777; + --rflows-outcome-hover-bg: #fce7f3; + --rflows-danger-text: #dc2626; + --rflows-danger-hover-bg: #fee2e2; + } +} + /* ── Mobile responsive ──────────────────────────────── */ @media (max-width: 768px) { .flows-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; } diff --git a/modules/rflows/components/folk-flow-river.ts b/modules/rflows/components/folk-flow-river.ts index dd086c7..9976ea0 100644 --- a/modules/rflows/components/folk-flow-river.ts +++ b/modules/rflows/components/folk-flow-river.ts @@ -50,9 +50,11 @@ const COLORS = { spendingWaterfall: ["#8b5cf6", "#ec4899", "#06b6d4", "#3b82f6", "#10b981", "#6366f1"], outcomePool: "#3b82f6", goldenGlow: "#fbbf24", - bg: "#0f172a", - text: "#e2e8f0", - textMuted: "#94a3b8", + bg: "var(--rs-bg-page)", + surface: "var(--rs-bg-surface)", + surfaceRaised: "var(--rs-bg-surface-raised)", + text: "var(--rs-text-primary)", + textMuted: "var(--rs-text-secondary)", }; function distributeWidths(percentages: number[], totalAvailable: number, minWidth: number): number[] { @@ -314,14 +316,14 @@ function renderBranch(b: BranchLayout): string { return ` - ${b.percentage}%`; + ${b.percentage}%`; } function renderSource(s: SourceLayout): string { return ` - - ${esc(s.label)} - $${s.flowRate.toLocaleString()}/mo`; + + ${esc(s.label)} + $${s.flowRate.toLocaleString()}/mo`; } function renderFunnel(f: FunnelLayout): string { @@ -342,9 +344,9 @@ function renderFunnel(f: FunnelLayout): string { ${isSufficient ? `` : ""} ${[0, 1, 2].map((i) => ``).join("")} - ${esc(f.label)} - $${Math.floor(f.data.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()} ${isSufficient ? "✨" : ""} - + ${esc(f.label)} + $${Math.floor(f.data.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()} ${isSufficient ? "✨" : ""} + `; } @@ -353,11 +355,11 @@ function renderOutcome(o: OutcomeLayout): string { const color = o.data.status === "completed" ? "#10b981" : o.data.status === "blocked" ? "#ef4444" : "#3b82f6"; return ` - + ${filled > 5 ? `` : ""} - ${esc(o.label)} - ${Math.round(o.fillPercent)}%`; + ${esc(o.label)} + ${Math.round(o.fillPercent)}%`; } function renderSufficiencyBadge(score: number, x: number, y: number): string { @@ -368,11 +370,11 @@ function renderSufficiencyBadge(score: number, x: number, y: number): string { return ` - - + + ${pct}% - ENOUGH + ENOUGH `; } @@ -445,14 +447,14 @@ class FolkFlowRiver extends HTMLElement { this.shadow.innerHTML = ` @@ -246,15 +246,15 @@ class FolkFlowsApp extends HTMLElement { Demo ${authed ? `` - : `Sign in to create flows` + : `Sign in to create flows` } -
+
Design transparent resource flows with sufficiency-based cascading. Funnels fill to their threshold, then overflow routes surplus to the next layer — - ensuring every level has enough before abundance cascades forward. + ensuring every level has enough before abundance cascades forward.
@@ -1060,8 +1060,8 @@ class FolkFlowsApp extends HTMLElement { const icon = icons[d.sourceType] || "\u{1F4B0}"; return ` - ${icon} - ${this.esc(d.label)} + ${icon} + ${this.esc(d.label)} $${d.flowRate.toLocaleString()}/mo ${this.renderAllocBar(d.targetAllocations, w, h - 6)} ${this.renderPortsSvg(n)} @@ -1148,22 +1148,22 @@ class FolkFlowsApp extends HTMLElement { ${isOverflow ? `` : ""} - + - - - ${this.esc(d.label)} + + + ${this.esc(d.label)} ${statusLabel} - + - ${satLabel} - $${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()} - + ${satLabel} + $${Math.floor(d.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()} + ${this.renderPortsSvg(n)} `; @@ -1182,9 +1182,9 @@ class FolkFlowsApp extends HTMLElement { const phaseW = (w - 20) / d.phases.length; phaseBars = d.phases.map((p, i) => { const unlocked = d.fundingReceived >= p.fundingThreshold; - return ``; + return ``; }).join(""); - phaseBars += `${d.phases.filter((p) => d.fundingReceived >= p.fundingThreshold).length}/${d.phases.length} phases`; + phaseBars += `${d.phases.filter((p) => d.fundingReceived >= p.fundingThreshold).length}/${d.phases.length} phases`; } // Enhanced progress bar (8px height, green funded portion + grey gap) @@ -1194,12 +1194,12 @@ class FolkFlowsApp extends HTMLElement { const dollarLabel = `${this.formatDollar(d.fundingReceived)} / ${this.formatDollar(d.fundingTarget)}`; return ` - + - ${this.esc(d.label)} - + ${this.esc(d.label)} + - ${Math.round(fillPct * 100)}% — ${dollarLabel} + ${Math.round(fillPct * 100)}% — ${dollarLabel} ${phaseBars} ${this.renderPortsSvg(n)} `; @@ -1361,15 +1361,15 @@ class FolkFlowsApp extends HTMLElement { return ` - + ${label} - - − + + − - - + + + + `; @@ -1383,15 +1383,15 @@ class FolkFlowsApp extends HTMLElement { - + ${label} - - − + + − - - + + + + `; @@ -1777,7 +1777,7 @@ class FolkFlowsApp extends HTMLElement {
- +
`; @@ -2000,7 +2000,7 @@ class FolkFlowsApp extends HTMLElement {
- +
`; @@ -2037,7 +2037,7 @@ class FolkFlowsApp extends HTMLElement { if (d.sourceType === "card") { html += `
`; @@ -2086,9 +2086,9 @@ class FolkFlowsApp extends HTMLElement { html += `
Phases
`; for (const p of d.phases) { const unlocked = d.fundingReceived >= p.fundingThreshold; - html += `
-
${this.esc(p.name)} — $${p.fundingThreshold.toLocaleString()}
- ${p.tasks.map((t) => `
${t.completed ? "✅" : "⬜"} ${this.esc(t.label)}
`).join("")} + html += `
+
${this.esc(p.name)} — $${p.fundingThreshold.toLocaleString()}
+ ${p.tasks.map((t) => `
${t.completed ? "✅" : "⬜"} ${this.esc(t.label)}
`).join("")}
`; } html += `
`; @@ -2106,7 +2106,7 @@ class FolkFlowsApp extends HTMLElement { html += `
${this.esc(this.getNodeLabel(a.targetId))} - ${a.percentage}% + ${a.percentage}%
`; } html += `
`; @@ -2147,7 +2147,7 @@ class FolkFlowsApp extends HTMLElement { modal.id = "transak-modal"; modal.style.cssText = `position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;`; modal.innerHTML = ` -
+