@sanity/ui 2.10.0-corel.0 → 3.0.0-static.0

package/dist/theme.mjs

@@ -952,9 +952,7 @@ function v0_v2(v0) {
         primary: 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),
-        prospect: themeColor_v0_v2(color2.light.default),
-        explore: themeColor_v0_v2(color2.light.default)
+        critical: themeColor_v0_v2(color2.light.critical)
       },
       dark: {
         transparent: themeColor_v0_v2(color2.dark.transparent),
@@ -962,9 +960,7 @@ function v0_v2(v0) {
         primary: 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),
-        prospect: themeColor_v0_v2(color2.dark.default),
-        explore: themeColor_v0_v2(color2.dark.default)
+        critical: themeColor_v0_v2(color2.dark.critical)
       }
     },
     container,
@@ -1101,25 +1097,19 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
-const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4, 5], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5, 6], FONT_TEXT_SIZE = [0, 1, 2, 3, 4, 5], SHADOW = [0, 1, 2, 3, 4, 5], THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
   "transparent",
   "default",
   "primary",
   "positive",
   "caution",
-  "critical",
-  // new
-  "prospect",
-  "explore"
+  "critical"
 ], THEME_COLOR_STATE_TONES = [
   "default",
   "primary",
   "positive",
   "caution",
-  "critical",
-  // new
-  "prospect",
-  "explore"
+  "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);
@@ -1352,9 +1342,6 @@ const defaultColorTokens = {
           icon: ["500", "500"],
           dot: ["500", "500"]
         },
-        default: {
-          _hue: "gray"
-        },
         positive: {
           bg: ["200 50%", "900"],
           fg: ["600", "500"]
@@ -1371,7 +1358,7 @@ const defaultColorTokens = {
         fg: ["600", "400"]
       },
       fg: ["800", "200"],
-      focusRing: ["purple/500", "purple/500"],
+      focusRing: ["blue/500", "blue/500"],
       icon: ["600", "400"],
       kbd: {
         bg: ["white", "black"],
@@ -1379,7 +1366,7 @@ const defaultColorTokens = {
         border: ["200", "800"]
       },
       link: {
-        fg: ["purple/600", "purple/300"]
+        fg: ["blue/600", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
@@ -1406,7 +1393,7 @@ const defaultColorTokens = {
         fg: ["600", "400"]
       }
     },
-    primary: { _hue: "purple" },
+    primary: { _hue: "blue" },
     positive: {
       _hue: "green",
       shadow: { outline: ["500/0.4", "500/0.4"] }
@@ -1415,9 +1402,7 @@ const defaultColorTokens = {
       _hue: "yellow",
       shadow: { outline: ["600/0.3", "500/0.4"] }
     },
-    critical: { _hue: "red" },
-    prospect: { _hue: "purple" },
-    explore: { _hue: "cyan" }
+    critical: { _hue: "red" }
   },
   button: {
     default: {
@@ -1456,7 +1441,7 @@ const defaultColorTokens = {
             border: ["800", "200"]
           },
           link: {
-            fg: ["purple/200", "purple/600"]
+            fg: ["blue/200", "blue/600"]
           },
           muted: {
             bg: ["950", "50"],
@@ -1579,7 +1564,7 @@ const defaultColorTokens = {
             border: ["200", "800"]
           },
           link: {
-            fg: ["purple/700 60%", "purple/300 60%"]
+            fg: ["blue/700 60%", "blue/300 60%"]
           },
           muted: {
             bg: ["100", "950"],
@@ -1690,7 +1675,7 @@ const defaultColorTokens = {
             border: ["200", "800"]
           },
           link: {
-            fg: ["purple/700 70%", "purple/300 70%"]
+            fg: ["blue/700 70%", "blue/300 70%"]
           },
           muted: {
             bg: ["100", "950"],
@@ -1703,8 +1688,7 @@ const defaultColorTokens = {
         },
         hovered: {
           bg: ["50", "950"],
-          fg: ["800", "200"],
-          icon: ["800 70%", "300 70%"]
+          icon: ["700 70%", "400 70%"]
         },
         pressed: {
           bg: ["100", "900"],
@@ -1828,7 +1812,7 @@ const defaultColorTokens = {
           border: ["200", "800"]
         },
         link: {
-          fg: ["purple/700 70%", "purple/300 70%"]
+          fg: ["blue/700 70%", "blue/300 70%"]
         },
         muted: {
           bg: ["50", "950"],
@@ -1843,7 +1827,6 @@ const defaultColorTokens = {
         bg: ["50", "950"]
       },
       pressed: {
-        // _hue: 'purple',
         bg: ["100", "900"]
       },
       selected: {
@@ -1880,7 +1863,7 @@ const defaultColorTokens = {
           border: ["800", "200"]
         },
         link: {
-          fg: ["purple/200", "purple/600"]
+          fg: ["blue/200", "blue/600"]
         },
         muted: {
           bg: ["500 10%", "400 10%"],
@@ -1935,7 +1918,7 @@ const defaultColorTokens = {
     },
     default: {
       selected: {
-        _hue: "purple"
+        _hue: "blue"
       }
     },
     critical: {
@@ -2016,18 +1999,44 @@ function resolveBaseColorTones(inputTokens, tone) {
   return {
     ...spec,
     _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,
+    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,
+        ...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?.[tone2]
+        ...spec.badge?.critical
       }
-    }), {})
+    }
   };
 }
 function resolveButtonColorTokens(inputTokens) {
@@ -2058,18 +2067,44 @@ function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
   return {
     ...spec,
     _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,
+    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?.[tone2]
+        ...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
       }
-    }), {})
+    }
   };
 }
 function resolveInputColorTokens(inputTokens) {
@@ -2117,18 +2152,44 @@ function resolveSelectableStateColorTokens(inputTokens, tone, state) {
   return {
     ...spec,
     _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,
+    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,
         ...spec.badge?.["*"],
-        ...spec.badge?.[tone2]
+        ...spec.badge?.critical
       }
-    }), {})
+    }
   };
 }
 function buildColorTheme(config) {
@@ -2143,7 +2204,14 @@ function buildColorTheme(config) {
 }
 function buildColorScheme(options, config) {
   const { scheme } = options;
-  return THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildCardColorTheme({ scheme, tone }, config), acc), {});
+  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({ scheme, tone: "critical" }, config)
+  };
 }
 function buildCardColorTheme(options, config) {
   const { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = { hue: tokens?._hue || "gray", scheme };
@@ -2158,7 +2226,7 @@ function buildCardColorTheme(options, config) {
     badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
-    button: buildButtonColorTheme({ scheme, tone }, config),
+    button: buildButtonColorTheme({ scheme }, config),
     code: {
       bg: resolveColorTokenValue(context, tokens?.code?.bg),
       fg: resolveColorTokenValue(context, tokens?.code?.fg)
@@ -2179,7 +2247,7 @@ function buildCardColorTheme(options, config) {
       bg: resolveColorTokenValue(context, tokens?.muted?.bg),
       fg: resolveColorTokenValue(context, tokens?.muted?.fg)
     },
-    selectable: buildSelectableColorTheme({ scheme, tone }, config),
+    selectable: buildSelectableColorTheme({ scheme }, config),
     shadow: buildShadowColorTheme({ scheme, tone }, config),
     skeleton: {
       from: resolveColorTokenValue(context, tokens?.skeleton?.from),
@@ -2221,7 +2289,13 @@ function _buildAvatarColorTheme(options, stateTokens) {
 }
 function buildBadgeColorTheme(tokens, options, config) {
   const { scheme } = options;
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = _buildBadgeColorTheme(tokens, { scheme, tone }, config), acc), {});
+  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, { scheme, tone: "critical" }, config)
+  };
 }
 function _buildBadgeColorTheme(parentTokens, options, config) {
   const { scheme, tone } = options, tokens = parentTokens?.[tone], context = { hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray", scheme };
@@ -2233,25 +2307,25 @@ function _buildBadgeColorTheme(parentTokens, options, config) {
   };
 }
 function buildButtonColorTheme(options, config) {
-  const { scheme, tone: cardTone } = options, modes = {};
+  const { scheme } = options, modes = {};
   for (const mode of THEME_COLOR_BUTTON_MODES)
-    modes[mode] = buildButtonTonesColorTheme({ cardTone, scheme, mode }, config);
+    modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
   return modes;
 }
 function buildButtonTonesColorTheme(options, config) {
-  const { cardTone, mode, scheme } = options, tones2 = {};
+  const { mode, scheme } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildButtonStatesColorTheme({ cardTone, mode, scheme, tone }, config);
+    tones2[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
   return tones2;
 }
 function buildButtonStatesColorTheme(options, config) {
-  const { cardTone, mode, scheme, tone } = options, states = {};
+  const { mode, scheme, tone } = options, states = {};
   for (const state of THEME_COLOR_STATES)
-    states[state] = buildButtonStateColorTheme({ cardTone, mode, tone, scheme, state }, config);
+    states[state] = buildButtonStateColorTheme({ mode, tone, scheme, state }, config);
   return states;
 }
 function buildButtonStateColorTheme(options, config) {
-  const { cardTone, mode, tone, scheme, state } = 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 };
+  const { mode, tone, scheme, state } = options, tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     accent: {
@@ -2295,14 +2369,14 @@ function buildInputColorTheme(options, config) {
 function buildInputStatesColorTheme(options, config) {
   const { mode, scheme, tone } = options;
   return {
-    enabled: buildInputStateColorTheme({ mode, scheme, state: "enabled", cardTone: tone }, config),
-    hovered: buildInputStateColorTheme({ mode, scheme, state: "hovered", cardTone: tone }, config),
-    readOnly: buildInputStateColorTheme({ mode, scheme, state: "readOnly", cardTone: tone }, config),
-    disabled: buildInputStateColorTheme({ mode, scheme, state: "disabled", cardTone: tone }, config)
+    enabled: buildInputStateColorTheme({ mode, scheme, state: "enabled", tone }, config),
+    hovered: buildInputStateColorTheme({ mode, scheme, state: "hovered", tone }, config),
+    readOnly: buildInputStateColorTheme({ mode, scheme, state: "readOnly", tone }, config),
+    disabled: buildInputStateColorTheme({ mode, scheme, state: "disabled", tone }, config)
   };
 }
 function buildInputStateColorTheme(options, config) {
-  const { cardTone, mode, scheme, state } = 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 };
+  const { 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 = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     bg: resolveColorTokenValue(context, tokens?.bg),
@@ -2315,19 +2389,19 @@ function buildInputStateColorTheme(options, config) {
   };
 }
 function buildSelectableColorTheme(options, config) {
-  const { scheme, tone: cardTone } = options, tones2 = {};
+  const { scheme } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildSelectableStatesColorTheme({ cardTone, scheme, tone }, config);
+    tones2[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
   return tones2;
 }
 function buildSelectableStatesColorTheme(options, config) {
-  const { cardTone, scheme, tone } = options, states = {};
+  const { scheme, tone } = options, states = {};
   for (const state of THEME_COLOR_STATES)
-    states[state] = buildSelectableStateColorTheme({ cardTone, tone, scheme, state }, config);
+    states[state] = buildSelectableStateColorTheme({ tone, scheme, state }, config);
   return states;
 }
 function buildSelectableStateColorTheme(options, config) {
-  const { cardTone, scheme, state, tone } = 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 };
+  const { scheme, state, tone } = options, tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     accent: {
@@ -2591,44 +2665,29 @@ function renderColorHex(color2) {
 function renderThemeColorSchemes(value, config) {
   const colorPalette = config?.palette ?? defaultColorPalette;
   return {
-    light: renderThemeColorScheme(colorPalette, value.light, { debugPath: "light" }),
-    dark: renderThemeColorScheme(colorPalette, value.dark, { debugPath: "dark" })
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark)
   };
 }
-function renderThemeColorScheme(colorPalette, value, options) {
-  const { debugPath } = options, toneEntries = Object.entries(value), [, transparentTone] = toneEntries.find(([k]) => k === "transparent"), [, defaultTone] = toneEntries.find(([k]) => k === "default"), renderedTransparentTone = renderThemeColor(transparentTone, {
-    colorPalette,
-    debugPath: `${debugPath}.transparent`
-  }), renderedDefaultTone = renderThemeColor(defaultTone, {
-    colorPalette,
-    debugPath: `${debugPath}.default`
-  }), bg = renderedDefaultTone.bg;
+function renderThemeColorScheme(colorPalette, value) {
+  const toneEntries = Object.entries(value), [, transparentTone] = toneEntries.find(([k]) => k === "transparent"), [, defaultTone] = toneEntries.find(([k]) => k === "default"), renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette }), renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette }), bg = renderedDefaultTone.bg;
   if (bg === "white")
     throw new Error("Cannot blend with white background");
   return Object.fromEntries([
     ["transparent", renderedTransparentTone],
     ["default", renderedDefaultTone],
-    ...toneEntries.filter(([k]) => k !== "default" && k !== "transparent").map(([k, v]) => [
-      k,
-      renderThemeColor(v, {
-        bg,
-        colorPalette,
-        debugPath: `${debugPath}.${k}`
-      })
-    ])
+    ...toneEntries.filter(([k]) => k !== "default" && k !== "transparent").map(([k, v]) => [k, renderThemeColor(v, { bg, colorPalette })])
   ]);
 }
 function renderThemeColor(value, options) {
-  const { colorPalette, bg, debugPath } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode }), colorOptions = { colorPalette, bg: baseBg, blendMode }, button = renderThemeColorButton(value.button, {
+  const { colorPalette, bg } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode }), colorOptions = { colorPalette, bg: baseBg, blendMode }, button = renderThemeColorButton(value.button, {
     baseBg,
     blendMode,
-    colorPalette,
-    debugPath: `${debugPath}.button`
+    colorPalette
   }), selectable = renderThemeColorSelectable(value.selectable, {
     colorPalette,
     baseBg,
-    blendMode,
-    debugPath: `${debugPath}.selectable`
+    blendMode
   }), shadow = {
     outline: renderColorValue(value.shadow.outline, colorOptions),
     umbra: renderColorValue(value.shadow.umbra, {
@@ -2653,19 +2712,9 @@ function renderThemeColor(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
     backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`
-    }),
+    badge: renderThemeColorBadge(value.badge, { baseBg, colorPalette, blendMode }),
     bg: baseBg,
     border: renderColorValue(value.border, colorOptions),
     button,
@@ -2676,18 +2725,8 @@ function renderThemeColor(value, options) {
     fg: renderColorValue(value.fg, colorOptions),
     focusRing: renderColorValue(value.focusRing, colorOptions),
     icon: renderColorValue(value.icon, colorOptions),
-    input: renderThemeColorInput(value.input, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.input`
-    }),
-    kbd: renderThemeColorKBD(value.kbd, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.kbd`
-    }),
+    input: renderThemeColorInput(value.input, { baseBg, colorPalette, blendMode }),
+    kbd: renderThemeColorKBD(value.kbd, { baseBg, colorPalette, blendMode }),
     link: {
       fg: renderColorValue(value.link.fg, colorOptions)
     },
@@ -2700,12 +2739,7 @@ function renderThemeColor(value, options) {
       from: renderColorValue(value.skeleton.from, colorOptions),
       to: renderColorValue(value.skeleton.to, colorOptions)
     },
-    syntax: renderSyntaxColorTheme(value.syntax, {
-      baseBg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.syntax`
-    }),
+    syntax: renderSyntaxColorTheme(value.syntax, { baseBg, colorPalette, blendMode }),
     selectable
   };
 }
@@ -2726,44 +2760,16 @@ function renderThemeColorKBD(value, options) {
   };
 }
 function renderThemeColorAvatar(value, options) {
-  const { debugPath } = options;
   return {
-    gray: renderThemeColorAvatarColor(value.gray, {
-      ...options,
-      debugPath: `${debugPath}.gray`
-    }),
-    blue: renderThemeColorAvatarColor(value.blue, {
-      ...options,
-      debugPath: `${debugPath}.blue`
-    }),
-    purple: renderThemeColorAvatarColor(value.purple, {
-      ...options,
-      debugPath: `${debugPath}.purple`
-    }),
-    magenta: renderThemeColorAvatarColor(value.magenta, {
-      ...options,
-      debugPath: `${debugPath}.magenta`
-    }),
-    red: renderThemeColorAvatarColor(value.red, {
-      ...options,
-      debugPath: `${debugPath}.red`
-    }),
-    orange: renderThemeColorAvatarColor(value.orange, {
-      ...options,
-      debugPath: `${debugPath}.orange`
-    }),
-    yellow: renderThemeColorAvatarColor(value.yellow, {
-      ...options,
-      debugPath: `${debugPath}.yellow`
-    }),
-    green: renderThemeColorAvatarColor(value.green, {
-      ...options,
-      debugPath: `${debugPath}.green`
-    }),
-    cyan: renderThemeColorAvatarColor(value.cyan, {
-      ...options,
-      debugPath: `${debugPath}.cyan`
-    })
+    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)
   };
 }
 function renderThemeColorAvatarColor(value, options) {
@@ -2783,11 +2789,13 @@ function renderThemeColorAvatarColor(value, options) {
   };
 }
 function renderThemeColorBadge(value, options) {
-  const { debugPath } = options;
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = renderThemeColorBadgeColor(value[tone], {
-    ...options,
-    debugPath: `${debugPath}.${tone}`
-  }), acc), {});
+  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)
+  };
 }
 function renderThemeColorBadgeColor(value, options) {
   const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
@@ -2807,56 +2815,32 @@ function renderThemeColorBadgeColor(value, options) {
   };
 }
 function renderThemeColorButton(value, options) {
-  const { debugPath } = options;
   return {
-    default: renderThemeColorButtonTones(value.default, {
-      ...options,
-      debugPath: `${debugPath}.default`
-    }),
-    ghost: renderThemeColorButtonTones(value.ghost, {
-      ...options,
-      debugPath: `${debugPath}.ghost`
-    }),
-    bleed: renderThemeColorButtonTones(value.bleed, {
-      ...options,
-      debugPath: `${debugPath}.bleed`
-    })
+    default: renderThemeColorButtonTones(value.default, options),
+    ghost: renderThemeColorButtonTones(value.ghost, options),
+    bleed: renderThemeColorButtonTones(value.bleed, options)
   };
 }
 function renderThemeColorButtonTones(value, options) {
-  const { debugPath } = options;
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = renderThemeColorButtonStates(value[tone], {
-    ...options,
-    debugPath: `${debugPath}.${tone}`
-  }), acc), {});
+  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)
+  };
 }
 function renderThemeColorButtonStates(value, options) {
-  const { debugPath } = options;
   return {
-    enabled: renderThemeColorState(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`
-    }),
-    hovered: renderThemeColorState(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`
-    }),
-    pressed: renderThemeColorState(value.pressed, {
-      ...options,
-      debugPath: `${debugPath}.pressed`
-    }),
-    selected: renderThemeColorState(value.selected, {
-      ...options,
-      debugPath: `${debugPath}.selected`
-    }),
-    disabled: renderThemeColorState(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`
-    })
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options)
   };
 }
 function renderThemeColorState(value, options) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette, debugPath } = options, blendMode = value._blend || "multiply", rootOptions = {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -2870,18 +2854,8 @@ function renderThemeColorState(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg: bg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`
-    }),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg: bg,
-      colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg: bg, colorPalette, blendMode }),
+    badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -2909,37 +2883,17 @@ function renderThemeColorState(value, options) {
   };
 }
 function renderThemeColorInput(value, options) {
-  const { debugPath } = options;
   return {
-    default: renderInputStatesColorTheme(value.default, {
-      ...options,
-      debugPath: `${debugPath}.default`
-    }),
-    invalid: renderInputStatesColorTheme(value.invalid, {
-      ...options,
-      debugPath: `${debugPath}.invalid`
-    })
+    default: renderInputStatesColorTheme(value.default, options),
+    invalid: renderInputStatesColorTheme(value.invalid, options)
   };
 }
 function renderInputStatesColorTheme(value, options) {
-  const { debugPath } = options;
   return {
-    enabled: renderInputStateColorTheme(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`
-    }),
-    hovered: renderInputStateColorTheme(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`
-    }),
-    readOnly: renderInputStateColorTheme(value.readOnly, {
-      ...options,
-      debugPath: `${debugPath}.readOnly`
-    }),
-    disabled: renderInputStateColorTheme(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`
-    })
+    enabled: renderInputStateColorTheme(value.enabled, options),
+    hovered: renderInputStateColorTheme(value.hovered, options),
+    readOnly: renderInputStateColorTheme(value.readOnly, options),
+    disabled: renderInputStateColorTheme(value.disabled, options)
   };
 }
 function renderInputStateColorTheme(value, options) {
@@ -2956,35 +2910,21 @@ function renderInputStateColorTheme(value, options) {
   };
 }
 function renderThemeColorSelectable(value, options) {
-  const { debugPath } = options;
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = renderThemeColorSelectableStates(value[tone], {
-    ...options,
-    debugPath: `${debugPath}.${tone}`
-  }), acc), {});
+  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)
+  };
 }
 function renderThemeColorSelectableStates(value, options) {
-  const { debugPath } = options;
   return {
-    enabled: renderThemeColorState(value.enabled, {
-      ...options,
-      debugPath: `${debugPath}.enabled`
-    }),
-    hovered: renderThemeColorState(value.hovered, {
-      ...options,
-      debugPath: `${debugPath}.hovered`
-    }),
-    pressed: renderThemeColorState(value.pressed, {
-      ...options,
-      debugPath: `${debugPath}.pressed`
-    }),
-    selected: renderThemeColorState(value.selected, {
-      ...options,
-      debugPath: `${debugPath}.selected`
-    }),
-    disabled: renderThemeColorState(value.disabled, {
-      ...options,
-      debugPath: `${debugPath}.disabled`
-    })
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options)
   };
 }
 function renderSyntaxColorTheme(value, options) {
@@ -3084,6 +3024,7 @@ function _setCachedTheme(rootTheme, scheme, tone, theme) {
   schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
 }
 export {
+  AVATAR_SIZE,
   COLOR_CONFIG_AVATAR_COLORS,
   COLOR_CONFIG_BLEND_KEYS,
   COLOR_CONFIG_CARD_KEYS,
@@ -3093,6 +3034,14 @@ export {
   COLOR_CONFIG_STATES,
   COLOR_CONFIG_STATE_KEYS,
   COLOR_CONFIG_STATE_TONES,
+  CONTAINER,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
   THEME_COLOR_AVATAR_COLORS,
   THEME_COLOR_BLEND_MODES,
   THEME_COLOR_BUTTON_MODES,