@sanity/themer 0.0.0 → 0.2.0

package/dist/_chunks/presets.js

@@ -1,201 +0,0 @@
-import { n as mix, t as isColor } from "./mix.js";
-import { COLOR_TINTS, color } from "@sanity/color";
-import { buildTheme } from "@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" && !isColor(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 ?? color.white.hex).toLowerCase(), darkest = (colors.darkest ?? color.black.hex).toLowerCase(), palette = {
-		...color,
-		black: darkest,
-		white: lightest
-	};
-	for (let [option, hueKey] of HUE_MAPPING) {
-		let mid = colors[option]?.toLowerCase();
-		(mid || anchored) && (palette[hueKey] = buildHueTints({
-			mid: mid ?? 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 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 COLOR_TINTS.reduce((tints, tintKey) => {
-		let tint = Number(tintKey);
-		return tint === 500 ? tints[tintKey] = mid : tint < 500 ? tints[tintKey] = mix(tint / 500, mid, lightest) : tints[tintKey] = mix((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"
-		}
-	}
-];
-export { createTheme as n, themeConfigFromColors as r, presets as t };
-
-//# sourceMappingURL=presets.js.map

package/dist/_chunks/presets.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"presets.js","names":[],"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,CAAC,QAAQ,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,YAAY,MAAM,MAAM,IAAA,CAAK,YAAY,GAC5D,WAAW,OAAO,WAAW,MAAM,MAAM,IAAA,CAAK,YAAY,GAE1D,UAA6B;EAAC,GAAG;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,OAAO,MAAM,OAAO,CAAC,IAAI,CAAC;GAC/B;GACA;EACF,CAAC;CAEL;CAEA,OAAO,EAAC,QAAO;AACjB;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,YAAY,SAA6B,CAAC,GAAc;CACtE,OAAO,WAAW,sBAAsB,MAAM,CAAC;AACjD;;;;;AAMA,SAAS,cAAc,SAIU;CAC/B,IAAM,EAAC,KAAK,UAAU,YAAW;CAGjC,OAAO,YAAY,QAA+C,OAAO,YAAY;EACnF,IAAM,OAAO,OAAO,OAAO;EAU3B,OARI,SAAS,MACX,MAAM,WAAW,MACR,OAAO,MAChB,MAAM,WAAW,IAAI,OAAO,KAAK,KAAK,QAAQ,IAE9C,MAAM,WAAW,KAAK,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"}

package/dist/_chunks/types.d.cts

@@ -1,26 +0,0 @@
-/**
- * The colors that `createTheme` derives a Sanity Studio theme from.
- *
- * Every color is optional — omitted colors keep their default Sanity ramps.
- * All values are hex colors (`#rgb` or `#rrggbb`).
- *
- * @public
- */
-interface CreateThemeOptions {
-  /** Tints the neutral colors (surfaces, borders and text). */
-  gray?: string;
-  /** The brand color — used for buttons, focus rings, links and selections. */
-  primary?: string;
-  /** The color of positive accents, like success badges. */
-  positive?: string;
-  /** The color of caution accents, like warning badges. */
-  caution?: string;
-  /** The color of critical accents, like errors and destructive actions. */
-  critical?: string;
-  /** The lightest surface color — the background of the light color scheme. */
-  lightest?: string;
-  /** The darkest surface color — the background of the dark color scheme. */
-  darkest?: string;
-}
-export { CreateThemeOptions as t };
-//# sourceMappingURL=types.d.cts.map

package/dist/_chunks/types.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/types.ts"],"mappings":"AAQA;;;;;;;;UAAiB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA"}

package/dist/_chunks/types.d.ts

@@ -1,26 +0,0 @@
-/**
- * The colors that `createTheme` derives a Sanity Studio theme from.
- *
- * Every color is optional — omitted colors keep their default Sanity ramps.
- * All values are hex colors (`#rgb` or `#rrggbb`).
- *
- * @public
- */
-interface CreateThemeOptions {
-  /** Tints the neutral colors (surfaces, borders and text). */
-  gray?: string;
-  /** The brand color — used for buttons, focus rings, links and selections. */
-  primary?: string;
-  /** The color of positive accents, like success badges. */
-  positive?: string;
-  /** The color of caution accents, like warning badges. */
-  caution?: string;
-  /** The color of critical accents, like errors and destructive actions. */
-  critical?: string;
-  /** The lightest surface color — the background of the light color scheme. */
-  lightest?: string;
-  /** The darkest surface color — the background of the dark color scheme. */
-  darkest?: string;
-}
-export { CreateThemeOptions as t };
-//# sourceMappingURL=types.d.ts.map

package/dist/_chunks/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":"AAQA;;;;;;;;UAAiB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA"}

package/dist/index.cjs

@@ -1,3 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_presets = require("./_chunks/presets.cjs");
-exports.createTheme = require_presets.n, exports.presets = require_presets.t, exports.themeConfigFromColors = require_presets.r;

package/dist/index.d.cts

@@ -1,63 +0,0 @@
-import { t as CreateThemeOptions } from "./_chunks/types.cjs";
-import { RootTheme, ThemeConfig } from "@sanity/ui/theme";
-/**
- * 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
- */
-declare function themeConfigFromColors(colors: CreateThemeOptions): ThemeConfig;
-/**
- * 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
- */
-declare function createTheme(colors?: CreateThemeOptions): RootTheme;
-/**
- * A named set of colors for `createTheme`.
- *
- * @public
- */
-interface ThemePreset {
-  slug: string;
-  title: string;
-  colors: CreateThemeOptions;
-}
-/**
- * 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
- */
-declare const presets: ThemePreset[];
-export { CreateThemeOptions, ThemePreset, createTheme, presets, themeConfigFromColors };
-//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/createTheme.ts","../src/presets.ts"],"mappings":";;;;;;;;;;;;;;;;;;iBA+BgB,sBAAsB,QAAQ,qBAAqB;;;;;;;;;;;;;;;;;;iBAqDnD,YAAY,SAAQ,qBAA0B;;;;;;UC7E7C;EACf;EACA;EACA,QAAQ;;;;;;;;;;;;;;;cAgBG,SAAS"}