@sanity/themer 0.1.0 → 0.2.0

package/dist/tool.js

@@ -1,11 +1,10 @@
-import { a as parseHuesFromUrl, c as isColor, i as createTheme, l as applyHues, o as createTonesFromHues, s as presets, t as hues } from "./defaults-DJtuhI2W.js";
+import { a as DEFAULT_BACKGROUND_DARK, c as resolveThemeOptions, i as DEFAULT_ACCENT, n as buildTheme, o as DEFAULT_BACKGROUND_LIGHT, r as buildPalette, s as deriveTextColor, t as presets } from "./presets-DWzYcsLg.js";
+import { t as isColor } from "./mix-BfV6_Ke4.js";
 import { COLOR_TINTS } from "@sanity/color";
 import { c } from "react-compiler-runtime";
 import { definePlugin } from "sanity";
-import { Box, Button, Card, Code, Flex, Grid, Layer, Select, Stack, Text, TextInput, ThemeProvider, Tooltip, useToast } from "@sanity/ui";
+import { Box, Button, Card, Code, Flex, Grid, Layer, Stack, Text, ThemeProvider, Tooltip, useToast } from "@sanity/ui";
 import { createContext, useContext, useEffect, useState } from "react";
-import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
-import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
 import { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { CloseIcon } from "@sanity/icons/Close";
 import { ResetIcon } from "@sanity/icons/Reset";
@@ -23,192 +22,111 @@ function useThemer() {
 	return context;
 }
 /**
-* The six hues in the order the hosted Themer service listed them, used for
-* the sidebar's editors and the generated snippet alike.
+* Reduces theme options to the minimal object that recreates them through
+* `buildTheme`: the text color is dropped when it matches the one derived
+* from the accent, and backgrounds and contrast are dropped when they match
+* the defaults. Options that boil down to the stock Studio theme reduce to
+* `null` — they need nothing from this package.
 *
 * @internal
 */
-const HUE_KEYS = [
-	"default",
-	"primary",
-	"transparent",
-	"positive",
-	"caution",
-	"critical"
-], HUE_FIELDS = [
-	{
-		key: "default",
-		title: "Default",
-		description: "Text, icons and most surfaces"
-	},
-	{
-		key: "primary",
-		title: "Primary",
-		description: "Focus rings, links and primary buttons"
-	},
-	{
-		key: "transparent",
-		title: "Transparent",
-		description: "The backdrop behind panes"
-	},
-	{
-		key: "positive",
-		title: "Positive",
-		description: "Success badges and prompts"
-	},
-	{
-		key: "caution",
-		title: "Caution",
-		description: "Warnings and draft indicators"
-	},
-	{
-		key: "critical",
-		title: "Critical",
-		description: "Errors and destructive actions"
-	}
-], MID_POINTS = [
-	50,
-	100,
-	200,
-	300,
-	400,
-	500,
-	600,
-	700,
-	800,
-	900,
-	950
-], HUE_PROPERTIES = [
-	"mid",
-	"midPoint",
-	"lightest",
-	"darkest"
-];
-/** @internal */
-function sameHues(a, b) {
-	return HUE_KEYS.every((key) => HUE_PROPERTIES.every((property) => {
-		let left = a[key][property], right = b[key][property];
-		return typeof left == "string" && typeof right == "string" ? left.toLowerCase() === right.toLowerCase() : left === right;
-	}));
+function minimizeOptions(options) {
+	let resolved = resolveThemeOptions(options), minimized = { accent: resolved.accent };
+	resolved.text !== deriveTextColor(resolved.accent) && (minimized.text = resolved.text);
+	let dark = resolved.background.dark === DEFAULT_BACKGROUND_DARK ? null : resolved.background.dark, light = resolved.background.light === DEFAULT_BACKGROUND_LIGHT ? null : resolved.background.light;
+	return (dark !== null || light !== null) && (minimized.background = {}, dark !== null && (minimized.background.dark = dark), light !== null && (minimized.background.light = light)), resolved.contrast !== 85 && (minimized.contrast = resolved.contrast), minimized.accent === DEFAULT_ACCENT && Object.keys(minimized).length === 1 ? null : minimized;
 }
 /**
-* Reduces resolved hues to the minimal `PartialHues` that recreates them
-* through the legacy `createTheme`. The subtlety is `applyHues`' quirk of
-* resetting a customized `mid`'s mid point to 500: whenever `mid` is included,
-* the baseline for `midPoint` is 500 rather than the hue's default.
+* Whether two sets of theme options generate the same theme, comparing their
+* resolved forms so that derived and explicit values (and hex casing) don't
+* matter.
 *
 * @internal
 */
-function diffHues(hues$1) {
-	let diff = {};
-	for (let key of HUE_KEYS) {
-		let hue = hues$1[key], base = hues[key], patch = {};
-		hue.mid.toLowerCase() !== base.mid && (patch.mid = hue.mid.toLowerCase());
-		let impliedMidPoint = patch.mid === void 0 ? base.midPoint : 500;
-		hue.midPoint !== impliedMidPoint && (patch.midPoint = hue.midPoint), hue.lightest.toLowerCase() !== base.lightest && (patch.lightest = hue.lightest.toLowerCase()), hue.darkest.toLowerCase() !== base.darkest && (patch.darkest = hue.darkest.toLowerCase()), Object.keys(patch).length > 0 && (diff[key] = patch);
-	}
-	return diff;
-}
-function serializeHue(hue) {
-	let parts = [];
-	return hue.mid !== void 0 && parts.push(`mid: '${hue.mid}'`), hue.midPoint !== void 0 && parts.push(`midPoint: ${hue.midPoint}`), hue.lightest !== void 0 && parts.push(`lightest: '${hue.lightest}'`), hue.darkest !== void 0 && parts.push(`darkest: '${hue.darkest}'`), `{${parts.join(", ")}}`;
+function sameOptions(a, b) {
+	let left = resolveThemeOptions(a), right = resolveThemeOptions(b);
+	return left.accent === right.accent && left.text === right.text && left.background.dark === right.background.dark && left.background.light === right.background.light && left.contrast === right.contrast;
 }
 /**
-* Serializes hues into the `createTheme` call to paste into
-* `sanity.config.ts`, keeping only what differs from the default hues.
+* Serializes theme options into the `buildTheme` call to paste into
+* `sanity.config.ts`, keeping only what differs from the derived defaults.
 *
-* Hues that match the defaults entirely are the stock Studio theme, which
-* needs nothing from this package — so they serialize to a bare `buildTheme()`
+* Options that boil down to the stock Studio theme need nothing from this
+* package — so they serialize to a bare `buildTheme()` from `@sanity/ui/theme`
 * instead.
 *
 * @internal
 */
-function createThemeSnippet(hues) {
-	let diff = diffHues(hues), entries = [];
-	for (let key of HUE_KEYS) {
-		let patch = diff[key];
-		patch && entries.push(`  ${key}: ${serializeHue(patch)},`);
+function createThemeSnippet(options) {
+	let minimized = minimizeOptions(options);
+	if (minimized === null) return "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n";
+	let entries = [`  accent: '${minimized.accent}',`];
+	if (minimized.text !== void 0 && entries.push(`  text: '${minimized.text}',`), minimized.background) {
+		let parts = [];
+		minimized.background.dark !== void 0 && parts.push(`dark: '${minimized.background.dark}'`), minimized.background.light !== void 0 && parts.push(`light: '${minimized.background.light}'`), entries.push(`  background: {${parts.join(", ")}},`);
 	}
-	return entries.length === 0 ? "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n" : `import {createTheme} from '@sanity/themer/legacy'\n\nexport const theme = createTheme({\n${entries.join("\n")}\n})\n`;
+	return minimized.contrast !== void 0 && entries.push(`  contrast: ${minimized.contrast},`), `import {buildTheme} from '@sanity/themer'\n\nexport const theme = buildTheme({\n${entries.join("\n")}\n})\n`;
 }
 registerLanguage(typescript);
 /**
-* The tool's take on the hosted service's presets: Tailwind Cyan is hidden and
-* the default "Studio v3" preset reads just "Studio". The legacy `presets`
-* export itself keeps both untouched, for parity with
-* `https://themer.sanity.build/api/hues`.
-*/
-const TOOL_PRESETS = [];
-for (let preset of presets) preset.slug !== "tw-cyan" && TOOL_PRESETS.push(preset.slug === "default" ? {
-	...preset,
-	title: "Studio"
-} : preset);
-/**
 * `<input type="color">` paints the color into a shadow-DOM swatch that brings
 * its own border and padding, which then sits inside ours as a second border.
 * Stripping that chrome leaves the themed border as the only one.
 */
 const Swatch = styled.input.withConfig({
 	displayName: "Swatch",
-	componentId: "sc-g4qzjc-0"
-})`box-sizing:border-box;flex:none;width:33px;height:33px;padding:0;border:1px solid var(--card-border-color);border-radius:4px;background:none;cursor:pointer;&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-color-swatch{border:none;border-radius:3px;}&::-moz-color-swatch{border:none;border-radius:3px;}`;
-/** Expands `#abc` to `#aabbcc`, which is the only format `<input type="color">` accepts */
-function expandHex(hex) {
-	return hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex;
-}
-/** Prefixes bare query strings so `parseHuesFromUrl` accepts them too */
-function normalizeImportUrl(input) {
-	let trimmed = input.trim();
-	return trimmed.startsWith("http") || trimmed.startsWith("?") ? trimmed : `?${trimmed}`;
-}
+	componentId: "sc-lj4grb-0"
+})`box-sizing:border-box;flex:none;width:33px;height:33px;padding:0;border:1px solid var(--card-border-color);border-radius:4px;background:none;cursor:pointer;&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-color-swatch{border:none;border-radius:3px;}&::-moz-color-swatch{border:none;border-radius:3px;}`, Range = styled.input.withConfig({
+	displayName: "Range",
+	componentId: "sc-lj4grb-1"
+})`display:block;width:100%;margin:0;accent-color:var(--card-focus-ring-color);`;
 /**
-* The themer sidebar: presets, a themer.sanity.build URL importer and the
-* per-hue editors of the hosted Themer service — mid color, mid point,
-* lightest and darkest — that generate the previewed legacy theme, plus the
-* `createTheme` snippet to make it permanent.
+* The themer sidebar: presets, the accent/text/background pickers and the
+* contrast slider that generate the previewed `buildTheme` theme, plus the
+* `buildTheme` snippet to make it permanent.
 *
 * @internal
 */
 function ThemerSidebar() {
-	let $ = c(71), { baseHues, hues, setHues, setOpen } = useThemer(), toast = useToast(), [expandedHue, setExpandedHue] = useState(null), [importUrl, setImportUrl] = useState(""), active = hues ?? baseHues, t0;
-	$[0] === active ? t0 = $[1] : (t0 = createTonesFromHues(active), $[0] = active, $[1] = t0);
-	let tones = t0, t1;
-	$[2] === active ? t1 = $[3] : (t1 = TOOL_PRESETS.find((preset) => sameHues(preset.hues, active))?.slug ?? "", $[2] = active, $[3] = t1);
-	let activePresetSlug = t1, t2;
-	$[4] === active ? t2 = $[5] : (t2 = createThemeSnippet(active), $[4] = active, $[5] = t2);
-	let snippet = t2, t3;
-	$[6] !== active || $[7] !== setHues ? (t3 = (key, patch) => {
-		setHues({
+	let $ = c(117), { baseOptions, options, setOptions, setOpen } = useThemer(), toast = useToast(), active = options ?? baseOptions, t0;
+	$[0] === active ? t0 = $[1] : (t0 = resolveThemeOptions(active), $[0] = active, $[1] = t0);
+	let resolved = t0, t1;
+	$[2] === active ? t1 = $[3] : (t1 = buildPalette(active), $[2] = active, $[3] = t1);
+	let palette = t1, t2;
+	$[4] === active ? t2 = $[5] : (t2 = presets.find((preset) => sameOptions(preset.options, active))?.slug ?? "", $[4] = active, $[5] = t2);
+	let activePresetSlug = t2, t3;
+	$[6] === active ? t3 = $[7] : (t3 = createThemeSnippet(active), $[6] = active, $[7] = t3);
+	let snippet = t3, t4;
+	$[8] !== active || $[9] !== setOptions ? (t4 = (changes) => {
+		setOptions({
 			...active,
-			[key]: {
-				...active[key],
-				...patch
+			...changes
+		});
+	}, $[8] = active, $[9] = setOptions, $[10] = t4) : t4 = $[10];
+	let patch = t4, t5;
+	$[11] !== active || $[12] !== setOptions ? (t5 = (changes_0) => {
+		setOptions({
+			...active,
+			background: {
+				...active.background,
+				...changes_0
 			}
 		});
-	}, $[6] = active, $[7] = setHues, $[8] = t3) : t3 = $[8];
-	let handleHueChange = t3, t4;
-	$[9] === setHues ? t4 = $[10] : (t4 = (slug) => {
-		let preset_0 = TOOL_PRESETS.find((candidate) => candidate.slug === slug);
-		preset_0 && setHues(preset_0.hues);
-	}, $[9] = setHues, $[10] = t4);
-	let handlePresetChange = t4, t5;
-	$[11] !== importUrl || $[12] !== setHues || $[13] !== toast ? (t5 = () => {
-		if (importUrl.trim()) try {
-			setHues(parseHuesFromUrl(normalizeImportUrl(importUrl))), setImportUrl(""), toast.push({
-				status: "success",
-				title: "Imported theme from URL"
-			});
-		} catch (t6) {
-			let error = t6;
-			toast.push({
-				status: "error",
-				title: "Could not import the URL",
-				description: error instanceof Error ? error.message : String(error)
-			});
-		}
-	}, $[11] = importUrl, $[12] = setHues, $[13] = toast, $[14] = t5) : t5 = $[14];
-	let handleImport = t5, t6;
-	$[15] !== snippet || $[16] !== toast ? (t6 = async () => {
+	}, $[11] = active, $[12] = setOptions, $[13] = t5) : t5 = $[13];
+	let patchBackground = t5, t6;
+	$[14] !== active || $[15] !== setOptions ? (t6 = (field) => {
+		let next = { ...active };
+		delete next[field], setOptions(next);
+	}, $[14] = active, $[15] = setOptions, $[16] = t6) : t6 = $[16];
+	let clearField = t6, t7;
+	$[17] !== active || $[18] !== setOptions ? (t7 = (key) => {
+		let background = { ...active.background };
+		delete background[key];
+		let next_0 = { ...active };
+		background.dark === void 0 && background.light === void 0 ? delete next_0.background : next_0.background = background, setOptions(next_0);
+	}, $[17] = active, $[18] = setOptions, $[19] = t7) : t7 = $[19];
+	let clearBackground = t7, t8;
+	$[20] !== snippet || $[21] !== toast ? (t8 = async () => {
 		try {
 			await navigator.clipboard.writeText(snippet), toast.push({
 				status: "success",
@@ -220,9 +138,9 @@ function ThemerSidebar() {
 				title: "Could not copy the theme"
 			});
 		}
-	}, $[15] = snippet, $[16] = toast, $[17] = t6) : t6 = $[17];
-	let handleCopy = t6, t7;
-	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Box, {
+	}, $[20] = snippet, $[21] = toast, $[22] = t8) : t8 = $[22];
+	let handleCopy = t8, t9;
+	$[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		paddingLeft: 1,
 		children: /* @__PURE__ */ jsx(Text, {
@@ -230,15 +148,15 @@ function ThemerSidebar() {
 			weight: "semibold",
 			children: "Themer"
 		})
-	}), $[18] = t7) : t7 = $[18];
-	let t8;
-	$[19] === setOpen ? t8 = $[20] : (t8 = /* @__PURE__ */ jsx(Card, {
+	}), $[23] = t9) : t9 = $[23];
+	let t10;
+	$[24] === setOpen ? t10 = $[25] : (t10 = /* @__PURE__ */ jsx(Card, {
 		borderBottom: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
-			children: [t7, /* @__PURE__ */ jsx(Button, {
+			children: [t9, /* @__PURE__ */ jsx(Button, {
 				icon: CloseIcon,
 				mode: "bleed",
 				onClick: () => setOpen(!1),
@@ -246,103 +164,160 @@ function ThemerSidebar() {
 				title: "Close themer"
 			})]
 		})
-	}), $[19] = setOpen, $[20] = t8);
-	let t9;
-	$[21] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Text, {
+	}), $[24] = setOpen, $[25] = t10);
+	let t11;
+	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
 		children: "Presets"
-	}), $[21] = t9) : t9 = $[21];
-	let t10;
-	$[22] !== activePresetSlug || $[23] !== handlePresetChange ? (t10 = TOOL_PRESETS.map((preset_1) => /* @__PURE__ */ jsx(PresetButton, {
-		active: preset_1.slug === activePresetSlug,
-		onClick: handlePresetChange,
-		preset: preset_1
-	}, preset_1.slug)), $[22] = activePresetSlug, $[23] = handlePresetChange, $[24] = t10) : t10 = $[24];
-	let t11;
-	$[25] === t10 ? t11 = $[26] : (t11 = /* @__PURE__ */ jsxs(Stack, {
+	}), $[26] = t11) : t11 = $[26];
+	let t12;
+	$[27] !== activePresetSlug || $[28] !== setOptions ? (t12 = presets.map((preset_0) => /* @__PURE__ */ jsx(PresetButton, {
+		active: preset_0.slug === activePresetSlug,
+		onClick: () => setOptions(preset_0.options),
+		preset: preset_0
+	}, preset_0.slug)), $[27] = activePresetSlug, $[28] = setOptions, $[29] = t12) : t12 = $[29];
+	let t13;
+	$[30] === t12 ? t13 = $[31] : (t13 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
-		children: [t9, /* @__PURE__ */ jsx(Grid, {
+		children: [t11, /* @__PURE__ */ jsx(Grid, {
 			gap: 2,
 			gridTemplateColumns: 2,
-			children: t10
+			children: t12
 		})]
-	}), $[25] = t10, $[26] = t11);
-	let t12;
-	$[27] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Text, {
+	}), $[30] = t12, $[31] = t13);
+	let t14;
+	$[32] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
-		children: "Import"
-	}), $[27] = t12) : t12 = $[27];
-	let t13;
-	$[28] === handleImport ? t13 = $[29] : (t13 = (event) => {
-		event.preventDefault(), handleImport();
-	}, $[28] = handleImport, $[29] = t13);
-	let t14;
-	$[30] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (event_0) => setImportUrl(event_0.currentTarget.value), $[30] = t14) : t14 = $[30];
+		children: "Colors"
+	}), $[32] = t14) : t14 = $[32];
 	let t15;
