@sanity/themer 0.0.0 → 0.2.0

package/dist/tool.js

@@ -1,12 +1,16 @@
-import { t as isColor } from "./_chunks/mix.js";
-import { n as createTheme, t as presets } from "./_chunks/presets.js";
-import { color } from "@sanity/color";
+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, Layer, Select, Stack, Text, ThemeProvider, useToast } from "@sanity/ui";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Box, Button, Card, Code, Flex, Grid, Layer, Stack, Text, ThemeProvider, Tooltip, useToast } from "@sanity/ui";
+import { createContext, useContext, useEffect, useState } from "react";
 import { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { CloseIcon } from "@sanity/icons/Close";
 import { ResetIcon } from "@sanity/icons/Reset";
+import { registerLanguage } from "react-refractor";
+import typescript from "refractor/typescript";
+import { styled } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
 /** @internal */
@@ -17,93 +21,112 @@ function useThemer() {
 	if (!context) throw Error("useThemer must be used within the `themerTool` plugin");
 	return context;
 }
-/** @internal */
-const THEMER_FIELDS = [
-	{
-		key: "primary",
-		title: "Primary",
-		description: "Buttons, focus rings and links",
-		defaultValue: color.blue[500].hex
-	},
-	{
-		key: "gray",
-		title: "Gray",
-		description: "Neutral surfaces, borders and text",
-		defaultValue: color.gray[500].hex
-	},
-	{
-		key: "positive",
-		title: "Positive",
-		description: "Success accents",
-		defaultValue: color.green[500].hex
-	},
-	{
-		key: "caution",
-		title: "Caution",
-		description: "Warning accents",
-		defaultValue: color.yellow[500].hex
-	},
-	{
-		key: "critical",
-		title: "Critical",
-		description: "Errors and destructive actions",
-		defaultValue: color.red[500].hex
-	},
-	{
-		key: "lightest",
-		title: "Lightest",
-		description: "Light mode background",
-		defaultValue: color.white.hex
-	},
-	{
-		key: "darkest",
-		title: "Darkest",
-		description: "Dark mode background",
-		defaultValue: color.black.hex
-	}
-];
 /**
-* Serializes colors into the `createTheme` call to paste into
-* `sanity.config.ts`.
+* 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
 */
-function createThemeSnippet(colors) {
-	let entries = THEMER_FIELDS.filter(({ key }) => colors[key]).map(({ key }) => `  ${key}: '${colors[key]}',`);
-	return `import {createTheme} from '@sanity/themer'\n\nexport const theme = ${entries.length === 0 ? "createTheme()" : `createTheme({\n${entries.join("\n")}\n})`}\n`;
+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;
 }
-const swatchStyle = {
-	width: 33,
-	height: 33,
-	padding: 0,
-	border: "1px solid var(--card-border-color)",
-	borderRadius: 6,
-	background: "transparent",
-	cursor: "pointer",
-	flex: "none"
-};
-function sameColors(a, b) {
-	return THEMER_FIELDS.every(({ key }) => (a[key]?.toLowerCase() ?? void 0) === (b[key]?.toLowerCase() ?? void 0));
+/**
+* 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 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;
 }
-/** 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;
+/**
+* Serializes theme options into the `buildTheme` call to paste into
+* `sanity.config.ts`, keeping only what differs from the derived defaults.
+*
+* 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(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 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 themer sidebar: a preset picker and a handful of color pickers that
-* generate the previewed theme, plus the `createTheme` snippet to make it
-* permanent.
+* `<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-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, 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 { baseColors, colors, setColors, setOpen } = useThemer(), toast = useToast(), active = colors ?? baseColors, activePresetSlug = presets.find((preset) => sameColors(preset.colors, active))?.slug ?? "", snippet = createThemeSnippet(active), handleFieldChange = (key, value) => {
+	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,
+			...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
+			}
+		});
+	}, $[11] = active, $[12] = setOptions, $[13] = t5) : t5 = $[13];
+	let patchBackground = t5, t6;
+	$[14] !== active || $[15] !== setOptions ? (t6 = (field) => {
 		let next = { ...active };
-		value === void 0 ? delete next[key] : next[key] = value, setColors(next);
-	}, handlePresetChange = (slug) => {
-		let preset = presets.find((candidate) => candidate.slug === slug);
-		preset && setColors({ ...preset.colors });
-	}, handleCopy = async () => {
+		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",
@@ -115,149 +138,397 @@ function ThemerSidebar() {
 				title: "Could not copy the theme"
 			});
 		}
-	};
-	return /* @__PURE__ */ jsx(Card, {
+	}, $[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, {
+			size: 1,
+			weight: "semibold",
+			children: "Themer"
+		})
+	}), $[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: [t9, /* @__PURE__ */ jsx(Button, {
+				icon: CloseIcon,
+				mode: "bleed",
+				onClick: () => setOpen(!1),
+				padding: 2,
+				title: "Close themer"
+			})]
+		})
+	}), $[24] = setOpen, $[25] = t10);
+	let t11;
+	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Presets"
+	}), $[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: [t11, /* @__PURE__ */ jsx(Grid, {
+			gap: 2,
+			gridTemplateColumns: 2,
+			children: t12
+		})]
+	}), $[30] = t12, $[31] = t13);
+	let t14;
+	$[32] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Colors"
+	}), $[32] = t14) : t14 = $[32];
+	let t15;
+	$[33] === patch ? t15 = $[34] : (t15 = (accent) => patch({ accent }), $[33] = patch, $[34] = t15);
+	let t16;
+	$[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: [t14, /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t16,
+				t20,
+				t24,
+				t28
+			]
+		})]
+	}), $[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: "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]
+		})]
+	}), $[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"
+	}), $[93] = t39) : t39 = $[93];
+	let t40;
+	$[94] === snippet ? t40 = $[95] : (t40 = /* @__PURE__ */ jsx(Card, {
+		border: !0,
+		overflow: "auto",
+		padding: 2,
+		radius: 2,
+		tone: "transparent",
+		children: /* @__PURE__ */ jsx(Code, {
+			language: "ts",
+			size: 0,
+			children: snippet
+		})
+	}), $[94] = snippet, $[95] = t40);
+	let t41;
+	$[96] === handleCopy ? t41 = $[97] : (t41 = /* @__PURE__ */ jsx(Button, {
+		icon: ClipboardIcon,
+		mode: "ghost",
+		onClick: () => void handleCopy(),
+		text: "Copy"
+	}), $[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: t43,
+		text: "Reset",
+		tone: "critical"
+	}), $[100] = t42, $[101] = t43, $[102] = t44) : t44 = $[102];
+	let t45;
+	$[103] !== t41 || $[104] !== t44 ? (t45 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 2,
+		children: [t41, t44]
+	}), $[103] = t41, $[104] = t44, $[105] = t45) : t45 = $[105];
+	let t46;
+	$[106] !== t40 || $[107] !== t45 ? (t46 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			t39,
+			t40,
+			t45
+		]
+	}), $[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: [
+				t13,
+				t29,
+				t38,
+				t46
+			]
+		})
+	}), $[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: [/* @__PURE__ */ jsx(Card, {
-				borderBottom: !0,
-				padding: 3,
-				children: /* @__PURE__ */ jsxs(Flex, {
-					align: "center",
-					gap: 2,
-					children: [/* @__PURE__ */ jsx(Box, {
-						flex: 1,
-						paddingLeft: 1,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: 1,
-							weight: "semibold",
-							children: "Themer"
-						})
-					}), /* @__PURE__ */ jsx(Button, {
-						icon: CloseIcon,
-						mode: "bleed",
-						onClick: () => setOpen(!1),
-						padding: 2,
-						title: "Close themer"
-					})]
-				})
-			}), /* @__PURE__ */ jsx(Box, {
-				flex: 1,
-				overflow: "auto",
-				padding: 4,
-				children: /* @__PURE__ */ jsxs(Stack, {
-					gap: 5,
-					children: [
-						/* @__PURE__ */ jsxs(Stack, {
-							gap: 3,
-							children: [/* @__PURE__ */ jsx(Text, {
-								size: 1,
-								weight: "medium",
-								children: "Preset"
-							}), /* @__PURE__ */ jsxs(Select, {
-								onChange: (event) => handlePresetChange(event.currentTarget.value),
-								value: activePresetSlug,
-								children: [activePresetSlug === "" && /* @__PURE__ */ jsx("option", {
-									value: "",
-									children: "Custom"
-								}), presets.map((preset) => /* @__PURE__ */ jsx("option", {
-									value: preset.slug,
-									children: preset.title
-								}, preset.slug))]
-							})]
-						}),
-						/* @__PURE__ */ jsx(Stack, {
-							gap: 4,
-							children: THEMER_FIELDS.map((field) => /* @__PURE__ */ jsx(ColorField, {
-								field,
-								onChange: handleFieldChange,
-								value: active[field.key]
-							}, field.key))
-						}),
-						/* @__PURE__ */ jsxs(Stack, {
-							gap: 3,
-							children: [
-								/* @__PURE__ */ jsx(Text, {
-									size: 1,
-									weight: "medium",
-									children: "Add to your config"
-								}),
-								/* @__PURE__ */ jsx(Card, {
-									border: !0,
-									overflow: "auto",
-									padding: 3,
-									radius: 2,
-									tone: "transparent",
-									children: /* @__PURE__ */ jsx(Code, {
-										language: "ts",
-										size: 0,
-										children: snippet
-									})
-								}),
-								/* @__PURE__ */ jsxs(Flex, {
-									gap: 2,
-									children: [/* @__PURE__ */ jsx(Button, {
-										icon: ClipboardIcon,
-										mode: "ghost",
-										onClick: () => void handleCopy(),
-										text: "Copy"
-									}), /* @__PURE__ */ jsx(Button, {
-										disabled: colors === null,
-										icon: ResetIcon,
-										mode: "ghost",
-										onClick: () => setColors(null),
-										text: "Reset",
-										tone: "critical"
-									})]
-								})
-							]
-						})
-					]
-				})
-			})]
+			children: [t10, t47]
 		})
