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

package/dist/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js"), color = require("@sanity/color");
+var color = require("@sanity/color");
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
     default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
@@ -57,46 +57,226 @@ function _createSelectableStates(opts, base, dark, solid, muted, tone) {
 function createSolidTones(opts, base, dark, name) {
   return {
     default: {
-      enabled: opts.solid({ base, dark, tone: "default", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "default", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "default", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "default", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "default", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "selected"
+      })
     },
     transparent: {
-      enabled: opts.solid({ base, dark, tone: "transparent", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "transparent", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "transparent", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "transparent", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "transparent", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "selected"
+      })
     },
     primary: {
-      enabled: opts.solid({ base, dark, tone: "primary", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "primary", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "primary", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "primary", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "primary", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "selected"
+      })
     },
     positive: {
-      enabled: opts.solid({ base, dark, tone: "positive", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "positive", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "positive", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "positive", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "positive", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "selected"
+      })
     },
     caution: {
-      enabled: opts.solid({ base, dark, tone: "caution", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "caution", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "caution", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "caution", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "caution", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "selected"
+      })
     },
     critical: {
-      enabled: opts.solid({ base, dark, tone: "critical", name, state: "enabled" }),
-      disabled: opts.solid({ base, dark, tone: "critical", name, state: "disabled" }),
-      hovered: opts.solid({ base, dark, tone: "critical", name, state: "hovered" }),
-      pressed: opts.solid({ base, dark, tone: "critical", name, state: "pressed" }),
-      selected: opts.solid({ base, dark, tone: "critical", name, state: "selected" })
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "selected"
+      })
     }
   };
 }