-	$[31] === importUrl ? t15 = $[32] : (t15 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		children: /* @__PURE__ */ jsx(TextInput, {
-			"aria-label": "Hosted Themer URL",
-			fontSize: 1,
-			onChange: t14,
-			padding: 2,
-			placeholder: "themer.sanity.build URL",
-			value: importUrl
-		})
-	}), $[31] = importUrl, $[32] = t15);
+	$[33] === patch ? t15 = $[34] : (t15 = (accent) => patch({ accent }), $[33] = patch, $[34] = t15);
 	let t16;
-	$[33] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx(Button, {
-		mode: "ghost",
-		padding: 2,
-		text: "Import",
-		type: "submit"
-	}), $[33] = t16) : t16 = $[33];
-	let t17;
-	$[34] === t15 ? t17 = $[35] : (t17 = /* @__PURE__ */ jsxs(Flex, {
-		gap: 2,
-		children: [t15, t16]
-	}), $[34] = t15, $[35] = t17);
-	let t18;
-	$[36] !== t13 || $[37] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Stack, {
+	$[35] !== palette.blue || $[36] !== resolved.accent || $[37] !== t15 ? (t16 = /* @__PURE__ */ jsx(ColorRow, {
+		onChange: t15,
+		tints: palette.blue,
+		title: "Accent",
+		value: resolved.accent
+	}), $[35] = palette.blue, $[36] = resolved.accent, $[37] = t15, $[38] = t16) : t16 = $[38];
+	let t17 = active.text === void 0, t18;
+	$[39] === patch ? t18 = $[40] : (t18 = (text) => patch({ text }), $[39] = patch, $[40] = t18);
+	let t19;
+	$[41] === clearField ? t19 = $[42] : (t19 = () => clearField("text"), $[41] = clearField, $[42] = t19);
+	let t20;
+	$[43] !== palette.gray || $[44] !== resolved.text || $[45] !== t17 || $[46] !== t18 || $[47] !== t19 ? (t20 = /* @__PURE__ */ jsx(ColorRow, {
+		auto: t17,
+		onChange: t18,
+		onClear: t19,
+		tints: palette.gray,
+		title: "Text",
+		value: resolved.text
+	}), $[43] = palette.gray, $[44] = resolved.text, $[45] = t17, $[46] = t18, $[47] = t19, $[48] = t20) : t20 = $[48];
+	let t21 = active.background?.dark === void 0, t22;
+	$[49] === patchBackground ? t22 = $[50] : (t22 = (dark) => patchBackground({ dark }), $[49] = patchBackground, $[50] = t22);
+	let t23;
+	$[51] === clearBackground ? t23 = $[52] : (t23 = () => clearBackground("dark"), $[51] = clearBackground, $[52] = t23);
+	let t24;
+	$[53] !== palette.black || $[54] !== resolved.background.dark || $[55] !== t21 || $[56] !== t22 || $[57] !== t23 ? (t24 = /* @__PURE__ */ jsx(ColorRow, {
+		adjusted: palette.black,
+		auto: t21,
+		onChange: t22,
+		onClear: t23,
+		title: "Background · dark",
+		value: resolved.background.dark
+	}), $[53] = palette.black, $[54] = resolved.background.dark, $[55] = t21, $[56] = t22, $[57] = t23, $[58] = t24) : t24 = $[58];
+	let t25 = active.background?.light === void 0, t26;
+	$[59] === patchBackground ? t26 = $[60] : (t26 = (light) => patchBackground({ light }), $[59] = patchBackground, $[60] = t26);
+	let t27;
+	$[61] === clearBackground ? t27 = $[62] : (t27 = () => clearBackground("light"), $[61] = clearBackground, $[62] = t27);
+	let t28;
+	$[63] !== palette.white || $[64] !== resolved.background.light || $[65] !== t25 || $[66] !== t26 || $[67] !== t27 ? (t28 = /* @__PURE__ */ jsx(ColorRow, {
+		adjusted: palette.white,
+		auto: t25,
+		onChange: t26,
+		onClear: t27,
+		title: "Background · light",
+		value: resolved.background.light
+	}), $[63] = palette.white, $[64] = resolved.background.light, $[65] = t25, $[66] = t26, $[67] = t27, $[68] = t28) : t28 = $[68];
+	let t29;
+	$[69] !== t16 || $[70] !== t20 || $[71] !== t24 || $[72] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
-		children: [t12, /* @__PURE__ */ jsx("form", {
-			onSubmit: t13,
-			children: t17
+		children: [t14, /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t16,
+				t20,
+				t24,
+				t28
+			]
 		})]
-	}), $[36] = t13, $[37] = t17, $[38] = t18) : t18 = $[38];
-	let t19;
-	$[39] === Symbol.for("react.memo_cache_sentinel") ? (t19 = /* @__PURE__ */ jsx(Text, {
+	}), $[69] = t16, $[70] = t20, $[71] = t24, $[72] = t28, $[73] = t29) : t29 = $[73];
+	let t30;
+	$[74] === Symbol.for("react.memo_cache_sentinel") ? (t30 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
-		children: "Hues"
-	}), $[39] = t19) : t19 = $[39];
-	let t20;
-	$[40] !== active || $[41] !== expandedHue || $[42] !== handleHueChange || $[43] !== tones ? (t20 = HUE_FIELDS.map((field) => /* @__PURE__ */ jsx(HueSection, {
-		expanded: expandedHue === field.key,
-		field,
-		hue: active[field.key],
-		onChange: handleHueChange,
-		onToggle: () => setExpandedHue(expandedHue === field.key ? null : field.key),
-		tints: tones[field.key]
-	}, field.key)), $[40] = active, $[41] = expandedHue, $[42] = handleHueChange, $[43] = tones, $[44] = t20) : t20 = $[44];
-	let t21;
-	$[45] === t20 ? t21 = $[46] : (t21 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
-		children: [t19, /* @__PURE__ */ jsx(Stack, {
-			gap: 1,
-			children: t20
+		children: "Contrast"
+	}), $[74] = t30) : t30 = $[74];
+	let t31 = active.contrast === void 0 ? " · auto" : "", t32;
+	$[75] !== resolved.contrast || $[76] !== t31 ? (t32 = /* @__PURE__ */ jsxs(Stack, {
+		flex: 1,
+		gap: 2,
+		children: [t30, /* @__PURE__ */ jsxs(Text, {
+			muted: !0,
+			size: 0,
+			children: [resolved.contrast, t31]
 		})]
-	}), $[45] = t20, $[46] = t21);
-	let t22;
-	$[47] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Text, {
+	}), $[75] = resolved.contrast, $[76] = t31, $[77] = t32) : t32 = $[77];
+	let t33;
+	$[78] !== active.contrast || $[79] !== clearField ? (t33 = active.contrast !== void 0 && /* @__PURE__ */ jsx(Button, {
+		icon: ResetIcon,
+		mode: "bleed",
+		onClick: () => clearField("contrast"),
+		padding: 2,
+		title: "Reset to auto"
+	}), $[78] = active.contrast, $[79] = clearField, $[80] = t33) : t33 = $[80];
+	let t34;
+	$[81] !== t32 || $[82] !== t33 ? (t34 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [t32, t33]
+	}), $[81] = t32, $[82] = t33, $[83] = t34) : t34 = $[83];
+	let t35;
+	$[84] === patch ? t35 = $[85] : (t35 = (event) => patch({ contrast: Number(event.currentTarget.value) }), $[84] = patch, $[85] = t35);
+	let t36;
+	$[86] !== resolved.contrast || $[87] !== t35 ? (t36 = /* @__PURE__ */ jsx(Range, {
+		"aria-label": "Contrast",
+		max: 100,
+		min: 15,
+		onChange: t35,
+		step: 1,
+		type: "range",
+		value: resolved.contrast
+	}), $[86] = resolved.contrast, $[87] = t35, $[88] = t36) : t36 = $[88];
+	let t37;
+	$[89] === Symbol.for("react.memo_cache_sentinel") ? (t37 = /* @__PURE__ */ jsx(Text, {
+		muted: !0,
+		size: 0,
+		children: "100 keeps text and borders neutral — lower values blend in the accent"
+	}), $[89] = t37) : t37 = $[89];
+	let t38;
+	$[90] !== t34 || $[91] !== t36 ? (t38 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			t34,
+			t36,
+			t37
+		]
+	}), $[90] = t34, $[91] = t36, $[92] = t38) : t38 = $[92];
+	let t39;
+	$[93] === Symbol.for("react.memo_cache_sentinel") ? (t39 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
 		children: "Add to your config"
-	}), $[47] = t22) : t22 = $[47];
-	let t23;
-	$[48] === snippet ? t23 = $[49] : (t23 = /* @__PURE__ */ jsx(Card, {
+	}), $[93] = t39) : t39 = $[93];
+	let t40;
+	$[94] === snippet ? t40 = $[95] : (t40 = /* @__PURE__ */ jsx(Card, {
 		border: !0,
 		overflow: "auto",
 		padding: 2,
@@ -353,63 +328,63 @@ function ThemerSidebar() {
 			size: 0,
 			children: snippet
 		})
-	}), $[48] = snippet, $[49] = t23);
-	let t24;
-	$[50] === handleCopy ? t24 = $[51] : (t24 = /* @__PURE__ */ jsx(Button, {
+	}), $[94] = snippet, $[95] = t40);
+	let t41;
+	$[96] === handleCopy ? t41 = $[97] : (t41 = /* @__PURE__ */ jsx(Button, {
 		icon: ClipboardIcon,
 		mode: "ghost",
 		onClick: () => void handleCopy(),
 		text: "Copy"
-	}), $[50] = handleCopy, $[51] = t24);
-	let t25 = hues === null, t26;
-	$[52] === setHues ? t26 = $[53] : (t26 = () => setHues(null), $[52] = setHues, $[53] = t26);
-	let t27;
-	$[54] !== t25 || $[55] !== t26 ? (t27 = /* @__PURE__ */ jsx(Button, {
-		disabled: t25,
+	}), $[96] = handleCopy, $[97] = t41);
+	let t42 = options === null, t43;
+	$[98] === setOptions ? t43 = $[99] : (t43 = () => setOptions(null), $[98] = setOptions, $[99] = t43);
+	let t44;
+	$[100] !== t42 || $[101] !== t43 ? (t44 = /* @__PURE__ */ jsx(Button, {
+		disabled: t42,
 		icon: ResetIcon,
 		mode: "ghost",
-		onClick: t26,
+		onClick: t43,
 		text: "Reset",
 		tone: "critical"
-	}), $[54] = t25, $[55] = t26, $[56] = t27) : t27 = $[56];
-	let t28;
-	$[57] !== t24 || $[58] !== t27 ? (t28 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[100] = t42, $[101] = t43, $[102] = t44) : t44 = $[102];
+	let t45;
+	$[103] !== t41 || $[104] !== t44 ? (t45 = /* @__PURE__ */ jsxs(Flex, {
 		gap: 2,
-		children: [t24, t27]
-	}), $[57] = t24, $[58] = t27, $[59] = t28) : t28 = $[59];
-	let t29;
-	$[60] !== t23 || $[61] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Stack, {
+		children: [t41, t44]
+	}), $[103] = t41, $[104] = t44, $[105] = t45) : t45 = $[105];
+	let t46;
+	$[106] !== t40 || $[107] !== t45 ? (t46 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		children: [
-			t22,
-			t23,
-			t28
+			t39,
+			t40,
+			t45
 		]
-	}), $[60] = t23, $[61] = t28, $[62] = t29) : t29 = $[62];
-	let t30;
-	$[63] !== t11 || $[64] !== t18 || $[65] !== t21 || $[66] !== t29 ? (t30 = /* @__PURE__ */ jsx(Box, {
+	}), $[106] = t40, $[107] = t45, $[108] = t46) : t46 = $[108];
+	let t47;
+	$[109] !== t13 || $[110] !== t29 || $[111] !== t38 || $[112] !== t46 ? (t47 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		overflow: "auto",
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 4,
 			children: [
-				t11,
-				t18,
-				t21,
-				t29
+				t13,
+				t29,
+				t38,
+				t46
 			]
 		})
-	}), $[63] = t11, $[64] = t18, $[65] = t21, $[66] = t29, $[67] = t30) : t30 = $[67];
-	let t31;
-	return $[68] !== t30 || $[69] !== t8 ? (t31 = /* @__PURE__ */ jsx(Card, {
+	}), $[109] = t13, $[110] = t29, $[111] = t38, $[112] = t46, $[113] = t47) : t47 = $[113];
+	let t48;
+	return $[114] !== t10 || $[115] !== t47 ? (t48 = /* @__PURE__ */ jsx(Card, {
 		height: "fill",
 		children: /* @__PURE__ */ jsxs(Flex, {
 			direction: "column",
 			height: "fill",
-			children: [t8, t30]
+			children: [t10, t47]
 		})
-	}), $[68] = t30, $[69] = t8, $[70] = t31) : t31 = $[70], t31;
+	}), $[114] = t10, $[115] = t47, $[116] = t48) : t48 = $[116], t48;
 }
 const paletteStyle = {
 	display: "flex",
@@ -420,211 +395,132 @@ const paletteStyle = {
 	overflow: "hidden",
 	boxShadow: "inset 0 0 0 1px var(--card-border-color)"
 };
-/** A little color palette of the hue mid colors a preset would apply */
+/** A little palette of the colors a preset would apply */
 function PresetButton(props) {
-	let $ = c(17), { active, onClick, preset } = props, t0;
-	$[0] !== onClick || $[1] !== preset.slug ? (t0 = () => onClick(preset.slug), $[0] = onClick, $[1] = preset.slug, $[2] = t0) : t0 = $[2];
-	let t1 = preset.title, t2;
-	$[3] === preset.hues ? t2 = $[4] : (t2 = HUE_KEYS.map((key) => /* @__PURE__ */ jsx("span", { style: {
-		flex: 1,
-		background: preset.hues[key].mid
-	} }, key)), $[3] = preset.hues, $[4] = t2);
+	let $ = c(27), { active, onClick, preset } = props, t0;
+	$[0] === preset.options ? t0 = $[1] : (t0 = resolveThemeOptions(preset.options), $[0] = preset.options, $[1] = t0);
+	let resolved = t0, t1;
+	$[2] === resolved.accent ? t1 = $[3] : (t1 = ["accent", resolved.accent], $[2] = resolved.accent, $[3] = t1);
+	let t2;
+	$[4] === resolved.text ? t2 = $[5] : (t2 = ["text", resolved.text], $[4] = resolved.text, $[5] = t2);
 	let t3;
-	$[5] === t2 ? t3 = $[6] : (t3 = /* @__PURE__ */ jsx("span", {
-		style: paletteStyle,
-		children: t2
-	}), $[5] = t2, $[6] = t3);
+	$[6] === resolved.background.dark ? t3 = $[7] : (t3 = ["dark", resolved.background.dark], $[6] = resolved.background.dark, $[7] = t3);
 	let t4;
-	$[7] === preset.title ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
+	$[8] === resolved.background.light ? t4 = $[9] : (t4 = ["light", resolved.background.light], $[8] = resolved.background.light, $[9] = t4);
+	let t5;
+	$[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 ? (t5 = [
+		t1,
+		t2,
+		t3,
+		t4
+	], $[10] = t1, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5) : t5 = $[14];
+	let swatches = t5, t6;
+	$[15] === swatches ? t6 = $[16] : (t6 = /* @__PURE__ */ jsx("span", {
+		style: paletteStyle,
+		children: swatches.map(_temp$1)
+	}), $[15] = swatches, $[16] = t6);
+	let t7;
+	$[17] === preset.title ? t7 = $[18] : (t7 = /* @__PURE__ */ jsx(Text, {
 		align: "left",
 		size: 1,
 		textOverflow: "ellipsis",
 		children: preset.title
-	}), $[7] = preset.title, $[8] = t4);
-	let t5;
-	$[9] !== t3 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+	}), $[17] = preset.title, $[18] = t7);
+	let t8;
+	$[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Stack, {
 		as: "span",
 		gap: 2,
-		children: [t3, t4]
-	}), $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11];
-	let t6;
-	return $[12] !== active || $[13] !== preset.title || $[14] !== t0 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Button, {
+		children: [t6, t7]
+	}), $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21];
+	let t9;
+	return $[22] !== active || $[23] !== onClick || $[24] !== preset.title || $[25] !== t8 ? (t9 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
-		onClick: t0,
+		onClick,
 		padding: 2,
 		selected: active,
-		title: t1,
-		children: t5
-	}), $[12] = active, $[13] = preset.title, $[14] = t0, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+		title: preset.title,
+		children: t8
+	}), $[22] = active, $[23] = onClick, $[24] = preset.title, $[25] = t8, $[26] = t9) : t9 = $[26], t9;
+}
+function _temp$1(t0) {
+	let [key, background] = t0;
+	return /* @__PURE__ */ jsx("span", { style: {
+		flex: 1,
+		background
+	} }, key);
 }
 const rampStyle = {
 	...paletteStyle,
 	height: 13,
 	borderRadius: 2
 };
