@sanity/themer 0.0.0 → 0.2.0

package/README.md

@@ -1,8 +1,6 @@
 # @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.
+Generate [Sanity Studio](https://www.sanity.io/studio) themes from a handful of colors.
 
 ```sh
 npm install @sanity/themer
@@ -10,58 +8,48 @@ npm install @sanity/themer
 
 ## Usage
 
-Generate a theme from a handful of colors:
+`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):
 
 ```ts
-// sanity.config.ts
-import {createTheme} from '@sanity/themer'
+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
+})
+
 export default defineConfig({
-  theme: createTheme({primary: '#2276fc'}),
+  theme,
   // ...rest of the config
 })
 ```
 
-Every color is optional — omitted colors keep their default Sanity ramps:
+- `accent` replaces the `blue` scale of the 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.
+- `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.
 
-| 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                    |
+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.
 
-Preset themes are available from the `presets` export:
+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.
 
-```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`:
+`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:
 
 ```ts
-import {themeConfigFromColors} from '@sanity/themer'
-import {buildTheme} from '@sanity/ui/theme'
+import {buildTheme, presets} from '@sanity/themer'
 
-const theme = buildTheme({
-  ...themeConfigFromColors({primary: '#2276fc'}),
-  // ...other ThemeConfig properties
-})
+const verdant = presets.find((preset) => preset.slug === 'verdant')
+const theme = buildTheme(verdant.options)
 ```
 
-## The Studio tool
+## Studio tool
 
-The `themerTool` plugin previews generated themes live on your own Studio:
+`@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:
 
 ```ts
-// sanity.config.ts
 import {themerTool} from '@sanity/themer/tool'
 import {defineConfig} from 'sanity'
 
@@ -71,35 +59,22 @@ export default defineConfig({
 })
 ```
 
-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})],
-})
-```
+If the Studio already uses a `buildTheme` theme, pass the same options so the tool starts editing from them: `themerTool({config: {accent: '#1cb485'}})`.
 
 ## 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:
+This package is also the npm migration path off the hosted Themer service ([themer.sanity.build](https://themer.sanity.build)) — the generator runs locally, so Studio configs no longer need to import modules from a hosted URL.
+
+`@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 `buildThemeFromUrl` 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'
+import {buildThemeFromUrl} from '@sanity/themer/legacy'
 
-const theme = createThemeFromUrl(
+const theme = buildThemeFromUrl(
   'https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8',
 )
 ```
@@ -121,17 +96,17 @@ export default defineConfig({
 })
 ```
 
-The hosted presets are also available directly:
+The hosted presets are addressed by query, exactly like the service:
 
 ```ts
-import {createTheme, getPreset} from '@sanity/themer/legacy'
+import {buildThemeFromUrl} from '@sanity/themer/legacy'
 
-const theme = createTheme(getPreset('verdant').hues)
+const theme = buildThemeFromUrl('?preset=verdant')
 ```
 
 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.
+The generated theme carries no `__themer` flag, which is the one intentional difference from the hosted module. Sanity Studio uses that flag to throw away the fonts the hosted module bundled, because they had drifted from the Studio's own; here the fonts come from the `@sanity/ui` installed next to the Studio, so there is nothing to throw away.
 
 ## License
 

package/dist/index.d.ts

@@ -1,63 +1,91 @@
-import { t as CreateThemeOptions } from "./_chunks/types.js";
-import { RootTheme, ThemeConfig } from "@sanity/ui/theme";
+import { t as BuildThemeOptions } from "./options-BaqJJgRs.js";
+import { ColorHueKey, ColorTintKey } from "@sanity/color";
+import { RootTheme } from "@sanity/ui/theme";
 /**
- * Maps themeable colors to a `@sanity/ui` `ThemeConfig`, for when a theme
- * needs further customization than `createTheme` exposes:
+ * The color palette generated by {@link buildPalette}: the `palette` config
+ * of `buildTheme` from `@sanity/ui/theme`, with every color as a hex string.
+ *
+ * @public
+ */
+type GeneratedColorPalette = {
+  black: string;
+  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.
  *
  * ```ts
- * import {themeConfigFromColors} from '@sanity/themer'
- * import {buildTheme} from '@sanity/ui/theme'
+ * import {buildPalette} from '@sanity/themer'
  *
- * const theme = buildTheme({
- *   ...themeConfigFromColors({primary: '#2276fc'}),
- *   // ...other ThemeConfig properties
- * })
+ * const palette = buildPalette({accent: '#556bfc'})
  * ```
  *
  * @public
  */
-declare function themeConfigFromColors(colors: CreateThemeOptions): ThemeConfig;
+declare function buildPalette(options: BuildThemeOptions): GeneratedColorPalette;
 /**
- * Generates a Sanity Studio theme from a handful of colors:
+ * 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.
  *
  * ```ts
- * import {createTheme} from '@sanity/themer'
+ * 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
+ * })
+ *
  * export default defineConfig({
- *   theme: createTheme({primary: '#2276fc'}),
+ *   theme,
  *   // ...rest of the config
  * })
  * ```
  *
- * Calling it without options returns the default Sanity Studio theme.
+ * Called with the stock colors — like the example — it returns the exact
+ * same colors as `buildTheme()` from `@sanity/ui/theme` with no options.
  *
  * @public
  */
-declare function createTheme(colors?: CreateThemeOptions): RootTheme;
+declare function buildTheme(options: BuildThemeOptions): RootTheme;
 /**
- * A named set of colors for `createTheme`.
+ * A preset theme: a named set of {@link BuildThemeOptions} ready to pass to
+ * `buildTheme`.
  *
  * @public
  */
 interface ThemePreset {
   slug: string;
   title: string;
-  colors: CreateThemeOptions;
+  /** The preset's theme options, ready to pass to `buildTheme` */
+  options: BuildThemeOptions;
 }
 /**
- * Preset themes, carried over from the hosted Themer service
- * (themer.sanity.build) and re-expressed as `createTheme` colors.
+ * 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.
  *
  * ```ts