@@ -287,7 +467,10 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
     focusRing: [colors.critical.base, colors.critical.base]
   }
 }, defaultOpts = {
-  base: ({ dark, name }) => name === "default" ? {
+  base: ({
+    dark,
+    name
+  }) => name === "default" ? {
     bg: dark ? black : white,
     fg: dark ? white : black,
     border: dark ? colors.default.darkest : colors.default.lightest,
@@ -318,7 +501,12 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       to: dark ? white : black
     }
   },
-  solid: ({ base, dark, state, tone }) => {
+  solid: ({
+    base,
+    dark,
+    state,
+    tone
+  }) => {
     const color2 = colors[tone];
     return state === "hovered" ? {
       bg: dark ? color2.light : color2.dark,
@@ -362,7 +550,12 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       skeleton: base.skeleton
     };
   },
-  muted: ({ base, dark, state, tone }) => {
+  muted: ({
+    base,
+    dark,
+    state,
+    tone
+  }) => {
     const color2 = colors[tone];
     return state === "hovered" ? {
       bg: dark ? color2.darker : color2.lighter,
@@ -406,7 +599,12 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       skeleton: base.skeleton
     };
   },
-  button: ({ base, mode, muted, solid }) => mode === "bleed" ? {
+  button: ({
+    base,
+    mode,
+    muted,
+    solid
+  }) => mode === "bleed" ? {
     ...muted,
     enabled: {
       bg: "transparent",
@@ -454,7 +652,9 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
     ...solid,
     enabled: muted.enabled
   } : solid,
-  card: ({ base }) => ({
+  card: ({
+    base
+  }) => ({
     bg: black,
     bg2: black,
     fg: black,
@@ -482,8 +682,14 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
     border: black,
     placeholder: black
   }),
-  selectable: ({ muted, state, tone }) => muted[tone][state],
-  spot: ({ key }) => spots[key],
+  selectable: ({
+    muted,
+    state,
+    tone
+  }) => muted[tone][state],
+  spot: ({
+    key
+  }) => spots[key],
   syntax: () => ({
     atrule: black,
     attrName: black,
@@ -598,64 +804,283 @@ function createInputModes(opts, base, dark, solid, muted) {
 function createMutedTones(opts, base, dark, name) {
   return {
     default: {
-      enabled: opts.muted({ base, dark, tone: "default", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "default", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "default", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "default", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "default", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "selected"
+      })
     },
     transparent: {
-      enabled: opts.muted({ base, dark, tone: "transparent", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "transparent", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "transparent", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "transparent", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "transparent", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "selected"
+      })
     },
     primary: {
-      enabled: opts.muted({ base, dark, tone: "primary", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "primary", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "primary", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "primary", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "primary", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "selected"
+      })
     },
     positive: {
-      enabled: opts.muted({ base, dark, tone: "positive", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "positive", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "positive", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "positive", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "positive", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "selected"
+      })
     },
     caution: {
-      enabled: opts.muted({ base, dark, tone: "caution", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "caution", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "caution", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "caution", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "caution", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "selected"
+      })
     },
     critical: {
-      enabled: opts.muted({ base, dark, tone: "critical", name, state: "enabled" }),
-      disabled: opts.muted({ base, dark, tone: "critical", name, state: "disabled" }),
-      hovered: opts.muted({ base, dark, tone: "critical", name, state: "hovered" }),
-      pressed: opts.muted({ base, dark, tone: "critical", name, state: "pressed" }),
-      selected: opts.muted({ base, dark, tone: "critical", name, state: "selected" })
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "selected"
+      })
     }
   };
 }
 function createSpot(opts, base, dark) {
   return {
-    gray: opts.spot({ base, dark, key: "gray" }),
-    blue: opts.spot({ base, dark, key: "blue" }),
-    purple: opts.spot({ base, dark, key: "purple" }),
-    magenta: opts.spot({ base, dark, key: "magenta" }),
-    red: opts.spot({ base, dark, key: "red" }),
-    orange: opts.spot({ base, dark, key: "orange" }),
-    yellow: opts.spot({ base, dark, key: "yellow" }),
-    green: opts.spot({ base, dark, key: "green" }),
-    cyan: opts.spot({ base, dark, key: "cyan" })
+    gray: opts.spot({
+      base,
+      dark,
+      key: "gray"
+    }),
+    blue: opts.spot({
+      base,
+      dark,
+      key: "blue"
+    }),
+    purple: opts.spot({
+      base,
+      dark,
+      key: "purple"
+    }),
+    magenta: opts.spot({
+      base,
+      dark,
+      key: "magenta"
+    }),
+    red: opts.spot({
+      base,
+      dark,
+      key: "red"
+    }),
+    orange: opts.spot({
+      base,
+      dark,
+      key: "orange"
+    }),
+    yellow: opts.spot({
+      base,
+      dark,
+      key: "yellow"
+    }),
+    green: opts.spot({
+      base,
+      dark,
+      key: "green"
+    }),
+    cyan: opts.spot({
+      base,
+      dark,
+      key: "cyan"
+    })
   };
 }
 function createColorTheme(partialOpts = {}) {
-  const builders = { ...defaultOpts, ...partialOpts };
+  const builders = {
+    ...defaultOpts,
+    ...partialOpts
+  };
   return {
     light: _createColorScheme(builders, !1),
     dark: _createColorScheme(builders, !0)
@@ -672,7 +1097,10 @@ function _createColorScheme(opts, dark) {
   };
 }
 function _createColor(opts, dark, name) {
-  const base = opts.base({ dark, name }), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
+  const base = opts.base({
+    dark,
+    name
+  }), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
   return {
     base,
     button: createButtonModes(opts, base, dark, solid, muted),
@@ -681,233 +1109,576 @@ function _createColor(opts, dark, name) {
     input: createInputModes(opts, base, dark, solid, muted),
     selectable: createSelectableTones(opts, base, dark, solid, muted),
     spot: createSpot(opts, base, dark),
-    syntax: opts.syntax({ base, dark }),
+    syntax: opts.syntax({
+      base,
+      dark
+    }),
     solid,
     muted
   };
 }
-const defaultThemeFonts = {
-  code: {
-    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
+const defaultThemeConfig = {
+  _version: 2,
+  avatar: {
+    sizes: [{
+      distance: -4,
+      size: 19
+    }, {
+      distance: -4,
+      size: 25
+    }, {
+      distance: -8,
+      size: 33
+    }, {
+      distance: -12,
+      size: 49
+    }],
+    focusRing: {
+      offset: 1,
+      width: 1
+    }
+  },
+  button: {
+    textWeight: "medium",
+    border: {
+      width: 1
+    },
+    focusRing: {
+      offset: -1,
+      width: 1
+    }
+  },
+  card: {
+    border: {
+      width: 1
+    },
+    focusRing: {
+      offset: -1,
+      width: 1
+    },
+    shadow: {
+      outline: 0.5
+    }
+  },
+  container: [320, 640, 960, 1280, 1600, 1920],
+  media: [360, 600, 900, 1200, 1800, 2400],
+  layer: {
+    dialog: {
+      zOffset: 600
+    },
+    popover: {
+      zOffset: 400
+    },
+    tooltip: {
+      zOffset: 200
+    }
+  },
+  radius: [0, 1, 5, 9, 13, 21, 33],
+  shadow: [null, {
+    umbra: [0, 0, 0, 0],
+    penumbra: [0, 0, 0, 0],
+    ambient: [0, 0, 0, 0]
+  }, {
+    umbra: [0, 3, 5, -2],
+    penumbra: [0, 6, 10, 0],
+    ambient: [0, 1, 18, 1]
+  }, {
+    umbra: [0, 7, 8, -4],
+    penumbra: [0, 12, 17, 2],
+    ambient: [0, 5, 22, 4]
+  }, {
+    umbra: [0, 9, 11, -5],
+    penumbra: [0, 18, 28, 2],
+    ambient: [0, 7, 34, 6]
+  }, {
+    umbra: [0, 11, 15, -7],
+    penumbra: [0, 24, 38, 3],
+    ambient: [0, 9, 46, 8]
+  }],
+  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
+  input: {
+    border: {
+      width: 1
+    },
+    checkbox: {
+      size: 17,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    switch: {
+      width: 25,
+      height: 17,
+      padding: 5,
+      transitionDurationMs: 150,
+      transitionTimingFunction: "ease-out",
+      focusRing: {
+        offset: 1,
+        width: 1
+      }
+    },
+    select: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    text: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    }
+  },
+  style: {
+    button: {
+      root: {
+        transition: "background-color 100ms,border-color 100ms,color 100ms"
+      }
+    }
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  }
+}, defaultThemeFonts = {
+  code: {
+    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  },
+  heading: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 17,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 29,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 27,
+      iconSize: 41,
+      lineHeight: 35,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 9.5,
+      descenderHeight: 8.5,
+      fontSize: 33,
+      iconSize: 49,
+      lineHeight: 41,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 10.5,
+      descenderHeight: 9.5,
+      fontSize: 38,
+      iconSize: 53,
+      lineHeight: 47,
+      letterSpacing: 0
+    }]
+  },
+  label: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 8.1,
+      iconSize: 13,
+      lineHeight: 10,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 9.5,
+      iconSize: 15,
+      lineHeight: 11,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 10.8,
+      iconSize: 17,
+      lineHeight: 12,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 12.25,
+      iconSize: 19,
+      lineHeight: 13,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 13.6,
+      iconSize: 21,
+      lineHeight: 14,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 15,
+      iconSize: 23,
+      lineHeight: 15,
+      letterSpacing: 0.5
+    }]
+  },
+  text: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 15,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 18,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  }
+}, cache$4 = /* @__PURE__ */ new WeakMap();
+function themeColor_v0_v2(color_v0) {
+  const cached_v2 = cache$4.get(color_v0);
+  if (cached_v2) return cached_v2;
+  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
+    _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
+    _dark: color_v0.dark,
+    accent: base.accent,
+    avatar: base.avatar,
+    backdrop: color_v0.base.shadow.ambient,
+    badge: base.badge,
+    bg: color_v0.base.bg,
+    border: color_v0.base.border,
+    button: {
+      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
+      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
+      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
+    },
+    code: base.code,
+    fg: color_v0.base.fg,
+    focusRing: color_v0.base.focusRing,
+    icon: base.muted.fg,
+    input: {
+      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
+      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
+    },
+    kbd: base.kbd,
+    link: base.link,
+    muted: {
+      ...base.muted,
+      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
+    },
+    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
+    shadow: color_v0.base.shadow,
+    skeleton: {
+      from: color_v0.skeleton?.from || color_v0.base.border,
+      to: color_v0.skeleton?.to || color_v0.base.border
+    },
+    syntax: color_v0.syntax
+  };
+  return cache$4.set(color_v0, color_v2), color_v2;
+}
+function stateTonesThemeColor_v0_v2(v0, t) {
+  return {
+    default: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
+    },
+    primary: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
+    },
+    positive: {
+      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
+    },
+    caution: {
+      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
+    },
+    critical: {
+      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
+    }
+  };
+}
+function stateThemeColor_v0_v2(v0, state) {
+  return {
+    ...state,
+    avatar: {
+      gray: {
+        bg: v0.spot.gray,
+        fg: v0.base.bg
+      },
+      blue: {
+        bg: v0.spot.blue,
+        fg: v0.base.bg
+      },
+      purple: {
+        bg: v0.spot.purple,
+        fg: v0.base.bg
+      },
+      magenta: {
+        bg: v0.spot.magenta,
+        fg: v0.base.bg
+      },
+      red: {
+        bg: v0.spot.red,
+        fg: v0.base.bg
+      },
+      orange: {
+        bg: v0.spot.orange,
+        fg: v0.base.bg
+      },
+      yellow: {
+        bg: v0.spot.yellow,
+        fg: v0.base.bg
+      },
+      green: {
+        bg: v0.spot.green,
+        fg: v0.base.bg
+      },
+      cyan: {
+        bg: v0.spot.cyan,
+        fg: v0.base.bg
+      }
+    },
+    badge: {
+      default: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg
+      },
+      primary: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg
+      },
+      positive: {
+        bg: v0.muted.positive.enabled.bg,
+        fg: v0.muted.positive.enabled.fg,
+        dot: v0.muted.positive.enabled.muted.fg,
+        icon: v0.muted.positive.enabled.muted.fg
+      },
+      caution: {
+        bg: v0.muted.caution.enabled.bg,
+        fg: v0.muted.caution.enabled.fg,
+        dot: v0.muted.caution.enabled.muted.fg,
+        icon: v0.muted.caution.enabled.muted.fg
+      },
+      critical: {
+        bg: v0.muted.critical.enabled.bg,
+        fg: v0.muted.critical.enabled.fg,
+        dot: v0.muted.critical.enabled.muted.fg,
+        icon: v0.muted.critical.enabled.muted.fg
+      }
+    },
+    kbd: {
+      bg: v0.muted.default.enabled.bg,
+      fg: v0.muted.default.enabled.fg,
+      border: v0.muted.default.enabled.border
+    },
+    muted: {
+      ...v0.muted.default.enabled.muted,
+      bg: state.bg2 || state.bg
+    },
+    skeleton: {
+      from: state.skeleton?.from || state.border,
+      to: state.skeleton?.to || state.border
+    }
+  };
+}
+function inputStatesThemeColor_v0_v2(states) {
+  return {
+    enabled: inputStateThemeColor_v0_v2(states.enabled),
+    disabled: inputStateThemeColor_v0_v2(states.disabled),
+    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
+    hovered: inputStateThemeColor_v0_v2(states.hovered)
+  };
+}
+function inputStateThemeColor_v0_v2(state) {
+  return {
+    bg: state.bg,
+    border: state.border,
+    fg: state.fg,
+    muted: {
+      bg: state.bg2
     },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0
-      }
-    ]
-  },
-  heading: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
-      bold: 900
+    placeholder: state.placeholder
+  };
+}
+const cache$3 = /* @__PURE__ */ new WeakMap();
+function getTheme_v2(theme) {
+  if (theme.sanity.v2?._resolved) return theme.sanity.v2;
+  const cached_v2 = cache$3.get(theme);
+  if (cached_v2) return cached_v2;
+  const v2 = {
+    _version: 2,
+    _resolved: !0,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar
     },
-    sizes: [
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 17,
-        lineHeight: 19,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 27,
-        iconSize: 41,
-        lineHeight: 35,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 9.5,
-        descenderHeight: 8.5,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 41,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 10.5,
-        descenderHeight: 9.5,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 47,
-        letterSpacing: 0
-      }
-    ]
-  },
-  label: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900
+    button: {
+      ...defaultThemeConfig.button,
+      ...theme.sanity.button
     },
