@sanity/themer 0.0.0

package/dist/tool.d.cts

@@ -0,0 +1,45 @@
+import { t as CreateThemeOptions } from "./_chunks/types.cjs";
+/**
+ * Options for the {@link themerTool} plugin.
+ *
+ * @public
+ */
+interface ThemerToolOptions {
+  /**
+   * The colors that the Studio's configured theme was generated from — the
+   * themer starts editing from these, so pass the same object that the
+   * `theme` in the Studio config uses:
+   *
+   * ```ts
+   * const colors = {primary: '#2276fc'}
+   *
+   * export default defineConfig({
+   *   theme: createTheme(colors),
+   *   plugins: [themerTool({colors})],
+   * })
+   * ```
+   */
+  colors?: CreateThemeOptions;
+}
+/**
+ * A Studio plugin that adds a themer sidebar for generating Studio themes:
+ * a navbar toggle opens the sidebar next to the active tool, where presets
+ * and color pickers preview a `createTheme` theme live on the whole Studio
+ * while you browse around. Toggle between light and dark mode with the
+ * regular appearance menu — the preview follows it.
+ *
+ * ```ts
+ * import {themerTool} from '@sanity/themer/tool'
+ * import {defineConfig} from 'sanity'
+ *
+ * export default defineConfig({
+ *   plugins: [themerTool()],
+ *   // ...rest of the config
+ * })
+ * ```
+ *
+ * @public
+ */
+declare const themerTool: import("sanity").Plugin<void | ThemerToolOptions>;
+export { type ThemerToolOptions, themerTool };
+//# sourceMappingURL=tool.d.cts.map

package/dist/tool.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.cts","names":[],"sources":["../src/tool/plugin.tsx"],"mappings":";;;;;;UAYiB;;;;;;;;;;;;;;;EAef,SAAS;;;;;;;;;;;;;;;;;;;;;cAsBE,6BAAU,cAAA"}

package/dist/tool.d.ts

@@ -0,0 +1,45 @@
+import { t as CreateThemeOptions } from "./_chunks/types.js";
+/**
+ * Options for the {@link themerTool} plugin.
+ *
+ * @public
+ */
+interface ThemerToolOptions {
+  /**
+   * The colors that the Studio's configured theme was generated from — the
+   * themer starts editing from these, so pass the same object that the
+   * `theme` in the Studio config uses:
+   *
+   * ```ts
+   * const colors = {primary: '#2276fc'}
+   *
+   * export default defineConfig({
+   *   theme: createTheme(colors),
+   *   plugins: [themerTool({colors})],
+   * })
+   * ```
+   */
+  colors?: CreateThemeOptions;
+}
+/**
+ * A Studio plugin that adds a themer sidebar for generating Studio themes:
+ * a navbar toggle opens the sidebar next to the active tool, where presets
+ * and color pickers preview a `createTheme` theme live on the whole Studio
+ * while you browse around. Toggle between light and dark mode with the
+ * regular appearance menu — the preview follows it.
+ *
+ * ```ts
+ * import {themerTool} from '@sanity/themer/tool'
+ * import {defineConfig} from 'sanity'
+ *
+ * export default defineConfig({
+ *   plugins: [themerTool()],
+ *   // ...rest of the config
+ * })
+ * ```
+ *
+ * @public
+ */
+declare const themerTool: import("sanity").Plugin<void | ThemerToolOptions>;
+export { type ThemerToolOptions, themerTool };
+//# sourceMappingURL=tool.d.ts.map

package/dist/tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","names":[],"sources":["../src/tool/plugin.tsx"],"mappings":";;;;;;UAYiB;;;;;;;;;;;;;;;EAef,SAAS;;;;;;;;;;;;;;;;;;;;;cAsBE,6BAAU,cAAA"}

package/dist/tool.js

@@ -0,0 +1,415 @@
+import { t as isColor } from "./_chunks/mix.js";
+import { n as createTheme, t as presets } from "./_chunks/presets.js";
+import { color } from "@sanity/color";
+import { definePlugin } from "sanity";
+import { Box, Button, Card, Code, Flex, Layer, Select, Stack, Text, ThemeProvider, useToast } from "@sanity/ui";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { ClipboardIcon } from "@sanity/icons/Clipboard";
+import { CloseIcon } from "@sanity/icons/Close";
+import { ResetIcon } from "@sanity/icons/Reset";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
+/** @internal */
+const ThemerContext = createContext(null);
+/** @internal */
+function useThemer() {
+	let context = useContext(ThemerContext);
+	if (!context) throw Error("useThemer must be used within the `themerTool` plugin");
+	return context;
+}
+/** @internal */
+const THEMER_FIELDS = [
+	{
+		key: "primary",
+		title: "Primary",
+		description: "Buttons, focus rings and links",
+		defaultValue: color.blue[500].hex
+	},
+	{
+		key: "gray",
+		title: "Gray",
+		description: "Neutral surfaces, borders and text",
+		defaultValue: color.gray[500].hex
+	},
+	{
+		key: "positive",
+		title: "Positive",
+		description: "Success accents",
+		defaultValue: color.green[500].hex
+	},
+	{
+		key: "caution",
+		title: "Caution",
+		description: "Warning accents",
+		defaultValue: color.yellow[500].hex
+	},
+	{
+		key: "critical",
+		title: "Critical",
+		description: "Errors and destructive actions",
+		defaultValue: color.red[500].hex
+	},
+	{
+		key: "lightest",
+		title: "Lightest",
+		description: "Light mode background",
+		defaultValue: color.white.hex
+	},
+	{
+		key: "darkest",
+		title: "Darkest",
+		description: "Dark mode background",
+		defaultValue: color.black.hex
+	}
+];
+/**
+* Serializes colors into the `createTheme` call to paste into
+* `sanity.config.ts`.
+*
+* @internal
+*/
+function createThemeSnippet(colors) {
+	let entries = THEMER_FIELDS.filter(({ key }) => colors[key]).map(({ key }) => `  ${key}: '${colors[key]}',`);
+	return `import {createTheme} from '@sanity/themer'\n\nexport const theme = ${entries.length === 0 ? "createTheme()" : `createTheme({\n${entries.join("\n")}\n})`}\n`;
+}
+const swatchStyle = {
+	width: 33,
+	height: 33,
+	padding: 0,
+	border: "1px solid var(--card-border-color)",
+	borderRadius: 6,
+	background: "transparent",
+	cursor: "pointer",
+	flex: "none"
+};
+function sameColors(a, b) {
+	return THEMER_FIELDS.every(({ key }) => (a[key]?.toLowerCase() ?? void 0) === (b[key]?.toLowerCase() ?? void 0));
+}
+/** Expands `#abc` to `#aabbcc`, which is the only format `<input type="color">` accepts */
+function expandHex(hex) {
+	return hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex;
+}
+/**
+* The themer sidebar: a preset picker and a handful of color pickers that
+* generate the previewed theme, plus the `createTheme` snippet to make it
+* permanent.
+*
+* @internal
+*/
+function ThemerSidebar() {
+	let { baseColors, colors, setColors, setOpen } = useThemer(), toast = useToast(), active = colors ?? baseColors, activePresetSlug = presets.find((preset) => sameColors(preset.colors, active))?.slug ?? "", snippet = createThemeSnippet(active), handleFieldChange = (key, value) => {
+		let next = { ...active };
+		value === void 0 ? delete next[key] : next[key] = value, setColors(next);
+	}, handlePresetChange = (slug) => {
+		let preset = presets.find((candidate) => candidate.slug === slug);
+		preset && setColors({ ...preset.colors });
+	}, handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(snippet), toast.push({
+				status: "success",
+				title: "Copied theme to the clipboard"
+			});
+		} catch {
+			toast.push({
+				status: "error",
+				title: "Could not copy the theme"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(Card, {
+		height: "fill",
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			height: "fill",
+			children: [/* @__PURE__ */ jsx(Card, {
+				borderBottom: !0,
+				padding: 3,
+				children: /* @__PURE__ */ jsxs(Flex, {
+					align: "center",
+					gap: 2,
+					children: [/* @__PURE__ */ jsx(Box, {
+						flex: 1,
+						paddingLeft: 1,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: 1,
+							weight: "semibold",
+							children: "Themer"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						icon: CloseIcon,
+						mode: "bleed",
+						onClick: () => setOpen(!1),
+						padding: 2,
+						title: "Close themer"
+					})]
+				})
+			}), /* @__PURE__ */ jsx(Box, {
+				flex: 1,
+				overflow: "auto",
+				padding: 4,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: 5,
+					children: [
+						/* @__PURE__ */ jsxs(Stack, {
+							gap: 3,
+							children: [/* @__PURE__ */ jsx(Text, {
+								size: 1,
+								weight: "medium",
+								children: "Preset"
+							}), /* @__PURE__ */ jsxs(Select, {
+								onChange: (event) => handlePresetChange(event.currentTarget.value),
+								value: activePresetSlug,
+								children: [activePresetSlug === "" && /* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Custom"
+								}), presets.map((preset) => /* @__PURE__ */ jsx("option", {
+									value: preset.slug,
+									children: preset.title
+								}, preset.slug))]
+							})]
+						}),
+						/* @__PURE__ */ jsx(Stack, {
+							gap: 4,
+							children: THEMER_FIELDS.map((field) => /* @__PURE__ */ jsx(ColorField, {
+								field,
+								onChange: handleFieldChange,
+								value: active[field.key]
+							}, field.key))
+						}),
+						/* @__PURE__ */ jsxs(Stack, {
+							gap: 3,
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									size: 1,
+									weight: "medium",
+									children: "Add to your config"
+								}),
+								/* @__PURE__ */ jsx(Card, {
+									border: !0,
+									overflow: "auto",
+									padding: 3,
+									radius: 2,
+									tone: "transparent",
+									children: /* @__PURE__ */ jsx(Code, {
+										language: "ts",
+										size: 0,
+										children: snippet
+									})
+								}),
+								/* @__PURE__ */ jsxs(Flex, {
+									gap: 2,
+									children: [/* @__PURE__ */ jsx(Button, {
+										icon: ClipboardIcon,
+										mode: "ghost",
+										onClick: () => void handleCopy(),
+										text: "Copy"
+									}), /* @__PURE__ */ jsx(Button, {
+										disabled: colors === null,
+										icon: ResetIcon,
+										mode: "ghost",
+										onClick: () => setColors(null),
+										text: "Reset",
+										tone: "critical"
+									})]
+								})
+							]
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+function ColorField(props) {
+	let { field, value, onChange } = props;
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 3,
+		children: [
+			/* @__PURE__ */ jsxs(Stack, {
+				flex: 1,
+				gap: 2,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: 1,
+					weight: "medium",
+					children: field.title
+				}), /* @__PURE__ */ jsx(Text, {
+					muted: !0,
+					size: 0,
+					children: value ?? field.description
+				})]
+			}),
+			value !== void 0 && /* @__PURE__ */ jsx(Button, {
+				icon: CloseIcon,
+				mode: "bleed",
+				onClick: () => onChange(field.key, void 0),
+				padding: 2,
+				title: `Reset ${field.title}`
+			}),
+			/* @__PURE__ */ jsx("input", {
+				"aria-label": `${field.title} color`,
+				onChange: (event) => onChange(field.key, event.currentTarget.value),
+				style: swatchStyle,
+				type: "color",
+				value: expandHex(value ?? field.defaultValue)
+			})
+		]
+	});
+}
+const sidebarStyle = {
+	width: 360,
+	flex: "none",
+	borderLeft: "1px solid var(--card-border-color)",
+	boxSizing: "border-box",
+	overflow: "hidden"
+};
+/**
+* Renders the themer sidebar next to the active tool, so the user can browse
+* around their own studio while tweaking the theme.
+*
+* @internal
+*/
+function ThemerActiveToolLayout(props) {
+	let { open } = useThemer();
+	return /* @__PURE__ */ jsxs(Flex, {
+		height: "fill",
+		sizing: "border",
+		children: [/* @__PURE__ */ jsx(Box, {
+			flex: 1,
+			height: "fill",
+			overflow: "auto",
+			children: props.renderDefault(props)
+		}), open && /* @__PURE__ */ jsx(Layer, {
+			height: "fill",
+			style: sidebarStyle,
+			zOffset: 100,
+			children: /* @__PURE__ */ jsx(ThemerSidebar, {})
+		})]
+	});
+}
+const STORAGE_KEY = "sanityStudio:themer:colors";
+/**
+* Restores draft colors from localStorage, so theme drafts survive studio
+* reloads.
+*
+* @internal
+*/
+function readStoredColors() {
+	try {
+		if (typeof localStorage > "u") return null;
+		let raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return null;
+		let parsed = JSON.parse(raw);
+		if (!parsed || typeof parsed != "object") return null;
+		let colors = {};
+		for (let { key } of THEMER_FIELDS) {
+			let value = Reflect.get(parsed, key);
+			typeof value == "string" && isColor(value) && (colors[key] = value);
+		}
+		return colors;
+	} catch {
+		return null;
+	}
+}
+/** @internal */
+function writeStoredColors(colors) {
+	try {
+		if (typeof localStorage > "u") return;
+		colors === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
+	} catch {}
+}
+/**
+* Wraps the whole Studio so that draft themes generated by the themer sidebar
+* apply everywhere while the user browses around, and hosts the state that the
+* navbar toggle and the sidebar share.
+*
+* The draft theme provider inherits the color scheme from the Studio, so the
+* preview follows the appearance setting (light/dark/system) like any other
+* theme.
+*
+* @internal
+*/
+function ThemerLayout(props) {
+	let { baseColors, ...layoutProps } = props, [open, setOpen] = useState(!1), [colors, setColors] = useState(readStoredColors);
+	useEffect(() => writeStoredColors(colors), [colors]);
+	let theme = useMemo(() => colors === null ? null : createTheme({
+		...baseColors,
+		...colors
+	}), [baseColors, colors]), context = useMemo(() => ({
+		baseColors,
+		colors,
+		setColors,
+		open,
+		setOpen
+	}), [
+		baseColors,
+		colors,
+		open
+	]);
+	return /* @__PURE__ */ jsx(ThemerContext.Provider, {
+		value: context,
+		children: theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
+			theme,
+			children: layoutProps.renderDefault(layoutProps)
+		})
+	});
+}
+/**
+* Adds the toggle that opens and closes the themer sidebar to the Studio
+* navbar.
+*
+* @internal
+*/
+function ThemerNavbar(props) {
+	let { open, setOpen } = useThemer();
+	return props.renderDefault({
+		...props,
+		__internal_actions: [...props.__internal_actions ?? [], {
+			icon: ColorWheelIcon,
+			location: "topbar",
+			name: "themer",
+			onAction: () => setOpen(!open),
+			selected: open,
+			title: "Themer"
+		}]
+	});
+}
+/**
+* A Studio plugin that adds a themer sidebar for generating Studio themes:
+* a navbar toggle opens the sidebar next to the active tool, where presets
+* and color pickers preview a `createTheme` theme live on the whole Studio
+* while you browse around. Toggle between light and dark mode with the
+* regular appearance menu — the preview follows it.
+*
+* ```ts
+* import {themerTool} from '@sanity/themer/tool'
+* import {defineConfig} from 'sanity'
+*
+* export default defineConfig({
+*   plugins: [themerTool()],
+*   // ...rest of the config
+* })
+* ```
+*
+* @public
+*/
+const themerTool = definePlugin((options) => {
+	let baseColors = options?.colors ?? {};
+	function ThemerLayoutWithOptions(props) {
+		return /* @__PURE__ */ jsx(ThemerLayout, {
+			...props,
+			baseColors
+		});
+	}
+	return {
+		name: "@sanity/themer/tool",
+		studio: { components: {
+			layout: ThemerLayoutWithOptions,
+			navbar: ThemerNavbar,
+			activeToolLayout: ThemerActiveToolLayout
+		} }
+	};
+});
+export { themerTool };
+
+//# sourceMappingURL=tool.js.map