-/** One hue of the theme: a collapsible header with the generated tint ramp */
-function HueSection(props) {
-	let $ = c(35), { expanded, field, hue, onChange, onToggle, tints } = props, t0 = expanded ? "transparent" : void 0, t1 = expanded ? 3 : 0, t2 = expanded ? 3 : 0, t3 = field.description, t4;
-	$[0] === expanded ? t4 = $[1] : (t4 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		children: jsx(expanded ? ChevronDownIcon : ChevronRightIcon, {})
-	}), $[0] = expanded, $[1] = t4);
-	let t5;
-	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t5 = { width: 76 }, $[2] = t5) : t5 = $[2];
-	let t6;
-	$[3] === field.title ? t6 = $[4] : (t6 = /* @__PURE__ */ jsx(Box, {
-		as: "span",
-		style: t5,
-		children: /* @__PURE__ */ jsx(Text, {
-			size: 1,
-			textOverflow: "ellipsis",
-			weight: "medium",
-			children: field.title
-		})
-	}), $[3] = field.title, $[4] = t6);
-	let t7;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
-		...rampStyle,
-		flex: 1
-	}, $[5] = t7) : t7 = $[5];
-	let t8;
-	$[6] === tints ? t8 = $[7] : (t8 = COLOR_TINTS.map((tint) => /* @__PURE__ */ jsx("span", { style: {
-		flex: 1,
-		background: tints[tint].hex
-	} }, tint)), $[6] = tints, $[7] = t8);
-	let t9;
-	$[8] === t8 ? t9 = $[9] : (t9 = /* @__PURE__ */ jsx("span", {
-		style: t7,
-		children: t8
-	}), $[8] = t8, $[9] = t9);
-	let t10;
-	$[10] !== t4 || $[11] !== t6 || $[12] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		as: "span",
-		gap: 2,
-		children: [
-			t4,
-			t6,
-			t9
-		]
-	}), $[10] = t4, $[11] = t6, $[12] = t9, $[13] = t10) : t10 = $[13];
-	let t11;
-	$[14] !== expanded || $[15] !== field.description || $[16] !== onToggle || $[17] !== t10 ? (t11 = /* @__PURE__ */ jsx(Button, {
-		"aria-expanded": expanded,
-		mode: "bleed",
-		onClick: onToggle,
-		padding: 2,
-		title: t3,
-		children: t10
-	}), $[14] = expanded, $[15] = field.description, $[16] = onToggle, $[17] = t10, $[18] = t11) : t11 = $[18];
-	let t12;
-	$[19] !== expanded || $[20] !== field.description || $[21] !== field.key || $[22] !== field.title || $[23] !== hue || $[24] !== onChange ? (t12 = expanded && /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
-		paddingX: 3,
-		children: [
-			/* @__PURE__ */ jsx(Text, {
-				muted: !0,
-				size: 0,
-				children: field.description
-			}),
-			/* @__PURE__ */ jsx(ColorRow, {
-				onChange: (mid) => onChange(field.key, { mid }),
-				title: "Mid",
-				value: hue.mid
-			}),
-			/* @__PURE__ */ jsxs(Flex, {
-				align: "center",
-				gap: 2,
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					flex: 1,
-					gap: 2,
-					children: [/* @__PURE__ */ jsx(Text, {
-						size: 1,
-						children: "Mid point"
-					}), /* @__PURE__ */ jsx(Text, {
-						muted: !0,
-						size: 0,
-						children: "The tint the mid color sits at"
-					})]
-				}), /* @__PURE__ */ jsx(Select, {
-					"aria-label": `${field.title} mid point`,
-					fontSize: 1,
-					onChange: (event) => {
-						let value = Number(event.currentTarget.value), midPoint = MID_POINTS.find((candidate) => candidate === value);
-						midPoint !== void 0 && onChange(field.key, { midPoint });
-					},
-					padding: 2,
-					value: hue.midPoint,
-					children: MID_POINTS.map(_temp$1)
-				})]
-			}),
-			/* @__PURE__ */ jsx(ColorRow, {
-				onChange: (lightest) => onChange(field.key, { lightest }),
-				title: "Lightest",
-				value: hue.lightest
-			}),
-			/* @__PURE__ */ jsx(ColorRow, {
-				onChange: (darkest) => onChange(field.key, { darkest }),
-				title: "Darkest",
-				value: hue.darkest
-			})
-		]
-	}), $[19] = expanded, $[20] = field.description, $[21] = field.key, $[22] = field.title, $[23] = hue, $[24] = onChange, $[25] = t12) : t12 = $[25];
-	let t13;
-	$[26] !== t1 || $[27] !== t11 || $[28] !== t12 || $[29] !== t2 ? (t13 = /* @__PURE__ */ jsxs(Stack, {
-		gap: t1,
-		paddingBottom: t2,
-		children: [t11, t12]
-	}), $[26] = t1, $[27] = t11, $[28] = t12, $[29] = t2, $[30] = t13) : t13 = $[30];
-	let t14;
-	return $[31] !== expanded || $[32] !== t0 || $[33] !== t13 ? (t14 = /* @__PURE__ */ jsx(Card, {
-		border: expanded,
-		radius: 2,
-		tone: t0,
-		children: t13
-	}), $[31] = expanded, $[32] = t0, $[33] = t13, $[34] = t14) : t14 = $[34], t14;
-}
-function _temp$1(midPoint_0) {
-	return /* @__PURE__ */ jsx("option", {
-		value: midPoint_0,
-		children: midPoint_0
-	}, midPoint_0);
-}
+/**
+* One color of the theme: a swatch with its value, an optional reset-to-auto
+* button, and the generated 50–950 tint ramp for the scales it anchors.
+*/
 function ColorRow(props) {
-	let $ = c(18), { onChange, title, value } = props, t0;
+	let $ = c(27), { adjusted, auto, onChange, onClear, tints, title, value } = props, t0;
 	$[0] === title ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		children: title
 	}), $[0] = title, $[1] = t0);