-    sizes: [
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 8.1,
-        iconSize: 13,
-        lineHeight: 10,
-        letterSpacing: 0.5
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 9.5,
-        iconSize: 15,
-        lineHeight: 11,
-        letterSpacing: 0.5
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 10.8,
-        iconSize: 17,
-        lineHeight: 12,
-        letterSpacing: 0.5
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 12.25,
-        iconSize: 19,
-        lineHeight: 13,
-        letterSpacing: 0.5
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 13.6,
-        iconSize: 21,
-        lineHeight: 14,
-        letterSpacing: 0.5
-      },
-      {
-        ascenderHeight: 2,
-        descenderHeight: 2,
-        fontSize: 15,
-        iconSize: 23,
-        lineHeight: 15,
-        letterSpacing: 0.5
+    card: defaultThemeConfig.card,
+    color: themeColor_v0_v2(theme.sanity.color),
+    container: theme.sanity.container,
+    font: theme.sanity.fonts,
+    input: {
+      ...defaultThemeConfig.input,
+      ...theme.sanity.input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...theme.sanity.input.checkbox
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...theme.sanity.input.radio
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...theme.sanity.input.switch
       }
-    ]
-  },
-  text: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
     },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 15,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 19,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 15,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 18,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0
-      },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0
-      }
-    ]
-  }
-};
+    layer: theme.sanity.layer ?? defaultThemeConfig.layer,
+    media: theme.sanity.media,
+    radius: theme.sanity.radius,
+    shadow: theme.sanity.shadows,
+    space: theme.sanity.space,
+    style: theme.sanity.styles
+  };
+  return cache$3.set(theme, v2), v2;
+}
 function is_v0(themeProp) {
   return themeProp._version === 0;
 }
