@sanity/ui 2.9.0-canary.6 → 2.9.0

package/dist/theme.esm.js

@@ -1354,7 +1354,9 @@ function v0_v2(v0) {
       light: {
         transparent: themeColor_v0_v2(color2.light.transparent),
         default: themeColor_v0_v2(color2.light.default),
+        neutral: themeColor_v0_v2(color2.light.transparent),
         primary: themeColor_v0_v2(color2.light.primary),
+        suggest: themeColor_v0_v2(color2.light.primary),
         positive: themeColor_v0_v2(color2.light.positive),
         caution: themeColor_v0_v2(color2.light.caution),
         critical: themeColor_v0_v2(color2.light.critical)
@@ -1362,7 +1364,9 @@ function v0_v2(v0) {
       dark: {
         transparent: themeColor_v0_v2(color2.dark.transparent),
         default: themeColor_v0_v2(color2.dark.default),
+        neutral: themeColor_v0_v2(color2.dark.transparent),
         primary: themeColor_v0_v2(color2.dark.primary),
+        suggest: themeColor_v0_v2(color2.dark.primary),
         positive: themeColor_v0_v2(color2.dark.positive),
         caution: themeColor_v0_v2(color2.dark.caution),
         critical: themeColor_v0_v2(color2.dark.critical)
@@ -1502,7 +1506,26 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
-const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = ["transparent", "default", "primary", "positive", "caution", "critical"], THEME_COLOR_STATE_TONES = ["default", "primary", "positive", "caution", "critical"], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATE_TONES = [
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
 function isColorBlendModeValue(str) {
   return THEME_COLOR_BLEND_MODES.includes(str);
 }
@@ -1768,6 +1791,9 @@ const defaultColorTokens = {
     primary: {
       _hue: "blue"
     },
+    suggest: {
+      _hue: "purple"
+    },
     positive: {
       _hue: "green",
       shadow: {
@@ -1833,7 +1859,7 @@ const defaultColorTokens = {
           }
         },
         hovered: {
-          bg: ["700", "300"],
+          bg: ["600", "300"],
           border: ["700/0", "300/0"]
         },
         pressed: {
@@ -1960,11 +1986,11 @@ const defaultColorTokens = {
           fg: ["700", "300"]
         },
         pressed: {
-          bg: ["100", "900"],
+          bg: ["200", "800"],
           fg: ["800", "200"]
         },
         selected: {
-          bg: ["100", "900"],
+          bg: ["200", "800"],
           fg: ["800", "200"]
         },
         disabled: {
@@ -2068,7 +2094,8 @@ const defaultColorTokens = {
         },
         hovered: {
           bg: ["50", "950"],
-          icon: ["700 70%", "400 70%"]
+          fg: ["800", "200"],
+          icon: ["800 70%", "300 70%"]
         },
         pressed: {
           bg: ["100", "900"],
@@ -2127,7 +2154,7 @@ const defaultColorTokens = {
       "*": {
         _blend: ["multiply", "screen"],
         bg: ["white", "black"],
-        border: ["200", "800"],
+        border: ["200", "700"],
         fg: ["black", "200"],
         muted: {
           bg: ["50", "950"]
@@ -2143,6 +2170,7 @@ const defaultColorTokens = {
         fg: ["800", "200"]
       },
       disabled: {
+        bg: ["50", "950"],
         fg: ["400", "600"],
         border: ["100", "900"],
         placeholder: ["200", "800 50%"]
@@ -2378,62 +2406,20 @@ function resolveBaseColorTones(inputTokens, tone) {
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({
-        _hue: "gray"
-      }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({
-        _hue: "blue"
-      }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({
-        _hue: "purple"
-      }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({
-        _hue: "magenta"
-      }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({
-        _hue: "red"
-      }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({
-        _hue: "orange"
-      }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({
-        _hue: "yellow"
-      }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({
-        _hue: "green"
-      }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({
-        _hue: "cyan"
-      }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue || hue,
+    avatar: COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
         ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.critical
+        ...spec.badge?.[tone2]
       }
-    }
+    }), {})
   };
 }
 function resolveButtonColorTokens(inputTokens) {
@@ -2459,62 +2445,20 @@ function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({
-        _hue: "gray"
-      }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({
-        _hue: "blue"
-      }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({
-        _hue: "purple"
-      }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({
-        _hue: "magenta"
-      }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({
-        _hue: "red"
-      }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({
-        _hue: "orange"
-      }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({
-        _hue: "yellow"
-      }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({
-        _hue: "green"
-      }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({
-        _hue: "cyan"
-      }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
+    avatar: COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
         ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.critical
+        ...spec.badge?.[tone2]
       }
-    }
+    }), {})
   };
 }
 function resolveInputColorTokens(inputTokens) {
@@ -2555,62 +2499,20 @@ function resolveSelectableStateColorTokens(inputTokens, tone, state) {
   return {
     ...spec,
     _hue: hue,
-    avatar: {
-      gray: merge({
-        _hue: "gray"
-      }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({
-        _hue: "blue"
-      }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({
-        _hue: "purple"
-      }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({
-        _hue: "magenta"
-      }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({
-        _hue: "red"
-      }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({
-        _hue: "orange"
-      }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({
-        _hue: "yellow"
-      }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({
-        _hue: "green"
-      }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({
-        _hue: "cyan"
-      }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
+    avatar: COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
         ...spec.badge?.["*"],
-        ...spec.badge?.critical
+        ...spec.badge?.[tone2]
       }
-    }
+    }), {})
   };
 }
 function buildColorTheme(config) {
@@ -2630,33 +2532,13 @@ function buildColorTheme(config) {
 function buildColorScheme(options, config) {
   const {
     scheme
-  } = options;
-  return {
-    transparent: buildCardColorTheme({
-      scheme,
-      tone: "transparent"
-    }, config),
-    default: buildCardColorTheme({
-      scheme,
-      tone: "default"
-    }, config),
-    primary: buildCardColorTheme({
-      scheme,
-      tone: "primary"
-    }, config),
-    positive: buildCardColorTheme({
-      scheme,
-      tone: "positive"
-    }, config),
-    caution: buildCardColorTheme({
-      scheme,
-      tone: "caution"
-    }, config),
-    critical: buildCardColorTheme({
+  } = options, colorScheme = {};
+  for (const tone of THEME_COLOR_CARD_TONES)
+    colorScheme[tone] = buildCardColorTheme({
       scheme,
-      tone: "critical"
-    }, config)
-  };
+      tone
+    }, config);
+  return colorScheme;
 }
 function buildCardColorTheme(options, config) {
   const {
@@ -2682,7 +2564,8 @@ function buildCardColorTheme(options, config) {
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
     button: buildButtonColorTheme({
-      scheme
+      scheme,
+      tone
     }, config),
     code: {
       bg: resolveColorTokenValue(context, tokens?.code?.bg),
@@ -2708,7 +2591,8 @@ function buildCardColorTheme(options, config) {
       fg: resolveColorTokenValue(context, tokens?.muted?.fg)
     },
     selectable: buildSelectableColorTheme({
-      scheme
+      scheme,
+      tone
     }, config),
     shadow: buildShadowColorTheme({
       scheme,
@@ -2798,29 +2682,13 @@ function _buildAvatarColorTheme(options, stateTokens) {
 function buildBadgeColorTheme(tokens, options, config) {
   const {
     scheme
-  } = options;
-  return {
-    default: _buildBadgeColorTheme(tokens, {
-      scheme,
-      tone: "default"
-    }, config),
-    primary: _buildBadgeColorTheme(tokens, {
-      scheme,
-      tone: "primary"
-    }, config),
-    positive: _buildBadgeColorTheme(tokens, {
-      scheme,
-      tone: "positive"
-    }, config),
-    caution: _buildBadgeColorTheme(tokens, {
-      scheme,
-      tone: "caution"
-    }, config),
-    critical: _buildBadgeColorTheme(tokens, {
+  } = options, colorBadge = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorBadge[tone] = _buildBadgeColorTheme(tokens, {
       scheme,
-      tone: "critical"
-    }, config)
-  };
+      tone
+    }, config);
+  return colorBadge;
 }
 function _buildBadgeColorTheme(parentTokens, options, config) {
   const {
@@ -2839,10 +2707,12 @@ function _buildBadgeColorTheme(parentTokens, options, config) {
 }
 function buildButtonColorTheme(options, config) {
   const {
-    scheme
+    scheme,
+    tone: cardTone
   } = options, modes = {};
   for (const mode of THEME_COLOR_BUTTON_MODES)
     modes[mode] = buildButtonTonesColorTheme({
+      cardTone,
       scheme,
       mode
     }, config);
@@ -2850,11 +2720,13 @@ function buildButtonColorTheme(options, config) {
 }
 function buildButtonTonesColorTheme(options, config) {
   const {
+    cardTone,
     mode,
     scheme
   } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
     tones2[tone] = buildButtonStatesColorTheme({
+      cardTone,
       mode,
       scheme,
       tone
@@ -2863,12 +2735,14 @@ function buildButtonTonesColorTheme(options, config) {
 }
 function buildButtonStatesColorTheme(options, config) {
   const {
+    cardTone,
     mode,
     scheme,
     tone
   } = options, states = {};
   for (const state of THEME_COLOR_STATES)
     states[state] = buildButtonStateColorTheme({
+      cardTone,
       mode,
       tone,
       scheme,
@@ -2878,11 +2752,12 @@ function buildButtonStatesColorTheme(options, config) {
 }
 function buildButtonStateColorTheme(options, config) {
   const {
+    cardTone,
     mode,
     tone,
     scheme,
     state
-  } = options, tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
     hue,
     scheme
   };
@@ -2952,35 +2827,35 @@ function buildInputStatesColorTheme(options, config) {
       mode,
       scheme,
       state: "enabled",
-      tone
+      cardTone: tone
     }, config),
     hovered: buildInputStateColorTheme({
       mode,
       scheme,
       state: "hovered",
-      tone
+      cardTone: tone
     }, config),
     readOnly: buildInputStateColorTheme({
       mode,
       scheme,
       state: "readOnly",
-      tone
+      cardTone: tone
     }, config),
     disabled: buildInputStateColorTheme({
       mode,
       scheme,
       state: "disabled",
-      tone
+      cardTone: tone
     }, config)
   };
 }
 function buildInputStateColorTheme(options, config) {
   const {
+    cardTone,
     mode,
-    tone,
     scheme,
     state
-  } = options, tokens = config?.color?.input?.[mode]?.[state], hue = tokens?._hue || config?.color?.base?.[tone]?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.input?.[mode]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
     hue,
     scheme
   };
@@ -2997,10 +2872,12 @@ function buildInputStateColorTheme(options, config) {
 }
 function buildSelectableColorTheme(options, config) {
   const {
-    scheme
+    scheme,
+    tone: cardTone
   } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
     tones2[tone] = buildSelectableStatesColorTheme({
+      cardTone,
       scheme,
       tone
     }, config);
@@ -3008,11 +2885,13 @@ function buildSelectableColorTheme(options, config) {
 }
 function buildSelectableStatesColorTheme(options, config) {
   const {
+    cardTone,
     scheme,
     tone
   } = options, states = {};
   for (const state of THEME_COLOR_STATES)
     states[state] = buildSelectableStateColorTheme({
+      cardTone,
       tone,
       scheme,
       state
@@ -3021,10 +2900,11 @@ function buildSelectableStatesColorTheme(options, config) {
 }
 function buildSelectableStateColorTheme(options, config) {
   const {
+    cardTone,
     scheme,
     state,
     tone
-  } = options, tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
     hue,
     scheme
   };
@@ -3468,17 +3348,10 @@ function renderThemeColorKBD(value, options) {
   };
 }
 function renderThemeColorAvatar(value, options) {
-  return {
-    gray: renderThemeColorAvatarColor(value.gray, options),
-    blue: renderThemeColorAvatarColor(value.blue, options),
-    purple: renderThemeColorAvatarColor(value.purple, options),
-    magenta: renderThemeColorAvatarColor(value.magenta, options),
-    red: renderThemeColorAvatarColor(value.red, options),
-    orange: renderThemeColorAvatarColor(value.orange, options),
-    yellow: renderThemeColorAvatarColor(value.yellow, options),
-    green: renderThemeColorAvatarColor(value.green, options),
-    cyan: renderThemeColorAvatarColor(value.cyan, options)
-  };
+  const colorAvatar = {};
+  for (const hue of COLOR_HUES)
+    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options);
+  return colorAvatar;
 }
 function renderThemeColorAvatarColor(value, options) {
   const {
@@ -3501,13 +3374,10 @@ function renderThemeColorAvatarColor(value, options) {
   };
 }
 function renderThemeColorBadge(value, options) {
-  return {
-    default: renderThemeColorBadgeColor(value.default, options),
-    primary: renderThemeColorBadgeColor(value.primary, options),
-    positive: renderThemeColorBadgeColor(value.positive, options),
-    caution: renderThemeColorBadgeColor(value.caution, options),
-    critical: renderThemeColorBadgeColor(value.critical, options)
-  };
+  const colorBadge = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options);
+  return colorBadge;
 }
 function renderThemeColorBadgeColor(value, options) {
   const {
@@ -3538,13 +3408,10 @@ function renderThemeColorButton(value, options) {
   };
 }
 function renderThemeColorButtonTones(value, options) {
-  return {
-    default: renderThemeColorButtonStates(value.default, options),
-    primary: renderThemeColorButtonStates(value.primary, options),
-    positive: renderThemeColorButtonStates(value.positive, options),
-    caution: renderThemeColorButtonStates(value.caution, options),
-    critical: renderThemeColorButtonStates(value.critical, options)
-  };
+  const colorButtonMode = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options);
+  return colorButtonMode;
 }
 function renderThemeColorButtonStates(value, options) {
   return {
@@ -3650,13 +3517,10 @@ function renderInputStateColorTheme(value, options) {
   };
 }
 function renderThemeColorSelectable(value, options) {
-  return {
-    default: renderThemeColorSelectableStates(value.default, options),
-    primary: renderThemeColorSelectableStates(value.primary, options),
-    positive: renderThemeColorSelectableStates(value.positive, options),
-    caution: renderThemeColorSelectableStates(value.caution, options),
-    critical: renderThemeColorSelectableStates(value.critical, options)
-  };
+  const colorSelectable = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options);
+  return colorSelectable;
 }
 function renderThemeColorSelectableStates(value, options) {
   return {