Skip to content

Add light mode toggle to Studio shell chrome (1/3) #506

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

Add light mode toggle to Studio shell chrome (1/3) #506

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
14 changes: 7 additions & 7 deletions configurator/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@
onclick={() => { mobileView = view; }}
aria-pressed={mobileView === view}
class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
mobileView === view ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
mobileView === view ? "text-indigo-700 dark:text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
}`}
>
<Icon class="w-3.5 h-3.5" /> {label}
Expand All @@ -271,7 +271,7 @@
</button>
{/snippet}

<div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans">
<div class="{embedded ? 'w-full h-full' : 'w-screen h-screen'} flex flex-col overflow-hidden bg-slate-50 dark:bg-[#0a0a0f] text-slate-800 dark:text-slate-200 font-sans">
<!-- Top header bar -->
<StudioHeader
{overridesCount}
Expand All @@ -290,7 +290,7 @@
<!-- Mobile fold toggle: switch between the controls panel and the live
preview. Lives right under the header (not at the bottom) so it's
visible without scrolling and doesn't compete with the status bar. -->
<div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0">
<div class="md:hidden flex items-stretch border-b border-black/8 dark:border-white/8 bg-slate-50 dark:bg-[#0d0d14] shrink-0">
{@render foldToggleButton("controls", SlidersHorizontal, "Controls")}
{@render foldToggleButton("preview", Eye, "Preview")}
</div>
Expand All @@ -309,18 +309,18 @@
<!-- Left domain panel — fills remaining row width on mobile (the icon
rail above already claims its own space, so w-full here would mean
100% of the whole row and overflow past it), fixed 360px on desktop -->
<div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
<div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
<!-- Panel heading -->
<div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0 gap-2">
<span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1">
<div class="h-9 flex items-center px-4 border-b border-black/6 dark:border-white/6 shrink-0 gap-2">
<span data-testid="panel-heading" class="text-[11px] font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest flex-1">
{DOMAIN_LABELS[domain] ?? domain}
</span>
{#if domainOverridesCount > 0}
<button
onclick={handleResetDomain}
data-testid="reset-category"
title={`Reset ${domainOverridesCount} override${domainOverridesCount !== 1 ? "s" : ""} in ${DOMAIN_LABELS[domain] ?? domain}`}
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"
class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0"
>
<RotateCcw class="w-3 h-3" />
Reset {domainOverridesCount}
Expand Down
5 changes: 5 additions & 0 deletions configurator/src/app.css
View file
Open in desktop
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 *));
32 changes: 16 additions & 16 deletions configurator/src/components/CommandPalette.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@
onmousedown={(e) => { if (e.target === e.currentTarget) onClose(); }}
>
<!-- Panel -->
<div class="w-[560px] max-w-[95vw] bg-[#111118] border border-white/12 rounded-2xl shadow-2xl overflow-hidden">
<div class="w-[560px] max-w-[95vw] bg-white dark:bg-[#111118] border border-black/12 dark:border-white/12 rounded-2xl shadow-2xl overflow-hidden">
<!-- Search input -->
<div class="flex items-center gap-3 px-4 py-3 border-b border-white/8">
<div class="flex items-center gap-3 px-4 py-3 border-b border-black/8 dark:border-white/8">
<svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
Expand All @@ -87,42 +87,42 @@
bind:value={query}
onkeydown={handleKeydown}
placeholder="Search tokens… (e.g. radius, primary, duration)"
class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none"
class="flex-1 bg-transparent text-[13px] text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 outline-none"
/>
<kbd class="text-[9px] font-mono text-slate-600 border border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd>
<kbd class="text-[9px] font-mono text-slate-400 dark:text-slate-600 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd>
</div>

<!-- Results -->
<div class="max-h-[360px] overflow-y-auto">
{#if query.trim() && results.length === 0}
<div class="px-4 py-8 text-center text-[11px] text-slate-600">No tokens matching "{query}"</div>
<div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">No tokens matching "{query}"</div>
{:else if !query.trim()}
<div class="px-4 py-8 text-center text-[11px] text-slate-600">Type to search tokens by name or description</div>
<div class="px-4 py-8 text-center text-[11px] text-slate-400 dark:text-slate-600">Type to search tokens by name or description</div>
{:else}
{#each results as r, i (r.token.name)}
<button
onmouseenter={() => { selectedIndex = i; }}
onclick={() => handleSelect(r.domain)}
class={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${
selectedIndex === i ? "bg-indigo-500/15" : "hover:bg-white/4"
selectedIndex === i ? "bg-indigo-500/15" : "hover:bg-black/4 dark:hover:bg-white/4"
}`}
>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-[11px] font-mono text-slate-200 truncate">{r.token.name}</span>
<span class="text-[11px] font-mono text-slate-800 dark:text-slate-200 truncate">{r.token.name}</span>
{#if r.overridden}
<span class="shrink-0 text-[8px] font-bold text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>
<span class="shrink-0 text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>
{/if}
</div>
{#if r.token.description}
<div class="text-[10px] text-slate-600 truncate mt-0.5">{r.token.description}</div>
<div class="text-[10px] text-slate-400 dark:text-slate-600 truncate mt-0.5">{r.token.description}</div>
{/if}
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="text-[9px] text-slate-600 font-mono truncate max-w-[100px]">
<span class="text-[9px] text-slate-400 dark:text-slate-600 font-mono truncate max-w-[100px]">
{r.overridden ? overrides[r.token.name] : r.token.value}
</span>
<span class="text-[9px] font-bold text-slate-500 bg-white/5 rounded px-1.5 py-0.5">
<span class="text-[9px] font-bold text-slate-500 dark:text-slate-400 bg-black/5 dark:bg-white/5 rounded px-1.5 py-0.5">
{DOMAIN_LABELS[r.domain] ?? r.domain}
</span>
</div>
Expand All @@ -133,10 +133,10 @@

<!-- Footer hint -->
{#if results.length > 0}
<div class="px-4 py-2 border-t border-white/6 flex items-center gap-3 text-[9px] text-slate-600">
<span><kbd class="font-mono border border-white/10 rounded px-1">↑↓</kbd> navigate</span>
<span><kbd class="font-mono border border-white/10 rounded px-1">↵</kbd> open panel</span>
<span><kbd class="font-mono border border-white/10 rounded px-1">Esc</kbd> close</span>
<div class="px-4 py-2 border-t border-black/6 dark:border-white/6 flex items-center gap-3 text-[9px] text-slate-400 dark:text-slate-600">
<span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">↑↓</kbd> navigate</span>
<span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">↵</kbd> open panel</span>
<span><kbd class="font-mono border border-black/10 dark:border-white/10 rounded px-1">Esc</kbd> close</span>
</div>
{/if}
</div>
Expand Down
12 changes: 6 additions & 6 deletions configurator/src/components/DomainPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,25 +109,25 @@
</div>

<!-- Bottom tab bar -->
<div class="shrink-0 border-t border-white/8 bg-[#0a0a10] flex">
<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-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px"
: "text-slate-500 hover:text-slate-300"
? "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-white/8"></div>
<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-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px"
: "text-slate-500 hover:text-slate-300"
? "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" />
Expand Down
40 changes: 20 additions & 20 deletions configurator/src/components/shell/PreviewPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,33 +595,33 @@ ${BODIES[template]}
}
</script>

<div class="flex flex-col flex-1 min-h-0 bg-[#09090e]">
<div class="flex flex-col flex-1 min-h-0 bg-slate-100 dark:bg-[#09090e]">
<!-- Preview toolbar — always a single row (scrolls horizontally instead of
wrapping) so it can't eat a growing chunk of a short mobile viewport. -->
<div class="min-h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
<div class="min-h-10 bg-slate-50 dark:bg-[#0d0d14] border-b border-black/8 dark:border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
<!-- Template tabs -->
<div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
<div class="shrink-0 flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
{#each TEMPLATES as t (t.id)}
<button
onclick={() => onTemplateChange(t.id)}
class={`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${
previewTemplate === t.id ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"
previewTemplate === t.id ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
}`}
>
{t.label}
</button>
{/each}
</div>

<div class="w-px h-4 bg-white/10 mx-1"></div>
<div class="w-px h-4 bg-black/10 dark:bg-white/10 mx-1"></div>

<!-- Width controls -->
<div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
<div class="shrink-0 flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
{#each (["fluid", "desktop", "tablet", "mobile"] as const) as w (w)}
<button
onclick={() => onWidthChange(w)}
title={w === "fluid" ? "Full width" : w === "desktop" ? "Desktop (1024px)" : w === "tablet" ? "Tablet (768px)" : "Mobile (390px)"}
class={`p-1 rounded-md transition-all cursor-pointer ${previewWidth === w ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"}`}
class={`p-1 rounded-md transition-all cursor-pointer ${previewWidth === w ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
>
{#if w === "mobile"}
<Smartphone class="w-3 h-3" />
Expand All @@ -635,25 +635,25 @@ ${BODIES[template]}
</div>

<!-- Light/dark/split -->
<div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
<div class="shrink-0 flex bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
<button
onclick={() => { splitMode = false; onThemeChange("light"); }}
title="Light mode"
class={`p-1 rounded-md transition-all cursor-pointer ${!splitMode && previewTheme === "light" ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"}`}
class={`p-1 rounded-md transition-all cursor-pointer ${!splitMode && previewTheme === "light" ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
>
<Sun class="w-3 h-3" />
</button>
<button
onclick={() => { splitMode = false; onThemeChange("dark"); }}
title="Dark mode"
class={`p-1 rounded-md transition-all cursor-pointer ${!splitMode && previewTheme === "dark" ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"}`}
class={`p-1 rounded-md transition-all cursor-pointer ${!splitMode && previewTheme === "dark" ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
>
<Moon class="w-3 h-3" />
</button>
<button
onclick={() => { splitMode = !splitMode; }}
title="Split: light + dark side by side"
class={`p-1 rounded-md transition-all cursor-pointer ${splitMode ? "bg-white/12 text-white" : "text-slate-500 hover:text-slate-300"}`}
class={`p-1 rounded-md transition-all cursor-pointer ${splitMode ? "bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"}`}
>
<Columns2 class="w-3 h-3" />
</button>
Expand All @@ -665,7 +665,7 @@ ${BODIES[template]}
<select
value={previewMotion}
onchange={(e) => onMotionChange((e.target as HTMLSelectElement).value as "normal" | "slow" | "none")}
class="shrink-0 bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"
class="shrink-0 bg-black/5 dark:bg-white/5 border border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"
>
<option value="normal">Normal motion</option>
<option value="slow">Slow motion</option>
Expand All @@ -676,7 +676,7 @@ ${BODIES[template]}
<button
onclick={() => { loadCount = 0; splitLightLoadCount = 0; splitDarkLoadCount = 0; refresh += 1; }}
title="Reload preview"
class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-black/8 dark:hover:bg-white/8 transition-all cursor-pointer"
>
<RefreshCw class="w-3 h-3" />
</button>
Expand All @@ -689,20 +689,20 @@ ${BODIES[template]}
window.open(url, "_blank");
}}
title="Open in new tab"
class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-black/8 dark:hover:bg-white/8 transition-all cursor-pointer"
>
<ExternalLink class="w-3 h-3" />
</button>
</div>

<!-- Preview area -->
<div class={`flex-1 min-h-0 flex overflow-auto ${isConstrained && !splitMode ? "items-center justify-center bg-[#06060a]" : ""}`}>
<div class={`flex-1 min-h-0 flex overflow-auto ${isConstrained && !splitMode ? "items-center justify-center bg-slate-100 dark:bg-[#06060a]" : ""}`}>
{#if splitMode}
<!-- Split view: light left, dark right -->
<div class="flex-1 flex min-w-0 h-full">
<div class="flex-1 flex flex-col min-w-0 border-r border-white/8">
<div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0">
<span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1">
<div class="flex-1 flex flex-col min-w-0 border-r border-black/8 dark:border-white/8">
<div class="h-6 flex items-center justify-center bg-slate-50 dark:bg-[#0d0d14] border-b border-black/6 dark:border-white/6 shrink-0">
<span class="text-[9px] font-bold text-slate-400 dark:text-slate-600 uppercase tracking-widest flex items-center gap-1">
<Sun class="w-2.5 h-2.5" /> Light
</span>
</div>
Expand All @@ -718,8 +718,8 @@ ${BODIES[template]}
{/key}
</div>
<div class="flex-1 flex flex-col min-w-0">
<div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0">
<span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1">
<div class="h-6 flex items-center justify-center bg-slate-50 dark:bg-[#0d0d14] border-b border-black/6 dark:border-white/6 shrink-0">
<span class="text-[9px] font-bold text-slate-400 dark:text-slate-600 uppercase tracking-widest flex items-center gap-1">
<Moon class="w-2.5 h-2.5" /> Dark
</span>
</div>
Expand Down
Loading