-	let t1;
-	$[2] === value ? t1 = $[3] : (t1 = /* @__PURE__ */ jsx(Text, {
+	let t1 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t2 = auto ? " · auto" : "", t3;
+	$[2] !== t1 || $[3] !== t2 || $[4] !== value ? (t3 = /* @__PURE__ */ jsxs(Text, {
 		muted: !0,
 		size: 0,
-		children: value
-	}), $[2] = value, $[3] = t1);
-	let t2;
-	$[4] !== t0 || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Stack, {
+		textOverflow: "ellipsis",
+		children: [
+			value,
+			t1,
+			t2
+		]
+	}), $[2] = t1, $[3] = t2, $[4] = value, $[5] = t3) : t3 = $[5];
+	let t4;
+	$[6] !== t0 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Stack, {
 		flex: 1,
 		gap: 2,
-		children: [t0, t1]
-	}), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
-	let t3 = `${title} color`, t4;
-	$[7] === onChange ? t4 = $[8] : (t4 = (event) => onChange(event.currentTarget.value), $[7] = onChange, $[8] = t4);
+		children: [t0, t3]
+	}), $[6] = t0, $[7] = t3, $[8] = t4) : t4 = $[8];
 	let t5;
-	$[9] === value ? t5 = $[10] : (t5 = expandHex(value), $[9] = value, $[10] = t5);
-	let t6;
-	$[11] !== t3 || $[12] !== t4 || $[13] !== t5 ? (t6 = /* @__PURE__ */ jsx(Swatch, {
-		"aria-label": t3,
-		onChange: t4,
+	$[9] !== auto || $[10] !== onClear ? (t5 = onClear && !auto && /* @__PURE__ */ jsx(Button, {
+		icon: ResetIcon,
+		mode: "bleed",
+		onClick: onClear,
+		padding: 2,
+		title: "Reset to auto"
+	}), $[9] = auto, $[10] = onClear, $[11] = t5) : t5 = $[11];
+	let t6 = `${title} color`, t7;
+	$[12] === onChange ? t7 = $[13] : (t7 = (event) => onChange(event.currentTarget.value), $[12] = onChange, $[13] = t7);
+	let t8;
+	$[14] !== t6 || $[15] !== t7 || $[16] !== value ? (t8 = /* @__PURE__ */ jsx(Swatch, {
+		"aria-label": t6,
+		onChange: t7,
 		type: "color",
-		value: t5
-	}), $[11] = t3, $[12] = t4, $[13] = t5, $[14] = t6) : t6 = $[14];
-	let t7;
-	return $[15] !== t2 || $[16] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, {
+		value
+	}), $[14] = t6, $[15] = t7, $[16] = value, $[17] = t8) : t8 = $[17];
+	let t9;
+	$[18] !== t4 || $[19] !== t5 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		gap: 2,
-		children: [t2, t6]
-	}), $[15] = t2, $[16] = t6, $[17] = t7) : t7 = $[17], t7;
+		children: [
+			t4,
+			t5,
+			t8
+		]
+	}), $[18] = t4, $[19] = t5, $[20] = t8, $[21] = t9) : t9 = $[21];
+	let t10;
+	$[22] === tints ? t10 = $[23] : (t10 = tints && /* @__PURE__ */ jsx("span", {
+		style: rampStyle,
+		children: COLOR_TINTS.map((tint) => /* @__PURE__ */ jsx("span", { style: {
+			flex: 1,
+			background: tints[tint]
+		} }, tint))
+	}), $[22] = tints, $[23] = t10);
+	let t11;
+	return $[24] !== t10 || $[25] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 2,
+		children: [t9, t10]
+	}), $[24] = t10, $[25] = t9, $[26] = t11) : t11 = $[26], t11;
 }
 /**
 * Narrow enough to leave the studio preview as much room as possible: it fits
@@ -668,46 +564,44 @@ function ThemerActiveToolLayout(props) {
 		children: [t1, t2]
 	}), $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
 }
-const STORAGE_KEY = "sanityStudio:themer:hues";
-function sanitizeHue(value) {
+const STORAGE_KEY = "sanityStudio:themer:options";
+function sanitizeColor(value) {
+	return typeof value == "string" && isColor(value) ? value.toLowerCase() : null;
+}
+function sanitizeOptions(value) {
 	if (!value || typeof value != "object") return null;
-	let mid = Reflect.get(value, "mid"), midPoint = Reflect.get(value, "midPoint"), lightest = Reflect.get(value, "lightest"), darkest = Reflect.get(value, "darkest");
-	return typeof mid != "string" || !isColor(mid) || typeof lightest != "string" || !isColor(lightest) || typeof darkest != "string" || !isColor(darkest) || typeof midPoint != "number" || !MID_POINTS.includes(midPoint) ? null : {
-		mid: mid.toLowerCase(),
-		midPoint,
-		lightest: lightest.toLowerCase(),
-		darkest: darkest.toLowerCase()
-	};
+	let accent = sanitizeColor(Reflect.get(value, "accent"));
+	if (!accent) return null;
+	let options = { accent }, text = sanitizeColor(Reflect.get(value, "text"));
+	text && (options.text = text);
+	let background = Reflect.get(value, "background");
+	if (background && typeof background == "object") {
+		let dark = sanitizeColor(Reflect.get(background, "dark")), light = sanitizeColor(Reflect.get(background, "light"));
+		(dark || light) && (options.background = {}, dark && (options.background.dark = dark), light && (options.background.light = light));
+	}
+	let contrast = Reflect.get(value, "contrast");
+	return typeof contrast == "number" && Number.isFinite(contrast) && (options.contrast = Math.min(100, Math.max(15, contrast))), options;
 }
 /**
-* Restores draft hues from localStorage, so theme drafts survive studio
-* reloads.
+* Restores draft theme options from localStorage, so theme drafts survive
+* studio reloads.
 *
 * @internal
 */
