@sanity/themer 0.3.16 → 0.4.0

package/README.md

@@ -8,17 +8,23 @@ npm install @sanity/themer
 
 ## Usage
 
-`buildTheme` builds the same type of theme as `buildTheme` from `@sanity/ui/theme` — ready for the `theme` property of a Studio config — but takes colors instead of design tokens. Under the hood it only swaps out the color palette that `@sanity/ui/theme` otherwise fills with [`@sanity/color`](https://www.sanity.io/docs/color):
+`buildTheme` builds the same type of theme as `buildTheme` from `@sanity/ui/theme` — ready for the `theme` property of a Studio config — but takes a handful of colors per color scheme instead of design tokens. Under the hood it only swaps out the color palette that `@sanity/ui/theme` otherwise fills with [`@sanity/color`](https://www.sanity.io/docs/color), once for each scheme:
 
 ```ts
 import {buildTheme} from '@sanity/themer'
 import {defineConfig} from 'sanity'
 
 export const theme = buildTheme({
-  accent: '#f00', // required
-  text: '#727892', // optional
-  background: {dark: '#0d0e12', light: '#ffffff'}, // optional
-  contrast: 85, // optional, 15–100
+  light: {
+    accent: '#f00',
+    text: '#727892',
+    background: '#ffffff',
+    contrast: 85, // 15–100
+  },
+  dark: {
+    accent: '#f66',
+    background: '#0d0e12',
+  },
 })
 
 export default defineConfig({
@@ -27,16 +33,16 @@ export default defineConfig({
 })
 ```
 
-- `accent` replaces the `blue` scale of the palette, which Sanity UI uses for primary buttons, focus rings and links.
+Everything is optional — both schemes, and every color in them. Whatever is omitted falls back to the stock Studio colors, so `buildTheme({})` matches `buildTheme()` from `@sanity/ui/theme` with no options exactly, and the two schemes are free to differ in every color rather than only their background:
+
+- `accent` replaces the `blue` scale of the scheme's palette, which Sanity UI uses for primary buttons, focus rings and links.
 - `text` replaces the `gray` scale — text, icons, borders and neutral surfaces. When omitted it is derived from `accent`: a mostly desaturated version of it, the way the stock gray carries a hint of the stock blue.
-- `background.dark` replaces `black` and `background.light` replaces `white` — the backgrounds of the two color schemes that every other color blends onto.
+- `background` replaces `black` in the dark scheme and `white` in the light scheme — the background that every other color of the scheme blends onto.
 - `contrast` controls how strongly text and borders separate from the accent. The default `85` uses the text color as-is; `100` removes its tint entirely (a high contrast scheme with no mixing of text and accent), and lower values blend more and more of the accent into the text scale, giving text and borders more color.
 
-A few ground rules keep the generated palette usable: the accent and text colors cannot be too dark or too light (they would mess with the rest of their scales), `background.dark` is made darker until it has enough contrast with both of them (it can never be lighter than either), and `background.light` can never be darker than either.
-
-Called with the stock colors — like `text` and `background` in the example — the generated colors match `buildTheme()` from `@sanity/ui/theme` with no options exactly.
+A few ground rules keep the generated palettes usable: the accent and text colors cannot be too dark or too light (they would mess with the rest of their scales), the dark background is made darker until it has enough contrast with both of them (it can never be lighter than either), and the light background can never be darker than either.
 
-`buildPalette` returns the generated `@sanity/color`-shaped palette without building a theme from it, and `presets` ships the hosted Themer service presets translated to `buildTheme` options:
+`buildPalette` returns the generated `@sanity/color`-shaped palettes (`{light, dark}`) without building a theme from them, and `presets` ships the hosted Themer service presets translated to `buildTheme` options:
 
 ```ts
 import {buildTheme, presets} from '@sanity/themer'
@@ -47,7 +53,7 @@ const theme = buildTheme(verdant.options)
 
 ## Studio tool
 
-`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes: presets, accent/text/background pickers and a contrast slider preview a `buildTheme` theme live on the whole Studio, plus the snippet to make it permanent:
+`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
 
 ```ts
 import {themerTool} from '@sanity/themer/tool'
@@ -59,7 +65,7 @@ export default defineConfig({
 })
 ```
 
-If the Studio already uses a `buildTheme` theme, pass the same options so the tool starts editing from them: `themerTool({config: {accent: '#1cb485'}})`.
+If the Studio already uses a `buildTheme` theme, pass the same options so the tool starts editing from them: `themerTool({config: {light: {accent: '#1cb485'}}})`.
 
 ## Migrating from themer.sanity.build
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { t as BuildThemeOptions } from "./options-BaqJJgRs.js";
+import { n as SchemeThemeOptions, t as BuildThemeOptions } from "./options-CU-emn_p.js";
 import { ColorHueKey, ColorTintKey } from "@sanity/color";
-import { RootTheme } from "@sanity/ui/theme";
+import { RootTheme, ThemeColorSchemeKey } from "@sanity/ui/theme";
 /**
- * The color palette generated by {@link buildPalette}: the `palette` config
- * of `buildTheme` from `@sanity/ui/theme`, with every color as a hex string.
+ * A color palette generated by {@link buildPalette}: the `palette` config of
+ * `buildTheme` from `@sanity/ui/theme`, with every color as a hex string.
  *
  * @public
  */
@@ -12,39 +12,53 @@ type GeneratedColorPalette = {
   white: string;
 } & Record<ColorHueKey, Record<ColorTintKey, string>>;
 /**
- * Generates a Sanity UI color palette from the theme options: the accent
- * color replaces the `blue` scale, the text color the `gray` scale, and the
- * backgrounds replace `black` and `white`. All other hues keep their stock
- * `@sanity/color` values. Called with the stock colors, it returns the stock
- * palette byte-for-byte.
+ * The palettes generated by {@link buildPalette} — one per color scheme.
+ *
+ * @public
+ */
+type GeneratedColorPalettes = Record<ThemeColorSchemeKey, GeneratedColorPalette>;
+/**
+ * Generates a Sanity UI color palette for each color scheme from the theme
+ * options: in each palette the scheme's accent color replaces the `blue`
+ * scale, its text color the `gray` scale, and the backgrounds replace `black`
+ * and `white`. All other hues keep their stock `@sanity/color` values. Called
+ * with the stock colors, both palettes come back as the stock palette
+ * byte-for-byte.
  *
  * ```ts
  * import {buildPalette} from '@sanity/themer'
  *
- * const palette = buildPalette({accent: '#556bfc'})
+ * const {light, dark} = buildPalette({light: {accent: '#556bfc'}})
  * ```
  *
  * @public
  */
-export declare function buildPalette(options: BuildThemeOptions): GeneratedColorPalette;
+export declare function buildPalette(options?: BuildThemeOptions): GeneratedColorPalettes;
 /**
- * Generates a Studio theme from a handful of colors, by replacing the color
- * palette that the `buildTheme` from `@sanity/ui/theme` otherwise fills with
- * `@sanity/color`: the accent color replaces the `blue` scale (primary
- * buttons, focus rings, links), the optional text color the `gray` scale
- * (text, icons, borders), and the optional backgrounds replace `black` and
- * `white`. The result is the same type of theme that `@sanity/ui/theme`
- * builds, ready for the `theme` property of a Studio config.
+ * Generates a Studio theme from a handful of colors per color scheme, by
+ * replacing the color palette that the `buildTheme` from `@sanity/ui/theme`
+ * otherwise fills with `@sanity/color`: in each scheme the accent color
+ * replaces the `blue` scale (primary buttons, focus rings, links), the
+ * optional text color the `gray` scale (text, icons, borders), and the
+ * optional background replaces `black` (dark) or `white` (light). The result
+ * is the same type of theme that `@sanity/ui/theme` builds, ready for the
+ * `theme` property of a Studio config.
  *
  * ```ts
  * import {buildTheme} from '@sanity/themer'
  * import {defineConfig} from 'sanity'
  *
  * export const theme = buildTheme({
- *   accent: '#556bfc',
- *   text: '#727892', // optional — derived from `accent` when omitted
- *   background: {dark: '#0d0e12', light: '#ffffff'}, // optional
- *   contrast: 85, // optional, 15–100
+ *   light: {
+ *     accent: '#556bfc',
+ *     text: '#727892', // optional — derived from `accent` when omitted
+ *     background: '#ffffff', // optional
+ *     contrast: 85, // optional, 15–100
+ *   },
+ *   dark: {
+ *     accent: '#556bfc',
+ *     background: '#0d0e12',
+ *   },
  * })
  *
  * export default defineConfig({
@@ -53,12 +67,13 @@ export declare function buildPalette(options: BuildThemeOptions): GeneratedColor
  * })
  * ```
  *
- * Called with the stock colors — like the example — it returns the exact
- * same colors as `buildTheme()` from `@sanity/ui/theme` with no options.
+ * Every option is optional and falls back to the stock Studio colors: called
+ * with the stock colors — like the example — or with no options at all, it
+ * returns the exact same colors as `buildTheme()` from `@sanity/ui/theme`.
  *
  * @public
  */
-export declare function buildTheme(options: BuildThemeOptions): RootTheme;
+export declare function buildTheme(options?: BuildThemeOptions): RootTheme;
 /**
  * A preset theme: a named set of {@link BuildThemeOptions} ready to pass to
  * `buildTheme`.
@@ -75,7 +90,7 @@ interface ThemePreset {
  * Preset themes for `buildTheme`, carried over from the hosted Themer service
  * (themer.sanity.build) presets: each one maps the legacy preset's primary
  * hue to `accent`, its default hue to `text` and its lightest/darkest colors
- * to the backgrounds.
+ * to the backgrounds of the light and dark scheme.
  *
  * ```ts
  * import {buildTheme, presets} from '@sanity/themer'
@@ -87,5 +102,5 @@ interface ThemePreset {
  * @public
  */
 export declare const presets: ThemePreset[];
-export type { BuildThemeOptions, GeneratedColorPalette, ThemePreset };
+export type { BuildThemeOptions, GeneratedColorPalette, GeneratedColorPalettes, SchemeThemeOptions, ThemePreset };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/theme/buildPalette.ts","../src/theme/buildTheme.ts","../src/theme/presets.ts"],"mappings":";;;;;;;;;KAqCY;EAAyB;EAAe;IAAiB,OACnE,aACA,OAAO;;;;;;;;;;;;;;;;wBAkBO,aAAa,SAAS,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBCrB1C,WAAW,SAAS,oBAAoB;;;;;;;UC5BvC;EACf;EACA;;EAEA,SAAS;;;;;;;;;;;;;;;;;qBAkBE,SAAS"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/theme/buildPalette.ts","../src/theme/buildTheme.ts","../src/theme/presets.ts"],"mappings":";;;;;;;;;KAuCY;EAAyB;EAAe;IAAiB,OACnE,aACA,OAAO;;;;;;KAQG,yBAAyB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;wBAkBjD,aAAa,UAAS,oBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBCjB/C,WAAW,UAAS,oBAAyB;;;;;;;UC1C5C;EACf;EACA;;EAEA,SAAS;;;;;;;;;;;;;;;;;qBA6BE,SAAS"}

package/dist/index.js

@@ -1,2 +1,2 @@
-import { n as buildTheme, r as buildPalette, t as presets } from "./presets-By3s-D-S.js";
+import { n as buildTheme, r as buildPalette, t as presets } from "./presets-CqBgS3A-.js";
 export { buildPalette, buildTheme, presets };

package/dist/options-CU-emn_p.d.ts

@@ -0,0 +1,69 @@
+import { ThemeColorSchemeKey } from "@sanity/ui/theme";
+/**
+ * The colors of one color scheme, for {@link BuildThemeOptions}. Every color
+ * is a hex color (`#rgb` or `#rrggbb`), and everything is optional: omitted
+ * options fall back to the stock Studio colors, so an empty object reproduces
+ * the stock scheme exactly.
+ *
+ * @public
+ */
+interface SchemeThemeOptions {
+  /**
+   * The accent color — the brand color of the scheme. Replaces the `blue`
+   * scale of the palette, which Sanity UI uses for primary buttons, focus
+   * rings and links.
+   *
+   * The stock accent is `#556bfc` (`blue/500` of `@sanity/color`).
+   */
+  accent?: string;
+  /**
+   * The background of the scheme — every other color of the scheme is
+   * blended onto it. The dark scheme's background replaces `black` in the
+   * palette and the light scheme's replaces `white`.
+   *
+   * It is kept far enough from the text and accent colors to stay usable:
+   * a dark background is made darker until it has enough contrast with them
+   * (it can never be lighter than either), and a light background can never
+   * be darker than either.
+   *
+   * The stock backgrounds are `#0d0e12` (dark) and `#ffffff` (light).
+   */
+  background?: string;
+  /**
+   * How strongly text and borders separate from the accent color, between 15
+   * and 100. The default is 85, which uses the text color as-is. Above 85 the
+   * text scale loses its tint until it is fully neutral at 100 — a high
+   * contrast scheme with no mixing of the text and accent colors. Below 85
+   * more and more of the accent color mixes into the text scale, giving text
+   * and borders more color, until the scale fully adopts the accent hue and
+   * saturation at 15.
+   */
+  contrast?: number;
+  /**
+   * The text color. Replaces the `gray` scale of the palette, which Sanity UI
+   * uses for text, icons, borders and neutral surfaces. When omitted, it is
+   * derived from the accent color: a mostly desaturated version of it, the
+   * way the stock `gray` scale carries a hint of the stock blue.
+   *
+   * The stock text color is `#727892` (`gray/500` of `@sanity/color`).
+   */
+  text?: string;
+}
+/**
+ * Options for {@link buildTheme} and {@link buildPalette}: the colors of the
+ * dark and the light scheme, each with its own accent, text, background and
+ * contrast — so the two schemes can differ in more than their background.
+ * Both schemes are optional, and so is every color: whatever is omitted
+ * falls back to the stock Studio colors, so `buildTheme({})` matches
+ * `buildTheme()` from `@sanity/ui/theme` exactly.
+ *
+ * @public
+ */
+interface BuildThemeOptions {
+  /** The colors of the dark scheme */
+  dark?: SchemeThemeOptions;
+  /** The colors of the light scheme */
+  light?: SchemeThemeOptions;
+}
+export { SchemeThemeOptions as n, BuildThemeOptions as t };
+//# sourceMappingURL=options-CU-emn_p.d.ts.map

package/dist/options-CU-emn_p.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-CU-emn_p.d.ts","names":[],"sources":["../src/theme/options.ts"],"mappings":";;;;;;;;;UAciB;;;;;;;;EAQf;;;;;;;;;;;;;EAcA;;;;;;;;;;EAWA;;;;;;;;;EAUA;;;;;;;;;;;;UAae;;EAEf,OAAO;;EAEP,QAAQ"}

package/dist/{presets-By3s-D-S.js → presets-CqBgS3A-.js}

@@ -1,5 +1,5 @@
 import { COLOR_TINTS, black, blue, color, gray, white } from "@sanity/color";
-import { buildTheme } from "@sanity/ui/theme";
+import { buildTheme, v0_v2, v2_v0 } from "@sanity/ui/theme";
 /** @internal */
 function hexToHsl(hex) {
 	let [r, g, b] = parseHex(hex), max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min, l = (max + min) / 2;
@@ -71,19 +71,31 @@ function clamp01(value) {
 function isColor(input) {
 	return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input);
 }
-/** The stock accent color — `blue/500` of `@sanity/color` @internal */
-const DEFAULT_ACCENT = blue[500].hex, DEFAULT_TEXT = gray[500].hex, DEFAULT_BACKGROUND_DARK = black.hex, DEFAULT_BACKGROUND_LIGHT = white.hex;
+/** The color schemes, in the order the tool presents them @internal */
+const SCHEMES = ["light", "dark"], DEFAULT_ACCENT = blue[500].hex, DEFAULT_TEXT = gray[500].hex, DEFAULT_BACKGROUND = {
+	dark: black.hex,
+	light: white.hex
+}, FLAT_OPTION_KEYS = [
+	"accent",
+	"text",
+	"background",
+	"contrast"
+];
 /** @internal */
-function resolveThemeOptions(options) {
-	let accent = normalizeColor(options.accent, "accent");
+function resolveThemeOptions(options = {}) {
+	if (FLAT_OPTION_KEYS.some((key) => key in options)) throw TypeError("The `buildTheme` options are grouped by color scheme: pass `{light: {accent, text, background, contrast}, dark: {…}}` instead of one set of colors for both");
+	return {
+		dark: resolveSchemeOptions(options.dark ?? {}, "dark"),
+		light: resolveSchemeOptions(options.light ?? {}, "light")
+	};
+}
+function resolveSchemeOptions(options, scheme) {
+	let accent = options.accent === void 0 ? DEFAULT_ACCENT : normalizeColor(options.accent, `${scheme}.accent`);
 	return {
 		accent,
-		background: {
-			dark: options.background?.dark === void 0 ? DEFAULT_BACKGROUND_DARK : normalizeColor(options.background.dark, "background.dark"),
-			light: options.background?.light === void 0 ? DEFAULT_BACKGROUND_LIGHT : normalizeColor(options.background.light, "background.light")
-		},
-		contrast: normalizeContrast(options.contrast),
-		text: options.text === void 0 ? deriveTextColor(accent) : normalizeColor(options.text, "text")
+		background: options.background === void 0 ? DEFAULT_BACKGROUND[scheme] : normalizeColor(options.background, `${scheme}.background`),
+		contrast: normalizeContrast(options.contrast, scheme),
+		text: options.text === void 0 ? deriveTextColor(accent) : normalizeColor(options.text, `${scheme}.text`)
 	};
 }
 /**
@@ -108,9 +120,9 @@ function normalizeColor(value, name) {
 	let lower = value.toLowerCase();
 	return lower.length === 4 ? `#${lower[1]}${lower[1]}${lower[2]}${lower[2]}${lower[3]}${lower[3]}` : lower;
 }
-function normalizeContrast(value) {
+function normalizeContrast(value, scheme) {
 	if (value === void 0) return 85;
-	if (typeof value != "number" || !Number.isFinite(value)) throw TypeError(`Invalid \`contrast\`: ${JSON.stringify(value)} — expected a number between 15 and 100`);
+	if (typeof value != "number" || !Number.isFinite(value)) throw TypeError(`Invalid \`${scheme}.contrast\`: ${JSON.stringify(value)} — expected a number between 15 and 100`);
 	return Math.min(100, Math.max(15, value));
 }
 /**
@@ -120,28 +132,42 @@ function normalizeContrast(value) {
 */
 const BACKGROUND_LIGHTNESS_STEP = .005;
 /**
-* Generates a Sanity UI color palette from the theme options: the accent
-* color replaces the `blue` scale, the text color the `gray` scale, and the
-* backgrounds replace `black` and `white`. All other hues keep their stock
-* `@sanity/color` values. Called with the stock colors, it returns the stock
-* palette byte-for-byte.
+* Generates a Sanity UI color palette for each color scheme from the theme
+* options: in each palette the scheme's accent color replaces the `blue`
+* scale, its text color the `gray` scale, and the backgrounds replace `black`
+* and `white`. All other hues keep their stock `@sanity/color` values. Called
+* with the stock colors, both palettes come back as the stock palette
+* byte-for-byte.
 *
 * ```ts
 * import {buildPalette} from '@sanity/themer'
 *
-* const palette = buildPalette({accent: '#556bfc'})
+* const {light, dark} = buildPalette({light: {accent: '#556bfc'}})
 * ```
 *
 * @public
 */
-function buildPalette(options) {
-	let resolved = resolveThemeOptions(options), accentAnchor = clampAnchorLightness(hexToHsl(resolved.accent)), grayAnchor = applyContrast(clampAnchorLightness(hexToHsl(resolved.text)), accentAnchor, resolved.contrast), blueTints = remapTints(color.blue, hexToHsl(DEFAULT_ACCENT), accentAnchor), grayTints = remapTints(color.gray, hexToHsl(DEFAULT_TEXT), grayAnchor), anchorLuminances = [relativeLuminance(hslToHex(grayAnchor)), relativeLuminance(hslToHex(accentAnchor))];
+function buildPalette(options = {}) {
+	let resolved = resolveThemeOptions(options);
+	return {
+		dark: buildSchemePalette("dark", resolved.dark, resolved.light.background),
+		light: buildSchemePalette("light", resolved.light, resolved.dark.background)
+	};
+}
+/**
+* Generates the palette of one scheme. The scheme's own background takes the
+* slot the scheme paints with (`black` for dark, `white` for light), while
+* the other slot — which a scheme only touches for a few inverted details —
+* takes the other scheme's background, so the theme stays one palette.
+*/
+function buildSchemePalette(key, scheme, otherBackground) {
+	let accentAnchor = clampAnchorLightness(hexToHsl(scheme.accent)), grayAnchor = applyContrast(clampAnchorLightness(hexToHsl(scheme.text)), accentAnchor, scheme.contrast), blueTints = remapTints(color.blue, hexToHsl(DEFAULT_ACCENT), accentAnchor), grayTints = remapTints(color.gray, hexToHsl(DEFAULT_TEXT), grayAnchor), anchorLuminances = [relativeLuminance(hslToHex(grayAnchor)), relativeLuminance(hslToHex(accentAnchor))], darkBackground = key === "dark" ? scheme.background : otherBackground, lightBackground = key === "light" ? scheme.background : otherBackground;
 	return {
-		black: darkenBackground(resolved.background.dark, {
+		black: darkenBackground(darkBackground, {
 			anchorLuminances,
 			tints: [grayTints[400], blueTints[400]]
 		}),
-		white: lightenBackground(resolved.background.light, anchorLuminances),
+		white: lightenBackground(lightBackground, anchorLuminances),
 		gray: grayTints,
 		blue: blueTints,
 		purple: tintHexes(color.purple),
@@ -243,23 +269,30 @@ function tintHexes(tints) {
 	return result;
 }
 /**
-* Generates a Studio theme from a handful of colors, by replacing the color
-* palette that the `buildTheme` from `@sanity/ui/theme` otherwise fills with
-* `@sanity/color`: the accent color replaces the `blue` scale (primary
-* buttons, focus rings, links), the optional text color the `gray` scale
-* (text, icons, borders), and the optional backgrounds replace `black` and
-* `white`. The result is the same type of theme that `@sanity/ui/theme`
-* builds, ready for the `theme` property of a Studio config.
+* Generates a Studio theme from a handful of colors per color scheme, by
+* replacing the color palette that the `buildTheme` from `@sanity/ui/theme`
+* otherwise fills with `@sanity/color`: in each scheme the accent color
+* replaces the `blue` scale (primary buttons, focus rings, links), the
+* optional text color the `gray` scale (text, icons, borders), and the
+* optional background replaces `black` (dark) or `white` (light). The result
+* is the same type of theme that `@sanity/ui/theme` builds, ready for the
+* `theme` property of a Studio config.
 *
 * ```ts
 * import {buildTheme} from '@sanity/themer'
 * import {defineConfig} from 'sanity'
 *
 * export const theme = buildTheme({
-*   accent: '#556bfc',
-*   text: '#727892', // optional — derived from `accent` when omitted
-*   background: {dark: '#0d0e12', light: '#ffffff'}, // optional
-*   contrast: 85, // optional, 15–100
+*   light: {
+*     accent: '#556bfc',
+*     text: '#727892', // optional — derived from `accent` when omitted
+*     background: '#ffffff', // optional
+*     contrast: 85, // optional, 15–100
+*   },
+*   dark: {
+*     accent: '#556bfc',
+*     background: '#0d0e12',
+*   },
 * })
 *
 * export default defineConfig({
@@ -268,19 +301,49 @@ function tintHexes(tints) {
 * })
 * ```
 *
-* Called with the stock colors — like the example — it returns the exact
-* same colors as `buildTheme()` from `@sanity/ui/theme` with no options.
+* Every option is optional and falls back to the stock Studio colors: called
+* with the stock colors — like the example — or with no options at all, it
+* returns the exact same colors as `buildTheme()` from `@sanity/ui/theme`.
 *
 * @public
 */
-function buildTheme$1(options) {
-	return buildTheme({ palette: buildPalette(options) });
+function buildTheme$1(options = {}) {
+	let palettes = buildPalette(options), light = v0_v2(buildTheme({ palette: palettes.light })), dark = v0_v2(buildTheme({ palette: palettes.dark })), color = {
+		get light() {
+			return light.color.light;
+		},
+		get dark() {
+			return dark.color.dark;
+		}
+	};
+	return v2_v0({
+		...light,
+		color
+	});
+}
+/**
+* The hosted Themer presets had one accent and one text color for both
+* schemes, and a background per scheme
+*/
+function scheme(accent, text, backgrounds) {
+	return {
+		dark: {
+			accent,
+			text,
+			background: backgrounds.dark
+		},
+		light: {
+			accent,
+			text,
+			background: backgrounds.light
+		}
+	};
 }
 /**
 * Preset themes for `buildTheme`, carried over from the hosted Themer service
 * (themer.sanity.build) presets: each one maps the legacy preset's primary
 * hue to `accent`, its default hue to `text` and its lightest/darkest colors
-* to the backgrounds.
+* to the backgrounds of the light and dark scheme.
 *
 * ```ts
 * import {buildTheme, presets} from '@sanity/themer'
@@ -295,93 +358,65 @@ const presets = [
 	{
 		slug: "studio",
 		title: "Studio",
-		options: { accent: DEFAULT_ACCENT }
+		options: {}
 	},
 	{
 		slug: "dew",
 		title: "Dew",
-		options: {
-			accent: "#d1a308",
-			text: "#5e63b4",
-			background: {
-				dark: "#0d0d15",
-				light: "#fcfcfd"
-			}
-		}
+		options: scheme("#d1a308", "#5e63b4", {
+			dark: "#0d0d15",
+			light: "#fcfcfd"
+		})
 	},
 	{
 		slug: "pink-synth",
 		title: "Pink Synth",
-		options: {
-			accent: "#ec4899",
-			text: "#8b6584",
-			background: {
-				dark: "#171721",
-				light: "#f7f2f5"
-			}
-		}
+		options: scheme("#ec4899", "#8b6584", {
+			dark: "#171721",
+			light: "#f7f2f5"
+		})
 	},
 	{
 		slug: "pixel-art",
 		title: "Pixel Art",
-		options: {
-			accent: "#f10784",
-			text: "#57619c",
-			background: {
-				dark: "#0d0e15",
-				light: "#fcfcfd"
-			}
-		}
+		options: scheme("#f10784", "#57619c", {
+			dark: "#0d0e15",
+			light: "#fcfcfd"
+		})
 	},
 	{
 		slug: "retro-colonial",
 		title: "Retro Colonial",
-		options: {
-			accent: "#fa7a78",
-			text: "#8bb9b5",
-			background: {
-				dark: "#0d1515",
-				light: "#fcfdfd"
-			}
-		}
+		options: scheme("#fa7a78", "#8bb9b5", {
+			dark: "#0d1515",
+			light: "#fcfdfd"
+		})
 	},
 	{
 		slug: "rosabel",
 		title: "Rosabel",
-		options: {
-			accent: "#ed2555",
-			text: "#9d8966",
-			background: {
-				dark: "#15120d",
-				light: "#fdfdfc"
-			}
-		}
+		options: scheme("#ed2555", "#9d8966", {
+			dark: "#15120d",
+			light: "#fdfdfc"
+		})
 	},
 	{
 		slug: "stereofidelic",
 		title: "Stereofidelic",
-		options: {
-			accent: "#f13009",
-			text: "#678e9a",
-			background: {
-				dark: "#0e1315",
-				light: "#fcfdfd"
-			}
-		}
+		options: scheme("#f13009", "#678e9a", {
+			dark: "#0e1315",
+			light: "#fcfdfd"
+		})
 	},
 	{
 		slug: "verdant",
 		title: "Verdant",
-		options: {
-			accent: "#1cb485",
-			text: "#5c9199",
-			background: {
-				dark: "#0d1415",
-				light: "#fcfdfd"
-			}
-		}
+		options: scheme("#1cb485", "#5c9199", {
+			dark: "#0d1415",
+			light: "#fcfdfd"
+		})
 	}
 ];
-export { DEFAULT_BACKGROUND_DARK as a, resolveThemeOptions as c, DEFAULT_ACCENT as i, isColor as l, buildTheme$1 as n, DEFAULT_BACKGROUND_LIGHT as o, buildPalette as r, deriveTextColor as s, presets as t };
+export { DEFAULT_BACKGROUND as a, resolveThemeOptions as c, hslToHex as d, relativeLuminance as f, DEFAULT_ACCENT as i, isColor as l, buildTheme$1 as n, SCHEMES as o, buildPalette as r, deriveTextColor as s, presets as t, hexToHsl as u };
 
-//# sourceMappingURL=presets-By3s-D-S.js.map
+//# sourceMappingURL=presets-CqBgS3A-.js.map