Skip to content

Add luminance lock, gradient editor, macros panel, and layout primitives UI #431

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
Jun 27, 2026
Merged

Add luminance lock, gradient editor, macros panel, and layout primitives UI #431

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
16 changes: 4 additions & 12 deletions configurator/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import PreviewPanel from './components/shell/PreviewPanel.svelte';
import DomainPanel from './components/DomainPanel.svelte';
import { Ja, Ga, fa } from './lib/codec';
import { domainOf } from './lib/domains';
import tokensRaw from './data/api-index.generated.json';
import CommandPalette from './components/CommandPalette.svelte';

Expand All @@ -15,8 +16,8 @@
const DOMAIN_LABELS: Record<string, string> = {
home: "Home", colors: "Colors", typography: "Typography", spacing: "Spacing",
layout: "Layout", borders: "Borders", shadows: "Shadows", motion: "Motion",
effects: "Effects", misc: "Misc", themes: "Themes", wcag: "WCAG",
setup: "Install", cheatsheet: "Classes",
effects: "Effects", macros: "Macros", misc: "Misc", themes: "Themes",
wcag: "WCAG", setup: "Install", cheatsheet: "Classes",
};

function initOverrides(): Record<string, string> {
Expand All @@ -35,16 +36,7 @@
function overridesByDomain(ov: Record<string, string>): Record<string, number> {
const map: Record<string, number> = {};
for (const k of Object.keys(ov)) {
const dom =
k.includes("color") ? "colors" :
k.includes("font") || k.includes("text") || k.includes("leading") ? "typography" :
k.includes("space") || k.includes("section") ? "spacing" :
k.includes("layout") || k.includes("container") || k.includes("grid") ? "layout" :
k.includes("radius") || k.includes("border") ? "borders" :
k.includes("shadow") ? "shadows" :
k.includes("motion") || k.includes("duration") || k.includes("easing") ? "motion" :
k.includes("blur") || k.includes("filter") || k.includes("opacity") ? "effects" :
"misc";
const dom = domainOf(k);
map[dom] = (map[dom] ?? 0) + 1;
}
return map;
Expand Down
9 changes: 6 additions & 3 deletions configurator/src/components/CommandPalette.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@
let inputEl = $state<HTMLInputElement | null>(null);

const DOMAIN_MAP: Record<string, string> = {
colors: "colors", colour: "colors", color: "colors",
macros: "macros", prose: "macros", "flow-space": "macros", "line-clamp": "macros",
aspect: "macros", "scroll-shadow": "macros", scrim: "macros", "surface-color": "macros",
colors: "colors", colour: "colors", color: "colors", gradient: "colors", lumlocker: "colors", "palette-mix": "colors", contrast: "colors",
typography: "typography", font: "typography", text: "typography", leading: "typography", tracking: "typography",
spacing: "spacing", space: "spacing", gap: "spacing", section: "spacing",
layout: "layout", container: "layout", grid: "layout", center: "layout", sidebar: "layout", header: "layout", bento: "layout", sticky: "layout",
borders: "borders", border: "borders", radius: "borders", focus: "borders", divider: "borders", ring: "borders",
shadows: "shadows", shadow: "shadows", elevation: "shadows", glow: "shadows",
motion: "motion", duration: "motion", ease: "motion", easing: "motion", animation: "motion", delay: "motion", transition: "motion",
effects: "effects", blur: "effects", opacity: "effects", scrim: "effects", scrollbar: "effects", scroll: "effects",
effects: "effects", blur: "effects", opacity: "effects", scrollbar: "effects", scroll: "effects",
misc: "misc",
};

Expand All @@ -35,7 +37,8 @@

const DOMAIN_LABELS: Record<string, string> = {
colors: "Colors", typography: "Typography", spacing: "Spacing", layout: "Layout",
borders: "Borders", shadows: "Shadows", motion: "Motion", effects: "Effects", misc: "Misc",
borders: "Borders", shadows: "Shadows", motion: "Motion", effects: "Effects",
macros: "Macros", misc: "Misc",
};

let results = $derived((() => {
Expand Down
3 changes: 3 additions & 0 deletions configurator/src/components/DomainPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import ShadowsPanel from './panels/ShadowsPanel.svelte';
import MotionPanel from './panels/MotionPanel.svelte';
import EffectsPanel from './panels/EffectsPanel.svelte';
import MacrosPanel from './panels/MacrosPanel.svelte';
import MiscPanel from './panels/MiscPanel.svelte';
import ThemesPanel from './panels/ThemesPanel.svelte';
import ExportPanel from './panels/ExportPanel.svelte';
Expand Down Expand Up @@ -98,6 +99,8 @@
<MotionPanel {overrides} {onSet} {onReset} {onBulkChange} />
{:else if domain === "effects"}
<EffectsPanel {overrides} {onSet} {onReset} />
{:else if domain === "macros"}
<MacrosPanel {overrides} {onSet} {onReset} />
{:else if domain === "misc"}
<MiscPanel {overrides} {onSet} {onReset} {onBulkChange} />
{:else}
Expand Down
16 changes: 10 additions & 6 deletions configurator/src/components/inputs/ClampField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
max,
step,
unit = "rem",
minLabel = "Min",
maxLabel = "Max",
onMinChange,
onMaxChange,
overridden = false,
Expand All @@ -40,6 +42,8 @@
max: number;
step: number;
unit?: string;
minLabel?: string;
maxLabel?: string;
onMinChange: (v: number) => void;
onMaxChange: (v: number) => void;
overridden?: boolean;
Expand Down Expand Up @@ -96,13 +100,13 @@
<!-- Min / Max numeric pair -->
<div class="grid grid-cols-2 gap-2">
<label class="flex items-center gap-1.5">
<span class="text-[9px] text-slate-500 w-7 shrink-0">Min</span>
<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" />
</label>
<label class="flex items-center gap-1.5">
<span class="text-[9px] text-slate-500 w-7 shrink-0">Max</span>
<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" />
Expand All @@ -112,8 +116,8 @@
<!-- 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">min</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">max</span></span>
<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>
</div>
{:else if previewKind === "space"}
<div class="flex items-center gap-2 mt-2 px-1">
Expand Down Expand Up @@ -143,13 +147,13 @@
{#if customRatioOpen}
<div class="grid grid-cols-2 gap-2 mt-2 pl-2 border-l border-amber-500/25">
<label class="flex items-center gap-1.5">
<span class="text-[9px] text-slate-500 shrink-0">min</span>
<span class="text-[9px] text-slate-500 shrink-0">{minLabel.toLowerCase()}</span>
<input type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={ratioMin}
onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) onRatioMinChange?.(Math.min(ratioMax_bound, Math.max(ratioMin_bound, n))); }}
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" />
</label>
<label class="flex items-center gap-1.5">
<span class="text-[9px] text-slate-500 shrink-0">max</span>
<span class="text-[9px] text-slate-500 shrink-0">{maxLabel.toLowerCase()}</span>
<input type="number" min={ratioMin_bound} max={ratioMax_bound} step={0.001} value={ratioMax}
onchange={(e) => { const n = parseFloat((e.target as HTMLInputElement).value); if (Number.isFinite(n)) onRatioMaxChange?.(Math.min(ratioMax_bound, Math.max(ratioMin_bound, n))); }}
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" />
Expand Down
12 changes: 12 additions & 0 deletions configurator/src/components/panels/BordersPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
let dividerWidth = $derived(parseNum(overrides["--sf-divider-width"]?.replace("px",""), 1));
let dividerGap = $derived(parseNum(overrides["--sf-divider-gap"]?.replace("rem",""), 1));
let borderColor = $derived(overrides["--sf-color-border"] ?? "");
let borderStyle = $derived(overrides["--sf-border-style"] ?? "solid");
let focusRingColor = $derived(overrides["--sf-focus-ring-color"] ?? "");
let dividerColor = $derived(overrides["--sf-divider-color"] ?? "");

Expand Down Expand Up @@ -165,6 +166,17 @@
</div>
{/each}
</div>

<!-- Combined border preview (width × style × color) -->
<div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3">
<div
class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4"
style={`border: ${Math.max(borderScale, 0.5)}px ${borderStyle} ${borderColor || "var(--sf-color-border, #64748b)"}`}
>
Border sample
</div>
<span class="text-[9px] font-mono text-slate-600">{(1 * borderScale).toFixed(1)}px · {borderStyle}</span>
</div>
</section>

<div class="h-px bg-white/6"></div>
Expand Down
Loading
Loading