-function readStoredHues() {
+function readStoredOptions() {
 	try {
 		if (typeof localStorage > "u") return null;
 		let raw = localStorage.getItem(STORAGE_KEY);
-		if (!raw) return null;
-		let parsed = JSON.parse(raw);
-		if (!parsed || typeof parsed != "object") return null;
-		let hues = {};
-		for (let key of HUE_KEYS) {
-			let hue = sanitizeHue(Reflect.get(parsed, key));
-			if (!hue) return null;
-			hues[key] = hue;
-		}
-		return hues;
+		return raw ? sanitizeOptions(JSON.parse(raw)) : null;
 	} catch {
 		return null;
 	}
 }
 /** @internal */
-function writeStoredHues(hues) {
+function writeStoredOptions(options) {
 	try {
 		if (typeof localStorage > "u") return;
-		hues === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(hues));
+		options === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
 	} catch {}
 }
 /**
@@ -722,18 +616,18 @@ function writeStoredHues(hues) {
 * @internal
 */
 function ThemerLayout(props) {
-	let $ = c(13), { baseHues, ...layoutProps } = props, [open, setOpen] = useState(!1), [hues, setHues] = useState(readStoredHues), t0, t1;
-	$[0] === hues ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredHues(hues), t1 = [hues], $[0] = hues, $[1] = t0, $[2] = t1), useEffect(t0, t1);
+	let $ = c(13), { baseOptions, ...layoutProps } = props, [open, setOpen] = useState(!1), [options, setOptions] = useState(readStoredOptions), t0, t1;
+	$[0] === options ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredOptions(options), t1 = [options], $[0] = options, $[1] = t0, $[2] = t1), useEffect(t0, t1);
 	let t2;
