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

Merge branch 'dev'

This commit is contained in:
Jeff Emmett 2026-03-21 17:28:13 -07:00
parent 524356d233 544e557981
commit 21236ccd15
24 changed files with 222 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/folk-booking.ts
View File

@ -60,13 +60,13 @@ const styles = css`
.provider { .provider {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
margin-bottom: 4px; margin-bottom: 4px;
} }
.details { .details {
font-size: 12px; font-size: 12px;
color: #475569; color: var(--rs-text-secondary, #94a3b8);
line-height: 1.5; line-height: 1.5;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -85,18 +85,18 @@ const styles = css`
} }
.meta-label { .meta-label {
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
} }
.meta-value { .meta-value {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
font-weight: 500; font-weight: 500;
} }
.confirmation { .confirmation {
margin-top: 8px; margin-top: 8px;
padding: 6px 8px; padding: 6px 8px;
background: #f1f5f9; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 4px; border-radius: 4px;
font-size: 11px; font-size: 11px;
display: flex; display: flex;
@ -104,19 +104,19 @@ const styles = css`
} }
.confirmation .label { .confirmation .label {
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
} }
.confirmation .code { .confirmation .code {
font-family: monospace; font-family: monospace;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.cost { .cost {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
margin-top: 8px; margin-top: 8px;
} }
@ -130,8 +130,8 @@ const styles = css`
} }
.status-badge.PLANNED { .status-badge.PLANNED {
background: #e2e8f0; background: var(--rs-bg-surface-raised, #334155);
color: #475569; color: var(--rs-text-secondary, #94a3b8);
} }
.status-badge.BOOKED { .status-badge.BOOKED {

14
lib/folk-budget.ts
View File

@ -60,12 +60,12 @@ const styles = css`
} }
.budget-row .label { .budget-row .label {
color: #64748b; color: var(--rs-text-muted, #64748b);
} }
.budget-row .value { .budget-row .value {
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.budget-row .remaining { .budget-row .remaining {
@ -79,7 +79,7 @@ const styles = css`
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 8px; height: 8px;
background: #e2e8f0; background: var(--rs-bg-surface-raised, #334155);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
margin: 8px 0 12px; margin: 8px 0 12px;
@ -116,21 +116,21 @@ const styles = css`
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 3px; margin-bottom: 3px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.expense-item:hover { .expense-item:hover {
background: #f1f5f9; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.expense-desc { .expense-desc {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
font-weight: 500; font-weight: 500;
} }
.expense-cat { .expense-cat {
font-size: 9px; font-size: 9px;
color: #64748b; color: var(--rs-text-muted, #64748b);
} }
.expense-amount { .expense-amount {

19
lib/folk-calendar.ts
View File

@ -61,22 +61,23 @@ const styles = css`
} }
.calendar-nav button { .calendar-nav button {
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 4px 8px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
color: var(--rs-text-primary, #e2e8f0);
} }
.calendar-nav button:hover { .calendar-nav button:hover {
background: #e2e8f0; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.month-year { .month-year {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.weekdays { .weekdays {
@ -90,7 +91,7 @@ const styles = css`
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: #64748b; color: var(--rs-text-muted, #64748b);
padding: 4px; padding: 4px;
} }
@ -108,15 +109,15 @@ const styles = css`
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: #374151; color: var(--rs-text-primary, #e2e8f0);
} }
.day:hover { .day:hover {
background: #f1f5f9; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.day.other-month { .day.other-month {
color: #94a3b8; color: var(--rs-text-muted, #64748b);
} }
.day.today { .day.today {
@ -152,7 +153,7 @@ const styles = css`
.events-list { .events-list {
margin-top: 12px; margin-top: 12px;
padding-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; max-height: 120px;
overflow-y: auto; overflow-y: auto;
} }
@ -165,7 +166,7 @@ const styles = css`
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 4px; margin-bottom: 4px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.event-dot { .event-dot {

37
lib/folk-canvas.ts
View File

@ -4,9 +4,10 @@ import type { ShapeData, SpaceRef, NestPermissions } from "./community-sync";
const styles = css` const styles = css`
:host { :host {
background: #f8fafc; background: var(--rs-bg-surface, #1e293b);
color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px; 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-width: 300px;
min-height: 200px; min-height: 200px;
overflow: hidden; overflow: hidden;
@ -17,8 +18,8 @@ const styles = css`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 6px 12px; padding: 6px 12px;
background: #334155; background: var(--rs-bg-surface-raised, #334155);
color: white; color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
@ -99,23 +100,23 @@ const styles = css`
.nested-shape { .nested-shape {
position: absolute; position: absolute;
background: white; background: var(--rs-bg-surface-raised, #334155);
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 6px; border-radius: 6px;
padding: 8px; padding: 8px;
font-size: 12px; font-size: 12px;
overflow: hidden; 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 { .nested-shape .shape-type {
font-size: 10px; font-size: 10px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
margin-bottom: 4px; margin-bottom: 4px;
} }
.nested-shape .shape-content { .nested-shape .shape-content {
color: #334155; color: var(--rs-text-primary, #e2e8f0);
word-break: break-word; word-break: break-word;
} }
@ -124,10 +125,10 @@ const styles = css`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 4px 12px; padding: 4px 12px;
background: #f1f5f9; background: var(--rs-bg-surface-sunken, #0f172a);
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
font-size: 10px; font-size: 10px;
color: #64748b; color: var(--rs-text-muted, #64748b);
} }
.status-indicator { .status-indicator {
@ -160,19 +161,19 @@ const styles = css`
.collapsed-label { .collapsed-label {
font-size: 13px; font-size: 13px;
color: #475569; color: var(--rs-text-primary, #e2e8f0);
font-weight: 500; font-weight: 500;
} }
.collapsed-meta { .collapsed-meta {
font-size: 11px; font-size: 11px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
} }
.enter-btn { .enter-btn {
margin-top: 8px; margin-top: 8px;
background: #334155; background: var(--rs-bg-surface-raised, #334155);
color: white; color: var(--rs-text-primary, #e2e8f0);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
padding: 6px 16px; padding: 6px 16px;
@ -181,7 +182,7 @@ const styles = css`
} }
.enter-btn:hover { .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) { if (this.#nestedShapes.size === 0) {
this.#nestedCanvasEl.innerHTML = ` this.#nestedCanvasEl.innerHTML = `
<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:12px;"> <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--rs-text-secondary,#94a3b8);font-size:12px;">
${this.#connectionStatus === "connected" ? "Empty space" : "Connecting..."} ${this.#connectionStatus === "connected" ? "Empty space" : "Connecting..."}
</div> </div>
`; `;

8
lib/folk-choice-conviction.ts
View File

@ -72,8 +72,8 @@ const styles = css`
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 6px; margin-bottom: 6px;
background: #fffbeb; background: rgba(217, 119, 6, 0.08);
border: 1px solid #fde68a; border: 1px solid rgba(217, 119, 6, 0.2);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -99,7 +99,7 @@ const styles = css`
.option-label { .option-label {
flex: 1; flex: 1;
font-size: 13px; font-size: 13px;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
z-index: 1; z-index: 1;
} }
@ -115,7 +115,7 @@ const styles = css`
height: 22px; height: 22px;
border: 1px solid #fbbf24; border: 1px solid #fbbf24;
border-radius: 4px; border-radius: 4px;
background: white; background: var(--rs-bg-surface, #1e293b);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
display: flex; display: flex;

28
lib/folk-choice-rank.ts
View File

@ -62,7 +62,7 @@ const styles = css`
.tab-bar { .tab-bar {
display: flex; display: flex;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.tab { .tab {
@ -74,14 +74,14 @@ const styles = css`
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
color: #64748b; color: var(--rs-text-muted, #64748b);
transition: all 0.15s; transition: all 0.15s;
} }
.tab.active { .tab.active {
color: #4f46e5; color: #4f46e5;
border-bottom: 2px solid #4f46e5; border-bottom: 2px solid #4f46e5;
background: #eef2ff; background: rgba(79, 70, 229, 0.1);
} }
.panel { .panel {
@ -100,8 +100,8 @@ const styles = css`
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: 6px;
margin-bottom: 4px; margin-bottom: 4px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
cursor: grab; cursor: grab;
user-select: none; user-select: none;
transition: transform 0.15s, box-shadow 0.15s; transition: transform 0.15s, box-shadow 0.15s;
@ -111,7 +111,7 @@ const styles = css`
.rank-item.dragging { .rank-item.dragging {
opacity: 0.5; opacity: 0.5;
background: #eef2ff; background: rgba(79, 70, 229, 0.1);
} }
.rank-item.drag-over { .rank-item.drag-over {
@ -121,7 +121,7 @@ const styles = css`
} }
.grip { .grip {
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
font-size: 10px; font-size: 10px;
line-height: 1; line-height: 1;
flex-shrink: 0; flex-shrink: 0;
@ -138,7 +138,7 @@ const styles = css`
.rank-label { .rank-label {
flex: 1; flex: 1;
font-size: 13px; font-size: 13px;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
/* Results */ /* Results */
@ -149,7 +149,7 @@ const styles = css`
.results-heading { .results-heading {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: #64748b; color: var(--rs-text-muted, #64748b);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-bottom: 6px; margin-bottom: 6px;
@ -165,13 +165,13 @@ const styles = css`
.borda-label { .borda-label {
font-size: 12px; font-size: 12px;
min-width: 80px; min-width: 80px;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.borda-bar-bg { .borda-bar-bg {
flex: 1; flex: 1;
height: 14px; height: 14px;
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
@ -195,8 +195,8 @@ const styles = css`
.irv-round { .irv-round {
font-size: 11px; font-size: 11px;
padding: 4px 0; padding: 4px 0;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--rs-border-subtle, rgba(255, 255, 255, 0.06));
color: #475569; color: var(--rs-text-secondary, #94a3b8);
} }
.irv-round .round-num { .irv-round .round-num {
@ -217,7 +217,7 @@ const styles = css`
.voters-count { .voters-count {
padding: 4px 0; padding: 4px 0;
font-size: 11px; font-size: 11px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
text-align: center; text-align: center;
} }

12
lib/folk-choice-spider.ts
View File

@ -62,7 +62,7 @@ const styles = css`
.option-tabs { .option-tabs {
display: flex; display: flex;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
overflow-x: auto; overflow-x: auto;
} }
@ -74,7 +74,7 @@ const styles = css`
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
color: #64748b; color: var(--rs-text-muted, #64748b);
white-space: nowrap; white-space: nowrap;
transition: all 0.15s; transition: all 0.15s;
flex-shrink: 0; flex-shrink: 0;
@ -83,7 +83,7 @@ const styles = css`
.option-tab.active { .option-tab.active {
color: #059669; color: #059669;
border-bottom: 2px solid #059669; border-bottom: 2px solid #059669;
background: #ecfdf5; background: rgba(5, 150, 105, 0.1);
} }
.chart-area { .chart-area {
@ -113,7 +113,7 @@ const styles = css`
.slider-label { .slider-label {
font-size: 11px; font-size: 11px;
color: #64748b; color: var(--rs-text-muted, #64748b);
min-width: 60px; min-width: 60px;
text-align: right; text-align: right;
} }
@ -123,7 +123,7 @@ const styles = css`
height: 4px; height: 4px;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: #e2e8f0; background: var(--rs-bg-surface-raised, #334155);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@ -165,7 +165,7 @@ const styles = css`
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
padding: 4px 12px; padding: 4px 12px;
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.legend-item { .legend-item {

32
lib/folk-choice-vote.ts
View File

@ -62,7 +62,7 @@ const styles = css`
.mode-tabs { .mode-tabs {
display: flex; display: flex;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.mode-tab { .mode-tab {
@ -74,14 +74,14 @@ const styles = css`
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
color: #64748b; color: var(--rs-text-muted, #64748b);
transition: all 0.15s; transition: all 0.15s;
} }
.mode-tab.active { .mode-tab.active {
color: #0d9488; color: #0d9488;
border-bottom: 2px solid #0d9488; border-bottom: 2px solid #0d9488;
background: #f0fdfa; background: rgba(13, 148, 136, 0.1);
} }
.options-list { .options-list {
@ -104,11 +104,11 @@ const styles = css`
} }
.option-row:hover { .option-row:hover {
background: #f8fafc; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.option-row.voted { .option-row.voted {
background: #f0fdfa; background: rgba(13, 148, 136, 0.1);
} }
.bar-bg { .bar-bg {
@ -133,12 +133,12 @@ const styles = css`
flex: 1; flex: 1;
font-size: 13px; font-size: 13px;
z-index: 1; z-index: 1;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.option-count { .option-count {
font-size: 12px; font-size: 12px;
color: #64748b; color: var(--rs-text-muted, #64748b);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
z-index: 1; z-index: 1;
min-width: 20px; min-width: 20px;
@ -164,18 +164,18 @@ const styles = css`
.qv-btn { .qv-btn {
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid #cbd5e1; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 4px; border-radius: 4px;
background: white; background: var(--rs-bg-surface, #1e293b);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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-btn:disabled { opacity: 0.3; cursor: default; }
.qv-count { .qv-count {
@ -183,14 +183,14 @@ const styles = css`
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
min-width: 14px; min-width: 14px;
text-align: center; text-align: center;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.budget-bar { .budget-bar {
padding: 4px 12px; padding: 4px 12px;
font-size: 11px; font-size: 11px;
color: #64748b; color: var(--rs-text-muted, #64748b);
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
text-align: center; text-align: center;
} }
@ -202,7 +202,7 @@ const styles = css`
.voters-count { .voters-count {
padding: 4px 12px; padding: 4px 12px;
font-size: 11px; font-size: 11px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
text-align: center; text-align: center;
} }
@ -210,7 +210,7 @@ const styles = css`
display: flex; display: flex;
gap: 6px; gap: 6px;
padding: 8px 12px; padding: 8px 12px;
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.add-input { .add-input {

14
lib/folk-destination.ts
View File

@ -51,13 +51,13 @@ const styles = css`
.dest-name { .dest-name {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
margin-bottom: 2px; margin-bottom: 2px;
} }
.dest-country { .dest-country {
font-size: 12px; font-size: 12px;
color: #64748b; color: var(--rs-text-muted, #64748b);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -65,10 +65,10 @@ const styles = css`
display: flex; display: flex;
gap: 12px; gap: 12px;
font-size: 11px; font-size: 11px;
color: #475569; color: var(--rs-text-secondary, #94a3b8);
margin-bottom: 10px; margin-bottom: 10px;
padding: 6px 8px; padding: 6px 8px;
background: #f1f5f9; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 4px; border-radius: 4px;
} }
@ -85,12 +85,12 @@ const styles = css`
.dest-notes { .dest-notes {
font-size: 12px; font-size: 12px;
color: #475569; color: var(--rs-text-secondary, #94a3b8);
line-height: 1.5; line-height: 1.5;
padding: 8px; padding: 8px;
background: #fafaf9; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 4px; border-radius: 4px;
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
min-height: 40px; min-height: 40px;
white-space: pre-wrap; white-space: pre-wrap;
} }

18
lib/folk-drawfast.ts
View File

@ -61,7 +61,7 @@ const styles = css`
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -71,9 +71,9 @@ const styles = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid #e2e8f0; border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 6px; border-radius: 6px;
background: white; background: var(--rs-bg-surface, #1e293b);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: all 0.15s; transition: all 0.15s;
@ -85,14 +85,14 @@ const styles = css`
.tool-btn.active { .tool-btn.active {
border-color: #f97316; border-color: #f97316;
background: #fff7ed; background: rgba(249, 115, 22, 0.15);
} }
.color-swatch { .color-swatch {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #e2e8f0; border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
cursor: pointer; cursor: pointer;
transition: transform 0.1s; transition: transform 0.1s;
} }
@ -102,7 +102,7 @@ const styles = css`
} }
.color-swatch.active { .color-swatch.active {
border-color: #0f172a; border-color: var(--rs-text-primary, #e2e8f0);
transform: scale(1.15); transform: scale(1.15);
} }
@ -113,7 +113,7 @@ const styles = css`
.size-label { .size-label {
font-size: 11px; font-size: 11px;
color: #64748b; color: var(--rs-text-muted, #64748b);
min-width: 20px; min-width: 20px;
} }
@ -208,9 +208,9 @@ export class FolkDrawfast extends FolkShape {
<div class="toolbar-row"> <div class="toolbar-row">
<button class="tool-btn active" data-tool="pen" title="Pen">✏️</button> <button class="tool-btn active" data-tool="pen" title="Pen">✏️</button>
<button class="tool-btn" data-tool="eraser" title="Eraser">🧹</button> <button class="tool-btn" data-tool="eraser" title="Eraser">🧹</button>
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span> <span style="width:1px;height:20px;background:var(--rs-border,rgba(255,255,255,0.1));margin:0 2px"></span>
${COLORS.map((c) => `<span class="color-swatch${c === "#0f172a" ? " active" : ""}" data-color="${c}" style="background:${c}"></span>`).join("")} ${COLORS.map((c) => `<span class="color-swatch${c === "#0f172a" ? " active" : ""}" data-color="${c}" style="background:${c}"></span>`).join("")}
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span> <span style="width:1px;height:20px;background:var(--rs-border,rgba(255,255,255,0.1));margin:0 2px"></span>
<input type="range" class="size-slider" min="1" max="24" value="4" /> <input type="range" class="size-slider" min="1" max="24" value="4" />
<span class="size-label">4</span> <span class="size-label">4</span>
<span style="flex:1"></span> <span style="flex:1"></span>

19
lib/folk-google-item.ts
View File

@ -65,7 +65,7 @@ const styles = css`
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -75,7 +75,7 @@ const styles = css`
.preview { .preview {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px; font-size: 12px;
color: #64748b; color: var(--rs-text-muted, #64748b);
line-height: 1.4; line-height: 1.4;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -87,7 +87,7 @@ const styles = css`
.date { .date {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 11px; font-size: 11px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
margin-top: 8px; margin-top: 8px;
} }
@ -98,19 +98,6 @@ const styles = css`
border-radius: 4px; border-radius: 4px;
margin-top: 8px; margin-top: 8px;
} }
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:host {
background: #1e293b;
}
.title {
color: #f1f5f9;
}
.preview {
color: #94a3b8;
}
}
`; `;
declare global { declare global {

30
lib/folk-holon-browser.ts
View File

@ -82,7 +82,7 @@ const styles = css`
.search-input { .search-input {
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #d1d5db; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
font-family: monospace; font-family: monospace;
@ -114,7 +114,7 @@ const styles = css`
} }
.result-card { .result-card {
border: 1px solid #e5e7eb; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 8px; border-radius: 8px;
padding: 14px; padding: 14px;
} }
@ -122,7 +122,7 @@ const styles = css`
.result-name { .result-name {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #111827; color: var(--rs-text-primary, #e2e8f0);
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -135,12 +135,12 @@ const styles = css`
} }
.result-label { .result-label {
color: #6b7280; color: var(--rs-text-muted, #64748b);
font-size: 11px; font-size: 11px;
} }
.result-value { .result-value {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
word-break: break-all; word-break: break-all;
@ -157,20 +157,20 @@ const styles = css`
padding: 3px 8px; padding: 3px 8px;
border-radius: 10px; border-radius: 10px;
font-size: 11px; font-size: 11px;
background: #dbeafe; background: rgba(59, 130, 246, 0.15);
color: #1e40af; color: #60a5fa;
} }
.lens-badge.empty { .lens-badge.empty {
background: #f3f4f6; background: var(--rs-bg-surface-raised, #334155);
color: #9ca3af; color: var(--rs-text-muted, #64748b);
} }
.action-row { .action-row {
display: flex; display: flex;
gap: 8px; gap: 8px;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid #e5e7eb; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.open-btn { .open-btn {
@ -188,25 +188,25 @@ const styles = css`
.reset-btn { .reset-btn {
padding: 8px 16px; padding: 8px 16px;
background: #f3f4f6; background: var(--rs-bg-surface-raised, #334155);
color: #374151; color: var(--rs-text-primary, #e2e8f0);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
} }
.reset-btn:hover { background: #e5e7eb; } .reset-btn:hover { background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); }
.loading { .loading {
color: #6b7280; color: var(--rs-text-muted, #64748b);
font-size: 13px; font-size: 13px;
padding: 8px 0; padding: 8px 0;
} }
.hint { .hint {
font-size: 12px; font-size: 12px;
color: #6b7280; color: var(--rs-text-muted, #64748b);
} }
`; `;

26
lib/folk-holon.ts
View File

@ -110,12 +110,12 @@ const styles = css`
.connect-label { .connect-label {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #374151; color: var(--rs-text-primary, #e2e8f0);
} }
.connect-hint { .connect-hint {
font-size: 12px; font-size: 12px;
color: #6b7280; color: var(--rs-text-muted, #64748b);
max-width: 320px; max-width: 320px;
} }
@ -129,7 +129,7 @@ const styles = css`
.connect-input { .connect-input {
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #d1d5db; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
font-family: monospace; font-family: monospace;
@ -179,12 +179,12 @@ const styles = css`
} }
.info-label { .info-label {
color: #6b7280; color: var(--rs-text-muted, #64748b);
font-size: 11px; font-size: 11px;
} }
.info-value { .info-value {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
word-break: break-all; word-break: break-all;
@ -196,7 +196,7 @@ const styles = css`
gap: 4px; gap: 4px;
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.lens-btn { .lens-btn {
@ -205,13 +205,13 @@ const styles = css`
border-radius: 12px; border-radius: 12px;
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
background: #f3f4f6; background: var(--rs-bg-surface-raised, #334155);
color: #374151; color: var(--rs-text-primary, #e2e8f0);
white-space: nowrap; white-space: nowrap;
} }
.lens-btn:hover { .lens-btn:hover {
background: #e5e7eb; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.lens-btn.active { .lens-btn.active {
@ -220,7 +220,7 @@ const styles = css`
} }
.lens-data { .lens-data {
background: #f9fafb; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
@ -234,11 +234,11 @@ const styles = css`
word-break: break-word; word-break: break-word;
font-family: monospace; font-family: monospace;
font-size: 11px; font-size: 11px;
color: #374151; color: var(--rs-text-secondary, #94a3b8);
} }
.lens-empty { .lens-empty {
color: #9ca3af; color: var(--rs-text-muted, #64748b);
font-style: italic; font-style: italic;
font-size: 12px; font-size: 12px;
padding: 8px; padding: 8px;
@ -253,7 +253,7 @@ const styles = css`
.lens-add-row input { .lens-add-row input {
flex: 1; flex: 1;
padding: 6px 10px; padding: 6px 10px;
border: 1px solid #d1d5db; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
outline: none; outline: none;

16
lib/folk-itinerary.ts
View File

@ -64,7 +64,7 @@ const styles = css`
font-weight: 600; font-weight: 600;
color: #0d9488; color: #0d9488;
padding: 4px 0; padding: 4px 0;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
margin-bottom: 6px; margin-bottom: 6px;
} }
@ -76,11 +76,11 @@ const styles = css`
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 4px; margin-bottom: 4px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.item:hover { .item:hover {
background: #f1f5f9; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.item-icon { .item-icon {
@ -96,12 +96,12 @@ const styles = css`
.item-title { .item-title {
font-weight: 500; font-weight: 500;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.item-time { .item-time {
font-size: 10px; font-size: 10px;
color: #64748b; color: var(--rs-text-muted, #64748b);
margin-top: 1px; margin-top: 1px;
} }
@ -115,14 +115,14 @@ const styles = css`
font-size: 9px; font-size: 9px;
padding: 1px 5px; padding: 1px 5px;
border-radius: 3px; border-radius: 3px;
background: #e2e8f0; background: var(--rs-bg-surface-raised, #334155);
color: #475569; color: var(--rs-text-secondary, #94a3b8);
white-space: nowrap; white-space: nowrap;
} }
.add-form { .add-form {
padding: 8px 12px; padding: 8px 12px;
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.add-form input { .add-form input {

52
lib/folk-map.ts
View File

@ -122,8 +122,8 @@ const styles = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #f1f5f9; background: var(--rs-bg-surface-sunken, #0f172a);
color: #64748b; color: var(--rs-text-muted, #64748b);
font-size: 14px; font-size: 14px;
} }
@ -171,7 +171,7 @@ const styles = css`
z-index: 10; z-index: 10;
width: 32px; width: 32px;
height: 32px; height: 32px;
background: white; background: var(--rs-bg-surface, #1e293b);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -180,7 +180,7 @@ const styles = css`
} }
.locate-btn:hover { .locate-btn:hover {
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
} }
/* Override MapLibre default styles */ /* Override MapLibre default styles */
@ -194,8 +194,8 @@ const styles = css`
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 8px; padding: 4px 8px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
@ -206,8 +206,8 @@ const styles = css`
align-items: center; align-items: center;
gap: 3px; gap: 3px;
padding: 4px 8px; padding: 4px 8px;
background: white; background: var(--rs-bg-surface, #1e293b);
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
@ -215,7 +215,7 @@ const styles = css`
} }
.collab-btn:hover { .collab-btn:hover {
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
} }
.collab-btn.sharing { .collab-btn.sharing {
@ -238,8 +238,8 @@ const styles = css`
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 8px; left: 8px;
background: white; background: var(--rs-bg-surface, #1e293b);
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 8px; border-radius: 8px;
padding: 8px; padding: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@ -272,8 +272,8 @@ const styles = css`
} }
.emoji-opt:hover { .emoji-opt:hover {
background: #f1f5f9; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
border-color: #e2e8f0; border-color: var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.emoji-opt.selected { .emoji-opt.selected {
@ -288,8 +288,8 @@ const styles = css`
right: 0; right: 0;
width: 200px; width: 200px;
height: 100%; height: 100%;
background: white; background: var(--rs-bg-surface, #1e293b);
border-left: 1px solid #e2e8f0; border-left: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
z-index: 15; z-index: 15;
overflow-y: auto; overflow-y: auto;
display: none; display: none;
@ -305,10 +305,10 @@ const styles = css`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 8px 10px; 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-size: 12px;
font-weight: 600; font-weight: 600;
color: #475569; color: var(--rs-text-secondary, #94a3b8);
} }
.participant-panel-close { .participant-panel-close {
@ -316,7 +316,7 @@ const styles = css`
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
padding: 0 2px; padding: 0 2px;
} }
@ -325,7 +325,7 @@ const styles = css`
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 6px 10px; 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; font-size: 11px;
} }
@ -341,14 +341,14 @@ const styles = css`
.participant-name { .participant-name {
font-weight: 500; font-weight: 500;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.participant-meta { .participant-meta {
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
font-size: 10px; font-size: 10px;
} }
@ -362,7 +362,7 @@ const styles = css`
.participant-status-dot.online { background: #22c55e; } .participant-status-dot.online { background: #22c55e; }
.participant-status-dot.away { background: #fbbf24; } .participant-status-dot.away { background: #fbbf24; }
.participant-status-dot.ghost { background: #94a3b8; } .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 ── */
.waypoint-input-wrap { .waypoint-input-wrap {
@ -371,7 +371,7 @@ const styles = css`
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 20; z-index: 20;
background: white; background: var(--rs-bg-surface, #1e293b);
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@ -385,7 +385,7 @@ const styles = css`
.waypoint-input { .waypoint-input {
padding: 6px 10px; padding: 6px 10px;
border: 1px solid #e2e8f0; border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
@ -408,8 +408,8 @@ const styles = css`
.waypoint-cancel { .waypoint-cancel {
padding: 6px 10px; padding: 6px 10px;
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
color: #64748b; color: var(--rs-text-muted, #64748b);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;

6
lib/folk-multisig-email.ts
View File

@ -3,10 +3,10 @@ import { css, html } from "./tags";
const styles = css` const styles = css`
:host { :host {
background: #0f172a; background: var(--rs-bg-surface, #0f172a);
color: #e2e8f0; color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px; 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-width: 360px;
min-height: 320px; min-height: 320px;
overflow: hidden; overflow: hidden;

26
lib/folk-obs-note.ts
View File

@ -74,7 +74,7 @@ const styles = css`
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -82,14 +82,14 @@ const styles = css`
padding: 4px 8px; padding: 4px 8px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
transition: all 0.2s; transition: all 0.2s;
} }
.toolbar-btn:hover { .toolbar-btn:hover {
background: #e2e8f0; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.toolbar-btn.active { .toolbar-btn.active {
@ -100,7 +100,7 @@ const styles = css`
.toolbar-divider { .toolbar-divider {
width: 1px; width: 1px;
height: 20px; height: 20px;
background: #e2e8f0; background: var(--rs-border, rgba(255, 255, 255, 0.1));
margin: 0 4px; margin: 0 4px;
} }
@ -108,7 +108,7 @@ const styles = css`
margin-left: auto; margin-left: auto;
display: flex; display: flex;
gap: 2px; gap: 2px;
background: #f1f5f9; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 6px; border-radius: 6px;
padding: 2px; padding: 2px;
} }
@ -121,13 +121,13 @@ const styles = css`
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
color: #64748b; color: var(--rs-text-muted, #64748b);
transition: all 0.2s; transition: all 0.2s;
} }
.mode-btn.active { .mode-btn.active {
background: white; background: var(--rs-bg-surface, #1e293b);
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 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-family: "Monaco", "Consolas", "Courier New", monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
background: #fafafa; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.preview { .preview {
@ -165,7 +165,7 @@ const styles = css`
.preview h1 { .preview h1 {
font-size: 1.5em; font-size: 1.5em;
margin: 0 0 0.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; padding-bottom: 0.3em;
} }
@ -184,7 +184,7 @@ const styles = css`
} }
.preview code { .preview code {
background: #f1f5f9; background: var(--rs-bg-surface-raised, #334155);
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-family: "Monaco", "Consolas", monospace; font-family: "Monaco", "Consolas", monospace;
@ -208,8 +208,8 @@ const styles = css`
border-left: 4px solid #7c3aed; border-left: 4px solid #7c3aed;
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em 1em; padding: 0.5em 1em;
background: #faf5ff; background: rgba(124, 58, 237, 0.1);
color: #6b21a8; color: var(--rs-text-primary, #e2e8f0);
} }
.preview ul, .preview ol { .preview ul, .preview ol {

14
lib/folk-packing-list.ts
View File

@ -47,17 +47,17 @@ const styles = css`
.progress-info { .progress-info {
padding: 8px 12px; padding: 8px 12px;
font-size: 11px; font-size: 11px;
color: #64748b; color: var(--rs-text-muted, #64748b);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.progress-bar { .progress-bar {
width: 80px; width: 80px;
height: 6px; height: 6px;
background: #e2e8f0; background: var(--rs-bg-surface-raised, #334155);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
@ -94,7 +94,7 @@ const styles = css`
} }
.item:hover { .item:hover {
background: #f8fafc; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
border-radius: 4px; border-radius: 4px;
padding: 4px 6px; padding: 4px 6px;
margin: 0 -6px; margin: 0 -6px;
@ -103,7 +103,7 @@ const styles = css`
.checkbox { .checkbox {
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 2px solid #cbd5e1; border: 2px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2));
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -125,12 +125,12 @@ const styles = css`
} }
.item-name { .item-name {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.item-name.packed { .item-name.packed {
text-decoration: line-through; text-decoration: line-through;
color: #94a3b8; color: var(--rs-text-muted, #64748b);
} }
.item-qty { .item-qty {

5
lib/folk-piano.ts
View File

@ -5,9 +5,10 @@ const PIANO_URL = "https://musiclab.chromeexperiments.com/Shared-Piano/";
const styles = css` const styles = css`
:host { :host {
background: #1e1e2e; background: var(--rs-bg-surface, #1e1e2e);
color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px; 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-width: 400px;
min-height: 300px; min-height: 300px;
overflow: hidden; overflow: hidden;

1
lib/folk-shape.ts
View File

@ -61,6 +61,7 @@ const styles = css`
cursor: move; cursor: move;
transform-origin: 0 0; transform-origin: 0 0;
box-sizing: border-box; box-sizing: border-box;
color: var(--rs-text-primary, #e2e8f0);
} }
:host::before { :host::before {

5
lib/folk-spider-3d.ts
View File

@ -23,9 +23,10 @@ import type { FlowKind } from "./layer-types";
const styles = css` const styles = css`
:host { :host {
background: #0f172a; background: var(--rs-bg-surface, #0f172a);
color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px; 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-width: 400px;
min-height: 420px; min-height: 420px;
overflow: hidden; overflow: hidden;

5
lib/folk-splat.ts
View File

@ -3,9 +3,10 @@ import { css, html } from "./tags";
const styles = css` const styles = css`
:host { :host {
background: #0f172a; background: var(--rs-bg-surface, #0f172a);
color: var(--rs-text-primary, #e2e8f0);
border-radius: 8px; 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-width: 360px;
min-height: 400px; min-height: 400px;
} }

12
lib/folk-token-ledger.ts
View File

@ -62,12 +62,12 @@ const styles = css`
} }
.summary-row .label { .summary-row .label {
color: #64748b; color: var(--rs-text-muted, #64748b);
} }
.summary-row .value { .summary-row .value {
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.holder-list { .holder-list {
@ -84,11 +84,11 @@ const styles = css`
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
margin-bottom: 3px; margin-bottom: 3px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
} }
.holder-item:hover { .holder-item:hover {
background: #f1f5f9; background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
} }
.holder-info { .holder-info {
@ -110,13 +110,13 @@ const styles = css`
} }
.holder-name { .holder-name {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
font-weight: 500; font-weight: 500;
} }
.holder-memo { .holder-memo {
font-size: 9px; font-size: 9px;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
} }
.holder-amount { .holder-amount {

32
lib/folk-transcription.ts
View File

@ -63,15 +63,15 @@ const styles = css`
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.record-btn { .record-btn {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 50%; border-radius: 50%;
border: 4px solid #e2e8f0; border: 4px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2));
background: white; background: var(--rs-bg-surface, #1e293b);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -110,7 +110,7 @@ const styles = css`
.status { .status {
font-size: 12px; font-size: 12px;
color: #64748b; color: var(--rs-text-muted, #64748b);
} }
.status.recording { .status.recording {
@ -121,7 +121,7 @@ const styles = css`
.duration { .duration {
font-family: "Monaco", "Consolas", monospace; font-family: "Monaco", "Consolas", monospace;
font-size: 14px; font-size: 14px;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.transcript-area { .transcript-area {
@ -136,7 +136,7 @@ const styles = css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
text-align: center; text-align: center;
gap: 8px; gap: 8px;
} }
@ -149,30 +149,30 @@ const styles = css`
.transcript { .transcript {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.transcript-segment { .transcript-segment {
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px 12px; padding: 8px 12px;
background: #f8fafc; background: var(--rs-bg-surface-sunken, #0f172a);
border-radius: 8px; border-radius: 8px;
border-left: 3px solid #14b8a6; border-left: 3px solid #14b8a6;
} }
.segment-time { .segment-time {
font-size: 11px; font-size: 11px;
color: #64748b; color: var(--rs-text-muted, #64748b);
margin-bottom: 4px; margin-bottom: 4px;
font-family: "Monaco", "Consolas", monospace; font-family: "Monaco", "Consolas", monospace;
} }
.segment-text { .segment-text {
color: #1e293b; color: var(--rs-text-primary, #e2e8f0);
} }
.segment-text.interim { .segment-text.interim {
color: #94a3b8; color: var(--rs-text-secondary, #94a3b8);
font-style: italic; font-style: italic;
} }
@ -180,19 +180,19 @@ const styles = css`
display: flex; display: flex;
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
border-top: 1px solid #e2e8f0; border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
} }
.action-btn { .action-btn {
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
border: 2px solid #e2e8f0; border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
border-radius: 6px; border-radius: 6px;
background: white; background: var(--rs-bg-surface, #1e293b);
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #64748b; color: var(--rs-text-muted, #64748b);
transition: all 0.2s; transition: all 0.2s;
} }
@ -204,7 +204,7 @@ const styles = css`
.error { .error {
color: #ef4444; color: #ef4444;
padding: 12px; padding: 12px;
background: #fef2f2; background: rgba(239, 68, 68, 0.1);
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
margin: 12px; margin: 12px;