- * import {createTheme, presets} from '@sanity/themer'
+ * import {buildTheme, presets} from '@sanity/themer'
  *
  * const verdant = presets.find((preset) => preset.slug === 'verdant')
- * const theme = createTheme(verdant.colors)
+ * const theme = buildTheme(verdant.options)
  * ```
  *
  * @public
  */
 declare const presets: ThemePreset[];
-export { CreateThemeOptions, ThemePreset, createTheme, presets, themeConfigFromColors };
+export { type BuildThemeOptions, type GeneratedColorPalette, type ThemePreset, buildPalette, buildTheme, presets };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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"}
+{"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;;;;;;;;;;;;;;;;iBAkBO,aAAa,SAAS,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCrB1C,WAAW,SAAS,oBAAoB;;;;;;;UC5BvC;EACf;EACA;;EAEA,SAAS;;;;;;;;;;;;;;;;;cAkBE,SAAS"}

package/dist/index.js

@@ -1,2 +1,2 @@
-import { n as createTheme, r as themeConfigFromColors, t as presets } from "./_chunks/presets.js";
-export { createTheme, presets, themeConfigFromColors };
+import { n as buildTheme, r as buildPalette, t as presets } from "./presets-DWzYcsLg.js";
+export { buildPalette, buildTheme, presets };

package/dist/legacy.d.ts

@@ -48,11 +48,6 @@ type PartialHues = { [TKey in keyof Hues]?: Partial<Hues[TKey]>; };
  * @public
  */
 type LegacyTheme = RootTheme & {
-  /**
-   * Marks the theme as generated by Themer, which Sanity Studio detects to
-   * reconcile fonts and other non-color attributes.
-   */
-  __themer: true;
   /**
    * Set to `undefined` so that `@sanity/ui` derives the v2 theme internally
    * from the generated colors.
@@ -118,16 +113,16 @@ declare function parseHuesFromUrl(url: string | URL): Hues;
  * // import {theme} from 'https://themer.sanity.build/api/hues?preset=verdant'
  *
  * // After:
- * import {createThemeFromUrl} from '@sanity/themer/legacy'
+ * import {buildThemeFromUrl} from '@sanity/themer/legacy'
  *
- * const theme = createThemeFromUrl(
+ * const theme = buildThemeFromUrl(
  *   'https://themer.sanity.build/api/hues?preset=verdant',
  * )
  * ```
  *
  * @public
  */
-declare function createThemeFromUrl(url: string | URL): LegacyTheme;
+declare function buildThemeFromUrl(url: string | URL): LegacyTheme;
 /**
  * The hues of the default Studio theme — the same `hues` export that
  * `https://themer.sanity.build/api/hues` served without any parameters.
@@ -147,20 +142,14 @@ declare const theme: LegacyTheme;
  * the same slugs and hues:
  *
  * ```ts
- * import {createTheme, getPreset} from '@sanity/themer/legacy'
+ * import {createTheme, presets} from '@sanity/themer/legacy'
  *
- * const theme = createTheme(getPreset('verdant').hues)
+ * const verdant = presets.find((preset) => preset.slug === 'verdant')
+ * const theme = createTheme(verdant.hues)
  * ```
  *
  * @public
  */
 declare const presets: ThemePreset[];