-	$[3] === hues ? t2 = $[4] : (t2 = hues === null ? null : createTheme(hues), $[3] = hues, $[4] = t2);
+	$[3] === options ? t2 = $[4] : (t2 = options === null ? null : buildTheme(options), $[3] = options, $[4] = t2);
 	let theme = t2, t3;
-	$[5] !== baseHues || $[6] !== hues || $[7] !== open ? (t3 = {
-		baseHues,
-		hues,
-		setHues,
+	$[5] !== baseOptions || $[6] !== open || $[7] !== options ? (t3 = {
+		baseOptions,
+		options,
+		setOptions,
 		open,
 		setOpen
-	}, $[5] = baseHues, $[6] = hues, $[7] = open, $[8] = t3) : t3 = $[8];
+	}, $[5] = baseOptions, $[6] = open, $[7] = options, $[8] = t3) : t3 = $[8];
 	let context = t3, t4 = ThemerContext, t5 = theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
 		theme,
 		children: layoutProps.renderDefault(layoutProps)
@@ -802,10 +696,10 @@ function _temp() {
 	return /* @__PURE__ */ jsx(ThemerNavbarButton, {});
 }
 /**
-* A Studio plugin that adds a themer sidebar for the legacy Themer themes:
-* a navbar toggle opens the sidebar next to the active tool, where presets,
-* per-hue editors and pasted themer.sanity.build URLs preview a legacy
-* `createTheme` theme live on the whole Studio while you browse around.
+* A Studio plugin that adds a themer sidebar for `buildTheme` themes: a
+* navbar toggle opens the sidebar next to the active tool, where presets, the
+* accent/text/background pickers and the contrast slider preview a
+* `buildTheme` theme live on the whole Studio while you browse around.
 * Toggle between light and dark mode with the regular appearance menu — the
 * preview follows it.
 *
@@ -825,12 +719,12 @@ function _temp() {
 * @alpha
 */
 const themerTool = definePlugin((options) => {
-	let baseHues = applyHues(options?.hues ?? {});
+	let baseOptions = options?.config ?? { accent: DEFAULT_ACCENT };
 	function ThemerLayoutWithOptions(props) {
 		let $ = c(2), t0;
 		return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(ThemerLayout, {
 			...props,
-			baseHues
+			baseOptions
 		}), $[0] = props, $[1] = t0), t0;
 	}
 	return {