diff --git a/lib/folk-booking.ts b/lib/folk-booking.ts index e3fbf0c..32ee3f3 100644 --- a/lib/folk-booking.ts +++ b/lib/folk-booking.ts @@ -60,13 +60,13 @@ const styles = css` .provider { font-size: 16px; font-weight: 700; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); margin-bottom: 4px; } .details { font-size: 12px; - color: #475569; + color: var(--rs-text-secondary, #94a3b8); line-height: 1.5; margin-bottom: 8px; } @@ -85,18 +85,18 @@ const styles = css` } .meta-label { - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); } .meta-value { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); font-weight: 500; } .confirmation { margin-top: 8px; padding: 6px 8px; - background: #f1f5f9; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 4px; font-size: 11px; display: flex; @@ -104,19 +104,19 @@ const styles = css` } .confirmation .label { - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); } .confirmation .code { font-family: monospace; font-weight: 600; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .cost { font-size: 18px; font-weight: 700; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); margin-top: 8px; } @@ -130,8 +130,8 @@ const styles = css` } .status-badge.PLANNED { - background: #e2e8f0; - color: #475569; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-secondary, #94a3b8); } .status-badge.BOOKED { diff --git a/lib/folk-budget.ts b/lib/folk-budget.ts index df04c32..1d081ee 100644 --- a/lib/folk-budget.ts +++ b/lib/folk-budget.ts @@ -60,12 +60,12 @@ const styles = css` } .budget-row .label { - color: #64748b; + color: var(--rs-text-muted, #64748b); } .budget-row .value { font-weight: 600; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .budget-row .remaining { @@ -79,7 +79,7 @@ const styles = css` .progress-bar { width: 100%; height: 8px; - background: #e2e8f0; + background: var(--rs-bg-surface-raised, #334155); border-radius: 4px; overflow: hidden; margin: 8px 0 12px; @@ -116,21 +116,21 @@ const styles = css` font-size: 12px; border-radius: 4px; margin-bottom: 3px; - background: #f8fafc; + background: var(--rs-bg-surface-sunken, #0f172a); } .expense-item:hover { - background: #f1f5f9; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .expense-desc { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); font-weight: 500; } .expense-cat { font-size: 9px; - color: #64748b; + color: var(--rs-text-muted, #64748b); } .expense-amount { diff --git a/lib/folk-calendar.ts b/lib/folk-calendar.ts index 60ed8ae..b98f20d 100644 --- a/lib/folk-calendar.ts +++ b/lib/folk-calendar.ts @@ -61,22 +61,23 @@ const styles = css` } .calendar-nav button { - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 16px; + color: var(--rs-text-primary, #e2e8f0); } .calendar-nav button:hover { - background: #e2e8f0; + background: var(--rs-bg-surface-sunken, #0f172a); } .month-year { font-weight: 600; font-size: 14px; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .weekdays { @@ -90,7 +91,7 @@ const styles = css` text-align: center; font-size: 11px; font-weight: 600; - color: #64748b; + color: var(--rs-text-muted, #64748b); padding: 4px; } @@ -108,15 +109,15 @@ const styles = css` font-size: 12px; border-radius: 4px; cursor: pointer; - color: #374151; + color: var(--rs-text-primary, #e2e8f0); } .day:hover { - background: #f1f5f9; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .day.other-month { - color: #94a3b8; + color: var(--rs-text-muted, #64748b); } .day.today { @@ -152,7 +153,7 @@ const styles = css` .events-list { margin-top: 12px; padding-top: 12px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); max-height: 120px; overflow-y: auto; } @@ -165,7 +166,7 @@ const styles = css` font-size: 12px; border-radius: 4px; margin-bottom: 4px; - background: #f8fafc; + background: var(--rs-bg-surface-sunken, #0f172a); } .event-dot { diff --git a/lib/folk-canvas.ts b/lib/folk-canvas.ts index c76332d..214bd5c 100644 --- a/lib/folk-canvas.ts +++ b/lib/folk-canvas.ts @@ -4,9 +4,10 @@ import type { ShapeData, SpaceRef, NestPermissions } from "./community-sync"; const styles = css` :host { - background: #f8fafc; + background: var(--rs-bg-surface, #1e293b); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); + box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.08)); min-width: 300px; min-height: 200px; overflow: hidden; @@ -17,8 +18,8 @@ const styles = css` align-items: center; justify-content: space-between; padding: 6px 12px; - background: #334155; - color: white; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600; @@ -99,23 +100,23 @@ const styles = css` .nested-shape { position: absolute; - background: white; - border: 1px solid #e2e8f0; + background: var(--rs-bg-surface-raised, #334155); + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 6px; padding: 8px; font-size: 12px; overflow: hidden; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); + box-shadow: var(--rs-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06)); } .nested-shape .shape-type { font-size: 10px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); margin-bottom: 4px; } .nested-shape .shape-content { - color: #334155; + color: var(--rs-text-primary, #e2e8f0); word-break: break-word; } @@ -124,10 +125,10 @@ const styles = css` align-items: center; justify-content: space-between; padding: 4px 12px; - background: #f1f5f9; - border-top: 1px solid #e2e8f0; + background: var(--rs-bg-surface-sunken, #0f172a); + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); font-size: 10px; - color: #64748b; + color: var(--rs-text-muted, #64748b); } .status-indicator { @@ -160,19 +161,19 @@ const styles = css` .collapsed-label { font-size: 13px; - color: #475569; + color: var(--rs-text-primary, #e2e8f0); font-weight: 500; } .collapsed-meta { font-size: 11px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); } .enter-btn { margin-top: 8px; - background: #334155; - color: white; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-primary, #e2e8f0); border: none; border-radius: 6px; padding: 6px 16px; @@ -181,7 +182,7 @@ const styles = css` } .enter-btn:hover { - background: #1e293b; + background: var(--rs-bg-surface-sunken, #1e293b); } `; @@ -483,7 +484,7 @@ export class FolkCanvas extends FolkShape { if (this.#nestedShapes.size === 0) { this.#nestedCanvasEl.innerHTML = ` -
+
${this.#connectionStatus === "connected" ? "Empty space" : "Connecting..."}
`; diff --git a/lib/folk-choice-conviction.ts b/lib/folk-choice-conviction.ts index 3fc742c..521eb96 100644 --- a/lib/folk-choice-conviction.ts +++ b/lib/folk-choice-conviction.ts @@ -72,8 +72,8 @@ const styles = css` padding: 8px; border-radius: 6px; margin-bottom: 6px; - background: #fffbeb; - border: 1px solid #fde68a; + background: rgba(217, 119, 6, 0.08); + border: 1px solid rgba(217, 119, 6, 0.2); position: relative; overflow: hidden; } @@ -99,7 +99,7 @@ const styles = css` .option-label { flex: 1; font-size: 13px; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); z-index: 1; } @@ -115,7 +115,7 @@ const styles = css` height: 22px; border: 1px solid #fbbf24; border-radius: 4px; - background: white; + background: var(--rs-bg-surface, #1e293b); cursor: pointer; font-size: 12px; display: flex; diff --git a/lib/folk-choice-rank.ts b/lib/folk-choice-rank.ts index c1ccf1e..3c31dcc 100644 --- a/lib/folk-choice-rank.ts +++ b/lib/folk-choice-rank.ts @@ -62,7 +62,7 @@ const styles = css` .tab-bar { display: flex; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .tab { @@ -74,14 +74,14 @@ const styles = css` cursor: pointer; border: none; background: transparent; - color: #64748b; + color: var(--rs-text-muted, #64748b); transition: all 0.15s; } .tab.active { color: #4f46e5; border-bottom: 2px solid #4f46e5; - background: #eef2ff; + background: rgba(79, 70, 229, 0.1); } .panel { @@ -100,8 +100,8 @@ const styles = css` padding: 8px; border-radius: 6px; margin-bottom: 4px; - background: #f8fafc; - border: 1px solid #e2e8f0; + background: var(--rs-bg-surface-sunken, #0f172a); + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); cursor: grab; user-select: none; transition: transform 0.15s, box-shadow 0.15s; @@ -111,7 +111,7 @@ const styles = css` .rank-item.dragging { opacity: 0.5; - background: #eef2ff; + background: rgba(79, 70, 229, 0.1); } .rank-item.drag-over { @@ -121,7 +121,7 @@ const styles = css` } .grip { - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); font-size: 10px; line-height: 1; flex-shrink: 0; @@ -138,7 +138,7 @@ const styles = css` .rank-label { flex: 1; font-size: 13px; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } /* Results */ @@ -149,7 +149,7 @@ const styles = css` .results-heading { font-size: 11px; font-weight: 600; - color: #64748b; + color: var(--rs-text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; @@ -165,13 +165,13 @@ const styles = css` .borda-label { font-size: 12px; min-width: 80px; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .borda-bar-bg { flex: 1; height: 14px; - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); border-radius: 3px; overflow: hidden; } @@ -195,8 +195,8 @@ const styles = css` .irv-round { font-size: 11px; padding: 4px 0; - border-bottom: 1px solid #f1f5f9; - color: #475569; + border-bottom: 1px solid var(--rs-border-subtle, rgba(255, 255, 255, 0.06)); + color: var(--rs-text-secondary, #94a3b8); } .irv-round .round-num { @@ -217,7 +217,7 @@ const styles = css` .voters-count { padding: 4px 0; font-size: 11px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); text-align: center; } diff --git a/lib/folk-choice-spider.ts b/lib/folk-choice-spider.ts index 61f8c49..94ae599 100644 --- a/lib/folk-choice-spider.ts +++ b/lib/folk-choice-spider.ts @@ -62,7 +62,7 @@ const styles = css` .option-tabs { display: flex; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); overflow-x: auto; } @@ -74,7 +74,7 @@ const styles = css` cursor: pointer; border: none; background: transparent; - color: #64748b; + color: var(--rs-text-muted, #64748b); white-space: nowrap; transition: all 0.15s; flex-shrink: 0; @@ -83,7 +83,7 @@ const styles = css` .option-tab.active { color: #059669; border-bottom: 2px solid #059669; - background: #ecfdf5; + background: rgba(5, 150, 105, 0.1); } .chart-area { @@ -113,7 +113,7 @@ const styles = css` .slider-label { font-size: 11px; - color: #64748b; + color: var(--rs-text-muted, #64748b); min-width: 60px; text-align: right; } @@ -123,7 +123,7 @@ const styles = css` height: 4px; -webkit-appearance: none; appearance: none; - background: #e2e8f0; + background: var(--rs-bg-surface-raised, #334155); border-radius: 2px; outline: none; cursor: pointer; @@ -165,7 +165,7 @@ const styles = css` flex-wrap: wrap; gap: 6px; padding: 4px 12px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .legend-item { diff --git a/lib/folk-choice-vote.ts b/lib/folk-choice-vote.ts index 7e15511..a9f649c 100644 --- a/lib/folk-choice-vote.ts +++ b/lib/folk-choice-vote.ts @@ -62,7 +62,7 @@ const styles = css` .mode-tabs { display: flex; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .mode-tab { @@ -74,14 +74,14 @@ const styles = css` cursor: pointer; border: none; background: transparent; - color: #64748b; + color: var(--rs-text-muted, #64748b); transition: all 0.15s; } .mode-tab.active { color: #0d9488; border-bottom: 2px solid #0d9488; - background: #f0fdfa; + background: rgba(13, 148, 136, 0.1); } .options-list { @@ -104,11 +104,11 @@ const styles = css` } .option-row:hover { - background: #f8fafc; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .option-row.voted { - background: #f0fdfa; + background: rgba(13, 148, 136, 0.1); } .bar-bg { @@ -133,12 +133,12 @@ const styles = css` flex: 1; font-size: 13px; z-index: 1; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .option-count { font-size: 12px; - color: #64748b; + color: var(--rs-text-muted, #64748b); font-variant-numeric: tabular-nums; z-index: 1; min-width: 20px; @@ -164,18 +164,18 @@ const styles = css` .qv-btn { width: 22px; height: 22px; - border: 1px solid #cbd5e1; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 4px; - background: white; + background: var(--rs-bg-surface, #1e293b); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; - color: #475569; + color: var(--rs-text-secondary, #94a3b8); } - .qv-btn:hover { background: #f1f5f9; } + .qv-btn:hover { background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .qv-btn:disabled { opacity: 0.3; cursor: default; } .qv-count { @@ -183,14 +183,14 @@ const styles = css` font-variant-numeric: tabular-nums; min-width: 14px; text-align: center; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .budget-bar { padding: 4px 12px; font-size: 11px; - color: #64748b; - border-top: 1px solid #e2e8f0; + color: var(--rs-text-muted, #64748b); + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); text-align: center; } @@ -202,7 +202,7 @@ const styles = css` .voters-count { padding: 4px 12px; font-size: 11px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); text-align: center; } @@ -210,7 +210,7 @@ const styles = css` display: flex; gap: 6px; padding: 8px 12px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .add-input { diff --git a/lib/folk-destination.ts b/lib/folk-destination.ts index b0d28b7..fcecff6 100644 --- a/lib/folk-destination.ts +++ b/lib/folk-destination.ts @@ -51,13 +51,13 @@ const styles = css` .dest-name { font-size: 16px; font-weight: 700; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); margin-bottom: 2px; } .dest-country { font-size: 12px; - color: #64748b; + color: var(--rs-text-muted, #64748b); margin-bottom: 8px; } @@ -65,10 +65,10 @@ const styles = css` display: flex; gap: 12px; font-size: 11px; - color: #475569; + color: var(--rs-text-secondary, #94a3b8); margin-bottom: 10px; padding: 6px 8px; - background: #f1f5f9; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 4px; } @@ -85,12 +85,12 @@ const styles = css` .dest-notes { font-size: 12px; - color: #475569; + color: var(--rs-text-secondary, #94a3b8); line-height: 1.5; padding: 8px; - background: #fafaf9; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 4px; - border: 1px solid #e2e8f0; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); min-height: 40px; white-space: pre-wrap; } diff --git a/lib/folk-drawfast.ts b/lib/folk-drawfast.ts index 145059f..a309bd7 100644 --- a/lib/folk-drawfast.ts +++ b/lib/folk-drawfast.ts @@ -61,7 +61,7 @@ const styles = css` align-items: center; gap: 6px; padding: 8px 12px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); flex-wrap: wrap; } @@ -71,9 +71,9 @@ const styles = css` display: flex; align-items: center; justify-content: center; - border: 2px solid #e2e8f0; + border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 6px; - background: white; + background: var(--rs-bg-surface, #1e293b); cursor: pointer; font-size: 14px; transition: all 0.15s; @@ -85,14 +85,14 @@ const styles = css` .tool-btn.active { border-color: #f97316; - background: #fff7ed; + background: rgba(249, 115, 22, 0.15); } .color-swatch { width: 24px; height: 24px; border-radius: 50%; - border: 2px solid #e2e8f0; + border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1)); cursor: pointer; transition: transform 0.1s; } @@ -102,7 +102,7 @@ const styles = css` } .color-swatch.active { - border-color: #0f172a; + border-color: var(--rs-text-primary, #e2e8f0); transform: scale(1.15); } @@ -113,7 +113,7 @@ const styles = css` .size-label { font-size: 11px; - color: #64748b; + color: var(--rs-text-muted, #64748b); min-width: 20px; } @@ -208,9 +208,9 @@ export class FolkDrawfast extends FolkShape {
- + ${COLORS.map((c) => ``).join("")} - + 4 diff --git a/lib/folk-google-item.ts b/lib/folk-google-item.ts index 61c0544..a791527 100644 --- a/lib/folk-google-item.ts +++ b/lib/folk-google-item.ts @@ -65,7 +65,7 @@ const styles = css` font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 600; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -75,7 +75,7 @@ const styles = css` .preview { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; - color: #64748b; + color: var(--rs-text-muted, #64748b); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; @@ -87,7 +87,7 @@ const styles = css` .date { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 11px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); margin-top: 8px; } @@ -98,19 +98,6 @@ const styles = css` border-radius: 4px; margin-top: 8px; } - - /* Dark mode support */ - @media (prefers-color-scheme: dark) { - :host { - background: #1e293b; - } - .title { - color: #f1f5f9; - } - .preview { - color: #94a3b8; - } - } `; declare global { diff --git a/lib/folk-holon-browser.ts b/lib/folk-holon-browser.ts index 2f049f1..f71509c 100644 --- a/lib/folk-holon-browser.ts +++ b/lib/folk-holon-browser.ts @@ -82,7 +82,7 @@ const styles = css` .search-input { flex: 1; padding: 8px 12px; - border: 1px solid #d1d5db; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 6px; font-size: 13px; font-family: monospace; @@ -114,7 +114,7 @@ const styles = css` } .result-card { - border: 1px solid #e5e7eb; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 8px; padding: 14px; } @@ -122,7 +122,7 @@ const styles = css` .result-name { font-size: 15px; font-weight: 600; - color: #111827; + color: var(--rs-text-primary, #e2e8f0); margin-bottom: 8px; } @@ -135,12 +135,12 @@ const styles = css` } .result-label { - color: #6b7280; + color: var(--rs-text-muted, #64748b); font-size: 11px; } .result-value { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); font-family: monospace; font-size: 12px; word-break: break-all; @@ -157,20 +157,20 @@ const styles = css` padding: 3px 8px; border-radius: 10px; font-size: 11px; - background: #dbeafe; - color: #1e40af; + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; } .lens-badge.empty { - background: #f3f4f6; - color: #9ca3af; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-muted, #64748b); } .action-row { display: flex; gap: 8px; padding-top: 12px; - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .open-btn { @@ -188,25 +188,25 @@ const styles = css` .reset-btn { padding: 8px 16px; - background: #f3f4f6; - color: #374151; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-primary, #e2e8f0); border: none; border-radius: 6px; cursor: pointer; font-size: 13px; } - .reset-btn:hover { background: #e5e7eb; } + .reset-btn:hover { background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .loading { - color: #6b7280; + color: var(--rs-text-muted, #64748b); font-size: 13px; padding: 8px 0; } .hint { font-size: 12px; - color: #6b7280; + color: var(--rs-text-muted, #64748b); } `; diff --git a/lib/folk-holon.ts b/lib/folk-holon.ts index 8484ceb..dd42524 100644 --- a/lib/folk-holon.ts +++ b/lib/folk-holon.ts @@ -110,12 +110,12 @@ const styles = css` .connect-label { font-size: 14px; font-weight: 600; - color: #374151; + color: var(--rs-text-primary, #e2e8f0); } .connect-hint { font-size: 12px; - color: #6b7280; + color: var(--rs-text-muted, #64748b); max-width: 320px; } @@ -129,7 +129,7 @@ const styles = css` .connect-input { flex: 1; padding: 8px 12px; - border: 1px solid #d1d5db; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 6px; font-size: 13px; font-family: monospace; @@ -179,12 +179,12 @@ const styles = css` } .info-label { - color: #6b7280; + color: var(--rs-text-muted, #64748b); font-size: 11px; } .info-value { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); font-family: monospace; font-size: 12px; word-break: break-all; @@ -196,7 +196,7 @@ const styles = css` gap: 4px; margin-bottom: 12px; padding-bottom: 8px; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .lens-btn { @@ -205,13 +205,13 @@ const styles = css` border-radius: 12px; font-size: 11px; cursor: pointer; - background: #f3f4f6; - color: #374151; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-primary, #e2e8f0); white-space: nowrap; } .lens-btn:hover { - background: #e5e7eb; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .lens-btn.active { @@ -220,7 +220,7 @@ const styles = css` } .lens-data { - background: #f9fafb; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 6px; padding: 10px; font-size: 12px; @@ -234,11 +234,11 @@ const styles = css` word-break: break-word; font-family: monospace; font-size: 11px; - color: #374151; + color: var(--rs-text-secondary, #94a3b8); } .lens-empty { - color: #9ca3af; + color: var(--rs-text-muted, #64748b); font-style: italic; font-size: 12px; padding: 8px; @@ -253,7 +253,7 @@ const styles = css` .lens-add-row input { flex: 1; padding: 6px 10px; - border: 1px solid #d1d5db; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 4px; font-size: 12px; outline: none; diff --git a/lib/folk-itinerary.ts b/lib/folk-itinerary.ts index 98c3dea..d0c979d 100644 --- a/lib/folk-itinerary.ts +++ b/lib/folk-itinerary.ts @@ -64,7 +64,7 @@ const styles = css` font-weight: 600; color: #0d9488; padding: 4px 0; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); margin-bottom: 6px; } @@ -76,11 +76,11 @@ const styles = css` font-size: 12px; border-radius: 4px; margin-bottom: 4px; - background: #f8fafc; + background: var(--rs-bg-surface-sunken, #0f172a); } .item:hover { - background: #f1f5f9; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .item-icon { @@ -96,12 +96,12 @@ const styles = css` .item-title { font-weight: 500; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .item-time { font-size: 10px; - color: #64748b; + color: var(--rs-text-muted, #64748b); margin-top: 1px; } @@ -115,14 +115,14 @@ const styles = css` font-size: 9px; padding: 1px 5px; border-radius: 3px; - background: #e2e8f0; - color: #475569; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-secondary, #94a3b8); white-space: nowrap; } .add-form { padding: 8px 12px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .add-form input { diff --git a/lib/folk-map.ts b/lib/folk-map.ts index 958aeec..2bc5011 100644 --- a/lib/folk-map.ts +++ b/lib/folk-map.ts @@ -122,8 +122,8 @@ const styles = css` display: flex; align-items: center; justify-content: center; - background: #f1f5f9; - color: #64748b; + background: var(--rs-bg-surface-sunken, #0f172a); + color: var(--rs-text-muted, #64748b); font-size: 14px; } @@ -171,7 +171,7 @@ const styles = css` z-index: 10; width: 32px; height: 32px; - background: white; + background: var(--rs-bg-surface, #1e293b); border: none; border-radius: 4px; cursor: pointer; @@ -180,7 +180,7 @@ const styles = css` } .locate-btn:hover { - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); } /* Override MapLibre default styles */ @@ -194,8 +194,8 @@ const styles = css` align-items: center; gap: 4px; padding: 4px 8px; - background: #f8fafc; - border-top: 1px solid #e2e8f0; + background: var(--rs-bg-surface-sunken, #0f172a); + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 0 0 8px 8px; font-size: 12px; position: relative; @@ -206,8 +206,8 @@ const styles = css` align-items: center; gap: 3px; padding: 4px 8px; - background: white; - border: 1px solid #e2e8f0; + background: var(--rs-bg-surface, #1e293b); + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 4px; cursor: pointer; font-size: 12px; @@ -215,7 +215,7 @@ const styles = css` } .collab-btn:hover { - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); } .collab-btn.sharing { @@ -238,8 +238,8 @@ const styles = css` position: absolute; bottom: 40px; left: 8px; - background: white; - border: 1px solid #e2e8f0; + background: var(--rs-bg-surface, #1e293b); + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 8px; padding: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); @@ -272,8 +272,8 @@ const styles = css` } .emoji-opt:hover { - background: #f1f5f9; - border-color: #e2e8f0; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); + border-color: var(--rs-border, rgba(255, 255, 255, 0.1)); } .emoji-opt.selected { @@ -288,8 +288,8 @@ const styles = css` right: 0; width: 200px; height: 100%; - background: white; - border-left: 1px solid #e2e8f0; + background: var(--rs-bg-surface, #1e293b); + border-left: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); z-index: 15; overflow-y: auto; display: none; @@ -305,10 +305,10 @@ const styles = css` align-items: center; justify-content: space-between; padding: 8px 10px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); font-size: 12px; font-weight: 600; - color: #475569; + color: var(--rs-text-secondary, #94a3b8); } .participant-panel-close { @@ -316,7 +316,7 @@ const styles = css` border: none; cursor: pointer; font-size: 14px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); padding: 0 2px; } @@ -325,7 +325,7 @@ const styles = css` align-items: center; gap: 8px; padding: 6px 10px; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--rs-border-subtle, rgba(255, 255, 255, 0.06)); font-size: 11px; } @@ -341,14 +341,14 @@ const styles = css` .participant-name { font-weight: 500; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .participant-meta { - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); font-size: 10px; } @@ -362,7 +362,7 @@ const styles = css` .participant-status-dot.online { background: #22c55e; } .participant-status-dot.away { background: #fbbf24; } .participant-status-dot.ghost { background: #94a3b8; } - .participant-status-dot.offline { background: #e2e8f0; } + .participant-status-dot.offline { background: var(--rs-text-muted, #64748b); } /* โ”€โ”€ Waypoint input โ”€โ”€ */ .waypoint-input-wrap { @@ -371,7 +371,7 @@ const styles = css` left: 50%; transform: translate(-50%, -50%); z-index: 20; - background: white; + background: var(--rs-bg-surface, #1e293b); border-radius: 8px; padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); @@ -385,7 +385,7 @@ const styles = css` .waypoint-input { padding: 6px 10px; - border: 1px solid #e2e8f0; + border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 4px; font-size: 12px; outline: none; @@ -408,8 +408,8 @@ const styles = css` .waypoint-cancel { padding: 6px 10px; - background: #f1f5f9; - color: #64748b; + background: var(--rs-bg-surface-raised, #334155); + color: var(--rs-text-muted, #64748b); border: none; border-radius: 4px; cursor: pointer; diff --git a/lib/folk-multisig-email.ts b/lib/folk-multisig-email.ts index 4ab753c..f5f84bb 100644 --- a/lib/folk-multisig-email.ts +++ b/lib/folk-multisig-email.ts @@ -3,10 +3,10 @@ import { css, html } from "./tags"; const styles = css` :host { - background: #0f172a; - color: #e2e8f0; + background: var(--rs-bg-surface, #0f172a); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); + box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.3)); min-width: 360px; min-height: 320px; overflow: hidden; diff --git a/lib/folk-obs-note.ts b/lib/folk-obs-note.ts index a5c596f..c826359 100644 --- a/lib/folk-obs-note.ts +++ b/lib/folk-obs-note.ts @@ -74,7 +74,7 @@ const styles = css` align-items: center; gap: 4px; padding: 8px 12px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); flex-wrap: wrap; } @@ -82,14 +82,14 @@ const styles = css` padding: 4px 8px; border: none; border-radius: 4px; - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); cursor: pointer; font-size: 13px; transition: all 0.2s; } .toolbar-btn:hover { - background: #e2e8f0; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .toolbar-btn.active { @@ -100,7 +100,7 @@ const styles = css` .toolbar-divider { width: 1px; height: 20px; - background: #e2e8f0; + background: var(--rs-border, rgba(255, 255, 255, 0.1)); margin: 0 4px; } @@ -108,7 +108,7 @@ const styles = css` margin-left: auto; display: flex; gap: 2px; - background: #f1f5f9; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 6px; padding: 2px; } @@ -121,13 +121,13 @@ const styles = css` cursor: pointer; font-size: 11px; font-weight: 500; - color: #64748b; + color: var(--rs-text-muted, #64748b); transition: all 0.2s; } .mode-btn.active { - background: white; - color: #1e293b; + background: var(--rs-bg-surface, #1e293b); + color: var(--rs-text-primary, #e2e8f0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -146,7 +146,7 @@ const styles = css` font-family: "Monaco", "Consolas", "Courier New", monospace; font-size: 13px; line-height: 1.6; - background: #fafafa; + background: var(--rs-bg-surface-sunken, #0f172a); } .preview { @@ -165,7 +165,7 @@ const styles = css` .preview h1 { font-size: 1.5em; margin: 0 0 0.5em; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); padding-bottom: 0.3em; } @@ -184,7 +184,7 @@ const styles = css` } .preview code { - background: #f1f5f9; + background: var(--rs-bg-surface-raised, #334155); padding: 2px 6px; border-radius: 4px; font-family: "Monaco", "Consolas", monospace; @@ -208,8 +208,8 @@ const styles = css` border-left: 4px solid #7c3aed; margin: 0.5em 0; padding: 0.5em 1em; - background: #faf5ff; - color: #6b21a8; + background: rgba(124, 58, 237, 0.1); + color: var(--rs-text-primary, #e2e8f0); } .preview ul, .preview ol { diff --git a/lib/folk-packing-list.ts b/lib/folk-packing-list.ts index 368a6d2..9d26c2b 100644 --- a/lib/folk-packing-list.ts +++ b/lib/folk-packing-list.ts @@ -47,17 +47,17 @@ const styles = css` .progress-info { padding: 8px 12px; font-size: 11px; - color: #64748b; + color: var(--rs-text-muted, #64748b); display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .progress-bar { width: 80px; height: 6px; - background: #e2e8f0; + background: var(--rs-bg-surface-raised, #334155); border-radius: 3px; overflow: hidden; } @@ -94,7 +94,7 @@ const styles = css` } .item:hover { - background: #f8fafc; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); border-radius: 4px; padding: 4px 6px; margin: 0 -6px; @@ -103,7 +103,7 @@ const styles = css` .checkbox { width: 16px; height: 16px; - border: 2px solid #cbd5e1; + border: 2px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2)); border-radius: 4px; display: flex; align-items: center; @@ -125,12 +125,12 @@ const styles = css` } .item-name { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .item-name.packed { text-decoration: line-through; - color: #94a3b8; + color: var(--rs-text-muted, #64748b); } .item-qty { diff --git a/lib/folk-piano.ts b/lib/folk-piano.ts index a9d2c5b..c42114c 100644 --- a/lib/folk-piano.ts +++ b/lib/folk-piano.ts @@ -5,9 +5,10 @@ const PIANO_URL = "https://musiclab.chromeexperiments.com/Shared-Piano/"; const styles = css` :host { - background: #1e1e2e; + background: var(--rs-bg-surface, #1e1e2e); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--rs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.2)); min-width: 400px; min-height: 300px; overflow: hidden; diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts index 4a7956e..7be037f 100644 --- a/lib/folk-shape.ts +++ b/lib/folk-shape.ts @@ -61,6 +61,7 @@ const styles = css` cursor: move; transform-origin: 0 0; box-sizing: border-box; + color: var(--rs-text-primary, #e2e8f0); } :host::before { diff --git a/lib/folk-spider-3d.ts b/lib/folk-spider-3d.ts index ec7572e..36343d1 100644 --- a/lib/folk-spider-3d.ts +++ b/lib/folk-spider-3d.ts @@ -23,9 +23,10 @@ import type { FlowKind } from "./layer-types"; const styles = css` :host { - background: #0f172a; + background: var(--rs-bg-surface, #0f172a); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); + box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.3)); min-width: 400px; min-height: 420px; overflow: hidden; diff --git a/lib/folk-splat.ts b/lib/folk-splat.ts index fc80ddc..2972bfe 100644 --- a/lib/folk-splat.ts +++ b/lib/folk-splat.ts @@ -3,9 +3,10 @@ import { css, html } from "./tags"; const styles = css` :host { - background: #0f172a; + background: var(--rs-bg-surface, #0f172a); + color: var(--rs-text-primary, #e2e8f0); border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + box-shadow: var(--rs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3)); min-width: 360px; min-height: 400px; } diff --git a/lib/folk-token-ledger.ts b/lib/folk-token-ledger.ts index 6d93d2d..c1f6fbd 100644 --- a/lib/folk-token-ledger.ts +++ b/lib/folk-token-ledger.ts @@ -62,12 +62,12 @@ const styles = css` } .summary-row .label { - color: #64748b; + color: var(--rs-text-muted, #64748b); } .summary-row .value { font-weight: 600; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .holder-list { @@ -84,11 +84,11 @@ const styles = css` font-size: 12px; border-radius: 4px; margin-bottom: 3px; - background: #f8fafc; + background: var(--rs-bg-surface-sunken, #0f172a); } .holder-item:hover { - background: #f1f5f9; + background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); } .holder-info { @@ -110,13 +110,13 @@ const styles = css` } .holder-name { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); font-weight: 500; } .holder-memo { font-size: 9px; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); } .holder-amount { diff --git a/lib/folk-transcription.ts b/lib/folk-transcription.ts index 9a510f3..c12eb15 100644 --- a/lib/folk-transcription.ts +++ b/lib/folk-transcription.ts @@ -63,15 +63,15 @@ const styles = css` justify-content: center; gap: 16px; padding: 16px; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .record-btn { width: 64px; height: 64px; border-radius: 50%; - border: 4px solid #e2e8f0; - background: white; + border: 4px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2)); + background: var(--rs-bg-surface, #1e293b); cursor: pointer; display: flex; align-items: center; @@ -110,7 +110,7 @@ const styles = css` .status { font-size: 12px; - color: #64748b; + color: var(--rs-text-muted, #64748b); } .status.recording { @@ -121,7 +121,7 @@ const styles = css` .duration { font-family: "Monaco", "Consolas", monospace; font-size: 14px; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .transcript-area { @@ -136,7 +136,7 @@ const styles = css` align-items: center; justify-content: center; height: 100%; - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); text-align: center; gap: 8px; } @@ -149,30 +149,30 @@ const styles = css` .transcript { font-size: 14px; line-height: 1.6; - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .transcript-segment { margin-bottom: 12px; padding: 8px 12px; - background: #f8fafc; + background: var(--rs-bg-surface-sunken, #0f172a); border-radius: 8px; border-left: 3px solid #14b8a6; } .segment-time { font-size: 11px; - color: #64748b; + color: var(--rs-text-muted, #64748b); margin-bottom: 4px; font-family: "Monaco", "Consolas", monospace; } .segment-text { - color: #1e293b; + color: var(--rs-text-primary, #e2e8f0); } .segment-text.interim { - color: #94a3b8; + color: var(--rs-text-secondary, #94a3b8); font-style: italic; } @@ -180,19 +180,19 @@ const styles = css` display: flex; gap: 8px; padding: 12px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1)); } .action-btn { flex: 1; padding: 8px 12px; - border: 2px solid #e2e8f0; + border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1)); border-radius: 6px; - background: white; + background: var(--rs-bg-surface, #1e293b); cursor: pointer; font-size: 12px; font-weight: 500; - color: #64748b; + color: var(--rs-text-muted, #64748b); transition: all 0.2s; } @@ -204,7 +204,7 @@ const styles = css` .error { color: #ef4444; padding: 12px; - background: #fef2f2; + background: rgba(239, 68, 68, 0.1); border-radius: 6px; font-size: 13px; margin: 12px;