-/**
- * Finds a preset by its slug, falling back to the default Studio preset for
- * unknown slugs — the same behavior as the hosted Themer service.
- *
- * @public
- */
-declare function getPreset(slug: string | null | undefined): ThemePreset;
-export { type Hue, type HueMidPoint, type Hues, type LegacyTheme, type PartialHues, type ThemePreset, createTheme, createThemeFromUrl, getPreset, hues, parseHuesFromUrl, presets, theme };
+export { type Hue, type HueMidPoint, type Hues, type LegacyTheme, type PartialHues, type ThemePreset, buildThemeFromUrl, createTheme, hues, parseHuesFromUrl, presets, theme };
 //# sourceMappingURL=legacy.d.ts.map

package/dist/legacy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legacy.d.ts","names":[],"sources":["../src/legacy/types.ts","../src/legacy/createTheme.ts","../src/legacy/defaults.ts","../src/legacy/presets.ts"],"mappings":";;;;;;KAOY;;;;;;;UAQK;;EAEf;;EAEA,UAAU;;EAEV;;EAEA;;;;;;;UAQe;EACf,SAAS;EACT,aAAa;EACb,SAAS;EACT,UAAU;EACV,SAAS;EACT,UAAU;;;;;;;;KASA,iBAAgB,cAAc,QAAQ,QAAQ,KAAK;;;;;;;KAQnD,cAAc;;;;;EAKxB;;;;;EAKA;;;;;;;UAQe;EACf;EACA;;;;;EAKA;;EAEA,MAAM;;;;;;;;;;;;;;;;;;iBC3DQ,YAAY,OAAM,cAAmB;;;;;;;;;;;;;;;;;iBAoBrC,iBAAiB,cAAc,MAAM;;;;;;;;;;;;;;;;;;;iBAyBrC,mBAAmB,cAAc,MAAM;;;;;;;cCzD1C,MAAM;;;;;;;cAQN,OAAO;;;;;;;;;;;;;cCaP,SAAS;;;;;;;iBAkDN,UAAU,kCAAkC"}
+{"version":3,"file":"legacy.d.ts","names":[],"sources":["../src/legacy/types.ts","../src/legacy/createTheme.ts","../src/legacy/defaults.ts","../src/legacy/presets.ts"],"mappings":";;;;;;KAOY;;;;;;;UAQK;;EAEf;;EAEA,UAAU;;EAEV;;EAEA;;;;;;;UAQe;EACf,SAAS;EACT,aAAa;EACb,SAAS;EACT,UAAU;EACV,SAAS;EACT,UAAU;;;;;;;;KASA,iBAAgB,cAAc,QAAQ,QAAQ,KAAK;;;;;;;KAQnD,cAAc;;;;;EAKxB;;;;;;;UAQe;EACf;EACA;;;;;EAKA;;EAEA,MAAM;;;;;;;;;;;;;;;;;;iBCtDQ,YAAY,OAAM,cAAmB;;;;;;;;;;;;;;;;;iBAoBrC,iBAAiB,cAAc,MAAM;;;;;;;;;;;;;;;;;;;iBAyBrC,kBAAkB,cAAc,MAAM;;;;;;;cCzDzC,MAAM;;;;;;;cAQN,OAAO;;;;;;;;;;;;;;cCcP,SAAS"}

package/dist/legacy.js

@@ -1,4 +1,4 @@
-import { n as mix, t as isColor } from "./_chunks/mix.js";
+import { n as mix, t as isColor } from "./mix-BfV6_Ke4.js";
 import { COLOR_TINTS } from "@sanity/color";
 import { buildTheme, createColorTheme, multiply, parseColor, rgbToHex, rgba, screen } from "@sanity/ui/theme";
 /**
@@ -19,13 +19,13 @@ function dropUndefined(hue) {
 * here without changing generated themes.
 */
 /** @internal */
