@sanity/themer 0.3.15 → 0.3.16

package/dist/legacy.js

@@ -1,1211 +1,11 @@
-import { n as mix, t as isColor } from "./mix-BfV6_Ke4.js";
-import { buildTheme, createColorTheme, multiply, parseColor, rgbToHex, rgba, screen } from "@sanity/ui/theme";
+import * as themerLegacy from "@sanity/themer-legacy";
 /**
-* 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 isColor(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 isColor(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 (isColor(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 behavior of the hosted Themer service's `?preset`
-* param, which `parseHuesFromUrl` exposes.
-*
-* @internal
-*/
-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) {
-	let createTint = (tint) => ({
-		title: `${title} ${tint}`,
-		hex: getColorHex(hue, tint)
-	});
-	return {
-		50: createTint("50"),
-		100: createTint("100"),
-		200: createTint("200"),
-		300: createTint("300"),
-		400: createTint("400"),
-		500: createTint("500"),
-		600: createTint("600"),
-		700: createTint("700"),
-		800: createTint("800"),
-		900: createTint("900"),
-		950: createTint("950")
-	};
-}
-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 ? mix(lightPosition, hue.mid, hue.lightest) : mix(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 defaultTheme = 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$1(bg, fg) {
-		return rgbToHex(multiply(parseColor(bg), parseColor(fg)));
-	}
-	function screen$1(bg, fg) {
-		return rgbToHex(screen(parseColor(bg), 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 = 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: rgba(tones.transparent[500].hex, .4),
-						umbra: rgba(dark ? black.hex : tones.transparent[500].hex, .2),
-						penumbra: rgba(dark ? black.hex : tones.transparent[500].hex, .14),
-						ambient: rgba(dark ? black.hex : tones.transparent[500].hex, .12)
-					},
-					skeleton: {
-						from: skeletonFrom,
-						to: 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: rgba(tints[500].hex, dark ? .2 : .4),
-						umbra: rgba(dark ? black.hex : tints[500].hex, .2),
-						penumbra: rgba(dark ? black.hex : tints[500].hex, .14),
-						ambient: rgba(dark ? black.hex : tints[500].hex, .12)
-					},
-					skeleton: {
-						from: skeletonFrom,
-						to: 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: rgba(tints[500].hex, dark ? .2 : .4),
-					umbra: rgba(dark ? black.hex : tints[500].hex, .2),
-					penumbra: rgba(dark ? black.hex : tints[500].hex, .14),
-					ambient: rgba(dark ? black.hex : tints[500].hex, .12)
-				},
-				skeleton: {
-					from: skeletonFrom,
-					to: rgba(skeletonFrom, .5)
-				}
-			};
-		},
-		solid: ({ base, dark, name, state, tone }) => {
-			let mix = dark ? screen$1 : multiply$1, mix2 = dark ? multiply$1 : screen$1, 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: 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: 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: 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: 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: rgba(skeletonFrom, .5)
-				}
-			};
-		},
-		muted: ({ base, dark, name, state, tone }) => {
-			let mix = dark ? screen$1 : multiply$1, 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: rgba(skeletonFrom, .5),
-						to: 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: 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: 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: 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: 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$1 : multiply$1;
-			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: rgba(skeletonFrom, .5)
-				}
-			};
-		},
-		input: ({ base, dark, mode, state }) => {
-			let mix = dark ? screen$1 : multiply$1;
-			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$1 : multiply$1)(base.bg, getTint(key)[dark ? 400 : 500].hex),
-		syntax: ({ base, dark }) => {
-			let mix = dark ? screen$1 : multiply$1, 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 {
-		...defaultTheme,
-		color,
-		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 {buildThemeFromUrl} from '@sanity/themer/legacy'
-*
-* const theme = buildThemeFromUrl(
-*   'https://themer.sanity.build/api/hues?preset=verdant',
-* )
-* ```
-*
-* @public
-*/
-function buildThemeFromUrl(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.
-*
+* @deprecated Import `buildThemeFromUrl` from `@sanity/themer-legacy` instead.
+* `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+* in `@sanity/themer@1.0`.
 * @public
 */
-const hues = applyHues({}), theme = createTheme(hues);
+const buildThemeFromUrl = themerLegacy.buildThemeFromUrl, createTheme = themerLegacy.createTheme, parseHuesFromUrl = themerLegacy.parseHuesFromUrl, hues = themerLegacy.hues, theme = themerLegacy.theme, presets = themerLegacy.presets;
 export { buildThemeFromUrl, createTheme, hues, parseHuesFromUrl, presets, theme };
 
 //# sourceMappingURL=legacy.js.map