@sanity/ui 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
-import { white as white$1, black as black$1, hues } from '@sanity/color';
+import { color as color$1, white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
@@ -831,10 +831,143 @@ function useGlobalKeyDown(onKeyDown) {
     return () => removeEventListener("keydown", onKeyDown);
   }, [onKeyDown]);
 }
+const COLOR_HUES = ["gray", "cyan", "blue", "purple", "magenta", "red", "orange", "yellow", "green"];
+const COLOR_TINTS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+const COLOR_BASE_TONES = ["transparent", "default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const COLOR_STATE_TONES = ["default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
+const COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
+const COLOR_BLEND_MODES = ["multiply", "screen"];
+const defaultColorTokens = {
+  "*": {
+    _blend: ["multiply", "screen"],
+    bg: ["50", "950"],
+    fg: ["800", "200"],
+    border: ["200", "800"]
+  },
+  transparent: {
+    bg: ["50", "black"],
+    fg: ["600", "400"]
+  },
+  default: {
+    bg: ["white", "950"],
+    fg: ["black", "200"]
+  },
+  primary: {
+    _hue: "cyan"
+  },
+  positive: {
+    _hue: "cyan"
+  },
+  caution: {
+    _hue: "yellow"
+  },
+  critical: {
+    _hue: "red"
+  },
+  button: {
+    "*": {
+      default: {
+        "*": {
+          _blend: ["screen", "multiply"],
+          bg: ["500", "400"],
+          border: ["500/0", "400/0"]
+        },
+        hovered: {
+          bg: ["600", "300"],
+          border: ["600/0", "300/0"]
+        },
+        pressed: {
+          bg: ["700", "200"]
+        },
+        selected: {
+          bg: ["700", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          bg: ["100", "900"]
+        }
+      },
+      ghost: {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["white", "black"],
+          fg: ["600", "400"],
+          border: ["200", "800"]
+        },
+        hovered: {
+          bg: ["50", "950"],
+          fg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["100", "900"],
+          border: ["100", "900"]
+        }
+      },
+      bleed: {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["white", "black"],
+          fg: ["600", "400"],
+          border: ["white/0", "black/0"]
+        },
+        hovered: {
+          bg: ["50", "950"],
+          fg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["100", "900"]
+        }
+      }
+    },
+    default: {
+      default: {
+        "*": {
+          bg: ["900", "200"]
+        },
+        hovered: {
+          bg: ["black", "100"]
+        },
+        pressed: {
+          bg: ["900", "200"]
+        },
+        selected: {
+          bg: ["black", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          bg: ["100", "900"]
+        }
+      }
+    }
+  }
+};
 function multiplyChannel(b, s) {
   return b * s;
 }
-function multiply$1(b, s) {
+function multiply$2(b, s) {
   return {
     r: Math.round(clamp$1(multiplyChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp$1(multiplyChannel(b.g / 255, s.g / 255) * 255)),
@@ -847,7 +980,7 @@ function clamp$1(num) {
 function screenChannel(b, s) {
   return b + s - b * s;
 }
-function screen$1(b, s) {
+function screen$2(b, s) {
   return {
     r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),
@@ -1009,6 +1142,560 @@ function rgba(color, a) {
   const rgb = parseColor(color);
   return "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(a, ")");
 }
+function isColorBlendModeValue(str) {
+  return COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueValue(str) {
+  return COLOR_HUES.includes(str);
+}
+function isColorTintValue(str) {
+  return COLOR_TINTS.includes(str);
+}
+function isColorButtonMode(str) {
+  return COLOR_BUTTON_MODES.includes(str);
+}
+function parseTokenKey(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join("/");
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+  }
+  if (segment0 === "button") {
+    const segment1 = segments.shift() || "";
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || "";
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join("/");
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+      }
+    }
+  }
+  return void 0;
+}
+function parseTokenValue(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorTintValue(segment0)) {
+    const tint = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        tint,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      tint
+    };
+  }
+  if (isColorValue(segment0)) {
+    const key = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        key,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      key
+    };
+  }
+  if (isColorHueValue(segment0)) {
+    const hue = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorTintValue(segment1)) {
+      const tint = segment1;
+      const segment2 = segments.shift() || "";
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2);
+        return {
+          type: "color",
+          key: "".concat(hue, "/").concat(tint),
+          hue,
+          tint,
+          opacity
+        };
+      }
+      return {
+        type: "color",
+        key: "".concat(hue, "/").concat(tint),
+        hue,
+        tint
+      };
+    }
+    return {
+      type: "hue",
+      value: "".concat(hue)
+    };
+  }
+  if (isColorOpacityValue(segment0)) {
+    const opacity = Number(segment0);
+    return {
+      type: "color",
+      opacity
+    };
+  }
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0;
+    return {
+      type: "blendMode",
+      value
+    };
+  }
+  return void 0;
+}
+const COLOR_CONFIG_BASE_TONES = ["*", ...COLOR_BASE_TONES];
+const COLOR_CONFIG_STATE_TONES = ["*", ...COLOR_STATE_TONES];
+const COLOR_CONFIG_BASE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_BLEND_KEYS = ["_blend"];
+function isColorConfigBaseTone(str) {
+  return COLOR_CONFIG_BASE_TONES.includes(str);
+}
+function isColorConfigBaseKey(str) {
+  return COLOR_CONFIG_BASE_KEYS.includes(str);
+}
+function isColorConfigStateKey(str) {
+  return COLOR_CONFIG_STATE_KEYS.includes(str);
+}
+function isColorConfigStateTone(str) {
+  return COLOR_CONFIG_STATE_TONES.includes(str);
+}
+function isColorConfigBlendKey(str) {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str);
+}
+function isColorTokenValue(str) {
+  var _a, _b;
+  return ((_a = parseTokenValue(str)) == null ? void 0 : _a.type) === "color" || ((_b = parseTokenValue(str)) == null ? void 0 : _b.type) === "hue";
+}
+function isColorValue(str) {
+  return str === "black" || str === "white";
+}
+function isColorOpacityValue(str) {
+  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function resolveColorTokenValue(options) {
+  const {
+    hue,
+    scheme,
+    value
+  } = options;
+  const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token: ".concat(value[0]));
+  }
+  return compileColorTokenValue({
+    ...node,
+    hue: node.hue || hue
+  });
+}
+function compileColorTokenValue(node) {
+  let key = "";
+  if (node.key === "black" || node.key === "white") {
+    key = node.key;
+  } else {
+    key = "".concat(node.hue, "/").concat(node.tint);
+  }
+  if (node.opacity !== void 0) {
+    key += "/".concat(node.opacity);
+  }
+  return key;
+}
+function multiply$1(bg, fg) {
+  const b = parseColor(bg);
+  const s = parseColor(fg);
+  const hex = rgbToHex(multiply$2(b, s));
+  if (s.a !== void 0) {
+    return rgba(hex, s.a);
+  }
+  return hex;
+}
+function screen$1(bg, fg) {
+  const b = parseColor(bg);
+  const s = parseColor(fg);
+  const hex = rgbToHex(screen$2(b, s));
+  if (s.a !== void 0) {
+    return rgba(hex, s.a);
+  }
+  return hex;
+}
+function buildColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  return {
+    transparent: buildBaseColorTheme({
+      scheme,
+      tone: "transparent"
+    }, config),
+    default: buildBaseColorTheme({
+      scheme,
+      tone: "default"
+    }, config),
+    primary: buildBaseColorTheme({
+      scheme,
+      tone: "primary"
+    }, config),
+    positive: buildBaseColorTheme({
+      scheme,
+      tone: "positive"
+    }, config),
+    caution: buildBaseColorTheme({
+      scheme,
+      tone: "caution"
+    }, config),
+    critical: buildBaseColorTheme({
+      scheme,
+      tone: "critical"
+    }, config)
+  };
+}
+function buildBaseColorTheme(options, config) {
+  var _a, _b;
+  const {
+    scheme,
+    tone
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens;
+  const any = tokens == null ? void 0 : tokens["*"];
+  const toneTokens = tokens == null ? void 0 : tokens[tone];
+  const hue = (toneTokens == null ? void 0 : toneTokens._hue) || (any == null ? void 0 : any._hue) || "gray";
+  const bg = resolveColorTokenValue({
+    hue,
+    scheme,
+    value: (toneTokens == null ? void 0 : toneTokens.bg) || (any == null ? void 0 : any.bg) || ["gray/50", "black"]
+  });
+  const _blend = (toneTokens == null ? void 0 : toneTokens._blend) || (any == null ? void 0 : any._blend) || ["screen", "multiply"];
+  return {
+    _blend: _blend[scheme === "light" ? 0 : 1],
+    dark: scheme === "dark",
+    base: {
+      bg,
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: (toneTokens == null ? void 0 : toneTokens.fg) || (any == null ? void 0 : any.fg) || ["black", "white"]
+      }),
+      border: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: (toneTokens == null ? void 0 : toneTokens.border) || (any == null ? void 0 : any.border) || ["black", "white"]
+      })
+    },
+    button: buildButtonColorTheme({
+      scheme
+    }, config)
+  };
+}
+function buildButtonColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  const tones = COLOR_STATE_TONES.map(tone => {
+    return {
+      [tone]: buildButtonColorToneTheme({
+        scheme,
+        tone
+      }, config)
+    };
+  });
+  return Object.assign({}, ...tones);
+}
+function buildButtonColorToneTheme(options, config) {
+  const {
+    scheme,
+    tone
+  } = options;
+  const modes = COLOR_BUTTON_MODES.map(mode => {
+    return {
+      [mode]: buildButtonModeColorTheme({
+        mode,
+        scheme,
+        tone
+      }, config)
+    };
+  });
+  return Object.assign({}, ...modes);
+}
+function buildButtonModeColorTheme(options, config) {
+  const {
+    mode,
+    scheme,
+    tone
+  } = options;
+  const states = COLOR_STATES.map(state => {
+    return {
+      [state]: buildButtonStateColorTheme({
+        mode,
+        tone,
+        scheme,
+        state
+      }, config)
+    };
+  });
+  return Object.assign({}, ...states);
+}
+function buildButtonStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S;
+  const {
+    mode,
+    tone,
+    scheme,
+    state
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens;
+  const hue = ((_f = (_e = (_d = (_c = tokens == null ? void 0 : tokens.button) == null ? void 0 : _c[tone]) == null ? void 0 : _d[mode]) == null ? void 0 : _e[state]) == null ? void 0 : _f._hue) || ((_j = (_i = (_h = (_g = tokens == null ? void 0 : tokens.button) == null ? void 0 : _g["*"]) == null ? void 0 : _h[mode]) == null ? void 0 : _i[state]) == null ? void 0 : _j._hue) || ((_l = (_k = tokens == null ? void 0 : tokens.button) == null ? void 0 : _k[tone]) == null ? void 0 : _l._hue) || ((_m = tokens == null ? void 0 : tokens[tone]) == null ? void 0 : _m._hue) || "gray";
+  const spec3 = (_p = (_o = (_n = tokens == null ? void 0 : tokens.button) == null ? void 0 : _n["*"]) == null ? void 0 : _o[mode]) == null ? void 0 : _p["*"];
+  const spec2 = (_s = (_r = (_q = tokens == null ? void 0 : tokens.button) == null ? void 0 : _q["*"]) == null ? void 0 : _r[mode]) == null ? void 0 : _s[state];
+  const spec1 = (_v = (_u = (_t = tokens == null ? void 0 : tokens.button) == null ? void 0 : _t[tone]) == null ? void 0 : _u[mode]) == null ? void 0 : _v["*"];
+  const spec0 = (_y = (_x = (_w = tokens == null ? void 0 : tokens.button) == null ? void 0 : _w[tone]) == null ? void 0 : _x[mode]) == null ? void 0 : _y[state];
+  const _blend = (spec0 == null ? void 0 : spec0._blend) || (spec1 == null ? void 0 : spec1._blend) || (spec2 == null ? void 0 : spec2._blend) || (spec3 == null ? void 0 : spec3._blend) || ["screen", "multiply"];
+  return {
+    _blend: _blend[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: (spec0 == null ? void 0 : spec0.bg) || (spec1 == null ? void 0 : spec1.bg) || (spec2 == null ? void 0 : spec2.bg) || (spec3 == null ? void 0 : spec3.bg) || ["500", "400"]
+    }),
+    bg2: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: (spec0 == null ? void 0 : spec0.bg2) || (spec1 == null ? void 0 : spec1.bg2) || (spec2 == null ? void 0 : spec2.bg2) || (spec3 == null ? void 0 : spec3.bg2) || ["500", "400"]
+    }),
+    fg: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: (spec0 == null ? void 0 : spec0.fg) || (spec1 == null ? void 0 : spec1.fg) || (spec2 == null ? void 0 : spec2.fg) || (spec3 == null ? void 0 : spec3.fg) || ["white", "black"]
+    }),
+    border: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: (spec0 == null ? void 0 : spec0.border) || (spec1 == null ? void 0 : spec1.border) || (spec2 == null ? void 0 : spec2.border) || (spec3 == null ? void 0 : spec3.border) || ["500", "400"]
+    }),
+    muted: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: ((_z = spec0 == null ? void 0 : spec0.muted) == null ? void 0 : _z.fg) || ((_A = spec1 == null ? void 0 : spec1.muted) == null ? void 0 : _A.fg) || ((_B = spec2 == null ? void 0 : spec2.muted) == null ? void 0 : _B.fg) || ((_C = spec3 == null ? void 0 : spec3.muted) == null ? void 0 : _C.fg) || ["500", "400"]
+      })
+    },
+    accent: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: ((_D = spec0 == null ? void 0 : spec0.accent) == null ? void 0 : _D.fg) || ((_E = spec1 == null ? void 0 : spec1.accent) == null ? void 0 : _E.fg) || ((_F = spec2 == null ? void 0 : spec2.accent) == null ? void 0 : _F.fg) || ((_G = spec3 == null ? void 0 : spec3.accent) == null ? void 0 : _G.fg) || ["500", "400"]
+      })
+    },
+    link: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: ((_H = spec0 == null ? void 0 : spec0.link) == null ? void 0 : _H.fg) || ((_I = spec1 == null ? void 0 : spec1.link) == null ? void 0 : _I.fg) || ((_J = spec2 == null ? void 0 : spec2.link) == null ? void 0 : _J.fg) || ((_K = spec3 == null ? void 0 : spec3.link) == null ? void 0 : _K.fg) || ["500", "400"]
+      })
+    },
+    code: {
+      bg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: ((_L = spec0 == null ? void 0 : spec0.code) == null ? void 0 : _L.bg) || ((_M = spec1 == null ? void 0 : spec1.code) == null ? void 0 : _M.bg) || ((_N = spec2 == null ? void 0 : spec2.code) == null ? void 0 : _N.bg) || ((_O = spec3 == null ? void 0 : spec3.code) == null ? void 0 : _O.bg) || ["500", "400"]
+      }),
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: ((_P = spec0 == null ? void 0 : spec0.code) == null ? void 0 : _P.fg) || ((_Q = spec1 == null ? void 0 : spec1.code) == null ? void 0 : _Q.fg) || ((_R = spec2 == null ? void 0 : spec2.code) == null ? void 0 : _R.fg) || ((_S = spec3 == null ? void 0 : spec3.code) == null ? void 0 : _S.fg) || ["500", "400"]
+      })
+    }
+  };
+}
+function renderColorTheme(colorPalette, value) {
+  return {
+    light: renderColorScheme(colorPalette, value.light),
+    dark: renderColorScheme(colorPalette, value.dark)
+  };
+}
+function renderColorScheme(colorPalette, value) {
+  const toneEntries = Object.entries(value);
+  const [, transparentTone] = toneEntries.find(_ref4 => {
+    let [k] = _ref4;
+    return k === "transparent";
+  });
+  const [, defaultTone] = toneEntries.find(_ref5 => {
+    let [k] = _ref5;
+    return k === "default";
+  });
+  const renderedTransparentTone = renderColorBase(colorPalette, transparentTone, transparentTone._blend === "multiply" ? "#ffffff" : "#000000");
+  const renderedDefaultTone = renderColorBase(colorPalette, defaultTone, defaultTone._blend === "multiply" ? "#ffffff" : "#000000");
+  return Object.fromEntries([["transparent", renderedTransparentTone], ["default", renderedDefaultTone], ...toneEntries.filter(_ref6 => {
+    let [k] = _ref6;
+    return k !== "default" && k !== "transparent";
+  }).map(_ref7 => {
+    let [k, v] = _ref7;
+    return [k, renderColorBase(colorPalette, v, renderedDefaultTone.base.bg)];
+  })]);
+}
+function renderColorBase(colorPalette, value, bg) {
+  const nestedBg = renderColorValue(colorPalette, bg, value._blend, value.base.bg);
+  return {
+    _blend: value._blend,
+    dark: value.dark,
+    base: {
+      bg: nestedBg,
+      fg: renderColorValue(colorPalette, nestedBg, value._blend, value.base.fg),
+      border: renderColorValue(colorPalette, nestedBg, value._blend, value.base.border)
+    },
+    button: renderButtonColorTheme(colorPalette, nestedBg, value._blend, value.button)
+  };
+}
+function renderButtonColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    default: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.default),
+    primary: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.primary),
+    positive: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.positive),
+    caution: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.caution),
+    critical: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.critical)
+  };
+}
+function renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    default: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.default),
+    ghost: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.ghost),
+    bleed: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.bleed)
+  };
+}
+function renderStatesColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    enabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.enabled),
+    hovered: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.hovered),
+    pressed: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.pressed),
+    selected: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.selected),
+    disabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.disabled)
+  };
+}
+function renderStateColorTheme(colorPalette, baseBg, rootBlendMode, value) {
+  const blendMode = value._blend;
+  const bg = rootBlendMode === "multiply" && value.bg === "white" ? "#ffffff" : rootBlendMode === "screen" && value.bg === "black" ? "#000000" : renderColorValue(colorPalette, rootBlendMode === "multiply" ? "#ffffff" : "#000000", rootBlendMode, value.bg);
+  const bg2 = renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg);
+  const fg = renderColorValue(colorPalette, bg, blendMode, value.fg);
+  const border = renderColorValue(colorPalette, bg, blendMode, value.border);
+  const muted = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg)
+  };
+  const accent = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg)
+  };
+  const link = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg)
+  };
+  const code = {
+    bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
+    fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg)
+  };
+  const blend = rootBlendMode === "multiply" ? multiply$1 : screen$1;
+  return {
+    _blend: blendMode,
+    bg: blend(baseBg, bg),
+    bg2: blend(baseBg, bg2),
+    fg: blend(baseBg, fg),
+    border: blend(baseBg, border),
+    muted: {
+      fg: blend(baseBg, muted.fg)
+    },
+    accent: {
+      fg: blend(baseBg, accent.fg)
+    },
+    link: {
+      fg: blend(baseBg, link.fg)
+    },
+    code: {
+      bg: blend(baseBg, code.bg),
+      fg: blend(baseBg, code.fg)
+    }
+  };
+}
+function renderColorValue(colorPalette, bg, blendMode, str) {
+  const node = parseTokenValue(str);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  let hex = "";
+  if (node.key === "black") {
+    hex = renderColorHex(colorPalette.black);
+  }
+  if (node.key === "white") {
+    hex = renderColorHex(colorPalette.white);
+  }
+  if (node.hue && node.tint) {
+    hex = renderColorHex(colorPalette[node.hue][node.tint]);
+  }
+  if (!hex) {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  try {
+    hex = blendMode === "multiply" ? multiply$1(bg, hex) : screen$1(bg, hex);
+  } catch (err) {
+    console.log("could not blend", hex);
+  }
+  if (node.opacity !== void 0) {
+    hex = rgba(hex, node.opacity);
+  }
+  return hex;
+}
+function renderColorHex(color) {
+  return typeof color === "string" ? color : color.hex;
+}
+const defaultColorPalette = {
+  ...color$1,
+  black: "#000000"
+};
+function buildTheme(config) {
+  var _a, _b;
+  return {
+    color: renderColorTheme((_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.palette) != null ? _b : defaultColorPalette, {
+      light: buildColorTheme({
+        scheme: "light"
+      }, config),
+      dark: buildColorTheme({
+        scheme: "dark"
+      }, config)
+    })
+  };
+}
 function createButtonTones(opts, base, dark, solid, muted, mode) {
   return {
     default: opts.button({
@@ -1201,11 +1888,11 @@ const tones$1 = {
   }
 };
 const defaultOpts = {
-  base: _ref4 => {
+  base: _ref8 => {
     let {
       dark,
       name
-    } = _ref4;
+    } = _ref8;
     if (name === "default") {
       return {
         bg: dark ? black : white,
@@ -1241,13 +1928,13 @@ const defaultOpts = {
       }
     };
   },
-  solid: _ref5 => {
+  solid: _ref9 => {
     let {
       base,
       dark,
       state,
       tone
-    } = _ref5;
+    } = _ref9;
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -1294,13 +1981,13 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  muted: _ref6 => {
+  muted: _ref10 => {
     let {
       base,
       dark,
       state,
       tone
-    } = _ref6;
+    } = _ref10;
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -1347,13 +2034,13 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  button: _ref7 => {
+  button: _ref11 => {
     let {
       base,
       mode,
       muted,
       solid
-    } = _ref7;
+    } = _ref11;
     if (mode === "bleed") {
       return {
         ...muted,
@@ -1407,10 +2094,10 @@ const defaultOpts = {
     };
     return solid;
   },
-  card: _ref8 => {
+  card: _ref12 => {
     let {
       base
-    } = _ref8;
+    } = _ref12;
     return {
       bg: black,
       bg2: black,
@@ -1442,18 +2129,18 @@ const defaultOpts = {
       placeholder: black
     };
   },
-  selectable: _ref9 => {
+  selectable: _ref13 => {
     let {
       muted,
       state,
       tone
-    } = _ref9;
+    } = _ref13;
     return muted[tone][state];
   },
-  spot: _ref10 => {
+  spot: _ref14 => {
     let {
       key
-    } = _ref10;
+    } = _ref14;
     return spots[key];
   },
   syntax: () => ({
@@ -2168,7 +2855,7 @@ function _createColor(opts, dark, name) {
 function multiply(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
-  const hex = rgbToHex(multiply$1(b, s));
+  const hex = rgbToHex(multiply$2(b, s));
   if (s.a) {
     return rgba(hex, s.a);
   }
@@ -2177,7 +2864,7 @@ function multiply(bg, fg) {
 function screen(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
-  const hex = rgbToHex(screen$1(b, s));
+  const hex = rgbToHex(screen$2(b, s));
   if (s.a) {
     return rgba(hex, s.a);
   }
@@ -2193,11 +2880,11 @@ const tones = {
 };
 const NEUTRAL_TONES = ["default", "transparent"];
 const color = createColorTheme({
-  base: _ref11 => {
+  base: _ref15 => {
     let {
       dark,
       name
-    } = _ref11;
+    } = _ref15;
     if (name === "default") {
       const tints2 = hues.gray;
       const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
@@ -2257,14 +2944,14 @@ const color = createColorTheme({
       }
     };
   },
-  solid: _ref12 => {
+  solid: _ref16 => {
     let {
       base,
       dark,
       name,
       state,
       tone
-    } = _ref12;
+    } = _ref16;
     const mix = dark ? screen : multiply;
     const mix2 = dark ? multiply : screen;
     const defaultTints = tones[name] || tones.default;
@@ -2418,14 +3105,14 @@ const color = createColorTheme({
       }
     };
   },
-  muted: _ref13 => {
+  muted: _ref17 => {
     let {
       base,
       dark,
       name,
       state,
       tone
-    } = _ref13;
+    } = _ref17;
     const mix = dark ? screen : multiply;
     const defaultTints = tones[name] || tones.default;
     const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
@@ -2581,13 +3268,13 @@ const color = createColorTheme({
       }
     };
   },
-  button: _ref14 => {
+  button: _ref18 => {
     let {
       base,
       mode,
       muted,
       solid
-    } = _ref14;
+    } = _ref18;
     if (mode === "bleed") {
       return {
         enabled: {
@@ -2624,7 +3311,7 @@ const color = createColorTheme({
     }
     return solid;
   },
-  card: _ref15 => {
+  card: _ref19 => {
     let {
       base,
       dark,
@@ -2632,7 +3319,7 @@ const color = createColorTheme({
       name,
       solid,
       state
-    } = _ref15;
+    } = _ref19;
     if (state === "hovered") {
       return muted[name].hovered;
     }
@@ -2682,13 +3369,13 @@ const color = createColorTheme({
       }
     };
   },
-  input: _ref16 => {
+  input: _ref20 => {
     let {
       base,
       dark,
       mode,
       state
-    } = _ref16;
+    } = _ref20;
     const mix = dark ? screen : multiply;
     if (mode === "invalid") {
       const tints = tones.critical;
@@ -2740,14 +3427,14 @@ const color = createColorTheme({
       placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
     };
   },
-  selectable: _ref17 => {
+  selectable: _ref21 => {
     let {
       base,
       muted,
       tone,
       solid,
       state
-    } = _ref17;
+    } = _ref21;
     if (state === "enabled") {
       return {
         ...muted[tone].enabled,
@@ -2774,20 +3461,20 @@ const color = createColorTheme({
     }
     return muted[tone][state];
   },
-  spot: _ref18 => {
+  spot: _ref22 => {
     let {
       base,
       dark,
       key
-    } = _ref18;
+    } = _ref22;
     const mix = dark ? screen : multiply;
     return mix(base.bg, hues[key][dark ? 400 : 500].hex);
   },
-  syntax: _ref19 => {
+  syntax: _ref23 => {
     let {
       base,
       dark
-    } = _ref19;
+    } = _ref23;
     const mix = dark ? screen : multiply;
     const mainShade = dark ? 400 : 600;
     const secondaryShade = dark ? 600 : 400;
@@ -4636,10 +5323,10 @@ var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
   value: __freeze$x(raw || cooked.slice())
 }));
 var _a$x, _b$k;
-function buttonBaseStyles(_ref20) {
+function buttonBaseStyles(_ref24) {
   let {
     $width
-  } = _ref20;
+  } = _ref24;
   return css(_b$k || (_b$k = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), $width === "fill" && css(_a$x || (_a$x = __template$x(["\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
@@ -4997,10 +5684,10 @@ var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
   value: __freeze$t(raw || cooked.slice())
 }));
 var _a$t;
-function codeSyntaxHighlightingStyle(_ref21) {
+function codeSyntaxHighlightingStyle(_ref25) {
   let {
     theme
-  } = _ref21;
+  } = _ref25;
   const color = theme.sanity.color.syntax;
   return {
     "&.atrule": {
@@ -6308,13 +6995,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref22) {
+        apply(_ref26) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref22;
+          } = _ref26;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -7123,12 +7810,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       mainAxis: 3
     }));
     ret.push(size$2({
-      apply(_ref23) {
+      apply(_ref27) {
         let {
           availableWidth,
           availableHeight,
           elements
-        } = _ref23;
+        } = _ref27;
         Object.assign(elements.floating.style, {
           maxWidth: "".concat(availableWidth - 4 * 2, "px"),
           // the padding is `4px`
@@ -7434,10 +8121,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref24 => {
+  const defaultRenderOption = useCallback(_ref28 => {
     let {
       value: value2
-    } = _ref24;
+    } = _ref28;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7891,10 +8578,10 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   });
 });
 const BORDER_OFFSET_X = 12;
-function dialogStyle(_ref25) {
+function dialogStyle(_ref29) {
   let {
     theme
-  } = _ref25;
+  } = _ref29;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8979,15 +9666,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref26 => {
+const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref30 => {
   let {
     $visible
-  } = _ref26;
+  } = _ref30;
   return $visible ? 1 : 0;
-}, _ref27 => {
+}, _ref31 => {
   let {
     $animated
-  } = _ref27;
+  } = _ref31;
   return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -9018,12 +9705,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref28 => {
+const Root$3 = styled(Skeleton)(_ref32 => {
   let {
     $size,
     $style,
     theme
-  } = _ref28;
+  } = _ref32;
   const {
     media
   } = theme.sanity;
@@ -9371,12 +10058,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref29 => {
+            children: state.map(_ref33 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref29;
+              } = _ref33;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9876,5 +10563,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, COLOR_BASE_TONES, COLOR_BLEND_MODES, COLOR_BUTTON_MODES, COLOR_CONFIG_BASE_KEYS, COLOR_CONFIG_BASE_TONES, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, COLOR_HUES, COLOR_STATES, COLOR_STATE_TONES, COLOR_TINTS, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, buildTheme, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueValue, isColorOpacityValue, isColorTintValue, isColorTokenValue, isColorValue, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$2 as multiply, parseColor, parseTokenKey, parseTokenValue, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$2 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map