@sanity/themer 0.0.0

package/dist/legacy.cjs

@@ -0,0 +1,1199 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_mix = require("./_chunks/mix.cjs");
+let _sanity_color = require("@sanity/color"), _sanity_ui_theme = require("@sanity/ui/theme");
+/**
+* Drops properties that are set to `undefined`, so that spreading the hue
+* over defaults doesn't shadow them. The hosted Themer service used a
+* `JSON.parse(JSON.stringify(…))` round trip for this.
+*/
+function dropUndefined(hue) {
+	if (!hue) return;
+	let result = {};
+	return hue.mid !== void 0 && (result.mid = hue.mid), hue.midPoint !== void 0 && (result.midPoint = hue.midPoint), hue.lightest !== void 0 && (result.lightest = hue.lightest), hue.darkest !== void 0 && (result.darkest = hue.darkest), result;
+}
+/**
+* The color palette from `@sanity/color@2.2.5`, vendored so that themes
+* generated by this module keep producing the exact same colors as the hosted
+* Themer service (themer.sanity.build), which bundles that version. The
+* current `@sanity/color` palette has different values, so it cannot be used
+* here without changing generated themes.
+*/
+/** @internal */
+const black = {
+	title: "Black",
+	hex: "#101112"
+}, white = {
+	title: "White",
+	hex: "#fff"
+}, gray = {
+	50: {
+		title: "Gray 50",
+		hex: "#f2f3f5"
+	},
+	100: {
+		title: "Gray 100",
+		hex: "#e6e8ec"
+	},
+	200: {
+		title: "Gray 200",
+		hex: "#ced2d9"
+	},
+	300: {
+		title: "Gray 300",
+		hex: "#b6bcc6"
+	},
+	400: {
+		title: "Gray 400",
+		hex: "#9ea6b3"
+	},
+	500: {
+		title: "Gray 500",
+		hex: "#8690a0"
+	},
+	600: {
+		title: "Gray 600",
+		hex: "#6e7683"
+	},
+	700: {
+		title: "Gray 700",
+		hex: "#565d67"
+	},
+	800: {
+		title: "Gray 800",
+		hex: "#3f434a"
+	},
+	900: {
+		title: "Gray 900",
+		hex: "#272a2e"
+	},
+	950: {
+		title: "Gray 950",
+		hex: "#1b1d20"
+	}
+}, blue = {
+	50: {
+		title: "Blue 50",
+		hex: "#e8f1fe"
+	},
+	100: {
+		title: "Blue 100",
+		hex: "#d2e3fe"
+	},
+	200: {
+		title: "Blue 200",
+		hex: "#a6c8fd"
+	},
+	300: {
+		title: "Blue 300",
+		hex: "#7aacfd"
+	},
+	400: {
+		title: "Blue 400",
+		hex: "#4e91fc"
+	},
+	500: {
+		title: "Blue 500",
+		hex: "#2276fc"
+	},
+	600: {
+		title: "Blue 600",
+		hex: "#1e61cd"
+	},
+	700: {
+		title: "Blue 700",
+		hex: "#1a4d9e"
+	},
+	800: {
+		title: "Blue 800",
+		hex: "#17396f"
+	},
+	900: {
+		title: "Blue 900",
+		hex: "#132540"
+	},
+	950: {
+		title: "Blue 950",
+		hex: "#111b29"
+	}
+}, purple = {
+	50: {
+		title: "Purple 50",
+		hex: "#f8e9fe"
+	},
+	100: {
+		title: "Purple 100",
+		hex: "#f2d3fe"
+	},
+	200: {
+		title: "Purple 200",
+		hex: "#e6a7fd"
+	},
+	300: {
+		title: "Purple 300",
+		hex: "#d97bfd"
+	},
+	400: {
+		title: "Purple 400",
+		hex: "#cd4efc"
+	},
+	500: {
+		title: "Purple 500",
+		hex: "#c123fc"
+	},
+	600: {
+		title: "Purple 600",
+		hex: "#9d1fcd"
+	},
+	700: {
+		title: "Purple 700",
+		hex: "#7a1b9e"
+	},
+	800: {
+		title: "Purple 800",
+		hex: "#56186f"
+	},
+	900: {
+		title: "Purple 900",
+		hex: "#331440"
+	},
+	950: {
+		title: "Purple 950",
+		hex: "#211229"
+	}
+}, magenta = {
+	50: {
+		title: "Magenta 50",
+		hex: "#fcebf5"
+	},
+	100: {
+		title: "Magenta 100",
+		hex: "#f9d7eb"
+	},
+	200: {
+		title: "Magenta 200",
+		hex: "#f4afd8"
+	},
+	300: {
+		title: "Magenta 300",
+		hex: "#ef87c4"
+	},
+	400: {
+		title: "Magenta 400",
+		hex: "#ea5fb1"
+	},
+	500: {
+		title: "Magenta 500",
+		hex: "#e5389e"
+	},
+	600: {
+		title: "Magenta 600",
+		hex: "#ba3082"
+	},
+	700: {
+		title: "Magenta 700",
+		hex: "#8f2866"
+	},
+	800: {
+		title: "Magenta 800",
+		hex: "#65204a"
+	},
+	900: {
+		title: "Magenta 900",
+		hex: "#3a182d"
+	},
+	950: {
+		title: "Magenta 950",
+		hex: "#25141f"
+	}
+}, red = {
+	50: {
+		title: "Red 50",
+		hex: "#fdebea"
+	},
+	100: {
+		title: "Red 100",
+		hex: "#fcd8d5"
+	},
+	200: {
+		title: "Red 200",
+		hex: "#f9b1ab"
+	},
+	300: {
+		title: "Red 300",
+		hex: "#f68b82"
+	},
+	400: {
+		title: "Red 400",
+		hex: "#f36458"
+	},
+	500: {
+		title: "Red 500",
+		hex: "#f03e2f"
+	},
+	600: {
+		title: "Red 600",
+		hex: "#c33529"
+	},
+	700: {
+		title: "Red 700",
+		hex: "#962c23"
+	},
+	800: {
+		title: "Red 800",
+		hex: "#69231d"
+	},
+	900: {
+		title: "Red 900",
+		hex: "#3c1a17"
+	},
+	950: {
+		title: "Red 950",
+		hex: "#261514"
+	}
+}, orange = {
+	50: {
+		title: "Orange 50",
+		hex: "#fef0e6"
+	},
+	100: {
+		title: "Orange 100",
+		hex: "#fee2ce"
+	},
+	200: {
+		title: "Orange 200",
+		hex: "#fdc59d"
+	},
+	300: {
+		title: "Orange 300",
+		hex: "#fca86d"
+	},
+	400: {
+		title: "Orange 400",
+		hex: "#fb8b3c"
+	},
+	500: {
+		title: "Orange 500",
+		hex: "#e57322"
+	},
+	600: {
+		title: "Orange 600",
+		hex: "#ba5f1f"
+	},
+	700: {
+		title: "Orange 700",
+		hex: "#904b1b"
+	},
+	800: {
+		title: "Orange 800",
+		hex: "#653818"
+	},
+	900: {
+		title: "Orange 900",
+		hex: "#3a2415"
+	},
+	950: {
+		title: "Orange 950",
+		hex: "#251a13"
+	}
+}, yellow = {
+	50: {
+		title: "Yellow 50",
+		hex: "#fef7da"
+	},
+	100: {
+		title: "Yellow 100",
+		hex: "#fdefb6"
+	},
+	200: {
+		title: "Yellow 200",
+		hex: "#fcdf6d"
+	},
+	300: {
+		title: "Yellow 300",
+		hex: "#fbd024"
+	},
+	400: {
+		title: "Yellow 400",
+		hex: "#d9b421"
+	},
+	500: {
+		title: "Yellow 500",
+		hex: "#b7991e"
+	},
+	600: {
+		title: "Yellow 600",
+		hex: "#967e1c"
+	},
+	700: {
+		title: "Yellow 700",
+		hex: "#746219"
+	},
+	800: {
+		title: "Yellow 800",
+		hex: "#534717"
+	},
+	900: {
+		title: "Yellow 900",
+		hex: "#312c14"
+	},
+	950: {
+		title: "Yellow 950",
+		hex: "#201e13"
+	}
+}, green = {
+	50: {
+		title: "Green 50",
+		hex: "#e7f9ed"
+	},
+	100: {
+		title: "Green 100",
+		hex: "#d0f4dc"
+	},
+	200: {
+		title: "Green 200",
+		hex: "#a1eaba"
+	},
+	300: {
+		title: "Green 300",
+		hex: "#72e097"
+	},
+	400: {
+		title: "Green 400",
+		hex: "#43d675"
+	},
+	500: {
+		title: "Green 500",
+		hex: "#3ab564"
+	},
+	600: {
+		title: "Green 600",
+		hex: "#329454"
+	},
+	700: {
+		title: "Green 700",
+		hex: "#297343"
+	},
+	800: {
+		title: "Green 800",
+		hex: "#215233"
+	},
+	900: {
+		title: "Green 900",
+		hex: "#183122"
+	},
+	950: {
+		title: "Green 950",
+		hex: "#14211a"
+	}
+}, cyan = {
+	50: {
+		title: "Cyan 50",
+		hex: "#e3fafd"
+	},
+	100: {
+		title: "Cyan 100",
+		hex: "#c7f5fc"
+	},
+	200: {
+		title: "Cyan 200",
+		hex: "#90ecf9"
+	},
+	300: {
+		title: "Cyan 300",
+		hex: "#59e3f6"
+	},
+	400: {
+		title: "Cyan 400",
+		hex: "#22daf4"
+	},
+	500: {
+		title: "Cyan 500",
+		hex: "#1fb8ce"
+	},
+	600: {
+		title: "Cyan 600",
+		hex: "#1c97a8"
+	},
+	700: {
+		title: "Cyan 700",
+		hex: "#197583"
+	},
+	800: {
+		title: "Cyan 800",
+		hex: "#16545d"
+	},
+	900: {
+		title: "Cyan 900",
+		hex: "#133237"
+	},
+	950: {
+		title: "Cyan 950",
+		hex: "#112124"
+	}
+}, lightest = white.hex.toLowerCase(), darkest = black.hex.toLowerCase(), defaultHues = {
+	default: {
+		lightest,
+		darkest,
+		mid: "#8690a0",
+		midPoint: 500
+	},
+	primary: {
+		lightest,
+		darkest,
+		mid: "#2276fc",
+		midPoint: 500
+	},
+	transparent: {
+		lightest,
+		darkest,
+		mid: "#8690a0",
+		midPoint: 500
+	},
+	positive: {
+		lightest,
+		darkest,
+		mid: "#43d675",
+		midPoint: 400
+	},
+	caution: {
+		lightest,
+		darkest,
+		mid: "#fbd024",
+		midPoint: 300
+	},
+	critical: {
+		lightest,
+		darkest,
+		mid: "#f03e2f",
+		midPoint: 500
+	}
+};
+/**
+* Merges partial hues over the defaults, exactly like the hosted Themer
+* service did. When a hue's `mid` color is customized without an explicit
+* `midPoint`, the mid point resets to `500`.
+*/
+function applyHues(_hues, defaults = defaultHues) {
+	let hues = {
+		default: dropUndefined(_hues.default),
+		primary: dropUndefined(_hues.primary),
+		transparent: dropUndefined(_hues.transparent),
+		positive: dropUndefined(_hues.positive),
+		caution: dropUndefined(_hues.caution),
+		critical: dropUndefined(_hues.critical)
+	}, defaultMid = hues.default?.mid?.toLowerCase() || defaults.default.mid, primaryMid = hues.primary?.mid?.toLowerCase() || defaults.primary.mid, transparentMid = hues.transparent?.mid?.toLowerCase() || defaults.transparent.mid, positiveMid = hues.positive?.mid?.toLowerCase() || defaults.positive.mid, cautionMid = hues.caution?.mid?.toLowerCase() || defaults.caution.mid, criticalMid = hues.critical?.mid?.toLowerCase() || defaults.critical.mid;
+	return {
+		default: {
+			...defaults.default,
+			midPoint: defaultMid === defaults.default.mid ? defaults.default.midPoint : 500,
+			...hues.default,
+			mid: defaultMid
+		},
+		primary: {
+			...defaults.primary,
+			midPoint: primaryMid === defaults.primary.mid ? defaults.primary.midPoint : 500,
+			...hues.primary,
+			mid: primaryMid
+		},
+		transparent: {
+			...defaults.transparent,
+			midPoint: transparentMid === defaults.transparent.mid ? defaults.transparent.midPoint : 500,
+			...hues.transparent,
+			mid: transparentMid
+		},
+		positive: {
+			...defaults.positive,
+			midPoint: positiveMid === defaults.positive.mid ? defaults.positive.midPoint : 500,
+			...hues.positive,
+			mid: positiveMid
+		},
+		caution: {
+			...defaults.caution,
+			midPoint: cautionMid === defaults.caution.mid ? defaults.caution.midPoint : 500,
+			...hues.caution,
+			mid: cautionMid
+		},
+		critical: {
+			...defaults.critical,
+			midPoint: criticalMid === defaults.critical.mid ? defaults.critical.midPoint : 500,
+			...hues.critical,
+			mid: criticalMid
+		}
+	};
+}
+const VALID_MID_POINTS = /* @__PURE__ */ new Set([
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+]);
+/**
+* Parses hues from the query of a hosted Themer service URL, exactly like
+* `https://themer.sanity.build/api/hues` did — including its validation
+* errors.
+*/
+function parseHuesFromSearchParams(searchParams) {
+	let lightest = searchParams.has("lightest") ? assertValidColor(`#${(searchParams.get("lightest") ?? "").toLowerCase()}`) : void 0, darkest = searchParams.get("darkest") ? assertValidColor(`#${(searchParams.get("darkest") ?? "").toLowerCase()}`) : void 0;
+	return {
+		default: dropUndefined(parseHue("default", searchParams, lightest, darkest)),
+		primary: dropUndefined(parseHue("primary", searchParams, lightest, darkest)),
+		transparent: dropUndefined(parseHue("transparent", searchParams, lightest, darkest)),
+		positive: dropUndefined(parseHue("positive", searchParams, lightest, darkest)),
+		caution: dropUndefined(parseHue("caution", searchParams, lightest, darkest)),
+		critical: dropUndefined(parseHue("critical", searchParams, lightest, darkest))
+	};
+}
+function parseHue(key, searchParams, defaultLightest, defaultDarkest) {
+	if (!searchParams.has(key)) return {
+		lightest: defaultLightest,
+		darkest: defaultDarkest
+	};
+	let input = (searchParams.get(key) ?? "").toLowerCase(), mid, midPoint, lightest, darkest, params = input.split(";");
+	if (params.length > 4) throw TypeError(`Invalid number of params for the ${key} hue, it should be 4 or less instead it's ${params.length}: ${JSON.stringify(params)}`);
+	for (let param of params) {
+		let maybeMid = `#${param}`, maybeMidPoint = roundMidPoint(Number(param));
+		switch (!0) {
+			case param === "": break;
+			case require_mix.t(maybeMid) && !mid:
+				mid = maybeMid;
+				break;
+			case !Number.isNaN(maybeMidPoint) && !midPoint:
+				midPoint = assertValidMidPoint(maybeMidPoint);
+				break;
+			case param.startsWith("lightest:") && !lightest:
+				lightest = assertValidColor(`#${param.replace(/^lightest:/, "")}`);
+				break;
+			case param.startsWith("darkest:") && !darkest:
+				darkest = assertValidColor(`#${param.replace(/^darkest:/, "")}`);
+				break;
+			case require_mix.t(maybeMid):
+				throwDuplicate(key, mid?.replace(/^#/, ""), param, input);
+				break;
+			case !Number.isNaN(maybeMidPoint):
+				throwDuplicate(key, midPoint, maybeMidPoint, input);
+				break;
+			case param.startsWith("lightest:"):
+				throwDuplicate(key, lightest?.replace(/^#/, "lightest:"), param, input);
+				break;
+			case param.startsWith("darkest:"):
+				throwDuplicate(key, darkest?.replace(/^#/, "darkest:"), param, input);
+				break;
+			default: throw TypeError(`Invalid param for the ${key} hue: ${param}`);
+		}
+	}
+	return {
+		mid,
+		midPoint,
+		lightest: lightest ?? defaultLightest,
+		darkest: darkest ?? defaultDarkest
+	};
+}
+function roundMidPoint(value) {
+	return value < 75 ? 50 : value > 925 ? 950 : Math.round(value / 100) * 100;
+}
+function throwDuplicate(key, a, b, input) {
+	throw TypeError(`Duplicate params detected. Remove at least ${a === b ? `one of the ${JSON.stringify(String(a))}` : `${JSON.stringify(String(a))} or ${JSON.stringify(String(b))}`} from the ${key} hue: ${JSON.stringify(input)}`);
+}
+function assertValidColor(input) {
+	if (require_mix.t(input)) return input;
+	throw TypeError(`Invalid color: ${input}`);
+}
+function assertValidMidPoint(input) {
+	if (isMidPoint(input)) return input;
+	throw TypeError(`Invalid midPoint: ${input}`);
+}
+function isMidPoint(input) {
+	return VALID_MID_POINTS.has(input);
+}
+function definePreset(slug, title, searchParams) {
+	return {
+		slug,
+		title,
+		searchParams,
+		hues: applyHues(parseHuesFromSearchParams(new URLSearchParams(searchParams)))
+	};
+}
+const defaultPreset = definePreset("default", "Studio v3", "lightest=fff&darkest=101112&default=8690a0;500&primary=2276fc;500&transparent=8690a0;500&positive=43d675;400&caution=fbd024;300&critical=f03e2f;500"), presets = [
+	defaultPreset,
+	definePreset("dew", "Dew", "default=5e63b4;600;lightest:fcfcfd;darkest:0d0d15&primary=d1a308;400;lightest:fcfcfd;darkest:0d0d15&transparent=6c6fa7;500;lightest:fcfcfd;darkest:0d0d15&positive=43D675;300;lightest:fcfcfd;darkest:0d0d15&caution=fb9f24;400;lightest:fcfcfd;darkest:0d0d15&critical=F03E2F;500;lightest:fcfcfd;darkest:0d0d15"),
+	definePreset("pink-synth", "Pink Synth", "lightest=f7f2f5&darkest=171721&default=8b6584&primary=ec4899&transparent=503a4c&positive=10b981&caution=fde047;300&critical=fe3459"),
+	definePreset("pixel-art", "Pixel Art", "default=57619c;600&primary=f10784&transparent=5b6498;600&positive=43d675;300&caution=fbd024;200&lightest=fcfcfd&darkest=0d0e15"),
+	definePreset("retro-colonial", "Retro Colonial", "default=8bb9b5;400&primary=fa7a78;400&transparent=8bb9b5;400&positive=43d675;300&caution=fbd024;200&critical=f02f53&lightest=fcfdfd&darkest=0d1515"),
+	definePreset("rosabel", "Rosabel", "default=9d8966&primary=ed2555;700&transparent=9d8966&positive=43d675;300&caution=fbd024;200&lightest=fdfdfc&darkest=15120d"),
+	definePreset("stereofidelic", "Stereofidelic", "default=678e9a&primary=f13009&transparent=678e9a&positive=43d675;300&caution=fbd024;200&critical=f02f35&lightest=fcfdfd&darkest=0e1315"),
+	definePreset("tw-cyan", "Tailwind Cyan", "default=677389;500;lightest:f9fafb;darkest:101728&primary=51b4d0;500;lightest:effefe;darkest:264d61&transparent=6b727f;500;lightest:f8fafb;darkest:131826&positive=55b785;500;lightest:eefdf5;darkest:214d3b&caution=e2b53e;500;lightest:fefbea;darkest:69411b&critical=e14f62;500;lightest:fdf2f2;darkest:7d2037"),
+	definePreset("verdant", "Verdant", "default=5c9199;500;lightest:fcfdfd;darkest:0d1415&primary=1cb485;400;lightest:fcfdfd;darkest:0d1415&transparent=5c9199;500;lightest:fcfdfd;darkest:0d1415&positive=43D675;300;lightest:fcfdfd;darkest:0d1415&caution=FBD024;200;lightest:fcfdfd;darkest:0d1415&critical=F03E2F;500;lightest:fcfdfd;darkest:0d1415")
+];
+/**
+* Finds a preset by its slug, falling back to the default Studio preset for
+* unknown slugs — the same behavior as the hosted Themer service.
+*
+* @public
+*/
+function getPreset(slug) {
+	let needle = slug?.toLowerCase();
+	return presets.find((preset) => preset.slug === needle) || defaultPreset;
+}
+/**
+* Generates the tint ramp for each of the six hues, exactly like the hosted
+* Themer service did.
+*/
+function createTonesFromHues(hues) {
+	return {
+		default: createTintsFromHue(hues.default, "Default"),
+		primary: createTintsFromHue(hues.primary, "Primary"),
+		transparent: createTintsFromHue(hues.transparent, "Transparent"),
+		positive: createTintsFromHue(hues.positive, "Positive"),
+		caution: createTintsFromHue(hues.caution, "Caution"),
+		critical: createTintsFromHue(hues.critical, "Critical")
+	};
+}
+function createTintsFromHue(hue, title) {
+	return _sanity_color.COLOR_TINTS.reduce((tints, tint) => (tints[tint] = {
+		title: `${title} ${tint}`,
+		hex: getColorHex(hue, tint)
+	}, tints), {});
+}
+function getColorHex(hue, tint) {
+	let tintNum = Number(tint), midPoint = hue.midPoint, darkSize = 1e3 - midPoint, lightPosition = tintNum / midPoint, darkPosition = (tintNum - midPoint) / darkSize;
+	return tintNum === midPoint ? hue.mid.toLowerCase() : tintNum < midPoint ? require_mix.n(lightPosition, hue.mid, hue.lightest) : require_mix.n(darkPosition, hue.darkest, hue.mid);
+}
+const NEUTRAL_TONES = /* @__PURE__ */ new Set(["default", "transparent"]), SPOT_TINTS = {
+	blue,
+	cyan,
+	gray,
+	green,
+	magenta,
+	orange,
+	purple,
+	red,
+	yellow
+};
+function getTint(key) {
+	let tints = SPOT_TINTS[key];
+	if (!tints) throw Error(`Unknown tint: ${key}`);
+	return tints;
+}
+const studioTheme = (0, _sanity_ui_theme.buildTheme)();
+/**
+* Generates a Studio theme from hues, producing the exact same colors as the
+* hosted Themer service (themer.sanity.build). This is a port of its
+* `themeFromHues` implementation:
+* https://github.com/sanity-io/themer/blob/main/apps/v1/utils/themeFromHues.ts
+*/
+function themeFromHues(partialHues) {
+	function multiply(bg, fg) {
+		return (0, _sanity_ui_theme.rgbToHex)((0, _sanity_ui_theme.multiply)((0, _sanity_ui_theme.parseColor)(bg), (0, _sanity_ui_theme.parseColor)(fg)));
+	}
+	function screen(bg, fg) {
+		return (0, _sanity_ui_theme.rgbToHex)((0, _sanity_ui_theme.screen)((0, _sanity_ui_theme.parseColor)(bg), (0, _sanity_ui_theme.parseColor)(fg)));
+	}
+	let hues = applyHues(partialHues), black = {
+		title: "Black",
+		hex: hues.default.darkest
+	}, white = {
+		title: "white",
+		hex: hues.default.lightest
+	}, tones = createTonesFromHues(hues), focusRingHue = tones.primary, accentHue = tones.critical, linkHue = tones.primary, color = (0, _sanity_ui_theme.createColorTheme)({
+		base: ({ dark, name }) => {
+			if (name === "default") {
+				let skeletonFrom = dark ? tones.transparent[900].hex : tones.transparent[100].hex;
+				return {
+					fg: dark ? white.hex : black.hex,
+					bg: dark ? black.hex : white.hex,
+					border: tones.transparent[dark ? 800 : 200].hex,
+					focusRing: focusRingHue[500].hex,
+					shadow: {
+						outline: (0, _sanity_ui_theme.rgba)(tones.transparent[500].hex, .4),
+						umbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tones.transparent[500].hex, .2),
+						penumbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tones.transparent[500].hex, .14),
+						ambient: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tones.transparent[500].hex, .12)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (name === "transparent") {
+				let tints = tones.default, skeletonFrom = tints[dark ? 800 : 200].hex;
+				return {
+					fg: tints[dark ? 100 : 900].hex,
+					bg: tints[dark ? 950 : 50].hex,
+					border: tints[dark ? 800 : 300].hex,
+					focusRing: focusRingHue[500].hex,
+					shadow: {
+						outline: (0, _sanity_ui_theme.rgba)(tints[500].hex, dark ? .2 : .4),
+						umbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .2),
+						penumbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .14),
+						ambient: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .12)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			let tints = tones[name] || tones.default, skeletonFrom = tints[dark ? 800 : 200].hex;
+			return {
+				fg: tints[dark ? 100 : 900].hex,
+				bg: tints[dark ? 950 : 50].hex,
+				border: tints[dark ? 800 : 200].hex,
+				focusRing: tints[500].hex,
+				shadow: {
+					outline: (0, _sanity_ui_theme.rgba)(tints[500].hex, dark ? .2 : .4),
+					umbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .2),
+					penumbra: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .14),
+					ambient: (0, _sanity_ui_theme.rgba)(dark ? black.hex : tints[500].hex, .12)
+				},
+				skeleton: {
+					from: skeletonFrom,
+					to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+				}
+			};
+		},
+		solid: ({ base, dark, name, state, tone }) => {
+			let mix = dark ? screen : multiply, mix2 = dark ? multiply : screen, defaultTints = tones[name] || tones.default, isNeutral = NEUTRAL_TONES.has(name) && NEUTRAL_TONES.has(tone), tints = tones[tone === "default" ? name : tone] || defaultTints;
+			if (state === "disabled") {
+				tints = defaultTints;
+				let bg = mix(base.bg, tints[dark ? 800 : 200].hex), skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
+				return {
+					bg,
+					bg2: mix2(bg, tints[dark ? 50 : 950].hex),
+					border: mix(base.bg, tints[dark ? 800 : 200].hex),
+					fg: mix(base.bg, dark ? black.hex : white.hex),
+					icon: mix(base.bg, dark ? black.hex : white.hex),
+					muted: { fg: mix(base.bg, tints[dark ? 950 : 50].hex) },
+					accent: { fg: mix(base.bg, tints[dark ? 950 : 50].hex) },
+					link: { fg: mix(base.bg, tints[dark ? 950 : 50].hex) },
+					code: {
+						bg,
+						fg: mix(base.bg, tints[dark ? 950 : 50].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (state === "hovered") {
+				let bg = mix(base.bg, tints[dark ? 300 : 600].hex), skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
+				return {
+					bg,
+					bg2: mix2(bg, tints[dark ? 50 : 950].hex),
+					border: mix(base.bg, tints[dark ? 300 : 600].hex),
+					fg: mix(base.bg, dark ? black.hex : white.hex),
+					icon: mix(base.bg, dark ? black.hex : white.hex),
+					muted: { fg: mix(base.bg, tints[dark ? 800 : 200].hex) },
+					accent: { fg: mix2(bg, accentHue[dark ? 800 : 200].hex) },
+					link: { fg: mix2(bg, linkHue[dark ? 800 : 200].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 800 : 200].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (state === "pressed") {
+				let bg = mix(base.bg, tints[dark ? 200 : 800].hex), skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
+				return {
+					bg: mix(base.bg, tints[dark ? 200 : 800].hex),
+					bg2: mix2(bg, tints[dark ? 50 : 950].hex),
+					border: mix(base.bg, tints[dark ? 200 : 800].hex),
+					fg: mix(base.bg, dark ? black.hex : white.hex),
+					icon: mix(base.bg, dark ? black.hex : white.hex),
+					muted: { fg: mix(base.bg, tints[dark ? 800 : 200].hex) },
+					accent: { fg: mix2(bg, accentHue[dark ? 800 : 200].hex) },
+					link: { fg: mix2(bg, linkHue[dark ? 800 : 200].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 800 : 200].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (state === "selected") {
+				isNeutral && (tints = tones.primary);
+				let bg = mix(base.bg, tints[dark ? 200 : 800].hex), skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
+				return {
+					bg,
+					bg2: mix2(bg, tints[dark ? 50 : 950].hex),
+					border: mix(base.bg, tints[dark ? 200 : 800].hex),
+					fg: mix(base.bg, dark ? black.hex : white.hex),
+					icon: mix(base.bg, dark ? black.hex : white.hex),
+					muted: { fg: mix(base.bg, tints[dark ? 800 : 200].hex) },
+					accent: { fg: mix2(bg, accentHue[dark ? 800 : 200].hex) },
+					link: { fg: mix2(bg, linkHue[dark ? 800 : 200].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 800 : 200].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			let bg = mix(base.bg, tints[dark ? 400 : 500].hex), skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
+			return {
+				bg,
+				bg2: mix2(bg, tints[dark ? 50 : 950].hex),
+				border: mix(base.bg, tints[dark ? 400 : 500].hex),
+				fg: mix(base.bg, dark ? black.hex : white.hex),
+				icon: mix(base.bg, dark ? black.hex : white.hex),
+				muted: { fg: mix(base.bg, tints[dark ? 900 : 100].hex) },
+				accent: { fg: mix2(bg, accentHue[dark ? 900 : 100].hex) },
+				link: { fg: mix2(bg, linkHue[dark ? 900 : 100].hex) },
+				code: {
+					bg: mix(bg, tints[dark ? 950 : 50].hex),
+					fg: mix(base.bg, tints[dark ? 900 : 100].hex)
+				},
+				skeleton: {
+					from: skeletonFrom,
+					to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+				}
+			};
+		},
+		muted: ({ base, dark, name, state, tone }) => {
+			let mix = dark ? screen : multiply, defaultTints = tones[name] || tones.default, isNeutral = NEUTRAL_TONES.has(name) && NEUTRAL_TONES.has(tone), tints = tones[tone === "default" ? name : tone] || defaultTints;
+			if (state === "disabled") {
+				tints = defaultTints;
+				let bg = base.bg, skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
+				return {
+					bg,
+					bg2: mix(bg, tints[dark ? 950 : 50].hex),
+					border: mix(bg, tints[dark ? 950 : 50].hex),
+					fg: mix(bg, tints[dark ? 800 : 200].hex),
+					icon: mix(bg, tints[dark ? 800 : 200].hex),
+					muted: { fg: mix(bg, tints[dark ? 900 : 100].hex) },
+					accent: { fg: mix(bg, tints[dark ? 900 : 100].hex) },
+					link: { fg: mix(bg, tints[dark ? 900 : 100].hex) },
+					code: {
+						bg,
+						fg: mix(bg, tints[dark ? 900 : 100].hex)
+					},
+					skeleton: {
+						from: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5),
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .25)
+					}
+				};
+			}
+			if (state === "hovered") {
+				isNeutral && (tints = tones.primary);
+				let bg = mix(base.bg, tints[dark ? 950 : 50].hex), skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
+				return {
+					bg,
+					bg2: mix(bg, tints[dark ? 950 : 50].hex),
+					border: mix(bg, tints[dark ? 900 : 100].hex),
+					fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+					icon: mix(base.bg, tints[dark ? 200 : 800].hex),
+					muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
+					accent: { fg: mix(base.bg, linkHue[dark ? 400 : 500].hex) },
+					link: { fg: mix(base.bg, linkHue[dark ? 400 : 600].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (state === "pressed") {
+				isNeutral && (tints = tones.primary);
+				let bg = mix(base.bg, tints[dark ? 900 : 100].hex), skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
+				return {
+					bg,
+					bg2: mix(bg, tints[dark ? 950 : 50].hex),
+					border: mix(bg, tints[dark ? 900 : 100].hex),
+					fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+					icon: mix(base.bg, tints[dark ? 200 : 800].hex),
+					muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
+					accent: { fg: mix(bg, accentHue[dark ? 400 : 500].hex) },
+					link: { fg: mix(bg, linkHue[dark ? 400 : 600].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			if (state === "selected") {
+				isNeutral && (tints = tones.primary);
+				let bg = mix(base.bg, tints[dark ? 900 : 100].hex), skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
+				return {
+					bg,
+					bg2: mix(bg, tints[dark ? 950 : 50].hex),
+					border: mix(bg, tints[dark ? 900 : 100].hex),
+					fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+					icon: mix(base.bg, tints[dark ? 200 : 800].hex),
+					muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
+					accent: { fg: mix(bg, accentHue[dark ? 400 : 500].hex) },
+					link: { fg: mix(bg, linkHue[dark ? 400 : 600].hex) },
+					code: {
+						bg: mix(bg, tints[dark ? 950 : 50].hex),
+						fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+					},
+					skeleton: {
+						from: skeletonFrom,
+						to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+					}
+				};
+			}
+			let bg = base.bg, skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
+			return {
+				bg,
+				bg2: mix(bg, tints[dark ? 950 : 50].hex),
+				border: mix(bg, tints[dark ? 900 : 100].hex),
+				fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+				icon: mix(base.bg, tints[dark ? 300 : 700].hex),
+				muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
+				accent: { fg: mix(base.bg, accentHue[dark ? 400 : 500].hex) },
+				link: { fg: mix(base.bg, linkHue[dark ? 400 : 600].hex) },
+				code: {
+					bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+					fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+				},
+				skeleton: {
+					from: skeletonFrom,
+					to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+				}
+			};
+		},
+		button: ({ base, mode, muted, solid }) => mode === "bleed" ? {
+			enabled: {
+				...muted.enabled,
+				border: muted.enabled.bg
+			},
+			hovered: {
+				...muted.hovered,
+				border: muted.hovered.bg
+			},
+			pressed: {
+				...muted.pressed,
+				border: muted.pressed.bg
+			},
+			selected: {
+				...muted.selected,
+				border: muted.selected.bg
+			},
+			disabled: {
+				...muted.disabled,
+				border: muted.disabled.bg
+			}
+		} : mode === "ghost" ? {
+			...solid,
+			enabled: {
+				...muted.enabled,
+				border: base.border
+			},
+			disabled: muted.disabled
+		} : solid,
+		card: ({ base, dark, muted, name, solid, state }) => {
+			if (state === "hovered") return muted[name].hovered;
+			if (state === "disabled") return muted[name].disabled;
+			let isNeutral = NEUTRAL_TONES.has(name), tints = tones[name] || tones.default, mix = dark ? screen : multiply;
+			if (state === "pressed") return isNeutral ? muted.primary.pressed : muted[name].pressed;
+			if (state === "selected") return isNeutral ? solid.primary.enabled : solid[name].enabled;
+			let bg = base.bg, skeletonFrom = mix(base.bg, tints[dark ? 900 : 100].hex);
+			return {
+				bg,
+				bg2: mix(bg, tints[dark ? 950 : 50].hex),
+				fg: base.fg,
+				icon: base.fg,
+				border: base.border,
+				muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
+				accent: { fg: mix(base.bg, red[dark ? 400 : 500].hex) },
+				link: { fg: mix(base.bg, blue[dark ? 400 : 600].hex) },
+				code: {
+					bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+					fg: tints[dark ? 400 : 600].hex
+				},
+				skeleton: {
+					from: skeletonFrom,
+					to: (0, _sanity_ui_theme.rgba)(skeletonFrom, .5)
+				}
+			};
+		},
+		input: ({ base, dark, mode, state }) => {
+			let mix = dark ? screen : multiply;
+			if (mode === "invalid") {
+				let tints = tones.critical;
+				return {
+					bg: mix(base.bg, tints[dark ? 950 : 50].hex),
+					bg2: mix(base.bg, tints[dark ? 800 : 200].hex),
+					fg: mix(base.bg, tints[dark ? 400 : 600].hex),
+					border: mix(base.bg, tints[dark ? 800 : 200].hex),
+					placeholder: mix(base.bg, tints[dark ? 600 : 400].hex)
+				};
+			}
+			return state === "hovered" ? {
+				bg: base.bg,
+				bg2: mix(base.bg, gray[dark ? 700 : 300].hex),
+				fg: base.fg,
+				border: mix(base.bg, gray[dark ? 700 : 300].hex),
+				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+			} : state === "disabled" ? {
+				bg: mix(base.bg, gray[dark ? 950 : 50].hex),
+				bg2: mix(base.bg, gray[dark ? 900 : 100].hex),
+				fg: mix(base.bg, gray[dark ? 700 : 300].hex),
+				border: mix(base.bg, gray[dark ? 900 : 100].hex),
+				placeholder: mix(base.bg, gray[dark ? 800 : 200].hex)
+			} : state === "readOnly" ? {
+				bg: mix(base.bg, gray[dark ? 950 : 50].hex),
+				bg2: mix(base.bg, gray[dark ? 800 : 200].hex),
+				fg: mix(base.bg, gray[dark ? 200 : 800].hex),
+				border: mix(base.bg, gray[dark ? 800 : 200].hex),
+				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+			} : {
+				bg: base.bg,
+				bg2: base.border,
+				fg: base.fg,
+				border: base.border,
+				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+			};
+		},
+		selectable: ({ base, muted, tone, solid, state }) => state === "enabled" ? {
+			...muted[tone].enabled,
+			bg: base.bg
+		} : state === "pressed" ? tone === "default" ? muted.primary.pressed : muted[tone].pressed : state === "selected" ? tone === "default" ? solid.primary.enabled : solid[tone].enabled : state === "disabled" ? {
+			...muted[tone].disabled,
+			bg: base.bg
+		} : muted[tone][state],
+		spot: ({ base, dark, key }) => (dark ? screen : multiply)(base.bg, getTint(key)[dark ? 400 : 500].hex),
+		syntax: ({ base, dark }) => {
+			let mix = dark ? screen : multiply, mainShade = dark ? 400 : 600, secondaryShade = dark ? 600 : 400;
+			return {
+				atrule: mix(base.bg, purple[mainShade].hex),
+				attrName: mix(base.bg, green[mainShade].hex),
+				attrValue: mix(base.bg, yellow[mainShade].hex),
+				attribute: mix(base.bg, yellow[mainShade].hex),
+				boolean: mix(base.bg, purple[mainShade].hex),
+				builtin: mix(base.bg, purple[mainShade].hex),
+				cdata: mix(base.bg, yellow[mainShade].hex),
+				char: mix(base.bg, yellow[mainShade].hex),
+				class: mix(base.bg, orange[mainShade].hex),
+				className: mix(base.bg, cyan[mainShade].hex),
+				comment: mix(base.bg, gray[secondaryShade].hex),
+				constant: mix(base.bg, purple[mainShade].hex),
+				deleted: mix(base.bg, red[mainShade].hex),
+				doctype: mix(base.bg, gray[secondaryShade].hex),
+				entity: mix(base.bg, red[mainShade].hex),
+				function: mix(base.bg, green[mainShade].hex),
+				hexcode: mix(base.bg, blue[mainShade].hex),
+				id: mix(base.bg, purple[mainShade].hex),
+				important: mix(base.bg, purple[mainShade].hex),
+				inserted: mix(base.bg, yellow[mainShade].hex),
+				keyword: mix(base.bg, magenta[mainShade].hex),
+				number: mix(base.bg, purple[mainShade].hex),
+				operator: mix(base.bg, magenta[mainShade].hex),
+				prolog: mix(base.bg, gray[secondaryShade].hex),
+				property: mix(base.bg, blue[mainShade].hex),
+				pseudoClass: mix(base.bg, yellow[mainShade].hex),
+				pseudoElement: mix(base.bg, yellow[mainShade].hex),
+				punctuation: mix(base.bg, gray[mainShade].hex),
+				regex: mix(base.bg, blue[mainShade].hex),
+				selector: mix(base.bg, red[mainShade].hex),
+				string: mix(base.bg, yellow[mainShade].hex),
+				symbol: mix(base.bg, purple[mainShade].hex),
+				tag: mix(base.bg, red[mainShade].hex),
+				unit: mix(base.bg, orange[mainShade].hex),
+				url: mix(base.bg, red[mainShade].hex),
+				variable: mix(base.bg, red[mainShade].hex)
+			};
+		}
+	});
+	return {
+		...studioTheme,
+		color,
+		__themer: !0,
+		v2: void 0
+	};
+}
+/**
+* Generates a Studio theme from hues, producing the same colors as importing
+* the theme from the hosted Themer service (themer.sanity.build):
+*
+* ```ts
+* import {createTheme, hues} from '@sanity/themer/legacy'
+* import {defineConfig} from 'sanity'
+*
+* export default defineConfig({
+*   theme: createTheme({...hues, primary: {...hues.primary, mid: '#22fca8'}}),
+*   // ...rest of the config
+* })
+* ```
+*
+* @public
+*/
+function createTheme(hues = {}) {
+	return themeFromHues(hues);
+}
+/**
+* Parses the hues encoded in a hosted Themer service URL, returning the exact
+* hues that `https://themer.sanity.build/api/hues` served for that query —
+* presets and overrides included.
+*
+* ```ts
+* import {createTheme, parseHuesFromUrl} from '@sanity/themer/legacy'
+*
+* const hues = parseHuesFromUrl(
+*   'https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8',
+* )
+* const theme = createTheme(hues)
+* ```
+*
+* @public
+*/
+function parseHuesFromUrl(url) {
+	let { searchParams } = new URL(url, "https://themer.sanity.build/api/hues"), preset = getPreset(searchParams.get("preset"));
+	return applyHues(parseHuesFromSearchParams(searchParams), preset.hues);
+}
+/**
+* The one-line replacement for a theme imported from the hosted Themer
+* service — pass the URL that used to be imported:
+*
+* ```ts
+* // Before:
+* // import {theme} from 'https://themer.sanity.build/api/hues?preset=verdant'
+*
+* // After:
+* import {createThemeFromUrl} from '@sanity/themer/legacy'
+*
+* const theme = createThemeFromUrl(
+*   'https://themer.sanity.build/api/hues?preset=verdant',
+* )
+* ```
+*
+* @public
+*/
+function createThemeFromUrl(url) {
+	return createTheme(parseHuesFromUrl(url));
+}
+/**
+* The hues of the default Studio theme — the same `hues` export that
+* `https://themer.sanity.build/api/hues` served without any parameters.
+*
+* @public
+*/
+const hues = applyHues({}), theme = createTheme(hues);
+exports.createTheme = createTheme, exports.createThemeFromUrl = createThemeFromUrl, exports.getPreset = getPreset, exports.hues = hues, exports.parseHuesFromUrl = parseHuesFromUrl, exports.presets = presets, exports.theme = theme;
+
+//# sourceMappingURL=legacy.cjs.map