Skip to content

Light mode for input controls and panels, batch A (2/3) #507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 1 commit into from
Jul 3, 2026
Merged

Light mode for input controls and panels, batch A (2/3) #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions configurator/src/components/inputs/ClampField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,17 +77,17 @@
);
</script>

<div class={`rounded-xl border p-3 ${overridden ? "bg-indigo-500/8 border-indigo-500/25" : "bg-white/4 border-white/8"}`}>
<div class={`rounded-xl border p-3 ${overridden ? "bg-indigo-500/8 border-indigo-500/25" : "bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8"}`}>
<div class="flex items-center justify-between mb-2">
<span class="text-[10px] font-bold text-slate-300">{title}</span>
<span class="text-[10px] font-bold text-slate-700 dark:text-slate-300">{title}</span>
<span class="text-[9px] font-mono text-slate-500">
clamp(<span class="text-indigo-300">{minValue}{unit}</span> … <span class="text-indigo-300">{maxValue}{unit}</span>)
clamp(<span class="text-indigo-700 dark:text-indigo-300">{minValue}{unit}</span> … <span class="text-indigo-700 dark:text-indigo-300">{maxValue}{unit}</span>)
</span>
</div>

<!-- Connected dual-thumb track -->
<div class="clampTrack relative h-5 flex items-center mb-2">
<div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div>
<div class="absolute inset-x-0 h-1 bg-black/8 dark:bg-white/8 rounded-full"></div>
<div
class="absolute h-1 bg-indigo-500 rounded-full"
style={`left:${Math.min(minPct, maxPct)}%; right:${100 - Math.max(minPct, maxPct)}%`}
Expand All @@ -112,36 +112,36 @@
<span class="text-[9px] text-slate-500 shrink-0">{minLabel}</span>
<input type="number" {min} {max} {step} value={minValue}
onchange={(e) => onMinChange(clamp(parseFloat((e.target as HTMLInputElement).value) || min))}
class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
</label>
<label class="flex items-center gap-1.5">
<span class="text-[9px] text-slate-500 shrink-0">{maxLabel}</span>
<input type="number" {min} {max} {step} value={maxValue}
onchange={(e) => onMaxChange(clamp(parseFloat((e.target as HTMLInputElement).value) || max))}
class="w-full bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500" />
</label>
</div>