package/dist/tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","names":[],"sources":["../src/tool/context.ts","../src/tool/fields.ts","../src/tool/snippet.ts","../src/tool/ThemerSidebar.tsx","../src/tool/ThemerActiveToolLayout.tsx","../src/tool/storage.ts","../src/tool/ThemerLayout.tsx","../src/tool/ThemerNavbar.tsx","../src/tool/plugin.tsx"],"sourcesContent":["import {createContext, useContext} from 'react'\n\nimport {CreateThemeOptions} from '../types'\n\n/** @internal */\nexport interface ThemerContextValue {\n  /** The colors the Studio's configured theme was generated from */\n  baseColors: CreateThemeOptions\n  /** The draft colors, or `null` when the configured theme is untouched */\n  colors: CreateThemeOptions | null\n  setColors: (colors: CreateThemeOptions | null) => void\n  /** Whether the themer sidebar is open */\n  open: boolean\n  setOpen: (open: boolean) => void\n}\n\n/** @internal */\nexport const ThemerContext = createContext<ThemerContextValue | null>(null)\n\n/** @internal */\nexport function useThemer(): ThemerContextValue {\n  const context = useContext(ThemerContext)\n\n  if (!context) {\n    throw new Error('useThemer must be used within the `themerTool` plugin')\n  }\n\n  return context\n}\n","import {color} from '@sanity/color'\n\nimport {CreateThemeOptions} from '../types'\n\n/** @internal */\nexport interface ThemerField {\n  key: keyof CreateThemeOptions\n  title: string\n  description: string\n  /** The color the picker shows while the field is unset (6-digit hex) */\n  defaultValue: string\n}\n\n/** @internal */\nexport const THEMER_FIELDS: ThemerField[] = [\n  {\n    key: 'primary',\n    title: 'Primary',\n    description: 'Buttons, focus rings and links',\n    defaultValue: color.blue[500].hex,\n  },\n  {\n    key: 'gray',\n    title: 'Gray',\n    description: 'Neutral surfaces, borders and text',\n    defaultValue: color.gray[500].hex,\n  },\n  {\n    key: 'positive',\n    title: 'Positive',\n    description: 'Success accents',\n    defaultValue: color.green[500].hex,\n  },\n  {\n    key: 'caution',\n    title: 'Caution',\n    description: 'Warning accents',\n    defaultValue: color.yellow[500].hex,\n  },\n  {\n    key: 'critical',\n    title: 'Critical',\n    description: 'Errors and destructive actions',\n    defaultValue: color.red[500].hex,\n  },\n  {\n    key: 'lightest',\n    title: 'Lightest',\n    description: 'Light mode background',\n    defaultValue: color.white.hex,\n  },\n  {\n    key: 'darkest',\n    title: 'Darkest',\n    description: 'Dark mode background',\n    defaultValue: color.black.hex,\n  },\n]\n","import {CreateThemeOptions} from '../types'\nimport {THEMER_FIELDS} from './fields'\n\n/**\n * Serializes colors into the `createTheme` call to paste into\n * `sanity.config.ts`.\n *\n * @internal\n */\nexport function createThemeSnippet(colors: CreateThemeOptions): string {\n  const entries = THEMER_FIELDS.filter(({key}) => colors[key]).map(\n    ({key}) => `  ${key}: '${colors[key]}',`,\n  )\n\n  const call = entries.length === 0 ? 'createTheme()' : `createTheme({\\n${entries.join('\\n')}\\n})`\n\n  return `import {createTheme} from '@sanity/themer'\\n\\nexport const theme = ${call}\\n`\n}\n","import {ClipboardIcon} from '@sanity/icons/Clipboard'\nimport {CloseIcon} from '@sanity/icons/Close'\nimport {ResetIcon} from '@sanity/icons/Reset'\nimport {Box, Button, Card, Code, Flex, Select, Stack, Text, useToast} from '@sanity/ui'\n\nimport {presets} from '../presets'\nimport {CreateThemeOptions} from '../types'\nimport {useThemer} from './context'\nimport {THEMER_FIELDS, ThemerField} from './fields'\nimport {createThemeSnippet} from './snippet'\n\nconst swatchStyle: React.CSSProperties = {\n  width: 33,\n  height: 33,\n  padding: 0,\n  border: '1px solid var(--card-border-color)',\n  borderRadius: 6,\n  background: 'transparent',\n  cursor: 'pointer',\n  flex: 'none',\n}\n\nfunction sameColors(a: CreateThemeOptions, b: CreateThemeOptions): boolean {\n  return THEMER_FIELDS.every(\n    ({key}) => (a[key]?.toLowerCase() ?? undefined) === (b[key]?.toLowerCase() ?? undefined),\n  )\n}\n\n/** Expands `#abc` to `#aabbcc`, which is the only format `<input type=\"color\">` accepts */\nfunction expandHex(hex: string): string {\n  if (hex.length === 4) {\n    return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`\n  }\n\n  return hex\n}\n\n/**\n * The themer sidebar: a preset picker and a handful of color pickers that\n * generate the previewed theme, plus the `createTheme` snippet to make it\n * permanent.\n *\n * @internal\n */\nexport function ThemerSidebar() {\n  const {baseColors, colors, setColors, setOpen} = useThemer()\n  const toast = useToast()\n\n  const active = colors ?? baseColors\n  const activePresetSlug = presets.find((preset) => sameColors(preset.colors, active))?.slug ?? ''\n  const snippet = createThemeSnippet(active)\n\n  const handleFieldChange = (key: keyof CreateThemeOptions, value: string | undefined) => {\n    const next = {...active}\n\n    if (value === undefined) {\n      delete next[key]\n    } else {\n      next[key] = value\n    }\n\n    setColors(next)\n  }\n\n  const handlePresetChange = (slug: string) => {\n    const preset = presets.find((candidate) => candidate.slug === slug)\n\n    if (preset) {\n      setColors({...preset.colors})\n    }\n  }\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(snippet)\n      toast.push({status: 'success', title: 'Copied theme to the clipboard'})\n    } catch {\n      toast.push({status: 'error', title: 'Could not copy the theme'})\n    }\n  }\n\n  return (\n    <Card height=\"fill\">\n      <Flex direction=\"column\" height=\"fill\">\n        <Card borderBottom padding={3}>\n          <Flex align=\"center\" gap={2}>\n            <Box flex={1} paddingLeft={1}>\n              <Text size={1} weight=\"semibold\">\n                Themer\n              </Text>\n            </Box>\n            <Button\n              icon={CloseIcon}\n              mode=\"bleed\"\n              onClick={() => setOpen(false)}\n              padding={2}\n              title=\"Close themer\"\n            />\n          </Flex>\n        </Card>\n\n        <Box flex={1} overflow=\"auto\" padding={4}>\n          <Stack gap={5}>\n            <Stack gap={3}>\n              <Text size={1} weight=\"medium\">\n                Preset\n              </Text>\n              <Select\n                onChange={(event) => handlePresetChange(event.currentTarget.value)}\n                value={activePresetSlug}\n              >\n                {activePresetSlug === '' && <option value=\"\">Custom</option>}\n                {presets.map((preset) => (\n                  <option key={preset.slug} value={preset.slug}>\n                    {preset.title}\n                  </option>\n                ))}\n              </Select>\n            </Stack>\n\n            <Stack gap={4}>\n              {THEMER_FIELDS.map((field) => (\n                <ColorField\n                  field={field}\n                  key={field.key}\n                  onChange={handleFieldChange}\n                  value={active[field.key]}\n                />\n              ))}\n            </Stack>\n\n            <Stack gap={3}>\n              <Text size={1} weight=\"medium\">\n                Add to your config\n              </Text>\n              <Card border overflow=\"auto\" padding={3} radius={2} tone=\"transparent\">\n                <Code language=\"ts\" size={0}>\n                  {snippet}\n                </Code>\n              </Card>\n              <Flex gap={2}>\n                <Button\n                  icon={ClipboardIcon}\n                  mode=\"ghost\"\n                  onClick={() => void handleCopy()}\n                  text=\"Copy\"\n                />\n                <Button\n                  disabled={colors === null}\n                  icon={ResetIcon}\n                  mode=\"ghost\"\n                  onClick={() => setColors(null)}\n                  text=\"Reset\"\n                  tone=\"critical\"\n                />\n              </Flex>\n            </Stack>\n          </Stack>\n        </Box>\n      </Flex>\n    </Card>\n  )\n}\n\nfunction ColorField(props: {\n  field: ThemerField\n  value: string | undefined\n  onChange: (key: keyof CreateThemeOptions, value: string | undefined) => void\n}) {\n  const {field, value, onChange} = props\n\n  return (\n    <Flex align=\"center\" gap={3}>\n      <Stack flex={1} gap={2}>\n        <Text size={1} weight=\"medium\">\n          {field.title}\n        </Text>\n        <Text muted size={0}>\n          {value ?? field.description}\n        </Text>\n      </Stack>\n      {value !== undefined && (\n        <Button\n          icon={CloseIcon}\n          mode=\"bleed\"\n          onClick={() => onChange(field.key, undefined)}\n          padding={2}\n          title={`Reset ${field.title}`}\n        />\n      )}\n      <input\n        aria-label={`${field.title} color`}\n        onChange={(event) => onChange(field.key, event.currentTarget.value)}\n        style={swatchStyle}\n        type=\"color\"\n        value={expandHex(value ?? field.defaultValue)}\n      />\n    </Flex>\n  )\n}\n","import {Box, Flex, Layer} from '@sanity/ui'\nimport {type ActiveToolLayoutProps} from 'sanity'\n\nimport {useThemer} from './context'\nimport {ThemerSidebar} from './ThemerSidebar'\n\nconst sidebarStyle: React.CSSProperties = {\n  width: 360,\n  flex: 'none',\n  borderLeft: '1px solid var(--card-border-color)',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n}\n\n/**\n * Renders the themer sidebar next to the active tool, so the user can browse\n * around their own studio while tweaking the theme.\n *\n * @internal\n */\nexport function ThemerActiveToolLayout(props: ActiveToolLayoutProps) {\n  const {open} = useThemer()\n\n  return (\n    <Flex height=\"fill\" sizing=\"border\">\n      <Box flex={1} height=\"fill\" overflow=\"auto\">\n        {props.renderDefault(props)}\n      </Box>\n\n      {open && (\n        <Layer height=\"fill\" style={sidebarStyle} zOffset={100}>\n          <ThemerSidebar />\n        </Layer>\n      )}\n    </Flex>\n  )\n}\n","import {isColor} from '../lib/mix'\nimport {CreateThemeOptions} from '../types'\nimport {THEMER_FIELDS} from './fields'\n\nconst STORAGE_KEY = 'sanityStudio:themer:colors'\n\n/**\n * Restores draft colors from localStorage, so theme drafts survive studio\n * reloads.\n *\n * @internal\n */\nexport function readStoredColors(): CreateThemeOptions | null {\n  try {\n    if (typeof localStorage === 'undefined') return null\n\n    const raw = localStorage.getItem(STORAGE_KEY)\n\n    if (!raw) return null\n\n    const parsed: unknown = JSON.parse(raw)\n\n    if (!parsed || typeof parsed !== 'object') return null\n\n    const colors: CreateThemeOptions = {}\n\n    for (const {key} of THEMER_FIELDS) {\n      const value: unknown = Reflect.get(parsed, key)\n\n      if (typeof value === 'string' && isColor(value)) {\n        colors[key] = value\n      }\n    }\n\n    return colors\n  } catch {\n    return null\n  }\n}\n\n/** @internal */\nexport function writeStoredColors(colors: CreateThemeOptions | null): void {\n  try {\n    if (typeof localStorage === 'undefined') return\n\n    if (colors === null) {\n      localStorage.removeItem(STORAGE_KEY)\n    } else {\n      localStorage.setItem(STORAGE_KEY, JSON.stringify(colors))\n    }\n  } catch {\n    // Storage can be unavailable (e.g. private browsing) — drafts just won't persist\n  }\n}\n","import {ThemeProvider} from '@sanity/ui'\nimport {useEffect, useMemo, useState} from 'react'\nimport {type LayoutProps} from 'sanity'\n\nimport {createTheme} from '../createTheme'\nimport {CreateThemeOptions} from '../types'\nimport {ThemerContext, ThemerContextValue} from './context'\nimport {readStoredColors, writeStoredColors} from './storage'\n\n/**\n * Wraps the whole Studio so that draft themes generated by the themer sidebar\n * apply everywhere while the user browses around, and hosts the state that the\n * navbar toggle and the sidebar share.\n *\n * The draft theme provider inherits the color scheme from the Studio, so the\n * preview follows the appearance setting (light/dark/system) like any other\n * theme.\n *\n * @internal\n */\nexport function ThemerLayout(props: LayoutProps & {baseColors: CreateThemeOptions}) {\n  const {baseColors, ...layoutProps} = props\n  const [open, setOpen] = useState(false)\n  const [colors, setColors] = useState<CreateThemeOptions | null>(readStoredColors)\n\n  useEffect(() => writeStoredColors(colors), [colors])\n\n  // The theme identity must be stable between renders: it feeds the\n  // styled-components theme context for the whole Studio, and rebuilding it\n  // would re-render everything\n  const theme = useMemo(\n    () => (colors === null ? null : createTheme({...baseColors, ...colors})),\n    [baseColors, colors],\n  )\n\n  const context = useMemo<ThemerContextValue>(\n    () => ({baseColors, colors, setColors, open, setOpen}),\n    [baseColors, colors, open],\n  )\n\n  return (\n    <ThemerContext.Provider value={context}>\n      {theme === null ? (\n        layoutProps.renderDefault(layoutProps)\n      ) : (\n        <ThemeProvider theme={theme}>{layoutProps.renderDefault(layoutProps)}</ThemeProvider>\n      )}\n    </ThemerContext.Provider>\n  )\n}\n","import {ColorWheelIcon} from '@sanity/icons/ColorWheel'\nimport {type NavbarProps} from 'sanity'\n\nimport {useThemer} from './context'\n\n/**\n * Adds the toggle that opens and closes the themer sidebar to the Studio\n * navbar.\n *\n * @internal\n */\nexport function ThemerNavbar(props: NavbarProps) {\n  const {open, setOpen} = useThemer()\n\n  return props.renderDefault({\n    ...props,\n    __internal_actions: [\n      ...(props.__internal_actions ?? []),\n      {\n        icon: ColorWheelIcon,\n        location: 'topbar',\n        name: 'themer',\n        onAction: () => setOpen(!open),\n        selected: open,\n        title: 'Themer',\n      },\n    ],\n  })\n}\n","import {definePlugin, type LayoutProps} from 'sanity'\n\nimport {CreateThemeOptions} from '../types'\nimport {ThemerActiveToolLayout} from './ThemerActiveToolLayout'\nimport {ThemerLayout} from './ThemerLayout'\nimport {ThemerNavbar} from './ThemerNavbar'\n\n/**\n * Options for the {@link themerTool} plugin.\n *\n * @public\n */\nexport interface ThemerToolOptions {\n  /**\n   * The colors that the Studio's configured theme was generated from — the\n   * themer starts editing from these, so pass the same object that the\n   * `theme` in the Studio config uses:\n   *\n   * ```ts\n   * const colors = {primary: '#2276fc'}\n   *\n   * export default defineConfig({\n   *   theme: createTheme(colors),\n   *   plugins: [themerTool({colors})],\n   * })\n   * ```\n   */\n  colors?: CreateThemeOptions\n}\n\n/**\n * A Studio plugin that adds a themer sidebar for generating Studio themes:\n * a navbar toggle opens the sidebar next to the active tool, where presets\n * and color pickers preview a `createTheme` theme live on the whole Studio\n * while you browse around. Toggle between light and dark mode with the\n * regular appearance menu — the preview follows it.\n *\n * ```ts\n * import {themerTool} from '@sanity/themer/tool'\n * import {defineConfig} from 'sanity'\n *\n * export default defineConfig({\n *   plugins: [themerTool()],\n *   // ...rest of the config\n * })\n * ```\n *\n * @public\n */\nexport const themerTool = definePlugin<ThemerToolOptions | void>((options) => {\n  const baseColors: CreateThemeOptions = options?.colors ?? {}\n\n  function ThemerLayoutWithOptions(props: LayoutProps) {\n    return <ThemerLayout {...props} baseColors={baseColors} />\n  }\n\n  return {\n    name: '@sanity/themer/tool',\n    studio: {\n      components: {\n        layout: ThemerLayoutWithOptions,\n        navbar: ThemerNavbar,\n        activeToolLayout: ThemerActiveToolLayout,\n      },\n    },\n  }\n})\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@sanity/themer",
+  "version": "0.0.0",
+  "description": "Generate Sanity Studio themes, and preview them with a Studio tool.",
+  "keywords": [
+    "sanity",
+    "studio",
+    "theme",
+    "themer",
+    "ui"
+  ],
+  "homepage": "https://www.sanity.io/",
+  "bugs": {
+    "url": "https://github.com/sanity-io/ui/issues"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/ui.git",
+    "directory": "packages/themer"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "typesVersions": {
+    "*": {
+      "legacy": [
+        "./dist/legacy.d.cts"
+      ],
+      "tool": [
+        "./dist/tool.d.cts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./legacy": {
+      "import": "./dist/legacy.js",
+      "require": "./dist/legacy.cjs"
+    },
+    "./tool": {
+      "import": "./dist/tool.js",
+      "require": "./dist/tool.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sanity/color": "^3.0.7",
+    "@sanity/ui": "^3.4.3",
+    "@sanity/icons": "^5.2.1"
+  },
+  "devDependencies": {
+    "@sanity/tsdown-config": "^0.19.6",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "react": "^19.2.7",
+    "rimraf": "^5.0.5",
+    "sanity": "^6.5.0",
+    "tsdown": "^0.22.12",
+    "typescript": "6.0.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "react": "^18 || >=19.0.0-0",
+    "sanity": "^5 || ^6"
+  },
+  "peerDependenciesMeta": {
+    "sanity": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.19 <22 || >=22.12"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "watch": "tsdown --watch"
+  }
+}