-const black = {
+const black$1 = {
 	title: "Black",
 	hex: "#101112"
-}, white = {
+}, white$1 = {
 	title: "White",
 	hex: "#fff"
-}, gray = {
+}, gray$1 = {
 	50: {
 		title: "Gray 50",
 		hex: "#f2f3f5"
@@ -70,7 +70,7 @@ const black = {
 		title: "Gray 950",
 		hex: "#1b1d20"
 	}
-}, blue = {
+}, blue$1 = {
 	50: {
 		title: "Blue 50",
 		hex: "#e8f1fe"
@@ -430,7 +430,7 @@ const black = {
 		title: "Cyan 950",
 		hex: "#112124"
 	}
-}, lightest = white.hex.toLowerCase(), darkest = black.hex.toLowerCase(), defaultHues = {
+}, lightest = white$1.hex.toLowerCase(), darkest = black$1.hex.toLowerCase(), defaultHues = {
 	default: {
 		lightest,
 		darkest,
@@ -633,9 +633,10 @@ const defaultPreset = definePreset("default", "Studio v3", "lightest=fff&darkest
 ];
 /**
 * Finds a preset by its slug, falling back to the default Studio preset for
-* unknown slugs — the same behavior as the hosted Themer service.
+* unknown slugs — the behavior of the hosted Themer service's `?preset`
+* param, which `parseHuesFromUrl` exposes.
 *
-* @public
+* @internal
 */
 function getPreset(slug) {
 	let needle = slug?.toLowerCase();
@@ -666,9 +667,9 @@ function getColorHex(hue, tint) {
 	return tintNum === midPoint ? hue.mid.toLowerCase() : tintNum < midPoint ? mix(lightPosition, hue.mid, hue.lightest) : mix(darkPosition, hue.darkest, hue.mid);
 }
 const NEUTRAL_TONES = /* @__PURE__ */ new Set(["default", "transparent"]), SPOT_TINTS = {
-	blue,
+	blue: blue$1,
 	cyan,
-	gray,
+	gray: gray$1,
 	green,
 	magenta,
 	orange,
@@ -681,7 +682,7 @@ function getTint(key) {
 	if (!tints) throw Error(`Unknown tint: ${key}`);
 	return tints;
 }
-const studioTheme = buildTheme();
+const defaultTheme = buildTheme();
 /**
 * Generates a Studio theme from hues, producing the exact same colors as the
 * hosted Themer service (themer.sanity.build). This is a port of its
@@ -1021,7 +1022,7 @@ function themeFromHues(partialHues) {
 				border: base.border,
 				muted: { fg: mix(base.bg, tints[dark ? 400 : 600].hex) },
 				accent: { fg: mix(base.bg, red[dark ? 400 : 500].hex) },
-				link: { fg: mix(base.bg, blue[dark ? 400 : 600].hex) },
+				link: { fg: mix(base.bg, blue$1[dark ? 400 : 600].hex) },
 				code: {
 					bg: mix(base.bg, tints[dark ? 950 : 50].hex),
 					fg: tints[dark ? 400 : 600].hex
@@ -1046,28 +1047,28 @@ function themeFromHues(partialHues) {
 			}
 			return state === "hovered" ? {
 				bg: base.bg,
-				bg2: mix(base.bg, gray[dark ? 700 : 300].hex),
+				bg2: mix(base.bg, gray$1[dark ? 700 : 300].hex),
 				fg: base.fg,
-				border: mix(base.bg, gray[dark ? 700 : 300].hex),
-				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+				border: mix(base.bg, gray$1[dark ? 700 : 300].hex),
+				placeholder: mix(base.bg, gray$1[dark ? 600 : 400].hex)
 			} : state === "disabled" ? {
-				bg: mix(base.bg, gray[dark ? 950 : 50].hex),
-				bg2: mix(base.bg, gray[dark ? 900 : 100].hex),
-				fg: mix(base.bg, gray[dark ? 700 : 300].hex),
-				border: mix(base.bg, gray[dark ? 900 : 100].hex),
-				placeholder: mix(base.bg, gray[dark ? 800 : 200].hex)
+				bg: mix(base.bg, gray$1[dark ? 950 : 50].hex),
+				bg2: mix(base.bg, gray$1[dark ? 900 : 100].hex),
+				fg: mix(base.bg, gray$1[dark ? 700 : 300].hex),
+				border: mix(base.bg, gray$1[dark ? 900 : 100].hex),
+				placeholder: mix(base.bg, gray$1[dark ? 800 : 200].hex)
 			} : state === "readOnly" ? {
-				bg: mix(base.bg, gray[dark ? 950 : 50].hex),
-				bg2: mix(base.bg, gray[dark ? 800 : 200].hex),
-				fg: mix(base.bg, gray[dark ? 200 : 800].hex),
-				border: mix(base.bg, gray[dark ? 800 : 200].hex),
-				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+				bg: mix(base.bg, gray$1[dark ? 950 : 50].hex),
+				bg2: mix(base.bg, gray$1[dark ? 800 : 200].hex),
+				fg: mix(base.bg, gray$1[dark ? 200 : 800].hex),
+				border: mix(base.bg, gray$1[dark ? 800 : 200].hex),
+				placeholder: mix(base.bg, gray$1[dark ? 600 : 400].hex)
 			} : {
 				bg: base.bg,
 				bg2: base.border,
 				fg: base.fg,
 				border: base.border,
-				placeholder: mix(base.bg, gray[dark ? 600 : 400].hex)
+				placeholder: mix(base.bg, gray$1[dark ? 600 : 400].hex)
 			};
 		},
 		selectable: ({ base, muted, tone, solid, state }) => state === "enabled" ? {
@@ -1091,25 +1092,25 @@ function themeFromHues(partialHues) {
 				char: mix(base.bg, yellow[mainShade].hex),
 				class: mix(base.bg, orange[mainShade].hex),
 				className: mix(base.bg, cyan[mainShade].hex),
-				comment: mix(base.bg, gray[secondaryShade].hex),
+				comment: mix(base.bg, gray$1[secondaryShade].hex),
 				constant: mix(base.bg, purple[mainShade].hex),
 				deleted: mix(base.bg, red[mainShade].hex),
-				doctype: mix(base.bg, gray[secondaryShade].hex),
+				doctype: mix(base.bg, gray$1[secondaryShade].hex),
 				entity: mix(base.bg, red[mainShade].hex),
 				function: mix(base.bg, green[mainShade].hex),
-				hexcode: mix(base.bg, blue[mainShade].hex),
+				hexcode: mix(base.bg, blue$1[mainShade].hex),
 				id: mix(base.bg, purple[mainShade].hex),
 				important: mix(base.bg, purple[mainShade].hex),
 				inserted: mix(base.bg, yellow[mainShade].hex),
 				keyword: mix(base.bg, magenta[mainShade].hex),
 				number: mix(base.bg, purple[mainShade].hex),
 				operator: mix(base.bg, magenta[mainShade].hex),
-				prolog: mix(base.bg, gray[secondaryShade].hex),
-				property: mix(base.bg, blue[mainShade].hex),
+				prolog: mix(base.bg, gray$1[secondaryShade].hex),
+				property: mix(base.bg, blue$1[mainShade].hex),
 				pseudoClass: mix(base.bg, yellow[mainShade].hex),
 				pseudoElement: mix(base.bg, yellow[mainShade].hex),
-				punctuation: mix(base.bg, gray[mainShade].hex),
-				regex: mix(base.bg, blue[mainShade].hex),
+				punctuation: mix(base.bg, gray$1[mainShade].hex),
+				regex: mix(base.bg, blue$1[mainShade].hex),
 				selector: mix(base.bg, red[mainShade].hex),
 				string: mix(base.bg, yellow[mainShade].hex),
 				symbol: mix(base.bg, purple[mainShade].hex),
@@ -1121,9 +1122,8 @@ function themeFromHues(partialHues) {
 		}
 	});
 	return {
-		...studioTheme,
+		...defaultTheme,
 		color,
-		__themer: !0,
 		v2: void 0
 	};
 }
@@ -1175,16 +1175,16 @@ function parseHuesFromUrl(url) {
 * // import {theme} from 'https://themer.sanity.build/api/hues?preset=verdant'
 *
 * // After:
-* import {createThemeFromUrl} from '@sanity/themer/legacy'
+* import {buildThemeFromUrl} from '@sanity/themer/legacy'
 *
-* const theme = createThemeFromUrl(
+* const theme = buildThemeFromUrl(
 *   'https://themer.sanity.build/api/hues?preset=verdant',
 * )
 * ```
 *
 * @public
 */
-function createThemeFromUrl(url) {
+function buildThemeFromUrl(url) {
 	return createTheme(parseHuesFromUrl(url));
 }
 /**
@@ -1194,6 +1194,6 @@ function createThemeFromUrl(url) {
 * @public
 */
 const hues = applyHues({}), theme = createTheme(hues);
-export { createTheme, createThemeFromUrl, getPreset, hues, parseHuesFromUrl, presets, theme };
+export { buildThemeFromUrl, createTheme, hues, parseHuesFromUrl, presets, theme };
 
 //# sourceMappingURL=legacy.js.map