<!-- Min → Max preview -->
{#if previewKind === "type"}
<div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden">
<span class="text-slate-500 leading-none truncate" style={`font-size:${Math.min(minValue, 2)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{minLabel.toLowerCase()}</span></span>
<span class="text-white/80 leading-none truncate" style={`font-size:${Math.min(maxValue, 2.6)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{maxLabel.toLowerCase()}</span></span>
<span class="text-slate-900/80 dark:text-white/80 leading-none truncate" style={`font-size:${Math.min(maxValue, 2.6)}rem`}>Aa<span class="text-[8px] font-mono align-middle ml-1">{maxLabel.toLowerCase()}</span></span>
</div>
{:else if previewKind === "space"}
<div class="flex items-center gap-2 mt-2 px-1">
<div class="h-2 bg-indigo-500/40 rounded shrink-0" style={`width:${Math.min(minValue * 28, 120)}px`}></div>
<span class="text-[8px] font-mono text-slate-600">min</span>
<span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">min</span>
<div class="h-2 bg-indigo-500/70 rounded shrink-0" style={`width:${Math.min(maxValue * 28, 200)}px`}></div>
<span class="text-[8px] font-mono text-slate-600">max</span>
<span class="text-[8px] font-mono text-slate-400 dark:text-slate-600">max</span>
</div>
{/if}

<!-- Modular-scale ratio (optional) — independent mobile & desktop ratios.
Each breakpoint has its own preset dropdown plus an always-visible custom
number input, so a preset can be picked and then fine-tuned per side. -->
{#if ratioPresets}
<div class="mt-3 pt-3 border-t border-white/6">
<div class="mt-3 pt-3 border-t border-black/6 dark:border-white/6">
<div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div>
<div class="space-y-2">
{#each [
Expand All @@ -157,7 +157,7 @@
const v = parseFloat((e.target as HTMLSelectElement).value);
if (Number.isFinite(v)) row.onChange?.(clampRatio(v));
}}
class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"
class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[10px] text-slate-800 dark:text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"
>
{#if row.active === undefined}
<option value="" style="background:#16161e;">Custom</option>
Expand All @@ -170,7 +170,7 @@
aria-label={`${row.side} modular scale custom ratio`}
type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={row.value}
onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) row.onChange?.(clampRatio(n)); }}
class="w-16 shrink-0 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"
class="w-16 shrink-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500"
/>
</div>
{/each}
Expand All @@ -180,7 +180,7 @@

{#if overridden && onReset}
<div class="flex justify-end mt-2">
<button onclick={onReset} class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>
<button onclick={onReset} class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer">reset</button>
</div>
{/if}
</div>
Expand Down
10 changes: 5 additions & 5 deletions configurator/src/components/inputs/ColorInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

<div class="flex items-center gap-2">
<!-- Swatch / native picker trigger -->
<div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer">
<div class="relative shrink-0 w-7 h-7 rounded border border-black/10 dark:border-white/10 overflow-hidden cursor-pointer">
<div class="absolute inset-0" style:background={swatchColor}></div>
{#if !isVar}
<input
Expand Down Expand Up @@ -91,22 +91,22 @@
if (e.key === "Escape") { cancelBlur = true; editing = false; }
}}
placeholder={placeholder ?? "default"}
class="flex-1 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none"
class="flex-1 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none"
/>
{:else}
<button
onclick={() => { editing = true; }}
class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"
class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 truncate cursor-pointer transition-colors"
>
{#if isOverridden}
<span class="text-indigo-300">{value}</span>
<span class="text-indigo-700 dark:text-indigo-300">{value}</span>
{:else}
{placeholder ?? "default"}
{/if}
</button>
{/if}

{#if isOverridden}
<button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>
<button onclick={onReset} class="text-[8px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button>
{/if}
</div>
26 changes: 13 additions & 13 deletions configurator/src/components/inputs/OklchColorDesk.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,19 @@
}
</script>

<div class={`rounded-xl border transition-all ${overridden ? "bg-indigo-500/8 border-indigo-500/20" : "bg-white/4 border-white/8 hover:border-white/12"}`}>
<div class={`rounded-xl border transition-all ${overridden ? "bg-indigo-500/8 border-indigo-500/20" : "bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12"}`}>
<button
onclick={() => { expanded = !expanded; }}
class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"
>
<div
class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"
class="w-8 h-8 rounded-lg border border-black/10 dark:border-white/10 shrink-0 shadow-lg"
style:background={swatchColor}
></div>
<div class="flex-1 text-left min-w-0">
<div class="text-[11px] font-semibold text-slate-200">{label}</div>
<div class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</div>
<div class="text-[9px] font-mono text-slate-500">{shortName}</div>
<div class="text-[9px] font-mono text-slate-600">{value}</div>
<div class="text-[9px] font-mono text-slate-400 dark:text-slate-600">{value}</div>
</div>
{#if overridden}
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>
Expand All @@ -71,12 +71,12 @@
</button>

{#if expanded}
<div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3">
<div class="px-3 pb-3 border-t border-black/6 dark:border-white/6 pt-3 space-y-3">
<!-- L slider -->
<div>
<div class="flex justify-between mb-1">
<span class="text-[10px] font-bold text-slate-400">Lightness (L)</span>
<span class="text-[10px] font-mono text-slate-400">{parsed.l.toFixed(3)}</span>
<span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Lightness (L)</span>
<span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.l.toFixed(3)}</span>
</div>
<div
class="h-4 rounded-full mb-1"
Expand All @@ -94,8 +94,8 @@
<!-- C slider -->
<div>
<div class="flex justify-between mb-1">
<span class="text-[10px] font-bold text-slate-400">Chroma (C)</span>
<span class="text-[10px] font-mono text-slate-400">{parsed.c.toFixed(3)}</span>
<span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Chroma (C)</span>
<span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.c.toFixed(3)}</span>
</div>
<RangeWithNumber
value={parsed.c}
Expand All @@ -109,8 +109,8 @@
<!-- H slider -->
<div>
<div class="flex justify-between mb-1">
<span class="text-[10px] font-bold text-slate-400">Hue (H)</span>
<span class="text-[10px] font-mono text-slate-400">{parsed.h.toFixed(1)}°</span>
<span class="text-[10px] font-bold text-slate-600 dark:text-slate-400">Hue (H)</span>
<span class="text-[10px] font-mono text-slate-600 dark:text-slate-400">{parsed.h.toFixed(1)}°</span>
</div>
<div
class="h-4 rounded-full mb-1"
Expand Down Expand Up @@ -149,13 +149,13 @@
(e.currentTarget as HTMLInputElement).blur();
}
}}
class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500"
class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500"
placeholder="oklch(0.6 0.15 264)"
/>
{#if overridden}
<button
onclick={onReset}
class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer"
class="px-2 py-1 rounded-lg text-[10px] text-rose-600 dark:text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer"
>
Reset
</button>
Expand Down
8 changes: 4 additions & 4 deletions configurator/src/components/inputs/PowerKnobRow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@
<div class="group">
<div class="flex items-center justify-between mb-1.5">
<div class="flex items-center gap-2">
<span class="text-[11px] font-semibold text-slate-300">{knob.label}</span>
<span class="text-[11px] font-semibold text-slate-700 dark:text-slate-300">{knob.label}</span>
{#if knob.driving !== undefined}
<span class="text-[9px] text-slate-600 font-mono">→ {knob.driving} tokens</span>
<span class="text-[9px] text-slate-400 dark:text-slate-600 font-mono">→ {knob.driving} tokens</span>
{/if}
</div>
{#if isOverridden}
<button
onclick={handleReset}
class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
>
reset
</button>
Expand All @@ -51,6 +51,6 @@
onChange={handleChange}
/>
{#if knob.help}
<p class="text-[10px] text-slate-600 mt-1 leading-relaxed">{knob.help}</p>
<p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1 leading-relaxed">{knob.help}</p>
{/if}
</div>
6 changes: 3 additions & 3 deletions configurator/src/components/inputs/RangeWithNumber.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

<div class="flex items-center gap-2 w-full">
<div class="relative flex-1 h-5 flex items-center">
<div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div>
<div class="absolute inset-x-0 h-1 bg-black/8 dark:bg-white/8 rounded-full"></div>
<div
class="absolute left-0 h-1 bg-indigo-500 rounded-full"
style={`width: ${pct}%`}
Expand All @@ -34,7 +34,7 @@
class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"
/>
<div
class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"
class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-black/20 dark:border-white/20 pointer-events-none"
style={`left: calc(${pct}% - 6px)`}
></div>
</div>
Expand All @@ -47,7 +47,7 @@
{value}
{disabled}
onchange={(e) => onChange(clamp(parseFloat((e.target as HTMLInputElement).value) || 0))}
class="w-14 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"
class="w-14 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40"
/>
{#if unit}
<span class="text-[10px] text-slate-500 ml-1 font-mono">{unit}</span>
Expand Down
14 changes: 7 additions & 7 deletions configurator/src/components/inputs/SliderRow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<div class="group">
<div class="flex items-center justify-between mb-1.5">
{#if label}
<span class="text-[11px] font-semibold text-slate-200">{label}</span>
<span class="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{label}</span>
{:else}
<span></span>
{/if}
Expand All @@ -56,15 +56,15 @@
title={showRaw ? "Switch to slider" : "Enter raw CSS value"}
class={`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${
showRaw
? 'text-indigo-400'
: 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400'
? 'text-indigo-600 dark:text-indigo-400'
: 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400'
}`}
>&lt;/&gt;</button>
{/if}
{#if overridden}
<button
onclick={onReset}
class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors"
class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 transition-colors"
>reset</button>
{/if}
</div>
Expand All @@ -85,16 +85,16 @@
const v = rawDraft.trim();
if (v && onRawSet) onRawSet(v);
}}
class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500"
/>
{:else}
<RangeWithNumber {value} {min} {max} {step} {unit} {onChange} />
{#if rawDefault && !overridden}
<p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none">default: {rawDefault}</p>
<p class="text-[9px] font-mono text-slate-300 dark:text-slate-700 mt-0.5 leading-none">default: {rawDefault}</p>
{/if}
{/if}

{#if help}
<p class="text-[10px] text-slate-600 mt-1 leading-relaxed">{help}</p>
<p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1 leading-relaxed">{help}</p>
{/if}
</div>
Loading