@@ -937,55 +1708,51 @@ function v0_v2(v0) {
   } = v0, v2 = {
     _version: 2,
     avatar: {
-      ...getTheme_v2.defaultThemeConfig.avatar,
+      ...defaultThemeConfig.avatar,
       ...avatar
     },
     button: {
-      ...getTheme_v2.defaultThemeConfig.button,
+      ...defaultThemeConfig.button,
       ...button
     },
-    card: getTheme_v2.defaultThemeConfig.card,
+    card: defaultThemeConfig.card,
     color: {
       light: {
-        transparent: getTheme_v2.themeColor_v0_v2(color2.light.transparent),
-        default: getTheme_v2.themeColor_v0_v2(color2.light.default),
-        primary: getTheme_v2.themeColor_v0_v2(color2.light.primary),
-        positive: getTheme_v2.themeColor_v0_v2(color2.light.positive),
-        caution: getTheme_v2.themeColor_v0_v2(color2.light.caution),
-        critical: getTheme_v2.themeColor_v0_v2(color2.light.critical),
-        prospect: getTheme_v2.themeColor_v0_v2(color2.light.default),
-        explore: getTheme_v2.themeColor_v0_v2(color2.light.default)
+        transparent: themeColor_v0_v2(color2.light.transparent),
+        default: themeColor_v0_v2(color2.light.default),
+        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)
       },
       dark: {
-        transparent: getTheme_v2.themeColor_v0_v2(color2.dark.transparent),
-        default: getTheme_v2.themeColor_v0_v2(color2.dark.default),
-        primary: getTheme_v2.themeColor_v0_v2(color2.dark.primary),
-        positive: getTheme_v2.themeColor_v0_v2(color2.dark.positive),
-        caution: getTheme_v2.themeColor_v0_v2(color2.dark.caution),
-        critical: getTheme_v2.themeColor_v0_v2(color2.dark.critical),
-        prospect: getTheme_v2.themeColor_v0_v2(color2.dark.default),
-        explore: getTheme_v2.themeColor_v0_v2(color2.dark.default)
+        transparent: themeColor_v0_v2(color2.dark.transparent),
+        default: themeColor_v0_v2(color2.dark.default),
+        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)
       }
     },
     container,
     font,
     input: {
-      ...getTheme_v2.defaultThemeConfig.input,
+      ...defaultThemeConfig.input,
       ...input,
       checkbox: {
-        ...getTheme_v2.defaultThemeConfig.input.checkbox,
+        ...defaultThemeConfig.input.checkbox,
         ...input.checkbox
       },
       radio: {
-        ...getTheme_v2.defaultThemeConfig.input.radio,
+        ...defaultThemeConfig.input.radio,
         ...input.radio
       },
       switch: {
-        ...getTheme_v2.defaultThemeConfig.input.switch,
+        ...defaultThemeConfig.input.switch,
         ...input.switch
       }
     },
-    layer: layer ?? getTheme_v2.defaultThemeConfig.layer,
+    layer: layer ?? defaultThemeConfig.layer,
     media,
     radius,
     shadow,
@@ -1101,26 +1868,7 @@ 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",
-  // new
-  "prospect",
-  "explore"
-], THEME_COLOR_STATE_TONES = [
-  "default",
-  "primary",
-  "positive",
-  "caution",
-  "critical",
-  // new
-  "prospect",
-  "explore"
-], 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.COLOR_HUES;
+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"], 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.COLOR_HUES;
 function isColorBlendModeValue(str) {
   return THEME_COLOR_BLEND_MODES.includes(str);
 }
