Add light mode support to configurator UI #500
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,6 @@ | ||
| @import "tailwindcss"; | ||
|
|
||
| /* Studio chrome theme — toggled by lib/theme.svelte.ts via a `.dark` class | ||
| on the mount root, independent of the framework's own [data-theme] | ||
| (which only governs the dogfooded --sf-* tokens loaded below). */ | ||
| @custom-variant dark (&:where(.dark, .dark *)); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -109,25 +109,25 @@ | |
| </div> | ||
|
|
||
| <!-- Bottom tab bar --> | ||
| <div class="shrink-0 border-t border-black/8 dark:border-white/8 bg-slate-50 dark:bg-[#0a0a10] flex"> | ||
| <button | ||
| onclick={() => { view = "controls"; }} | ||
| class={`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${ | ||
| view === "controls" | ||
| ? "text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px" | ||
| : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300" | ||
| }`} | ||
| > | ||
| <SlidersHorizontal class="w-3 h-3" /> | ||
| Controls | ||
| </button> | ||
| <div class="w-px bg-black/8 dark:bg-white/8"></div> | ||
| <button | ||
| onclick={() => { view = "tokens"; }} | ||
| class={`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${ | ||
| view === "tokens" | ||
| ? "text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px" | ||
| : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300" | ||
| }`} | ||
| > | ||
| <List class="w-3 h-3" /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -77,17 +77,17 @@ | |
| ); | ||
| </script> | ||
|
|
||
| <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-700 dark:text-slate-300">{title}</span> | ||
| <span class="text-[9px] font-mono text-slate-500"> | ||
| 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-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)}%`} | ||
|
|
@@ -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-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-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-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-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-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-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 [ | ||
|
|
@@ -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-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> | ||
|
|
@@ -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-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} | ||
|
|
@@ -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-600 dark:hover:text-rose-400 cursor-pointer">reset</button> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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-black/10 dark:border-white/10 overflow-hidden cursor-pointer"> | ||
| <div class="absolute inset-0" style:background={swatchColor}></div> | ||
| {#if !isVar} | ||
| <input | ||
|
|
@@ -91,22 +91,22 @@ | |
| if (e.key === "Escape") { cancelBlur = true; editing = false; } | ||
| }} | ||
| placeholder={placeholder ?? "default"} | ||
| 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-800 dark:hover:text-slate-200 truncate cursor-pointer transition-colors" | ||
| > | ||
| {#if isOverridden} | ||
| <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-600 dark:hover:text-rose-400 cursor-pointer shrink-0">reset</button> | ||
| {/if} | ||
| </div> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1. Unscoped dark variant selector
🐞 Bug≡ CorrectnessAgent Prompt
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools