@sanity/themer 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @sanity/themer
+
+Generate [Sanity Studio](https://www.sanity.io/studio) themes, and preview them with a Studio tool.
+
+This package is the npm migration path off the hosted Themer service ([themer.sanity.build](https://themer.sanity.build)) — the generators run locally, so Studio configs no longer need to import modules from a hosted URL.
+
+```sh
+npm install @sanity/themer
+```
+
+## Usage
+
+Generate a theme from a handful of colors:
+
+```ts
+// sanity.config.ts
+import {createTheme} from '@sanity/themer'
+import {defineConfig} from 'sanity'
+
+export default defineConfig({
+  theme: createTheme({primary: '#2276fc'}),
+  // ...rest of the config
+})
+```
+
+Every color is optional — omitted colors keep their default Sanity ramps:
+
+| Color      | Drives                                  |
+| ---------- | --------------------------------------- |
+| `primary`  | Buttons, focus rings, links, selections |
+| `gray`     | Neutral surfaces, borders and text      |
+| `positive` | Success accents                         |
+| `caution`  | Warning accents                         |
+| `critical` | Errors and destructive actions          |
+| `lightest` | Light mode background                   |
+| `darkest`  | Dark mode background                    |
+
+Preset themes are available from the `presets` export:
+
+```ts
+import {createTheme, presets} from '@sanity/themer'
+
+const verdant = presets.find((preset) => preset.slug === 'verdant')
+const theme = createTheme(verdant.colors)
+```
+
+For customization beyond colors, `themeConfigFromColors` maps colors to a [`@sanity/ui`](https://github.com/sanity-io/ui) `ThemeConfig` to pass to `buildTheme`:
+
+```ts
+import {themeConfigFromColors} from '@sanity/themer'
+import {buildTheme} from '@sanity/ui/theme'
+
+const theme = buildTheme({
+  ...themeConfigFromColors({primary: '#2276fc'}),
+  // ...other ThemeConfig properties
+})
+```
+
+## The Studio tool
+
+The `themerTool` plugin previews generated themes live on your own Studio:
+
+```ts
+// sanity.config.ts
+import {themerTool} from '@sanity/themer/tool'
+import {defineConfig} from 'sanity'
+
+export default defineConfig({
+  plugins: [themerTool()],
+  // ...rest of the config
+})
+```
+
+A color wheel toggle in the navbar opens the themer sidebar next to the active tool, so you can browse around the Studio while tweaking presets and colors. Toggle between light and dark mode with the regular appearance menu — the preview follows it. When the theme looks right, copy the generated `createTheme` snippet into the Studio config.
+
+If the Studio is already themed, pass the same colors to the plugin so the sidebar starts editing from them:
+
+```ts
+import {createTheme} from '@sanity/themer'
+import {themerTool} from '@sanity/themer/tool'
+import {defineConfig} from 'sanity'
+
+const colors = {primary: '#2276fc'}
+
+export default defineConfig({
+  theme: createTheme(colors),
+  plugins: [themerTool({colors})],
+})
+```
+
+## Migrating from themer.sanity.build
+
+`@sanity/themer/legacy` generates the exact same colors as the hosted service, with the same `createTheme`, `hues` and `theme` exports that `https://themer.sanity.build/api/hues` served. Replace the URL import with `createThemeFromUrl` and the URL as a string:
+
+```ts
+// Before:
+import {theme} from 'https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8'
+
+// After:
+import {createThemeFromUrl} from '@sanity/themer/legacy'
+
+const theme = createThemeFromUrl(
+  'https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8',
+)
+```
+
+Configs that used `createTheme` and `hues` from the URL import work the same way with `parseHuesFromUrl`:
+
+```ts
+// Before:
+// import {createTheme, hues} from 'https://themer.sanity.build/api/hues?preset=verdant'
+
+// After:
+import {createTheme, parseHuesFromUrl} from '@sanity/themer/legacy'
+
+const hues = parseHuesFromUrl('https://themer.sanity.build/api/hues?preset=verdant')
+
+export default defineConfig({
+  theme: createTheme({...hues, primary: {...hues.primary, mid: '#22fca8'}}),
+  // ...rest of the config
+})
+```
+
+The hosted presets are also available directly:
+
+```ts
+import {createTheme, getPreset} from '@sanity/themer/legacy'
+
+const theme = createTheme(getPreset('verdant').hues)
+```
+
+Once migrated, remove any `themer.d.ts` module declarations and `urlImports` config that the URL imports needed.
+
+The legacy API is frozen — it exists to make leaving the hosted service painless. New themes should use `createTheme` from the `@sanity/themer` root export instead.
+
+## License
+
+MIT © Sanity.io — see [LICENSE](https://github.com/sanity-io/ui/blob/main/LICENSE)

package/dist/_chunks/mix.cjs

@@ -0,0 +1,52 @@
+/**
+* Color mixing that is byte-for-byte compatible with the `mix` function from
+* `polished`, which the hosted Themer service (themer.sanity.build) used to
+* interpolate hue tints. Only opaque hex colors are supported, which is all
+* the theme generators ever pass.
+*
+* @internal
+*/
+function mix(weight, color, otherColor) {
+	if (weight === 0) return otherColor;
+	let [r1, g1, b1] = hexToRgb(color), [r2, g2, b2] = hexToRgb(otherColor), w2 = 1 - weight;
+	return reduceHex(`#${channelToHex(Math.floor(r1 * weight + r2 * w2))}${channelToHex(Math.floor(g1 * weight + g2 * w2))}${channelToHex(Math.floor(b1 * weight + b2 * w2))}`);
+}
+/**
+* Matches `#abc` and `#aabbcc` hex colors (the only formats the theme
+* generators accept), same as the hosted Themer service did.
+*
+* @internal
+*/
+function isColor(input) {
+	return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input);
+}
+function hexToRgb(color) {
+	if (!isColor(color)) throw TypeError(`Invalid color: ${JSON.stringify(color)} — expected a hex color`);
+	let hex = color.length === 4 ? `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color.slice(1);
+	return [
+		parseInt(hex.slice(0, 2), 16),
+		parseInt(hex.slice(2, 4), 16),
+		parseInt(hex.slice(4, 6), 16)
+	];
+}
+function channelToHex(value) {
+	let hex = value.toString(16);
+	return hex.length === 1 ? `0${hex}` : hex;
+}
+/** Shortens `#aabbcc` to `#abc` when possible, same as `polished` does */
+function reduceHex(hex) {
+	return hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] ? `#${hex[1]}${hex[3]}${hex[5]}` : hex;
+}
+Object.defineProperty(exports, "n", {
+	enumerable: !0,
+	get: function() {
+		return mix;
+	}
+}), Object.defineProperty(exports, "t", {
+	enumerable: !0,
+	get: function() {
+		return isColor;
+	}
+});
+
+//# sourceMappingURL=mix.cjs.map

package/dist/_chunks/mix.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mix.cjs","names":[],"sources":["../../src/lib/mix.ts"],"sourcesContent":["/**\n * Color mixing that is byte-for-byte compatible with the `mix` function from\n * `polished`, which the hosted Themer service (themer.sanity.build) used to\n * interpolate hue tints. Only opaque hex colors are supported, which is all\n * the theme generators ever pass.\n *\n * @internal\n */\nexport function mix(weight: number, color: string, otherColor: string): string {\n  // `polished` returns the other color as-is when the weight is 0\n  if (weight === 0) return otherColor\n\n  const [r1, g1, b1] = hexToRgb(color)\n  const [r2, g2, b2] = hexToRgb(otherColor)\n\n  const w2 = 1 - weight\n\n  return reduceHex(\n    `#${channelToHex(Math.floor(r1 * weight + r2 * w2))}${channelToHex(\n      Math.floor(g1 * weight + g2 * w2),\n    )}${channelToHex(Math.floor(b1 * weight + b2 * w2))}`,\n  )\n}\n\n/**\n * Matches `#abc` and `#aabbcc` hex colors (the only formats the theme\n * generators accept), same as the hosted Themer service did.\n *\n * @internal\n */\nexport function isColor(input: string): boolean {\n  return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input)\n}\n\nfunction hexToRgb(color: string): [number, number, number] {\n  if (!isColor(color)) {\n    throw new TypeError(`Invalid color: ${JSON.stringify(color)} — expected a hex color`)\n  }\n\n  const hex =\n    color.length === 4\n      ? `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`\n      : color.slice(1)\n\n  return [\n    parseInt(hex.slice(0, 2), 16),\n    parseInt(hex.slice(2, 4), 16),\n    parseInt(hex.slice(4, 6), 16),\n  ]\n}\n\nfunction channelToHex(value: number): string {\n  const hex = value.toString(16)\n\n  return hex.length === 1 ? `0${hex}` : hex\n}\n\n/** Shortens `#aabbcc` to `#abc` when possible, same as `polished` does */\nfunction reduceHex(hex: string): string {\n  if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {\n    return `#${hex[1]}${hex[3]}${hex[5]}`\n  }\n\n  return hex\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,IAAI,QAAgB,OAAe,YAA4B;CAE7E,IAAI,WAAW,GAAG,OAAO;CAEzB,IAAM,CAAC,IAAI,IAAI,MAAM,SAAS,KAAK,GAC7B,CAAC,IAAI,IAAI,MAAM,SAAS,UAAU,GAElC,KAAK,IAAI;CAEf,OAAO,UACL,IAAI,aAAa,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,IAAI,aACpD,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAClC,IAAI,aAAa,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,GACpD;AACF;;;;;;;AAQA,SAAgB,QAAQ,OAAwB;CAC9C,OAAO,2BAA2B,KAAK,KAAK;AAC9C;AAEA,SAAS,SAAS,OAAyC;CACzD,IAAI,CAAC,QAAQ,KAAK,GAChB,MAAU,UAAU,kBAAkB,KAAK,UAAU,KAAK,EAAE,wBAAwB;CAGtF,IAAM,MACJ,MAAM,WAAW,IACb,GAAG,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,OAChE,MAAM,MAAM,CAAC;CAEnB,OAAO;EACL,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;EAC5B,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;EAC5B,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAC9B;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,IAAM,MAAM,MAAM,SAAS,EAAE;CAE7B,OAAO,IAAI,WAAW,IAAI,IAAI,QAAQ;AACxC;;AAGA,SAAS,UAAU,KAAqB;CAKtC,OAJI,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,IAAI,KACpD,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,OAG5B;AACT"}

package/dist/_chunks/mix.js

@@ -0,0 +1,42 @@
+/**
+* Color mixing that is byte-for-byte compatible with the `mix` function from
+* `polished`, which the hosted Themer service (themer.sanity.build) used to
+* interpolate hue tints. Only opaque hex colors are supported, which is all
+* the theme generators ever pass.
+*
+* @internal
+*/
+function mix(weight, color, otherColor) {
+	if (weight === 0) return otherColor;
+	let [r1, g1, b1] = hexToRgb(color), [r2, g2, b2] = hexToRgb(otherColor), w2 = 1 - weight;
+	return reduceHex(`#${channelToHex(Math.floor(r1 * weight + r2 * w2))}${channelToHex(Math.floor(g1 * weight + g2 * w2))}${channelToHex(Math.floor(b1 * weight + b2 * w2))}`);
+}
+/**
+* Matches `#abc` and `#aabbcc` hex colors (the only formats the theme
+* generators accept), same as the hosted Themer service did.
+*
+* @internal
+*/
+function isColor(input) {
+	return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input);
+}
+function hexToRgb(color) {
+	if (!isColor(color)) throw TypeError(`Invalid color: ${JSON.stringify(color)} — expected a hex color`);
+	let hex = color.length === 4 ? `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color.slice(1);
+	return [
+		parseInt(hex.slice(0, 2), 16),
+		parseInt(hex.slice(2, 4), 16),
+		parseInt(hex.slice(4, 6), 16)
+	];
+}
+function channelToHex(value) {
+	let hex = value.toString(16);
+	return hex.length === 1 ? `0${hex}` : hex;
+}
+/** Shortens `#aabbcc` to `#abc` when possible, same as `polished` does */
+function reduceHex(hex) {
+	return hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] ? `#${hex[1]}${hex[3]}${hex[5]}` : hex;
+}
+export { mix as n, isColor as t };
+
+//# sourceMappingURL=mix.js.map

package/dist/_chunks/mix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mix.js","names":[],"sources":["../../src/lib/mix.ts"],"sourcesContent":["/**\n * Color mixing that is byte-for-byte compatible with the `mix` function from\n * `polished`, which the hosted Themer service (themer.sanity.build) used to\n * interpolate hue tints. Only opaque hex colors are supported, which is all\n * the theme generators ever pass.\n *\n * @internal\n */\nexport function mix(weight: number, color: string, otherColor: string): string {\n  // `polished` returns the other color as-is when the weight is 0\n  if (weight === 0) return otherColor\n\n  const [r1, g1, b1] = hexToRgb(color)\n  const [r2, g2, b2] = hexToRgb(otherColor)\n\n  const w2 = 1 - weight\n\n  return reduceHex(\n    `#${channelToHex(Math.floor(r1 * weight + r2 * w2))}${channelToHex(\n      Math.floor(g1 * weight + g2 * w2),\n    )}${channelToHex(Math.floor(b1 * weight + b2 * w2))}`,\n  )\n}\n\n/**\n * Matches `#abc` and `#aabbcc` hex colors (the only formats the theme\n * generators accept), same as the hosted Themer service did.\n *\n * @internal\n */\nexport function isColor(input: string): boolean {\n  return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input)\n}\n\nfunction hexToRgb(color: string): [number, number, number] {\n  if (!isColor(color)) {\n    throw new TypeError(`Invalid color: ${JSON.stringify(color)} — expected a hex color`)\n  }\n\n  const hex =\n    color.length === 4\n      ? `${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`\n      : color.slice(1)\n\n  return [\n    parseInt(hex.slice(0, 2), 16),\n    parseInt(hex.slice(2, 4), 16),\n    parseInt(hex.slice(4, 6), 16),\n  ]\n}\n\nfunction channelToHex(value: number): string {\n  const hex = value.toString(16)\n\n  return hex.length === 1 ? `0${hex}` : hex\n}\n\n/** Shortens `#aabbcc` to `#abc` when possible, same as `polished` does */\nfunction reduceHex(hex: string): string {\n  if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {\n    return `#${hex[1]}${hex[3]}${hex[5]}`\n  }\n\n  return hex\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,IAAI,QAAgB,OAAe,YAA4B;CAE7E,IAAI,WAAW,GAAG,OAAO;CAEzB,IAAM,CAAC,IAAI,IAAI,MAAM,SAAS,KAAK,GAC7B,CAAC,IAAI,IAAI,MAAM,SAAS,UAAU,GAElC,KAAK,IAAI;CAEf,OAAO,UACL,IAAI,aAAa,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,IAAI,aACpD,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAClC,IAAI,aAAa,KAAK,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,GACpD;AACF;;;;;;;AAQA,SAAgB,QAAQ,OAAwB;CAC9C,OAAO,2BAA2B,KAAK,KAAK;AAC9C;AAEA,SAAS,SAAS,OAAyC;CACzD,IAAI,CAAC,QAAQ,KAAK,GAChB,MAAU,UAAU,kBAAkB,KAAK,UAAU,KAAK,EAAE,wBAAwB;CAGtF,IAAM,MACJ,MAAM,WAAW,IACb,GAAG,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,OAChE,MAAM,MAAM,CAAC;CAEnB,OAAO;EACL,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;EAC5B,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;EAC5B,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE;CAC9B;AACF;AAEA,SAAS,aAAa,OAAuB;CAC3C,IAAM,MAAM,MAAM,SAAS,EAAE;CAE7B,OAAO,IAAI,WAAW,IAAI,IAAI,QAAQ;AACxC;;AAGA,SAAS,UAAU,KAAqB;CAKtC,OAJI,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,IAAI,KACpD,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,OAG5B;AACT"}

package/dist/_chunks/presets.cjs

@@ -0,0 +1,215 @@
+const require_mix = require("./mix.cjs");
+let _sanity_color = require("@sanity/color"), _sanity_ui_theme = require("@sanity/ui/theme");
+/** The palette hue that each themeable color drives */
+const HUE_MAPPING = [
+	["gray", "gray"],
+	["primary", "blue"],
+	["positive", "green"],
+	["caution", "yellow"],
+	["critical", "red"]
+];
+/**
+* Maps themeable colors to a `@sanity/ui` `ThemeConfig`, for when a theme
+* needs further customization than `createTheme` exposes:
+*
+* ```ts
+* import {themeConfigFromColors} from '@sanity/themer'
+* import {buildTheme} from '@sanity/ui/theme'
+*
+* const theme = buildTheme({
+*   ...themeConfigFromColors({primary: '#2276fc'}),
+*   // ...other ThemeConfig properties
+* })
+* ```
+*
+* @public
+*/
+function themeConfigFromColors(colors) {
+	for (let [key, value] of Object.entries(colors)) if (typeof value == "string" && !require_mix.t(value)) throw TypeError(`Invalid color for ${JSON.stringify(key)}: ${JSON.stringify(value)} — expected a hex color`);
+	let anchored = !!(colors.lightest || colors.darkest);
+	if (!anchored && !HUE_MAPPING.some(([option]) => colors[option])) return {};
+	let lightest = (colors.lightest ?? _sanity_color.color.white.hex).toLowerCase(), darkest = (colors.darkest ?? _sanity_color.color.black.hex).toLowerCase(), palette = {
+		..._sanity_color.color,
+		black: darkest,
+		white: lightest
+	};
+	for (let [option, hueKey] of HUE_MAPPING) {
+		let mid = colors[option]?.toLowerCase();
+		(mid || anchored) && (palette[hueKey] = buildHueTints({
+			mid: mid ?? _sanity_color.color[hueKey][500].hex,
+			lightest,
+			darkest
+		}));
+	}
+	return { palette };
+}
+/**
+* Generates a Sanity Studio theme from a handful of colors:
+*
+* ```ts
+* import {createTheme} from '@sanity/themer'
+* import {defineConfig} from 'sanity'
+*
+* export default defineConfig({
+*   theme: createTheme({primary: '#2276fc'}),
+*   // ...rest of the config
+* })
+* ```
+*
+* Calling it without options returns the default Sanity Studio theme.
+*
+* @public
+*/
+function createTheme(colors = {}) {
+	return (0, _sanity_ui_theme.buildTheme)(themeConfigFromColors(colors));
+}
+/**
+* Interpolates a full tint ramp (50–950) from a mid color placed at the 500
+* tint, sliding towards `lightest` and `darkest` at the extremes.
+*/
+function buildHueTints(options) {
+	let { mid, lightest, darkest } = options;
+	return _sanity_color.COLOR_TINTS.reduce((tints, tintKey) => {
+		let tint = Number(tintKey);
+		return tint === 500 ? tints[tintKey] = mid : tint < 500 ? tints[tintKey] = require_mix.n(tint / 500, mid, lightest) : tints[tintKey] = require_mix.n((tint - 500) / 500, darkest, mid), tints;
+	}, {});
+}
+/**
+* Preset themes, carried over from the hosted Themer service
+* (themer.sanity.build) and re-expressed as `createTheme` colors.
+*
+* ```ts
+* import {createTheme, presets} from '@sanity/themer'
+*
+* const verdant = presets.find((preset) => preset.slug === 'verdant')
+* const theme = createTheme(verdant.colors)
+* ```
+*
+* @public
+*/
+const presets = [
+	{
+		slug: "default",
+		title: "Studio",
+		colors: {}
+	},
+	{
+		slug: "dew",
+		title: "Dew",
+		colors: {
+			gray: "#5e63b4",
+			primary: "#d1a308",
+			positive: "#43d675",
+			caution: "#fb9f24",
+			critical: "#f03e2f",
+			lightest: "#fcfcfd",
+			darkest: "#0d0d15"
+		}
+	},
+	{
+		slug: "pink-synth",
+		title: "Pink Synth",
+		colors: {
+			gray: "#8b6584",
+			primary: "#ec4899",
+			positive: "#10b981",
+			caution: "#fde047",
+			critical: "#fe3459",
+			lightest: "#f7f2f5",
+			darkest: "#171721"
+		}
+	},
+	{
+		slug: "pixel-art",
+		title: "Pixel Art",
+		colors: {
+			gray: "#57619c",
+			primary: "#f10784",
+			positive: "#43d675",
+			caution: "#fbd024",
+			lightest: "#fcfcfd",
+			darkest: "#0d0e15"
+		}
+	},
+	{
+		slug: "retro-colonial",
+		title: "Retro Colonial",
+		colors: {
+			gray: "#8bb9b5",
+			primary: "#fa7a78",
+			positive: "#43d675",
+			caution: "#fbd024",
+			critical: "#f02f53",
+			lightest: "#fcfdfd",
+			darkest: "#0d1515"
+		}
+	},
+	{
+		slug: "rosabel",
+		title: "Rosabel",
+		colors: {
+			gray: "#9d8966",
+			primary: "#ed2555",
+			positive: "#43d675",
+			caution: "#fbd024",
+			lightest: "#fdfdfc",
+			darkest: "#15120d"
+		}
+	},
+	{
+		slug: "stereofidelic",
+		title: "Stereofidelic",
+		colors: {
+			gray: "#678e9a",
+			primary: "#f13009",
+			positive: "#43d675",
+			caution: "#fbd024",
+			critical: "#f02f35",
+			lightest: "#fcfdfd",
+			darkest: "#0e1315"
+		}
+	},
+	{
+		slug: "tw-cyan",
+		title: "Tailwind Cyan",
+		colors: {
+			gray: "#677389",
+			primary: "#51b4d0",
+			positive: "#55b785",
+			caution: "#e2b53e",
+			critical: "#e14f62",
+			lightest: "#f9fafb",
+			darkest: "#101728"
+		}
+	},
+	{
+		slug: "verdant",
+		title: "Verdant",
+		colors: {
+			gray: "#5c9199",
+			primary: "#1cb485",
+			positive: "#43d675",
+			caution: "#fbd024",
+			lightest: "#fcfdfd",
+			darkest: "#0d1415"
+		}
+	}
+];
+Object.defineProperty(exports, "n", {
+	enumerable: !0,
+	get: function() {
+		return createTheme;
+	}
+}), Object.defineProperty(exports, "r", {
+	enumerable: !0,
+	get: function() {
+		return themeConfigFromColors;
+	}
+}), Object.defineProperty(exports, "t", {
+	enumerable: !0,
+	get: function() {
+		return presets;
+	}
+});
+
+//# sourceMappingURL=presets.cjs.map

package/dist/_chunks/presets.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.cjs","names":["isColor","color","COLOR_TINTS","mix"],"sources":["../../src/createTheme.ts","../../src/presets.ts"],"sourcesContent":["import {color, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'\nimport {buildTheme, RootTheme, ThemeColorPalette, ThemeConfig} from '@sanity/ui/theme'\n\nimport {isColor, mix} from './lib/mix'\nimport {CreateThemeOptions} from './types'\n\n/** The palette hue that each themeable color drives */\nconst HUE_MAPPING: ReadonlyArray<[option: keyof CreateThemeOptions, hueKey: ColorHueKey]> = [\n  ['gray', 'gray'],\n  ['primary', 'blue'],\n  ['positive', 'green'],\n  ['caution', 'yellow'],\n  ['critical', 'red'],\n]\n\n/**\n * Maps themeable colors to a `@sanity/ui` `ThemeConfig`, for when a theme\n * needs further customization than `createTheme` exposes:\n *\n * ```ts\n * import {themeConfigFromColors} from '@sanity/themer'\n * import {buildTheme} from '@sanity/ui/theme'\n *\n * const theme = buildTheme({\n *   ...themeConfigFromColors({primary: '#2276fc'}),\n *   // ...other ThemeConfig properties\n * })\n * ```\n *\n * @public\n */\nexport function themeConfigFromColors(colors: CreateThemeOptions): ThemeConfig {\n  for (const [key, value] of Object.entries(colors)) {\n    if (typeof value === 'string' && !isColor(value)) {\n      throw new TypeError(\n        `Invalid color for ${JSON.stringify(key)}: ${JSON.stringify(value)} — expected a hex color`,\n      )\n    }\n  }\n\n  const anchored = Boolean(colors.lightest || colors.darkest)\n\n  if (!anchored && !HUE_MAPPING.some(([option]) => colors[option])) {\n    return {}\n  }\n\n  const lightest = (colors.lightest ?? color.white.hex).toLowerCase()\n  const darkest = (colors.darkest ?? color.black.hex).toLowerCase()\n\n  const palette: ThemeColorPalette = {...color, black: darkest, white: lightest}\n\n  for (const [option, hueKey] of HUE_MAPPING) {\n    const mid = colors[option]?.toLowerCase()\n\n    // Untouched ramps only need regenerating when the surface endpoints moved\n    if (mid || anchored) {\n      palette[hueKey] = buildHueTints({\n        mid: mid ?? color[hueKey][500].hex,\n        lightest,\n        darkest,\n      })\n    }\n  }\n\n  return {palette}\n}\n\n/**\n * Generates a Sanity Studio theme from a handful of colors:\n *\n * ```ts\n * import {createTheme} from '@sanity/themer'\n * import {defineConfig} from 'sanity'\n *\n * export default defineConfig({\n *   theme: createTheme({primary: '#2276fc'}),\n *   // ...rest of the config\n * })\n * ```\n *\n * Calling it without options returns the default Sanity Studio theme.\n *\n * @public\n */\nexport function createTheme(colors: CreateThemeOptions = {}): RootTheme {\n  return buildTheme(themeConfigFromColors(colors))\n}\n\n/**\n * Interpolates a full tint ramp (50–950) from a mid color placed at the 500\n * tint, sliding towards `lightest` and `darkest` at the extremes.\n */\nfunction buildHueTints(options: {\n  mid: string\n  lightest: string\n  darkest: string\n}): Record<ColorTintKey, string> {\n  const {mid, lightest, darkest} = options\n\n  // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the reduce assigns every COLOR_TINTS key, so the Partial is complete\n  return COLOR_TINTS.reduce<Partial<Record<ColorTintKey, string>>>((tints, tintKey) => {\n    const tint = Number(tintKey)\n\n    if (tint === 500) {\n      tints[tintKey] = mid\n    } else if (tint < 500) {\n      tints[tintKey] = mix(tint / 500, mid, lightest)\n    } else {\n      tints[tintKey] = mix((tint - 500) / 500, darkest, mid)\n    }\n\n    return tints\n  }, {}) as Record<ColorTintKey, string>\n}\n","import {CreateThemeOptions} from './types'\n\n/**\n * A named set of colors for `createTheme`.\n *\n * @public\n */\nexport interface ThemePreset {\n  slug: string\n  title: string\n  colors: CreateThemeOptions\n}\n\n/**\n * Preset themes, carried over from the hosted Themer service\n * (themer.sanity.build) and re-expressed as `createTheme` colors.\n *\n * ```ts\n * import {createTheme, presets} from '@sanity/themer'\n *\n * const verdant = presets.find((preset) => preset.slug === 'verdant')\n * const theme = createTheme(verdant.colors)\n * ```\n *\n * @public\n */\nexport const presets: ThemePreset[] = [\n  {\n    slug: 'default',\n    title: 'Studio',\n    colors: {},\n  },\n  {\n    slug: 'dew',\n    title: 'Dew',\n    colors: {\n      gray: '#5e63b4',\n      primary: '#d1a308',\n      positive: '#43d675',\n      caution: '#fb9f24',\n      critical: '#f03e2f',\n      lightest: '#fcfcfd',\n      darkest: '#0d0d15',\n    },\n  },\n  {\n    slug: 'pink-synth',\n    title: 'Pink Synth',\n    colors: {\n      gray: '#8b6584',\n      primary: '#ec4899',\n      positive: '#10b981',\n      caution: '#fde047',\n      critical: '#fe3459',\n      lightest: '#f7f2f5',\n      darkest: '#171721',\n    },\n  },\n  {\n    slug: 'pixel-art',\n    title: 'Pixel Art',\n    colors: {\n      gray: '#57619c',\n      primary: '#f10784',\n      positive: '#43d675',\n      caution: '#fbd024',\n      lightest: '#fcfcfd',\n      darkest: '#0d0e15',\n    },\n  },\n  {\n    slug: 'retro-colonial',\n    title: 'Retro Colonial',\n    colors: {\n      gray: '#8bb9b5',\n      primary: '#fa7a78',\n      positive: '#43d675',\n      caution: '#fbd024',\n      critical: '#f02f53',\n      lightest: '#fcfdfd',\n      darkest: '#0d1515',\n    },\n  },\n  {\n    slug: 'rosabel',\n    title: 'Rosabel',\n    colors: {\n      gray: '#9d8966',\n      primary: '#ed2555',\n      positive: '#43d675',\n      caution: '#fbd024',\n      lightest: '#fdfdfc',\n      darkest: '#15120d',\n    },\n  },\n  {\n    slug: 'stereofidelic',\n    title: 'Stereofidelic',\n    colors: {\n      gray: '#678e9a',\n      primary: '#f13009',\n      positive: '#43d675',\n      caution: '#fbd024',\n      critical: '#f02f35',\n      lightest: '#fcfdfd',\n      darkest: '#0e1315',\n    },\n  },\n  {\n    slug: 'tw-cyan',\n    title: 'Tailwind Cyan',\n    colors: {\n      gray: '#677389',\n      primary: '#51b4d0',\n      positive: '#55b785',\n      caution: '#e2b53e',\n      critical: '#e14f62',\n      lightest: '#f9fafb',\n      darkest: '#101728',\n    },\n  },\n  {\n    slug: 'verdant',\n    title: 'Verdant',\n    colors: {\n      gray: '#5c9199',\n      primary: '#1cb485',\n      positive: '#43d675',\n      caution: '#fbd024',\n      lightest: '#fcfdfd',\n      darkest: '#0d1415',\n    },\n  },\n]\n"],"mappings":";;;AAOA,MAAM,cAAsF;CAC1F,CAAC,QAAQ,MAAM;CACf,CAAC,WAAW,MAAM;CAClB,CAAC,YAAY,OAAO;CACpB,CAAC,WAAW,QAAQ;CACpB,CAAC,YAAY,KAAK;AACpB;;;;;;;;;;;;;;;;;AAkBA,SAAgB,sBAAsB,QAAyC;CAC7E,KAAK,IAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAC9C,IAAI,OAAO,SAAU,YAAY,CAACA,YAAAA,EAAQ,KAAK,GAC7C,MAAU,UACR,qBAAqB,KAAK,UAAU,GAAG,EAAE,IAAI,KAAK,UAAU,KAAK,EAAE,wBACrE;CAIJ,IAAM,WAAW,GAAQ,OAAO,YAAY,OAAO;CAEnD,IAAI,CAAC,YAAY,CAAC,YAAY,MAAM,CAAC,YAAY,OAAO,OAAO,GAC7D,OAAO,CAAC;CAGV,IAAM,YAAY,OAAO,YAAYC,cAAAA,MAAM,MAAM,IAAA,CAAK,YAAY,GAC5D,WAAW,OAAO,WAAWA,cAAAA,MAAM,MAAM,IAAA,CAAK,YAAY,GAE1D,UAA6B;EAAC,GAAGA,cAAAA;EAAO,OAAO;EAAS,OAAO;CAAQ;CAE7E,KAAK,IAAM,CAAC,QAAQ,WAAW,aAAa;EAC1C,IAAM,MAAM,OAAO,OAAO,EAAE,YAAY;EAGxC,CAAI,OAAO,cACT,QAAQ,UAAU,cAAc;GAC9B,KAAK,OAAOA,cAAAA,MAAM,OAAO,CAAC,IAAI,CAAC;GAC/B;GACA;EACF,CAAC;CAEL;CAEA,OAAO,EAAC,QAAO;AACjB;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,YAAY,SAA6B,CAAC,GAAc;CACtE,QAAA,GAAA,iBAAA,WAAA,CAAkB,sBAAsB,MAAM,CAAC;AACjD;;;;;AAMA,SAAS,cAAc,SAIU;CAC/B,IAAM,EAAC,KAAK,UAAU,YAAW;CAGjC,OAAOC,cAAAA,YAAY,QAA+C,OAAO,YAAY;EACnF,IAAM,OAAO,OAAO,OAAO;EAU3B,OARI,SAAS,MACX,MAAM,WAAW,MACR,OAAO,MAChB,MAAM,WAAWC,YAAAA,EAAI,OAAO,KAAK,KAAK,QAAQ,IAE9C,MAAM,WAAWA,YAAAA,GAAK,OAAO,OAAO,KAAK,SAAS,GAAG,GAGhD;CACT,GAAG,CAAC,CAAC;AACP;;;;;;;;;;;;;;ACvFA,MAAa,UAAyB;CACpC;EACE,MAAM;EACN,OAAO;EACP,QAAQ,CAAC;CACX;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,UAAU;GACV,SAAS;EACX;CACF;CACA;EACE,MAAM;EACN,OAAO;EACP,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;GACT,UAAU;GACV,SAAS;EACX;CACF;AACF"}