@@ -1133,33 +1881,7 @@ function isColorTintKey(str) {
 function isColorButtonMode(str) {
   return THEME_COLOR_BUTTON_MODES.includes(str);
 }
-const COLOR_CONFIG_STATE_KEYS = [
-  "_hue",
-  "bg",
-  "fg",
-  "border",
-  "focusRing",
-  "muted/fg",
-  "accent/fg",
-  "link/fg",
-  "code/bg",
-  "code/fg",
-  "skeleton/from",
-  "skeleton/to",
-  "status/dot",
-  "status/icon"
-], COLOR_CONFIG_CARD_KEYS = [
-  ...COLOR_CONFIG_STATE_KEYS,
-  "_hue",
-  "bg",
-  "fg",
-  "border",
-  "focusRing",
-  "shadow/outline",
-  "shadow/umbra",
-  "shadow/penumbra",
-  "shadow/ambient"
-], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
 function parseTokenKey(str) {
   const segments = str.split("/"), segment0 = segments.shift() || "";
   if (isColorConfigBaseTone(segment0)) {
@@ -1325,10 +2047,16 @@ function compileColorTokenValue(node) {
 }
 const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
 function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
-  const { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  const {
+    hue,
+    scheme
+  } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
   if (!node || node.type !== "color")
     throw new Error(`Invalid color token: ${value[0]}`);
-  return compileColorTokenValue({ ...node, hue: node.hue || hue });
+  return compileColorTokenValue({
+    ...node,
+    hue: node.hue || hue
+  });
 }
 const defaultColorTokens = {
   base: {
@@ -1352,9 +2080,6 @@ const defaultColorTokens = {
           icon: ["500", "500"],
           dot: ["500", "500"]
         },
-        default: {
-          _hue: "gray"
-        },
         positive: {
           bg: ["200 50%", "900"],
           fg: ["600", "500"]
@@ -1371,7 +2096,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 +2104,7 @@ const defaultColorTokens = {
         border: ["200", "800"]
       },
       link: {
-        fg: ["purple/600", "purple/300"]
+        fg: ["blue/600", "blue/300"]
       },
       muted: {
         bg: ["50", "950"],
@@ -1406,18 +2131,24 @@ const defaultColorTokens = {
         fg: ["600", "400"]
       }
     },
-    primary: { _hue: "purple" },
+    primary: {
+      _hue: "blue"
+    },
     positive: {
       _hue: "green",
-      shadow: { outline: ["500/0.4", "500/0.4"] }
+      shadow: {
+        outline: ["500/0.4", "500/0.4"]
+      }
     },
     caution: {
       _hue: "yellow",
-      shadow: { outline: ["600/0.3", "500/0.4"] }
+      shadow: {
+        outline: ["600/0.3", "500/0.4"]
+      }
     },
-    critical: { _hue: "red" },
-    prospect: { _hue: "purple" },
-    explore: { _hue: "cyan" }
+    critical: {
+      _hue: "red"
+    }
   },
   button: {
     default: {
@@ -1456,7 +2187,7 @@ const defaultColorTokens = {
             border: ["800", "200"]
           },
           link: {
-            fg: ["purple/200", "purple/600"]
+            fg: ["blue/200", "blue/600"]
           },
           muted: {
             bg: ["950", "50"],
@@ -1579,7 +2310,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 +2421,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 +2434,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 +2558,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 +2573,6 @@ const defaultColorTokens = {
         bg: ["50", "950"]
       },
       pressed: {
-        // _hue: 'purple',
         bg: ["100", "900"]
       },
       selected: {
@@ -1880,7 +2609,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 +2664,7 @@ const defaultColorTokens = {
     },
     default: {
       selected: {
-        _hue: "purple"
+        _hue: "blue"
       }
     },
     critical: {
@@ -2016,18 +2745,62 @@ function resolveBaseColorTones(inputTokens, tone) {
   return {
     ...spec,
     _hue: hue,
-    avatar: color.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) {
@@ -2049,27 +2822,66 @@ function resolveButtonModeColorTokens(inputTokens, mode, tone) {
   return tokens;
 }
 function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
-  const spec = merge(
-    inputTokens?.button?.[mode]?.["*"]?.["*"],
-    inputTokens?.button?.[mode]?.[tone]?.["*"],
-    inputTokens?.button?.[mode]?.["*"]?.[state],
-    inputTokens?.button?.[mode]?.[tone]?.[state]
-  ), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+  const spec = merge(inputTokens?.button?.[mode]?.["*"]?.["*"], inputTokens?.button?.[mode]?.[tone]?.["*"], inputTokens?.button?.[mode]?.["*"]?.[state], inputTokens?.button?.[mode]?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
     ...spec,
     _hue: hue,
-    avatar: color.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?.[tone2]
+        ...spec.badge?.caution
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue,
+        ...spec.badge?.["*"],
+        ...spec.badge?.critical
       }
-    }), {})
+    }
   };
 }
 function resolveInputColorTokens(inputTokens) {
@@ -2085,13 +2897,11 @@ function resolveInputModeColorTokens(inputTokens, mode) {
   return states;
 }
 function resolveInputStateColorTokens(inputTokens, mode, state) {
-  const spec = merge(
-    inputTokens?.input?.["*"]?.["*"],
-    inputTokens?.input?.[mode]?.["*"],
-    inputTokens?.input?.["*"]?.[state],
-    inputTokens?.input?.[mode]?.[state]
-  ), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
-  return { ...spec, _hue: hue };
+  const spec = merge(inputTokens?.input?.["*"]?.["*"], inputTokens?.input?.[mode]?.["*"], inputTokens?.input?.["*"]?.[state], inputTokens?.input?.[mode]?.[state]), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
+  return {
+    ...spec,
+    _hue: hue
+  };
 }
 function resolveSelectableColorTokens(inputTokens) {
   const tokens = {};
@@ -2108,27 +2918,66 @@ function resolveSelectableToneColorTokens(inputTokens, tone) {
   return states;
 }
 function resolveSelectableStateColorTokens(inputTokens, tone, state) {
-  const spec = merge(
-    inputTokens?.selectable?.["*"]?.["*"],
-    inputTokens?.selectable?.[tone]?.["*"],
-    inputTokens?.selectable?.["*"]?.[state],
-    inputTokens?.selectable?.[tone]?.[state]
-  ), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+  const spec = merge(inputTokens?.selectable?.["*"]?.["*"], inputTokens?.selectable?.[tone]?.["*"], inputTokens?.selectable?.["*"]?.[state], inputTokens?.selectable?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
     ...spec,
     _hue: hue,
-    avatar: color.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) {
@@ -2137,28 +2986,71 @@ function buildColorTheme(config) {
     color: resolveColorTokens(config?.color)
   };
   return {
-    light: buildColorScheme({ scheme: "light" }, resolvedConfig),
-    dark: buildColorScheme({ scheme: "dark" }, resolvedConfig)
+    light: buildColorScheme({
+      scheme: "light"
+    }, resolvedConfig),
+    dark: buildColorScheme({
+      scheme: "dark"
+    }, resolvedConfig)
   };
 }
 function buildColorScheme(options, config) {
-  const { scheme } = options;
-  return THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildCardColorTheme({ scheme, tone }, config), acc), {});
+  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({
+      scheme,
+      tone: "critical"
+    }, config)
+  };
 }
 function buildCardColorTheme(options, config) {
-  const { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = { hue: tokens?._hue || "gray", scheme };
+  const {
+    scheme,
+    tone
+  } = options, tokens = config?.color?.base?.[tone], context = {
+    hue: tokens?._hue || "gray",
+    scheme
+  };
   return {
     _blend: (tokens?._blend || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
     _dark: scheme === "dark",
     accent: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    avatar: buildAvatarColorTheme({
+      scheme
+    }, tokens),
     backdrop: resolveColorTokenValue(context, tokens?.backdrop),
-    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, 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)
@@ -2166,7 +3058,10 @@ function buildCardColorTheme(options, config) {
     fg: resolveColorTokenValue(context, tokens?.fg),
     focusRing: resolveColorTokenValue(context, tokens?.focusRing),
     icon: resolveColorTokenValue(context, tokens?.icon),
-    input: buildInputColorTheme({ scheme, tone }, config),
+    input: buildInputColorTheme({
+      scheme,
+      tone
+    }, config),
     kbd: {
       bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
       fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
@@ -2179,17 +3074,30 @@ function buildCardColorTheme(options, config) {
       bg: resolveColorTokenValue(context, tokens?.muted?.bg),
       fg: resolveColorTokenValue(context, tokens?.muted?.fg)
     },
-    selectable: buildSelectableColorTheme({ scheme, tone }, config),
-    shadow: buildShadowColorTheme({ scheme, tone }, config),
+    selectable: buildSelectableColorTheme({
+      scheme
+    }, config),
+    shadow: buildShadowColorTheme({
+      scheme,
+      tone
+    }, config),
     skeleton: {
       from: resolveColorTokenValue(context, tokens?.skeleton?.from),
       to: resolveColorTokenValue(context, tokens?.skeleton?.to)
     },
-    syntax: buildSyntaxColorTheme({ scheme }, config)
+    syntax: buildSyntaxColorTheme({
+      scheme
+    }, config)
   };
 }
 function buildShadowColorTheme(options, config) {
-  const { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = { hue: tokens?._hue || "gray", scheme };
+  const {
+    scheme,
+    tone
+  } = options, tokens = config?.color?.base?.[tone], context = {
+    hue: tokens?._hue || "gray",
+    scheme
+  };
   return {
     outline: resolveColorTokenValue(context, tokens?.shadow?.outline),
     umbra: resolveColorTokenValue(context, tokens?.shadow?.umbra),
@@ -2198,21 +3106,56 @@ function buildShadowColorTheme(options, config) {
   };
 }
 function buildAvatarColorTheme(options, stateTokens) {
-  const { scheme } = options;
+  const {
+    scheme
+  } = options;
   return {
-    gray: _buildAvatarColorTheme({ color: "gray", scheme }, stateTokens),
-    blue: _buildAvatarColorTheme({ color: "blue", scheme }, stateTokens),
-    purple: _buildAvatarColorTheme({ color: "purple", scheme }, stateTokens),
-    magenta: _buildAvatarColorTheme({ color: "magenta", scheme }, stateTokens),
-    red: _buildAvatarColorTheme({ color: "red", scheme }, stateTokens),
-    orange: _buildAvatarColorTheme({ color: "orange", scheme }, stateTokens),
-    yellow: _buildAvatarColorTheme({ color: "yellow", scheme }, stateTokens),
-    green: _buildAvatarColorTheme({ color: "green", scheme }, stateTokens),
-    cyan: _buildAvatarColorTheme({ color: "cyan", scheme }, stateTokens)
+    gray: _buildAvatarColorTheme({
+      color: "gray",
+      scheme
+    }, stateTokens),
+    blue: _buildAvatarColorTheme({
+      color: "blue",
+      scheme
+    }, stateTokens),
+    purple: _buildAvatarColorTheme({
+      color: "purple",
+      scheme
+    }, stateTokens),
+    magenta: _buildAvatarColorTheme({
+      color: "magenta",
+      scheme
+    }, stateTokens),
+    red: _buildAvatarColorTheme({
+      color: "red",
+      scheme
+    }, stateTokens),
+    orange: _buildAvatarColorTheme({
+      color: "orange",
+      scheme
+    }, stateTokens),
+    yellow: _buildAvatarColorTheme({
+      color: "yellow",
+      scheme
+    }, stateTokens),
+    green: _buildAvatarColorTheme({
+      color: "green",
+      scheme
+    }, stateTokens),
+    cyan: _buildAvatarColorTheme({
+      color: "cyan",
+      scheme
+    }, stateTokens)
   };
 }
 function _buildAvatarColorTheme(options, stateTokens) {
-  const { color: color2, scheme } = options, tokens = stateTokens?.avatar?.[color2], context = { hue: tokens?._hue || "gray", scheme };
+  const {
+    color: color2,
+    scheme
+  } = options, tokens = stateTokens?.avatar?.[color2], context = {
+    hue: tokens?._hue || "gray",
+    scheme
+  };
   return {
     _blend: (tokens?._blend || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
     bg: resolveColorTokenValue(context, tokens?.bg),
@@ -2220,11 +3163,40 @@ 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), {});
+  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, {
+      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 };
+  const {
+    scheme,
+    tone
+  } = options, tokens = parentTokens?.[tone], context = {
+    hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray",
+    scheme
+  };
   return {
     bg: resolveColorTokenValue(context, tokens?.bg),
     fg: resolveColorTokenValue(context, tokens?.fg),
@@ -2233,32 +3205,65 @@ 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: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({ scheme }, tokens),
-    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
+    avatar: buildAvatarColorTheme({
+      scheme
+    }, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {
+      scheme
+    }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
     code: {
@@ -2286,23 +3291,66 @@ function buildButtonStateColorTheme(options, config) {
   };
 }
 function buildInputColorTheme(options, config) {
-  const { scheme, tone } = options;
+  const {
+    scheme,
+    tone
+  } = options;
   return {
-    default: buildInputStatesColorTheme({ mode: "default", scheme, tone }, config),
-    invalid: buildInputStatesColorTheme({ mode: "invalid", scheme, tone }, config)
+    default: buildInputStatesColorTheme({
+      mode: "default",
+      scheme,
+      tone
+    }, config),
+    invalid: buildInputStatesColorTheme({
+      mode: "invalid",
+      scheme,
+      tone
+    }, config)
   };
 }
 function buildInputStatesColorTheme(options, config) {
-  const { mode, scheme, tone } = options;
+  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,26 +3363,49 @@ 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: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({ scheme }, tokens),
-    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
+    avatar: buildAvatarColorTheme({
+      scheme
+    }, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {
+      scheme
+    }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
     code: {
@@ -2362,7 +3433,12 @@ function buildSelectableStateColorTheme(options, config) {
   };
 }
 function buildSyntaxColorTheme(options, config) {
-  const { scheme } = options, tokens = config?.color?.syntax, context = { hue: "gray", scheme };
+  const {
+    scheme
+  } = options, tokens = config?.color?.syntax, context = {
+    hue: "gray",
+    scheme
+  };
   return {
     atrule: resolveColorTokenValue(context, tokens?.atrule),
     attrName: resolveColorTokenValue(context, tokens?.attrName),
@@ -2477,11 +3553,19 @@ function rgbToHex(color2) {
   const r = round(clamp(Math.round(color2.r), 0, 255)), g = round(clamp(Math.round(color2.g), 0, 255)), b = round(clamp(Math.round(color2.b), 0, 255));
   return "a" in color2 ? `rgba(${r},${g},${b},${color2.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
-function rgbToHsl({ r, g, b }) {
+function rgbToHsl({
+  r,
+  g,
+  b
+}) {
   r /= 255, g /= 255, b /= 255;
   const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
   let h = 0, s = 0, l = 0;
-  return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), { h, s, l };
+  return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), {
+    h,
+    s,
+    l
+  };
 }
 function hslToRgb(hsl) {
   const s = hsl.s / 100, l = hsl.l / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1)), m = l - c / 2;
@@ -2506,10 +3590,18 @@ function parseHsl(str) {
   const res = HSL_RE.exec(str);
   if (!res)
     throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
-  return { h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5]) };
+  return {
+    h: parseInt(res[1]),
+    s: parseFloat(res[3]),
+    l: parseFloat(res[5])
+  };
 }
 function parseColor(color2) {
-  if (!color2) return { r: 0, g: 0, b: 0 };
+  if (!color2) return {
+    r: 0,
+    g: 0,
+    b: 0
+  };
   if (typeof color2 != "string")
     throw new Error("parseColor: expected a string");
   if (isHex(color2))
@@ -2524,7 +3616,11 @@ function getContrastRatio(bg, fg) {
   const rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
   return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
 }
-function rgb_lrgb({ r, g, b }) {
+function rgb_lrgb({
+  r,
+  g,
+  b
+}) {
   return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
 }
 function rgb_lrgb1(v) {
@@ -2539,7 +3635,9 @@ function rgba(color2, a) {
 }
 const RGB_RANGE = [0, 255];
 function mixThemeColor(value, options) {
-  const { blendMode } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
+  const {
+    blendMode
+  } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
     r: [black2.r, white2.r],
     g: [black2.g, white2.g],
     b: [black2.b, white2.b]
@@ -2559,7 +3657,11 @@ function mixThemeColor(value, options) {
   return rgbToHex(v);
 }
 function renderColorValue(str, options) {
-  const { bg, blendMode, colorPalette } = options;
+  const {
+    bg,
+    blendMode,
+    colorPalette
+  } = options;
   if (bg === "white")
     throw new Error("Cannot blend with white background");
   const node = parseTokenValue(str);
@@ -2591,60 +3693,68 @@ 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`
+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,
-    debugPath: `${debugPath}.default`
+    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}`
-      })
-    ])
-  ]);
+  return Object.fromEntries([["transparent", renderedTransparentTone], ["default", renderedDefaultTone], ...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, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
+      colorPalette: {
+        ...colorPalette,
+        black: "#000000"
+      }
     }),
     penumbra: renderColorValue(value.shadow.penumbra, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
+      colorPalette: {
+        ...colorPalette,
+        black: "#000000"
+      }
     }),
     ambient: renderColorValue(value.shadow.ambient, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
+      colorPalette: {
+        ...colorPalette,
+        black: "#000000"
+      }
     })
   };
   return {
@@ -2656,15 +3766,13 @@ function renderThemeColor(value, options) {
     avatar: renderThemeColorAvatar(value.avatar, {
       baseBg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`
+      blendMode
     }),
     backdrop: renderColorValue(value.backdrop, colorOptions),
     badge: renderThemeColorBadge(value.badge, {
       baseBg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`
+      blendMode
     }),
     bg: baseBg,
     border: renderColorValue(value.border, colorOptions),
@@ -2679,14 +3787,12 @@ function renderThemeColor(value, options) {
     input: renderThemeColorInput(value.input, {
       baseBg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.input`
+      blendMode
     }),
     kbd: renderThemeColorKBD(value.kbd, {
       baseBg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.kbd`
+      blendMode
     }),
     link: {
       fg: renderColorValue(value.link.fg, colorOptions)
@@ -2703,14 +3809,17 @@ function renderThemeColor(value, options) {
     syntax: renderSyntaxColorTheme(value.syntax, {
       baseBg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.syntax`
+      blendMode
     }),
     selectable
   };
 }
 function renderThemeColorKBD(value, options) {
-  const { baseBg, blendMode, colorPalette } = options, rootOptions = {
+  const {
+    baseBg,
+    blendMode,
+    colorPalette
+  } = options, rootOptions = {
     bg: baseBg,
     blendMode,
     colorPalette
@@ -2726,48 +3835,24 @@ 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) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+  const {
+    baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options, blendMode = value._blend || "multiply", rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -2783,14 +3868,20 @@ 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 = {
+  const {
+    baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options, blendMode = rootBlendMode, rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -2807,56 +3898,36 @@ 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
@@ -2873,14 +3944,12 @@ function renderThemeColorState(value, options) {
     avatar: renderThemeColorAvatar(value.avatar, {
       baseBg: bg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.avatar`
+      blendMode
     }),
     badge: renderThemeColorBadge(value.badge, {
       baseBg: bg,
       colorPalette,
-      blendMode,
-      debugPath: `${debugPath}.badge`
+      blendMode
     }),
     bg,
     border: renderColorValue(value.border, colorOptions),
@@ -2909,41 +3978,33 @@ 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) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode }, bg = renderColorValue(value.bg, rootOptions), colorOptions = { colorPalette, bg, blendMode };
+  const {
+    baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options, blendMode = value._blend || "multiply", rootOptions = {
+    colorPalette,
+    bg: baseBg,
+    blendMode: rootBlendMode
+  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+    colorPalette,
+    bg,
+    blendMode
+  };
   return {
     _blend: blendMode,
     bg,
@@ -2956,39 +4017,33 @@ 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) {
-  const { colorPalette, baseBg, blendMode } = options, colorOptions = { colorPalette, bg: baseBg, blendMode };
+  const {
+    colorPalette,
+    baseBg,
+    blendMode
+  } = options, colorOptions = {
+    colorPalette,
+    bg: baseBg,
+    blendMode
+  };
   return {
     atrule: renderColorValue(value.atrule, colorOptions),
     attrName: renderColorValue(value.attrName, colorOptions),
@@ -3031,24 +4086,24 @@ function renderSyntaxColorTheme(value, options) {
 function buildTheme(config) {
   const colorTheme = buildColorTheme(config), v2 = {
     _version: 2,
-    avatar: config?.avatar ?? getTheme_v2.defaultThemeConfig.avatar,
-    button: config?.button ?? getTheme_v2.defaultThemeConfig.button,
-    card: config?.card ?? getTheme_v2.defaultThemeConfig.card,
+    avatar: config?.avatar ?? defaultThemeConfig.avatar,
+    button: config?.button ?? defaultThemeConfig.button,
+    card: config?.card ?? defaultThemeConfig.card,
     // How colors are generated:
     // 1. Merge custom tokens with default tokens
     // 2. Generate tree of color keys (gray/500, black, white, etc.)
     // 3. Apply mixing and render to hex values
     // render(build(mergeWithDefaults()))
     color: renderThemeColorSchemes(colorTheme, config),
-    container: config?.container ?? getTheme_v2.defaultThemeConfig.container,
+    container: config?.container ?? defaultThemeConfig.container,
     font: config?.font ?? defaultThemeFonts,
-    input: config?.input ?? getTheme_v2.defaultThemeConfig.input,
-    layer: config?.layer ?? getTheme_v2.defaultThemeConfig.layer,
-    media: config?.media ?? getTheme_v2.defaultThemeConfig.media,
-    radius: config?.radius ?? getTheme_v2.defaultThemeConfig.radius,
-    shadow: config?.shadow ?? getTheme_v2.defaultThemeConfig.shadow,
-    space: config?.space ?? getTheme_v2.defaultThemeConfig.space,
-    style: config?.style ?? getTheme_v2.defaultThemeConfig.style
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style
   };
   return v2_v0(v2);
 }
@@ -3056,7 +4111,7 @@ const cache = /* @__PURE__ */ new Map();
 function getScopedTheme(themeProp, scheme, tone) {
   const cachedTheme = _getCachedTheme(themeProp, scheme, tone);
   if (cachedTheme) return cachedTheme;
-  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), colorScheme_v0 = v0.color[scheme] || v0.color.light, color_v0 = colorScheme_v0[tone] || colorScheme_v0.default, layer_v0 = v0.layer || getTheme_v2.defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2 = colorScheme_v2[tone] || colorScheme_v2.default, layer_v2 = v2.layer || getTheme_v2.defaultThemeConfig.layer, theme = {
+  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), colorScheme_v0 = v0.color[scheme] || v0.color.light, color_v0 = colorScheme_v0[tone] || colorScheme_v0.default, layer_v0 = v0.layer || defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2 = colorScheme_v2[tone] || colorScheme_v2.default, layer_v2 = v2.layer || defaultThemeConfig.layer, theme = {
     sanity: {
       ...v0,
       color: color_v0,
@@ -3083,7 +4138,7 @@ function _setCachedTheme(rootTheme, scheme, tone, theme) {
   const schemeCache = cache.get(scheme);
   schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
 }
-exports.getTheme_v2 = getTheme_v2.getTheme_v2;
+exports.AVATAR_SIZE = AVATAR_SIZE;
 exports.COLOR_CONFIG_AVATAR_COLORS = COLOR_CONFIG_AVATAR_COLORS;
 exports.COLOR_CONFIG_BLEND_KEYS = COLOR_CONFIG_BLEND_KEYS;
 exports.COLOR_CONFIG_CARD_KEYS = COLOR_CONFIG_CARD_KEYS;
@@ -3093,6 +4148,14 @@ exports.COLOR_CONFIG_INPUT_STATES = COLOR_CONFIG_INPUT_STATES;
 exports.COLOR_CONFIG_STATES = COLOR_CONFIG_STATES;
 exports.COLOR_CONFIG_STATE_KEYS = COLOR_CONFIG_STATE_KEYS;
 exports.COLOR_CONFIG_STATE_TONES = COLOR_CONFIG_STATE_TONES;
+exports.CONTAINER = CONTAINER;
+exports.FONT_CODE_SIZE = FONT_CODE_SIZE;
+exports.FONT_HEADING_SIZE = FONT_HEADING_SIZE;
+exports.FONT_LABEL_SIZE = FONT_LABEL_SIZE;
+exports.FONT_TEXT_SIZE = FONT_TEXT_SIZE;
+exports.RADIUS = RADIUS;
+exports.SHADOW = SHADOW;
+exports.SPACE = SPACE;
 exports.THEME_COLOR_AVATAR_COLORS = THEME_COLOR_AVATAR_COLORS;
 exports.THEME_COLOR_BLEND_MODES = THEME_COLOR_BLEND_MODES;
 exports.THEME_COLOR_BUTTON_MODES = THEME_COLOR_BUTTON_MODES;
@@ -3106,6 +4169,7 @@ exports.buildTheme = buildTheme;
 exports.createColorTheme = createColorTheme;
 exports.getContrastRatio = getContrastRatio;
 exports.getScopedTheme = getScopedTheme;
+exports.getTheme_v2 = getTheme_v2;
 exports.hexToRgb = hexToRgb;
 exports.hslToRgb = hslToRgb;
 exports.isColorBlendModeValue = isColorBlendModeValue;