-	});
+	}), $[114] = t10, $[115] = t47, $[116] = t48) : t48 = $[116], t48;
 }
-function ColorField(props) {
-	let { field, value, onChange } = props;
-	return /* @__PURE__ */ jsxs(Flex, {
+const paletteStyle = {
+	display: "flex",
+	gap: 1,
+	background: "var(--card-border-color)",
+	height: 21,
+	borderRadius: 3,
+	overflow: "hidden",
+	boxShadow: "inset 0 0 0 1px var(--card-border-color)"
+};
+/** A little palette of the colors a preset would apply */
+function PresetButton(props) {
+	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;
+	$[6] === resolved.background.dark ? t3 = $[7] : (t3 = ["dark", resolved.background.dark], $[6] = resolved.background.dark, $[7] = t3);
+	let t4;
+	$[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
+	}), $[17] = preset.title, $[18] = t7);
+	let t8;
+	$[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Stack, {
+		as: "span",
+		gap: 2,
+		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,
+		padding: 2,
+		selected: active,
+		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 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(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 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t2 = auto ? " · auto" : "", t3;
+	$[2] !== t1 || $[3] !== t2 || $[4] !== value ? (t3 = /* @__PURE__ */ jsxs(Text, {
+		muted: !0,
+		size: 0,
+		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, t3]
+	}), $[6] = t0, $[7] = t3, $[8] = t4) : t4 = $[8];
+	let t5;
+	$[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
+	}), $[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: 3,
+		gap: 2,
 		children: [
-			/* @__PURE__ */ jsxs(Stack, {
-				flex: 1,
-				gap: 2,
-				children: [/* @__PURE__ */ jsx(Text, {
-					size: 1,
-					weight: "medium",
-					children: field.title
-				}), /* @__PURE__ */ jsx(Text, {
-					muted: !0,
-					size: 0,
-					children: value ?? field.description
-				})]
-			}),
-			value !== void 0 && /* @__PURE__ */ jsx(Button, {
-				icon: CloseIcon,
-				mode: "bleed",
-				onClick: () => onChange(field.key, void 0),
-				padding: 2,
-				title: `Reset ${field.title}`
-			}),
-			/* @__PURE__ */ jsx("input", {
-				"aria-label": `${field.title} color`,
-				onChange: (event) => onChange(field.key, event.currentTarget.value),
-				style: swatchStyle,
-				type: "color",
-				value: expandHex(value ?? field.defaultValue)
-			})
+			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
+* the widest picker label next to its swatch, and the code snippet scrolls
+* horizontally rather than widening the sidebar.
+*/
 const sidebarStyle = {
-	width: 360,
+	width: 240,
 	flex: "none",
 	borderLeft: "1px solid var(--card-border-color)",
 	boxSizing: "border-box",
@@ -270,52 +541,67 @@ const sidebarStyle = {
 * @internal
 */
 function ThemerActiveToolLayout(props) {
-	let { open } = useThemer();
-	return /* @__PURE__ */ jsxs(Flex, {
+	let $ = c(9), { open } = useThemer(), t0;
+	$[0] === props ? t0 = $[1] : (t0 = props.renderDefault(props), $[0] = props, $[1] = t0);
+	let t1;
+	$[2] === t0 ? t1 = $[3] : (t1 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		height: "fill",
+		overflow: "auto",
+		children: t0
+	}), $[2] = t0, $[3] = t1);
+	let t2;
+	$[4] === open ? t2 = $[5] : (t2 = open && /* @__PURE__ */ jsx(Layer, {
+		height: "fill",
+		style: sidebarStyle,
+		zOffset: 100,
+		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
+	}), $[4] = open, $[5] = t2);
+	let t3;
+	return $[6] !== t1 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Flex, {
 		height: "fill",
 		sizing: "border",
-		children: [/* @__PURE__ */ jsx(Box, {
-			flex: 1,
-			height: "fill",
-			overflow: "auto",
-			children: props.renderDefault(props)
-		}), open && /* @__PURE__ */ jsx(Layer, {
-			height: "fill",
-			style: sidebarStyle,
-			zOffset: 100,
-			children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-		})]
-	});
+		children: [t1, t2]
+	}), $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+}
+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 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;
 }
-const STORAGE_KEY = "sanityStudio:themer:colors";
 /**
-* Restores draft colors from localStorage, so theme drafts survive studio
-* reloads.
+* Restores draft theme options from localStorage, so theme drafts survive
+* studio reloads.
 *
 * @internal
 */
-function readStoredColors() {
+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 colors = {};
-		for (let { key } of THEMER_FIELDS) {
-			let value = Reflect.get(parsed, key);
-			typeof value == "string" && isColor(value) && (colors[key] = value);
-		}
-		return colors;
+		return raw ? sanitizeOptions(JSON.parse(raw)) : null;
 	} catch {
 		return null;
 	}
 }
 /** @internal */
-function writeStoredColors(colors) {
+function writeStoredOptions(options) {
 	try {
 		if (typeof localStorage > "u") return;
-		colors === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
+		options === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
 	} catch {}
 }
 /**
@@ -330,56 +616,92 @@ function writeStoredColors(colors) {
 * @internal
 */
 function ThemerLayout(props) {
-	let { baseColors, ...layoutProps } = props, [open, setOpen] = useState(!1), [colors, setColors] = useState(readStoredColors);
-	useEffect(() => writeStoredColors(colors), [colors]);
-	let theme = useMemo(() => colors === null ? null : createTheme({
-		...baseColors,
-		...colors
-	}), [baseColors, colors]), context = useMemo(() => ({
-		baseColors,
-		colors,
-		setColors,
+	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] === options ? t2 = $[4] : (t2 = options === null ? null : buildTheme(options), $[3] = options, $[4] = t2);
+	let theme = t2, t3;
+	$[5] !== baseOptions || $[6] !== open || $[7] !== options ? (t3 = {
+		baseOptions,
+		options,
+		setOptions,
 		open,
 		setOpen
-	}), [
-		baseColors,
-		colors,
-		open
-	]);
-	return /* @__PURE__ */ jsx(ThemerContext.Provider, {
+	}, $[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)
+	}), t6;
+	return $[9] !== context || $[10] !== t4.Provider || $[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(t4.Provider, {
 		value: context,
-		children: theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
-			theme,
-			children: layoutProps.renderDefault(layoutProps)
+		children: t5
+	}), $[9] = context, $[10] = t4.Provider, $[11] = t5, $[12] = t6) : t6 = $[12], t6;
+}
+function ThemerNavbarButton() {
+	let $ = c(7), { open, setOpen } = useThemer(), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: "Themer"
+	}), $[0] = t0) : t0 = $[0];
+	let t1;
+	$[1] !== open || $[2] !== setOpen ? (t1 = () => setOpen(!open), $[1] = open, $[2] = setOpen, $[3] = t1) : t1 = $[3];
+	let t2;
+	return $[4] !== open || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(Tooltip, {
+		content: t0,
+		portal: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Themer",
+			icon: ColorWheelIcon,
+			mode: "bleed",
+			onClick: t1,
+			padding: 2,
+			selected: open
 		})
-	});
+	}), $[4] = open, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
 }
 /**
 * Adds the toggle that opens and closes the themer sidebar to the Studio
-* navbar.
+* navbar — an icon button with a tooltip in the top bar (like the Tasks
+* toggle), and a regular titled action in the narrow-screen sidebar menu.
 *
 * @internal
 */
 function ThemerNavbar(props) {
-	let { open, setOpen } = useThemer();
-	return props.renderDefault({
-		...props,
-		__internal_actions: [...props.__internal_actions ?? [], {
-			icon: ColorWheelIcon,
-			location: "topbar",
-			name: "themer",
-			onAction: () => setOpen(!open),
-			selected: open,
-			title: "Themer"
-		}]
-	});
+	let $ = c(7), { open, setOpen } = useThemer(), t0;
+	if ($[0] !== open || $[1] !== props || $[2] !== setOpen) {
+		let t1;
+		$[4] !== open || $[5] !== setOpen ? (t1 = () => setOpen(!open), $[4] = open, $[5] = setOpen, $[6] = t1) : t1 = $[6], t0 = props.renderDefault({
+			...props,
+			__internal_actions: [
+				...props.__internal_actions ?? [],
+				{
+					location: "topbar",
+					name: "themer-topbar",
+					render: _temp
+				},
+				{
+					icon: ColorWheelIcon,
+					location: "sidebar",
+					name: "themer-sidebar",
+					onAction: t1,
+					selected: open,
+					title: "Themer"
+				}
+			]
+		}), $[0] = open, $[1] = props, $[2] = setOpen, $[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+function _temp() {
+	return /* @__PURE__ */ jsx(ThemerNavbarButton, {});
 }
 /**
-* A Studio plugin that adds a themer sidebar for generating Studio themes:
-* a navbar toggle opens the sidebar next to the active tool, where presets
-* and color pickers preview a `createTheme` 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.
+* 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.
 *
 * ```ts
 * import {themerTool} from '@sanity/themer/tool'
@@ -391,15 +713,19 @@ function ThemerNavbar(props) {
 * })
 * ```
 *
-* @public
+* This is experimental and may change or be removed in any release without
+* notice — use at your own risk.
+*
+* @alpha
 */
 const themerTool = definePlugin((options) => {
-	let baseColors = options?.colors ?? {};
+	let baseOptions = options?.config ?? { accent: DEFAULT_ACCENT };
 	function ThemerLayoutWithOptions(props) {
-		return /* @__PURE__ */ jsx(ThemerLayout, {
+		let $ = c(2), t0;
+		return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(ThemerLayout, {
 			...props,
-			baseColors
-		});
+			baseOptions
+		}), $[0] = props, $[1] = t0), t0;
 	}
 	return {
 		name: "@sanity/themer/tool",