@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/dist/theme.mjs

@@ -1,6 +1,5 @@
-import { defaultThemeConfig, themeColor_v0_v2 } from "./_chunks-es/getTheme_v2.mjs";
-import { getTheme_v2 } from "./_chunks-es/getTheme_v2.mjs";
-import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
+import { COLOR_HUES, COLOR_TINTS } from "@sanity/color";
+const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], 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], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
     default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
@@ -57,46 +56,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 +466,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,14 +500,19 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       to: dark ? white : black
     }
   },
-  solid: ({ base, dark, state, tone }) => {
-    const color2 = colors[tone];
+  solid: ({
+    base,
+    dark,
+    state,
+    tone
+  }) => {
+    const color = colors[tone];
     return state === "hovered" ? {
-      bg: dark ? color2.light : color2.dark,
-      bg2: dark ? color2.light : color2.dark,
-      border: dark ? color2.lighter : color2.darker,
-      fg: dark ? color2.darkest : color2.lightest,
-      icon: dark ? color2.darkest : color2.lightest,
+      bg: dark ? color.light : color.dark,
+      bg2: dark ? color.light : color.dark,
+      border: dark ? color.lighter : color.darker,
+      fg: dark ? color.darkest : color.lightest,
+      icon: dark ? color.darkest : color.lightest,
       muted: {
         fg: black
       },
@@ -341,11 +528,11 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       },
       skeleton: base.skeleton
     } : {
-      bg: color2.base,
-      bg2: color2.base,
-      border: dark ? color2.light : color2.dark,
-      fg: dark ? color2.darkest : color2.lightest,
-      icon: dark ? color2.darkest : color2.lightest,
+      bg: color.base,
+      bg2: color.base,
+      border: dark ? color.light : color.dark,
+      fg: dark ? color.darkest : color.lightest,
+      icon: dark ? color.darkest : color.lightest,
       muted: {
         fg: black
       },
@@ -362,14 +549,19 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       skeleton: base.skeleton
     };
   },
-  muted: ({ base, dark, state, tone }) => {
-    const color2 = colors[tone];
+  muted: ({
+    base,
+    dark,
+    state,
+    tone
+  }) => {
+    const color = colors[tone];
     return state === "hovered" ? {
-      bg: dark ? color2.darker : color2.lighter,
-      bg2: dark ? color2.darker : color2.lighter,
-      border: dark ? color2.lighter : color2.darker,
-      fg: dark ? color2.lightest : color2.darkest,
-      icon: dark ? color2.lightest : color2.darkest,
+      bg: dark ? color.darker : color.lighter,
+      bg2: dark ? color.darker : color.lighter,
+      border: dark ? color.lighter : color.darker,
+      fg: dark ? color.lightest : color.darkest,
+      icon: dark ? color.lightest : color.darkest,
       muted: {
         fg: black
       },
@@ -385,11 +577,11 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       },
       skeleton: base.skeleton
     } : {
-      bg: dark ? color2.darkest : color2.lightest,
-      bg2: dark ? color2.darkest : color2.lightest,
-      border: dark ? color2.darker : color2.lighter,
-      fg: dark ? color2.lighter : color2.darker,
-      icon: dark ? color2.lighter : color2.darker,
+      bg: dark ? color.darkest : color.lightest,
+      bg2: dark ? color.darkest : color.lightest,
+      border: dark ? color.darker : color.lighter,
+      fg: dark ? color.lighter : color.darker,
+      icon: dark ? color.lighter : color.darker,
       muted: {
         fg: black
       },
@@ -406,7 +598,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 +651,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 +681,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 +803,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 +1096,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,12 +1108,136 @@ 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 = {
+const defaultThemeConfig = {
+  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, 3, 7, 11, 15, 23, 43, 75, 127],
+  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
+      }
+    }
+  }
+}, defaultThemeFonts = {
   code: {
     family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     weights: {
@@ -695,166 +1246,147 @@ const defaultThemeFonts = {
       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
-      }
-    ]
+    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',
+    featureSettings: "'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1",
     weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
       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
-      }
-    ]
+    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.25
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 27,
+      iconSize: 41,
+      lineHeight: 35,
+      letterSpacing: -0.5
+    }, {
+      ascenderHeight: 9.5,
+      descenderHeight: 8.5,
+      fontSize: 33,
+      iconSize: 49,
+      lineHeight: 41,
+      letterSpacing: -1
+    }, {
+      ascenderHeight: 10.5,
+      descenderHeight: 9.5,
+      fontSize: 38,
+      iconSize: 53,
+      lineHeight: 47,
+      letterSpacing: -1
+    }]
   },
   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
-      }
-    ]
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800
+    },
+    sizes: [{
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 8.1,
+      iconSize: 13,
+      lineHeight: 10,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 1.5,
+      descenderHeight: 2.5,
+      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: 1.5,
+      descenderHeight: 2.5,
+      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',
@@ -864,140 +1396,705 @@ const defaultThemeFonts = {
       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
+    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
+    }]
+  }
+}, THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATE_TONES = [
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+function isColorBlendModeValue(str) {
+  return THEME_COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueKey(str) {
+  return COLOR_HUES.includes(str);
+}
+function isColorTintKey(str) {
+  return COLOR_TINTS.includes(str);
+}
+function isColorButtonMode(str) {
+  return THEME_COLOR_BUTTON_MODES.includes(str);
+}
+const HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
+function parseColor$1(str) {
+  let cursor = 0;
+  const color = getColor();
+  if (!color)
+    throw new Error(`Invalid color: ${str}`);
+  const opacity = getOpacity(), mix2 = getMixPercentage();
+  return {
+    color,
+    mix: mix2,
+    opacity
+  };
+  function _consume(s) {
+    if (str.startsWith(s, cursor))
+      return cursor += s.length, s;
+  }
+  function _peek() {
+    return str[cursor];
+  }
+  function getColor() {
+    ignoreWhitespace();
+    let v = _consume("black") || _consume("white");
+    if (v)
+      return {
+        type: v
+      };
+    for (const hue of HUES)
+      if (v = _consume(String(hue)), v) {
+        if (_peek() !== "/")
+          throw new Error("Expected slash after hue");
+        cursor += 1;
+        const tint2 = getTint();
+        if (!tint2)
+          throw new Error("Expected tint after hue");
+        return {
+          type: "hue",
+          hue,
+          tint: tint2
+        };
+      }
+    const tint = getTint();
+    if (tint)
+      return {
+        type: "hue",
+        hue: void 0,
+        tint
+      };
+  }
+  function getTint() {
+    ignoreWhitespace();
+    let v = Number(str.slice(cursor, cursor + 3));
+    if (TINTS.includes(v))
+      return cursor += 3, v;
+    if (v = Number(str.slice(cursor, cursor + 2)), TINTS.includes(v))
+      return cursor += 2, v;
+  }
+  function getMixPercentage() {
+    ignoreWhitespace();
+    const match = RE_PERCENTAGE.exec(str.slice(cursor));
+    if (match)
+      return cursor += match[0].length, parseFloat(match[1]);
+  }
+  function getOpacity() {
+    if (ignoreWhitespace(), _peek() === "/") {
+      cursor += 1;
+      const match = RE_OPACITY.exec(str.slice(cursor));
+      if (match)
+        return cursor += match[0].length, parseFloat(match[1]);
+      cursor -= 1;
+    }
+  }
+  function ignoreWhitespace() {
+    for (; _peek() === " "; )
+      cursor++;
+  }
+}
+function renderColor(token, context) {
+  const {
+    bgVar,
+    hue,
+    scheme
+  } = context, result = parseColor$1(token[scheme === "dark" ? 0 : 1]), colorVar = result.color.type === "hue" ? `--${result.color.hue ?? hue}-${result.color.tint}` : `--${result.color.type}`;
+  return result.mix !== void 0 ? `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)` : result.opacity !== void 0 ? `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)` : `var(${colorVar})`;
+}
+function buildColor_v3(tokens) {
+  return {
+    dark: buildColorScheme_v3(tokens, {
+      scheme: "dark"
+    }),
+    light: buildColorScheme_v3(tokens, {
+      scheme: "light"
+    })
+  };
+}
+function buildColorScheme_v3(tokens, options) {
+  const {
+    scheme
+  } = options;
+  return {
+    card: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCard_v3(tokens[tone], {
+      scheme
+    }), acc), {})
+  };
+}
+function buildColorCard_v3(tokens, options) {
+  const {
+    scheme
+  } = options, context = {
+    bgVar: "--color-bg-1",
+    hue: tokens._hue,
+    scheme
+  };
+  return {
+    _hue: tokens._hue ?? "gray",
+    avatar: THEME_COLOR_AVATAR_COLORS.reduce((acc, hue) => {
+      const avatarTokens = tokens.avatar[hue];
+      return acc[hue] = {
+        bg: renderColor(avatarTokens.bg, {
+          bgVar: "--color-bg-1",
+          hue: avatarTokens._hue,
+          scheme
+        }),
+        fg: renderColor(avatarTokens.fg, {
+          bgVar: "--color-bg-1",
+          hue: avatarTokens._hue,
+          scheme
+        })
+      }, acc;
+    }, {}),
+    backdrop: renderColor(tokens.backdrop, context),
+    code: {
+      bg: renderColor(tokens.code.bg, context),
+      fg: renderColor(tokens.code.fg, context),
+      token: {
+        atrule: renderColor(tokens.code.token.atrule, context),
+        attrName: renderColor(tokens.code.token.attrName, context),
+        attrValue: renderColor(tokens.code.token.attrValue, context),
+        attribute: renderColor(tokens.code.token.attribute, context),
+        boolean: renderColor(tokens.code.token.boolean, context),
+        builtin: renderColor(tokens.code.token.builtin, context),
+        cdata: renderColor(tokens.code.token.cdata, context),
+        char: renderColor(tokens.code.token.char, context),
+        class: renderColor(tokens.code.token.class, context),
+        className: renderColor(tokens.code.token.className, context),
+        comment: renderColor(tokens.code.token.comment, context),
+        constant: renderColor(tokens.code.token.constant, context),
+        deleted: renderColor(tokens.code.token.deleted, context),
+        doctype: renderColor(tokens.code.token.doctype, context),
+        entity: renderColor(tokens.code.token.entity, context),
+        function: renderColor(tokens.code.token.function, context),
+        hexcode: renderColor(tokens.code.token.hexcode, context),
+        id: renderColor(tokens.code.token.id, context),
+        important: renderColor(tokens.code.token.important, context),
+        inserted: renderColor(tokens.code.token.inserted, context),
+        keyword: renderColor(tokens.code.token.keyword, context),
+        number: renderColor(tokens.code.token.number, context),
+        operator: renderColor(tokens.code.token.operator, context),
+        prolog: renderColor(tokens.code.token.prolog, context),
+        property: renderColor(tokens.code.token.property, context),
+        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
+        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
+        punctuation: renderColor(tokens.code.token.punctuation, context),
+        regex: renderColor(tokens.code.token.regex, context),
+        selector: renderColor(tokens.code.token.selector, context),
+        string: renderColor(tokens.code.token.string, context),
+        symbol: renderColor(tokens.code.token.symbol, context),
+        tag: renderColor(tokens.code.token.tag, context),
+        unit: renderColor(tokens.code.token.unit, context),
+        url: renderColor(tokens.code.token.url, context),
+        variable: renderColor(tokens.code.token.variable, context)
+      }
+    },
+    focusRing: renderColor(tokens.focusRing, context),
+    shadow: {
+      outline: renderColor(tokens.shadow.outline, context),
+      umbra: renderColor(tokens.shadow.umbra, context),
+      penumbra: renderColor(tokens.shadow.penumbra, context),
+      ambient: renderColor(tokens.shadow.ambient, context)
+    },
+    skeleton: {
+      from: renderColor(tokens.skeleton.from, context),
+      to: renderColor(tokens.skeleton.to, context)
+    },
+    variant: {
+      solid: {
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+          ...acc,
+          [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
+            scheme
+          })
+        }), {})
+      },
+      tinted: {
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+          ...acc,
+          [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
+            scheme
+          })
+        }), {})
+      }
+    }
+  };
+}
+function buildColorElement_v3(tokens, options) {
+  const {
+    scheme
+  } = options, context = {
+    bgVar: "--bg",
+    hue: tokens._hue,
+    scheme
+  };
+  return {
+    _hue: tokens._hue ?? "gray",
+    bg: {
+      0: renderColor(tokens.bg[0], context),
+      4: renderColor(tokens.bg[4], context)
+    },
+    border: {
+      0: renderColor(tokens.border[0], context),
+      4: renderColor(tokens.border[4], context)
+    },
+    fg: {
+      0: renderColor(tokens.fg[0], context),
+      4: renderColor(tokens.fg[4], context)
+    }
+  };
+}
+const defaultTokens = {
+  color: {
+    "*": {
+      // backdrop: ['black/0.2', '200/0.2'],
+      backdrop: ["black/0.5", "gray/100/0.5"],
+      code: {
+        bg: ["950", "50"],
+        fg: ["300", "700"],
+        token: {
+          atrule: ["purple/300", "purple/600"],
+          attrName: ["green/300", "green/600"],
+          attrValue: ["yellow/300", "yellow/600"],
+          attribute: ["yellow/300", "yellow/600"],
+          boolean: ["purple/300", "purple/600"],
+          builtin: ["purple/300", "purple/600"],
+          cdata: ["yellow/300", "yellow/600"],
+          char: ["yellow/300", "yellow/600"],
+          class: ["orange/300", "orange/600"],
+          className: ["cyan/300", "cyan/600"],
+          comment: ["gray/600", "gray/300"],
+          constant: ["purple/300", "purple/600"],
+          deleted: ["red/300", "red/600"],
+          entity: ["red/300", "red/600"],
+          function: ["green/300", "green/600"],
+          hexcode: ["blue/300", "blue/600"],
+          id: ["purple/300", "purple/600"],
+          important: ["purple/300", "purple/600"],
+          inserted: ["green/300", "green/600"],
+          keyword: ["magenta/300", "magenta/600"],
+          number: ["purple/300", "purple/600"],
+          operator: ["magenta/300", "magenta/600"],
+          prolog: ["gray/300", "gray/600"],
+          property: ["blue/300", "blue/600"],
+          pseudoClass: ["yellow/300", "yellow/600"],
+          pseudoElement: ["yellow/300", "yellow/600"],
+          punctuation: ["gray/300", "gray/600"],
+          regex: ["blue/300", "blue/600"],
+          selector: ["red/300", "red/600"],
+          string: ["yellow/300", "yellow/600"],
+          symbol: ["purple/300", "purple/600"],
+          tag: ["red/300", "red/600"],
+          unit: ["orange/300", "orange/600"],
+          url: ["red/300", "red/600"],
+          variable: ["red/300", "red/600"]
+        }
       },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 15,
-        iconSize: 25,
-        lineHeight: 23,
-        letterSpacing: 0
+      focusRing: ["blue/500", "blue/500"],
+      link: {
+        fg: ["blue/400", "blue/600"]
       },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 18,
-        iconSize: 29,
-        lineHeight: 27,
-        letterSpacing: 0
+      shadow: {
+        outline: ["500/0.4", "500/0.3"],
+        umbra: ["black/0.2", "500/0.1"],
+        penumbra: ["black/0.14", "500/0.07"],
+        ambient: ["black/0.12", "500/0.06"]
       },
-      {
-        ascenderHeight: 8,
-        descenderHeight: 8,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 31,
-        letterSpacing: 0
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["950", "50"],
+              4: ["800", "200"]
+            },
+            border: {
+              0: ["700", "100"],
+              4: ["500", "300"]
+            },
+            fg: {
+              0: ["100", "900"],
+              4: ["300", "700"]
+            }
+          },
+          primary: {
+            _hue: "blue"
+          },
+          suggest: {
+            _hue: "purple"
+          },
+          positive: {
+            _hue: "green"
+          },
+          caution: {
+            _hue: "yellow"
+          },
+          critical: {
+            _hue: "red"
+          }
+        },
+        solid: {
+          "*": {
+            bg: {
+              0: ["400", "500"],
+              4: ["300", "600"]
+            },
+            border: {
+              0: ["200", "400"],
+              4: ["100", "500"]
+            },
+            fg: {
+              0: ["black", "white"],
+              4: ["600", "400"]
+            }
+          },
+          default: {
+            bg: {
+              0: ["200", "800"],
+              4: ["white", "black"]
+            },
+            border: {
+              0: ["300", "700"],
+              4: ["200", "800"]
+            }
+          },
+          primary: {
+            _hue: "blue"
+          },
+          suggest: {
+            _hue: "purple"
+          },
+          positive: {
+            _hue: "green"
+          },
+          caution: {
+            _hue: "yellow"
+          },
+          critical: {
+            _hue: "red"
+          }
+        }
+      }
+    },
+    transparent: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["black", "gray/50"],
+              4: ["800", "300 50%"]
+            },
+            border: {
+              0: ["800", "300 40%"],
+              4: ["600", "300"]
+            },
+            fg: {
+              0: ["100", "black"],
+              4: ["400", "700"]
+            }
+          }
+        }
+      }
+    },
+    default: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["950", "white"],
+              4: ["800", "200"]
+            },
+            border: {
+              0: ["800", "100"],
+              4: ["600", "300"]
+            },
+            fg: {
+              0: ["white", "black"],
+              4: ["400", "600"]
+            }
+          }
+        }
+      }
+    },
+    neutral: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["900", "50"],
+              4: ["700", "200"]
+            }
+          }
+        }
       }
-    ]
+    },
+    primary: {
+      _hue: "blue"
+    },
+    suggest: {
+      _hue: "purple"
+    },
+    positive: {
+      _hue: "green"
+    },
+    caution: {
+      _hue: "yellow"
+    },
+    critical: {
+      _hue: "red"
+    }
   }
 };
-function is_v0(themeProp) {
-  return themeProp._version === 0;
+function merge(...records) {
+  return records.filter(Boolean).reduce(_merge, {});
 }
-function is_v2(themeProp) {
-  return themeProp._version === 2;
+function _merge(acc, source) {
+  for (const key of Object.keys(source)) {
+    const prevValue = acc[key], nextValue = source[key];
+    isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
+  }
+  return acc;
 }
-const cache$2 = /* @__PURE__ */ new WeakMap();
-function v0_v2(v0) {
-  if (v0.v2) return v0.v2;
-  const cached_v2 = cache$2.get(v0);
-  if (cached_v2) return cached_v2;
-  const {
-    avatar,
-    button,
-    color: color2,
-    container,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusRing: _unused_focusRing,
-    fonts: font,
-    input,
-    layer,
-    media,
-    radius,
-    shadows: shadow,
-    space,
-    styles: style
-  } = v0, v2 = {
-    _version: 2,
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
+}
+const defaultElementTokens = {
+  bg: {
+    0: ["950", "50"],
+    4: ["700", "300"]
+  },
+  border: {
+    0: ["700", "300"],
+    4: ["400", "600"]
+  },
+  fg: {
+    0: ["100", "900"],
+    4: ["400", "600"]
+  }
+};
+function resolveTokens(tokens = {}) {
+  return {
+    color: {
+      "*": resolveCardColorTokens(tokens.color?.["*"]),
+      ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+        ...acc,
+        [tone]: resolveCardColorTokens(merge(tokens.color?.["*"], tokens.color?.[tone]))
+      }), {})
+    }
+  };
+}
+function resolveCardColorTokens(tokens) {
+  return {
+    _hue: tokens?._hue ?? "gray",
     avatar: {
-      ...defaultThemeConfig.avatar,
-      ...avatar
-    },
-    button: {
-      ...defaultThemeConfig.button,
-      ...button
+      gray: {
+        _hue: tokens?.avatar?.gray?._hue ?? "gray",
+        bg: tokens?.avatar?.gray?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.gray?.fg ?? ["900", "900"]
+      },
+      blue: {
+        _hue: tokens?.avatar?.blue?._hue ?? "blue",
+        bg: tokens?.avatar?.blue?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.blue?.fg ?? ["900", "900"]
+      },
+      purple: {
+        _hue: tokens?.avatar?.purple?._hue ?? "purple",
+        bg: tokens?.avatar?.purple?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.purple?.fg ?? ["900", "900"]
+      },
+      magenta: {
+        _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
+        bg: tokens?.avatar?.magenta?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.magenta?.fg ?? ["900", "900"]
+      },
+      red: {
+        _hue: tokens?.avatar?.red?._hue ?? "red",
+        bg: tokens?.avatar?.red?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.red?.fg ?? ["900", "900"]
+      },
+      orange: {
+        _hue: tokens?.avatar?.orange?._hue ?? "orange",
+        bg: tokens?.avatar?.orange?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.orange?.fg ?? ["900", "900"]
+      },
+      yellow: {
+        _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
+        bg: tokens?.avatar?.yellow?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.yellow?.fg ?? ["900", "900"]
+      },
+      green: {
+        _hue: tokens?.avatar?.green?._hue ?? "green",
+        bg: tokens?.avatar?.green?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.green?.fg ?? ["900", "900"]
+      },
+      cyan: {
+        _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
+        bg: tokens?.avatar?.cyan?.bg ?? ["400", "400"],
+        fg: tokens?.avatar?.cyan?.fg ?? ["900", "900"]
+      }
     },
-    card: defaultThemeConfig.card,
-    color: {
-      light: {
-        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: 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)
+    backdrop: tokens?.backdrop ?? ["900", "100"],
+    code: {
+      bg: tokens?.code?.bg ?? ["950", "50"],
+      fg: tokens?.code?.fg ?? ["400", "600"],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ["400", "600"],
+        attribute: tokens?.code?.token?.attribute ?? ["400", "600"],
+        attrName: tokens?.code?.token?.attrName ?? ["400", "600"],
+        attrValue: tokens?.code?.token?.attrValue ?? ["400", "600"],
+        boolean: tokens?.code?.token?.boolean ?? ["400", "600"],
+        builtin: tokens?.code?.token?.builtin ?? ["400", "600"],
+        cdata: tokens?.code?.token?.cdata ?? ["400", "600"],
+        char: tokens?.code?.token?.char ?? ["400", "600"],
+        class: tokens?.code?.token?.class ?? ["400", "600"],
+        className: tokens?.code?.token?.className ?? ["400", "600"],
+        comment: tokens?.code?.token?.comment ?? ["600", "400"],
+        constant: tokens?.code?.token?.constant ?? ["400", "600"],
+        deleted: tokens?.code?.token?.deleted ?? ["400", "600"],
+        doctype: tokens?.code?.token?.doctype ?? ["400", "600"],
+        entity: tokens?.code?.token?.entity ?? ["400", "600"],
+        function: tokens?.code?.token?.function ?? ["400", "600"],
+        hexcode: tokens?.code?.token?.hexcode ?? ["400", "600"],
+        id: tokens?.code?.token?.id ?? ["400", "600"],
+        important: tokens?.code?.token?.important ?? ["400", "600"],
+        inserted: tokens?.code?.token?.inserted ?? ["400", "600"],
+        keyword: tokens?.code?.token?.keyword ?? ["400", "600"],
+        number: tokens?.code?.token?.number ?? ["400", "600"],
+        operator: tokens?.code?.token?.operator ?? ["400", "600"],
+        prolog: tokens?.code?.token?.prolog ?? ["400", "600"],
+        property: tokens?.code?.token?.property ?? ["400", "600"],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ["400", "600"],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ["400", "600"],
+        punctuation: tokens?.code?.token?.punctuation ?? ["400", "600"],
+        regex: tokens?.code?.token?.regex ?? ["400", "600"],
+        selector: tokens?.code?.token?.selector ?? ["400", "600"],
+        string: tokens?.code?.token?.string ?? ["400", "600"],
+        symbol: tokens?.code?.token?.symbol ?? ["400", "600"],
+        tag: tokens?.code?.token?.tag ?? ["400", "600"],
+        unit: tokens?.code?.token?.unit ?? ["400", "600"],
+        url: tokens?.code?.token?.url ?? ["400", "600"],
+        variable: tokens?.code?.token?.variable ?? ["400", "600"]
       }
     },
-    container,
-    font,
-    input: {
-      ...defaultThemeConfig.input,
-      ...input,
-      checkbox: {
-        ...defaultThemeConfig.input.checkbox,
-        ...input.checkbox
-      },
-      radio: {
-        ...defaultThemeConfig.input.radio,
-        ...input.radio
+    focusRing: tokens?.focusRing ?? ["500", "500"],
+    link: {
+      fg: tokens?.link?.fg ?? ["400", "600"]
+    },
+    shadow: {
+      outline: tokens?.shadow?.outline ?? ["500", "500"],
+      umbra: tokens?.shadow?.umbra ?? ["500", "500"],
+      penumbra: tokens?.shadow?.penumbra ?? ["500", "500"],
+      ambient: tokens?.shadow?.ambient ?? ["500", "500"]
+    },
+    skeleton: {
+      from: tokens?.skeleton?.from ?? ["900", "100"],
+      to: tokens?.skeleton?.to ?? ["950", "50"]
+    },
+    variant: {
+      solid: {
+        "*": resolveElementTokens(tokens?.variant?.solid?.["*"]),
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.solid?.["*"], tokens?.variant?.solid?.[tone])), acc), {})
       },
-      switch: {
-        ...defaultThemeConfig.input.switch,
-        ...input.switch
+      tinted: {
+        "*": resolveElementTokens(tokens?.variant?.tinted?.["*"]),
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.tinted?.["*"], tokens?.variant?.tinted?.[tone])), acc), {})
       }
-    },
-    layer: layer ?? defaultThemeConfig.layer,
-    media,
-    radius,
-    shadow,
-    space,
-    style
+    }
+  };
+}
+function resolveElementTokens(tokens) {
+  return {
+    _hue: tokens?._hue ?? "gray",
+    bg: {
+      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
+      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4]
+    },
+    border: {
+      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
+      4: tokens?.border?.[4] ?? defaultElementTokens.border[4]
+    },
+    fg: {
+      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
+      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4]
+    }
   };
-  return cache$2.set(v0, v2), v2;
 }
-const cache$1 = /* @__PURE__ */ new WeakMap();
-function v2_v0(v2) {
-  const cachedTheme = cache$1.get(v2);
+function buildTheme_v3(options) {
+  const {
+    v2
+  } = options ?? {}, tokens = resolveTokens(options?.tokens ?? defaultTokens);
+  return {
+    _version: 3,
+    _tokens: tokens,
+    avatar: v2?.avatar ?? defaultThemeConfig.avatar,
+    button: v2?.button ?? defaultThemeConfig.button,
+    card: v2?.card ?? defaultThemeConfig.card,
+    color: buildColor_v3(tokens.color),
+    container: v2?.container ?? defaultThemeConfig.container,
+    font: v2?.font ?? defaultThemeFonts,
+    input: v2?.input ?? defaultThemeConfig.input,
+    layer: v2?.layer ?? defaultThemeConfig.layer,
+    media: v2?.media ?? defaultThemeConfig.media,
+    radius: v2?.radius ?? defaultThemeConfig.radius,
+    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
+    space: v2?.space ?? defaultThemeConfig.space
+  };
+}
+const cache$4 = /* @__PURE__ */ new WeakMap();
+function v2_v0(v2, v3) {
+  const cachedTheme = cache$4.get(v2);
   if (cachedTheme) return cachedTheme;
   const {
     avatar,
     button,
-    color: color2,
+    color,
     container,
     font: fonts,
     input,
@@ -1014,20 +2111,20 @@ function v2_v0(v2) {
     container,
     color: {
       light: {
-        transparent: themeColor_v2_v0(color2.light.transparent),
-        default: themeColor_v2_v0(color2.light.default),
-        primary: themeColor_v2_v0(color2.light.primary),
-        positive: themeColor_v2_v0(color2.light.positive),
-        caution: themeColor_v2_v0(color2.light.caution),
-        critical: themeColor_v2_v0(color2.light.critical)
+        transparent: themeColor_v2_v0(color.light.transparent),
+        default: themeColor_v2_v0(color.light.default),
+        primary: themeColor_v2_v0(color.light.primary),
+        positive: themeColor_v2_v0(color.light.positive),
+        caution: themeColor_v2_v0(color.light.caution),
+        critical: themeColor_v2_v0(color.light.critical)
       },
       dark: {
-        transparent: themeColor_v2_v0(color2.dark.transparent),
-        default: themeColor_v2_v0(color2.dark.default),
-        primary: themeColor_v2_v0(color2.dark.primary),
-        positive: themeColor_v2_v0(color2.dark.positive),
-        caution: themeColor_v2_v0(color2.dark.caution),
-        critical: themeColor_v2_v0(color2.dark.critical)
+        transparent: themeColor_v2_v0(color.dark.transparent),
+        default: themeColor_v2_v0(color.dark.default),
+        primary: themeColor_v2_v0(color.dark.primary),
+        positive: themeColor_v2_v0(color.dark.positive),
+        caution: themeColor_v2_v0(color.dark.caution),
+        critical: themeColor_v2_v0(color.dark.critical)
       }
     },
     focusRing: input.text.focusRing,
@@ -1038,7 +2135,8 @@ function v2_v0(v2) {
     shadows,
     space,
     styles,
-    v2
+    v2,
+    v3
   };
 }
 function themeColor_v2_v0(color_v2) {
@@ -1097,59 +2195,378 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
-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_HUES;
-function isColorBlendModeValue(str) {
-  return THEME_COLOR_BLEND_MODES.includes(str);
-}
-function isColorHueKey(str) {
-  return COLOR_HUES.includes(str);
-}
-function isColorTintKey(str) {
-  return COLOR_TINTS.includes(str);
+function themeColor_v3_v2(options) {
+  const {
+    color,
+    dark
+  } = options;
+  return {
+    _blend: "screen",
+    _dark: dark,
+    ...buildColorState({
+      cardColor: color,
+      state: "enabled",
+      tone: "default",
+      variant: "tinted"
+    }),
+    backdrop: color.backdrop,
+    button: THEME_COLOR_BUTTON_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
+      cardColor: color,
+      state,
+      tone,
+      variant: mode === "default" ? "solid" : "tinted"
+    }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones2), {}), modes), {}),
+    focusRing: color.focusRing,
+    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color.variant.tinted.default), states), {}), modes), {}),
+    selectable: THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
+      cardColor: color,
+      // cardVars: vars,
+      state,
+      tone,
+      variant: "tinted"
+    }), states), {}), tones2), {}),
+    shadow: color.shadow,
+    syntax: color.code.token
+  };
+}
+const stateShades = {
+  enabled: {
+    bg: [0, 1, 2],
+    border: [0, 1, 2],
+    fg: [0, 1, 2]
+  },
+  hovered: {
+    bg: [1, 2, 3],
+    border: [1, 2, 3],
+    fg: [1, 2, 3]
+  },
+  pressed: {
+    bg: [2, 3, 4],
+    border: [2, 3, 4],
+    fg: [2, 3, 4]
+  },
+  selected: {
+    bg: [3, 4, 4],
+    border: [3, 4, 4],
+    fg: [3, 4, 4]
+  },
+  disabled: {
+    bg: [4, 4, 4],
+    border: [4, 4, 4],
+    fg: [4, 4, 4]
+  }
+};
+function mix$1(tokens, index) {
+  return index === 0 ? tokens[0] : index === 4 ? tokens[4] : `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`;
 }
-function isColorButtonMode(str) {
-  return THEME_COLOR_BUTTON_MODES.includes(str);
+function buildColorState(options) {
+  const {
+    cardColor,
+    state,
+    tone,
+    variant
+  } = options, color = cardColor.variant[variant][tone], shades = stateShades[state];
+  return {
+    accent: {
+      fg: color.fg[4]
+    },
+    avatar: cardColor.avatar,
+    badge: THEME_COLOR_STATE_TONES.reduce((tones2, tone2) => (tones2[tone2] = {
+      bg: mix$1(color.bg, 1),
+      fg: mix$1(color.fg, 1),
+      dot: mix$1(color.fg, 3),
+      icon: mix$1(color.fg, 3)
+    }, tones2), {}),
+    bg: mix$1(color.bg, shades.bg[0]),
+    border: mix$1(color.border, shades.border[0]),
+    fg: mix$1(color.fg, shades.fg[0]),
+    code: {
+      bg: mix$1(color.bg, shades.bg[1]),
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    icon: mix$1(color.fg, shades.fg[2]),
+    kbd: {
+      bg: mix$1(color.bg, 0),
+      fg: mix$1(color.fg, 0),
+      border: mix$1(color.bg, 0)
+    },
+    link: {
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    muted: {
+      bg: mix$1(color.bg, shades.bg[1]),
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    skeleton: cardColor.skeleton
+  };
+}
+function buildInputState(colorElement) {
+  return {
+    bg: colorElement.bg[0],
+    border: colorElement.bg[0],
+    fg: colorElement.fg[0],
+    muted: {
+      bg: colorElement.bg[0]
+    },
+    placeholder: colorElement.fg[0]
+  };
+}
+function v3_v2(theme_v3) {
+  return {
+    _version: 2,
+    avatar: theme_v3.avatar,
+    button: theme_v3.button,
+    card: theme_v3.card,
+    color: {
+      dark: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.transparent,
+          dark: !0
+          // vars: vars.color.dark.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.default,
+          dark: !0
+          // vars: vars.color.dark.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.neutral,
+          dark: !0
+          // vars: vars.color.dark.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.primary,
+          dark: !0
+          // vars: vars.color.dark.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.suggest,
+          dark: !0
+          // vars: vars.color.dark.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.positive,
+          dark: !0
+          // vars: vars.color.dark.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.caution,
+          dark: !0
+          // vars: vars.color.dark.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.critical,
+          dark: !0
+          // vars: vars.color.dark.critical,
+        })
+      },
+      light: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.light.card.transparent,
+          dark: !1
+          // vars: vars.color.light.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.light.card.default,
+          dark: !1
+          // vars: vars.color.light.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.light.card.neutral,
+          dark: !1
+          // vars: vars.color.light.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.light.card.primary,
+          dark: !1
+          // vars: vars.color.light.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.light.card.suggest,
+          dark: !1
+          // vars: vars.color.light.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.light.card.positive,
+          dark: !1
+          // vars: vars.color.light.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.light.card.caution,
+          dark: !1
+          // vars: vars.color.light.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.light.card.critical,
+          dark: !1
+          // vars: vars.color.light.critical,
+        })
+      }
+    },
+    container: theme_v3.container,
+    font: theme_v3.font,
+    input: theme_v3.input,
+    layer: theme_v3.layer,
+    media: theme_v3.media,
+    radius: theme_v3.radius,
+    shadow: theme_v3.shadow,
+    space: theme_v3.space
+  };
+}
+function buildTheme(_config) {
+  const v3 = buildTheme_v3({
+    v2: _config
+  });
+  return v2_v0(v3_v2(v3), v3);
+}
+function mixChannel(b, s, weight) {
+  const delta = (s - b) * weight;
+  return b + delta;
+}
+function mix(b, s, weight) {
+  return {
+    r: mixChannel(b.r, s.r, weight),
+    g: mixChannel(b.g, s.g, weight),
+    b: mixChannel(b.b, s.b, weight)
+  };
+}
+function multiplyChannel(b, s) {
+  return b * s;
+}
+function multiply(b, s) {
+  return {
+    r: multiplyChannel(b.r / 255, s.r / 255) * 255,
+    g: multiplyChannel(b.g / 255, s.g / 255) * 255,
+    b: multiplyChannel(b.b / 255, s.b / 255) * 255
+  };
+}
+function screenChannel(b, s) {
+  return b + s - b * s;
+}
+function screen(b, s) {
+  return {
+    r: screenChannel(b.r / 255, s.r / 255) * 255,
+    g: screenChannel(b.g / 255, s.g / 255) * 255,
+    b: screenChannel(b.b / 255, s.b / 255) * 255
+  };
+}
+function clamp(a, min = 0, max = 1) {
+  return Math.min(max, Math.max(min, a));
+}
+function round(value) {
+  return Math.round(value);
+}
+function hexToRgb(hex) {
+  if (hex.length === 4) {
+    const hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
+    return {
+      r: parseInt(hexR + hexR, 16),
+      g: parseInt(hexG + hexG, 16),
+      b: parseInt(hexB + hexB, 16)
+    };
+  }
+  return {
+    r: parseInt(hex.slice(1, 3), 16),
+    g: parseInt(hex.slice(3, 5), 16),
+    b: parseInt(hex.slice(5, 7), 16)
+  };
+}
+function rgbaToRGBA(rgba2) {
+  const values = rgba2.replace(/rgba\(|\)/g, "").split(",");
+  return {
+    r: parseInt(values[0]),
+    g: parseInt(values[1]),
+    b: parseInt(values[2]),
+    a: parseFloat(values[3])
+  };
+}
+function rgbToHex(color) {
+  const r = round(clamp(Math.round(color.r), 0, 255)), g = round(clamp(Math.round(color.g), 0, 255)), b = round(clamp(Math.round(color.b), 0, 255));
+  return "a" in color ? `rgba(${r},${g},${b},${color.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+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
+  };
+}
+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;
+  let r = 0, g = 0, b = 0;
+  return 0 <= hsl.h && hsl.h < 60 ? (r = c, g = x, b = 0) : 60 <= hsl.h && hsl.h < 120 ? (r = x, g = c, b = 0) : 120 <= hsl.h && hsl.h < 180 ? (r = 0, g = c, b = x) : 180 <= hsl.h && hsl.h < 240 ? (r = 0, g = x, b = c) : 240 <= hsl.h && hsl.h < 300 ? (r = x, g = 0, b = c) : 300 <= hsl.h && hsl.h < 360 && (r = c, g = 0, b = x), {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+const HEX_CHARS = "0123456789ABCDEFabcdef", HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
+function isHexChars(str) {
+  for (const c of str)
+    if (HEX_CHARS.indexOf(c) === -1)
+      return !1;
+  return !0;
+}
+function isHex(str) {
+  return str[0] !== "#" || !(str.length === 4 || str.length === 7) ? !1 : isHexChars(str.slice(1));
 }
-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 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])
+  };
+}
+function parseColor(color) {
+  if (!color) return {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+  if (typeof color != "string")
+    throw new Error("parseColor: expected a string");
+  if (isHex(color))
+    return hexToRgb(color);
+  if (color.startsWith("hsl("))
+    return hslToRgb(parseHsl(color));
+  if (color.startsWith("rgba("))
+    return rgbaToRGBA(color);
+  throw new Error(`parseColor: unexpected color format: "${color}"`);
+}
+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
+}) {
+  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
+}
+function rgb_lrgb1(v) {
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+}
+function lrgb_luminance([r, g, b]) {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rgba(color, a) {
+  if (typeof color == "string" && color.startsWith("var("))
+    return `color-mix(in srgb, transparent, ${color} ${a * 100}%)`;
+  const rgb = parseColor(color);
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
+}
+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)) {
@@ -1309,1694 +2726,341 @@ function isColorValue(str) {
 function isColorOpacityValue(str) {
   return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
 }
-function compileColorTokenValue(node) {
-  let key = "";
-  return node.key === "black" || node.key === "white" ? key = node.key : key = `${node.hue}/${node.tint}`, node.mix !== void 0 ? `${key} ${node.mix * 100}%` : (node.opacity !== void 0 && (key += `/${node.opacity}`), key);
+function is_v2(themeProp) {
+  return themeProp._version === 2;
+}
+function themeColor_v0_v2_9(color) {
+  if ("neutral" in color.badge)
+    return color;
+  const colors2 = color;
+  return {
+    ...colors2,
+    badge: {
+      ...colors2.badge,
+      neutral: colors2.badge.default,
+      suggest: colors2.badge.primary
+    },
+    button: {
+      bleed: {
+        ...colors2.button.bleed,
+        neutral: colors2.button.bleed.default,
+        suggest: colors2.button.bleed.primary
+      },
+      default: {
+        ...colors2.button.default,
+        neutral: colors2.button.default.default,
+        suggest: colors2.button.default.primary
+      },
+      ghost: {
+        ...colors2.button.ghost,
+        neutral: colors2.button.ghost.default,
+        suggest: colors2.button.ghost.primary
+      }
+    },
+    selectable: {
+      ...colors2.selectable,
+      neutral: colors2.selectable.default,
+      suggest: colors2.selectable.primary
+    }
+  };
+}
+const cache$3 = /* @__PURE__ */ new WeakMap();
+function themeColor_v0_v2(color_v0) {
+  const cached_v2 = cache$3.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$3.set(color_v0, color_v2), color_v2;
 }
-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]);
-  if (!node || node.type !== "color")
-    throw new Error(`Invalid color token: ${value[0]}`);
-  return compileColorTokenValue({ ...node, hue: node.hue || hue });
+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)
+    },
+    neutral: {
+      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)
+    },
+    suggest: {
+      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)
+    }
+  };
 }
-const defaultColorTokens = {
-  base: {
-    "*": {
-      _blend: ["multiply", "screen"],
-      accent: {
-        fg: ["purple/600", "purple/400"]
+function stateThemeColor_v0_v2(v0, state) {
+  return {
+    ...state,
+    avatar: {
+      gray: {
+        bg: v0.spot.gray,
+        fg: v0.base.bg
       },
-      avatar: {
-        "*": {
-          _blend: ["screen", "multiply"],
-          bg: ["500", "400"],
-          fg: ["white", "black"]
-        }
+      blue: {
+        bg: v0.spot.blue,
+        fg: v0.base.bg
       },
-      backdrop: ["gray/200/0.5", "black/0.5"],
-      badge: {
-        "*": {
-          bg: ["100", "900"],
-          fg: ["600", "400"],
-          icon: ["500", "500"],
-          dot: ["500", "500"]
-        },
-        positive: {
-          bg: ["200 50%", "900"],
-          fg: ["600", "500"]
-        },
-        caution: {
-          bg: ["200 50%", "900"],
-          fg: ["600", "500"]
-        }
+      purple: {
+        bg: v0.spot.purple,
+        fg: v0.base.bg
       },
-      bg: ["50", "950"],
-      border: ["200", "800"],
-      code: {
-        bg: ["50", "950"],
-        fg: ["600", "400"]
+      magenta: {
+        bg: v0.spot.magenta,
+        fg: v0.base.bg
       },
-      fg: ["800", "200"],
-      focusRing: ["blue/500", "blue/500"],
-      icon: ["600", "400"],
-      kbd: {
-        bg: ["white", "black"],
-        fg: ["600", "400"],
-        border: ["200", "800"]
+      red: {
+        bg: v0.spot.red,
+        fg: v0.base.bg
       },
-      link: {
-        fg: ["blue/600", "blue/300"]
+      orange: {
+        bg: v0.spot.orange,
+        fg: v0.base.bg
       },
-      muted: {
-        bg: ["50", "950"],
-        fg: ["700 75%", "300 75%"]
+      yellow: {
+        bg: v0.spot.yellow,
+        fg: v0.base.bg
       },
-      shadow: {
-        outline: ["500/0.3", "500/0.4"],
-        umbra: ["gray/500/0.1", "black/0.2"],
-        penumbra: ["gray/500/0.07", "black/0.14"],
-        ambient: ["gray/500/0.06", "black/0.12"]
+      green: {
+        bg: v0.spot.green,
+        fg: v0.base.bg
       },
-      skeleton: {
-        from: ["100", "900"],
-        to: ["100 50%", "900 50%"]
+      cyan: {
+        bg: v0.spot.cyan,
+        fg: v0.base.bg
       }
     },
-    transparent: {
-      bg: ["50", "black"]
-    },
-    default: {
-      bg: ["white", "950"],
-      fg: ["800", "200"],
-      muted: {
-        fg: ["600", "400"]
+    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
+      },
+      neutral: {
+        bg: v0.muted.transparent.enabled.bg,
+        fg: v0.muted.transparent.enabled.fg,
+        dot: v0.muted.transparent.enabled.muted.fg,
+        icon: v0.muted.transparent.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
+      },
+      suggest: {
+        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
       }
     },
-    primary: { _hue: "blue" },
-    positive: {
-      _hue: "green",
-      shadow: { outline: ["500/0.4", "500/0.4"] }
+    kbd: {
+      bg: v0.muted.default.enabled.bg,
+      fg: v0.muted.default.enabled.fg,
+      border: v0.muted.default.enabled.border
     },
-    caution: {
-      _hue: "yellow",
-      shadow: { outline: ["600/0.3", "500/0.4"] }
+    muted: {
+      ...v0.muted.default.enabled.muted,
+      bg: state.bg2 || state.bg
     },
-    critical: { _hue: "red" }
-  },
-  button: {
-    default: {
-      "*": {
-        "*": {
-          _blend: ["screen", "multiply"],
-          accent: {
-            fg: ["purple/300", "purple/700"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["500", "400"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              bg: ["900", "100"],
-              fg: ["400", "600"],
-              dot: ["500", "500"],
-              icon: ["500", "500"]
-            }
-          },
-          bg: ["500", "400"],
-          border: ["500/0", "400/0"],
-          code: {
-            bg: ["500 20%", "400 20%"],
-            fg: ["200", "600"]
-          },
-          fg: ["white", "black"],
-          icon: ["100 70%", "900 70%"],
-          kbd: {
-            bg: ["black", "white"],
-            fg: ["200", "600"],
-            border: ["800", "200"]
-          },
-          link: {
-            fg: ["blue/200", "blue/600"]
-          },
-          muted: {
-            bg: ["950", "50"],
-            fg: ["100 70%", "900 70%"]
-          },
-          skeleton: {
-            from: ["900", "100"],
-            to: ["900 50%", "100 50%"]
-          }
-        },
-        hovered: {
-          bg: ["700", "300"],
-          border: ["700/0", "300/0"]
-        },
-        pressed: {
-          bg: ["700", "300"]
-        },
-        selected: {
-          bg: ["700", "300"]
-        },
-        disabled: {
-          _hue: "gray",
-          accent: {
-            fg: ["100 70%", "900 70%"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["gray/500", "gray/400"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              bg: ["gray/700", "gray/300"],
-              fg: ["white", "black"],
-              dot: ["white", "black"],
-              icon: ["white", "black"]
-            }
-          },
-          bg: ["300", "600"],
-          code: {
-            bg: ["950", "50"],
-            fg: ["300", "600"]
-          },
-          fg: ["300", "600"],
-          muted: {
-            bg: ["950", "50"],
-            fg: ["300", "600"]
-          },
-          kbd: {
-            bg: ["black", "white"],
-            fg: ["white", "black"],
-            border: ["700", "300"]
-          },
-          link: {
-            fg: ["100 70%", "900 70%"]
-          }
-        }
-      },
-      default: {
-        "*": {
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["500", "400"],
-              fg: ["white", "black"]
-            }
-          },
-          bg: ["800", "200"],
-          muted: {
-            bg: ["950", "50"],
-            fg: ["400", "600"]
-          }
-        },
-        hovered: {
-          bg: ["900", "100"]
-        },
-        pressed: {
-          bg: ["black", "white"]
-        },
-        selected: {
-          bg: ["black", "white"]
-        }
-      }
-    },
-    ghost: {
-      "*": {
-        "*": {
-          _blend: ["multiply", "screen"],
-          accent: {
-            fg: ["purple/700 60%", "purple/300 70%"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["500", "400"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              bg: ["100", "900"],
-              fg: ["600", "400"],
-              dot: ["500", "500"],
-              icon: ["500", "500"]
-            }
-          },
-          bg: ["50", "950"],
-          border: ["100", "900"],
-          code: {
-            bg: ["500 10%", "400 10%"],
-            fg: ["700 60%", "400 60%"]
-          },
-          fg: ["600", "400"],
-          icon: ["700 60%", "300 60%"],
-          kbd: {
-            bg: ["white", "black"],
-            fg: ["600", "400"],
-            border: ["200", "800"]
-          },
-          link: {
-            fg: ["blue/700 60%", "blue/300 60%"]
-          },
-          muted: {
-            bg: ["100", "950"],
-            fg: ["700 60%", "300 60%"]
-          },
-          skeleton: {
-            from: ["100", "900"],
-            to: ["100 50%", "900 50%"]
-          }
-        },
-        hovered: {
-          bg: ["100", "900"],
-          fg: ["700", "300"]
-        },
-        pressed: {
-          bg: ["100", "900"],
-          fg: ["800", "200"]
-        },
-        selected: {
-          bg: ["100", "900"],
-          fg: ["800", "200"]
-        },
-        disabled: {
-          _hue: "gray",
-          accent: {
-            fg: ["200", "800"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["gray/100", "gray/900"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              _hue: "gray",
-              bg: ["50", "950"],
-              fg: ["gray/200", "gray/800"],
-              dot: ["gray/200", "gray/800"],
-              icon: ["gray/200", "gray/800"]
-            }
-          },
-          border: ["100", "900"],
-          code: {
-            bg: ["50", "950"],
-            fg: ["200", "800"]
-          },
-          fg: ["400", "600"],
-          icon: ["300", "700"],
-          muted: {
-            fg: ["300", "700"]
-          },
-          kbd: {
-            bg: ["white", "black"],
-            fg: ["200", "800"],
-            border: ["100", "900"]
-          },
-          link: {
-            fg: ["200", "800"]
-          }
-        }
-      },
-      positive: {
-        "*": {
-          border: ["600 20%", "800"]
-        }
-      },
-      caution: {
-        "*": {
-          border: ["600 20%", "800"]
-        }
-      }
-    },
-    bleed: {
-      "*": {
-        "*": {
-          _blend: ["multiply", "screen"],
-          accent: {
-            fg: ["purple/700 70%", "purple/300 70%"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["500", "400"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              bg: ["100", "900"],
-              fg: ["600", "400"],
-              dot: ["500", "500"],
-              icon: ["500", "500"]
-            }
-          },
-          bg: ["white", "black"],
-          border: ["white/0", "black/0"],
-          code: {
-            bg: ["50", "950"],
-            fg: ["700 75%", "300 75%"]
-          },
-          fg: ["700", "300"],
-          icon: ["700 75%", "300 75%"],
-          kbd: {
-            bg: ["white", "black"],
-            fg: ["700", "300"],
-            border: ["200", "800"]
-          },
-          link: {
-            fg: ["blue/700 70%", "blue/300 70%"]
-          },
-          muted: {
-            bg: ["100", "950"],
-            fg: ["700 75%", "300 75%"]
-          },
-          skeleton: {
-            from: ["100", "900"],
-            to: ["100 50%", "900 50%"]
-          }
-        },
-        hovered: {
-          bg: ["50", "950"],
-          icon: ["700 70%", "400 70%"]
-        },
-        pressed: {
-          bg: ["100", "900"],
-          fg: ["800", "200"],
-          icon: ["800 70%", "200 70%"]
-        },
-        selected: {
-          bg: ["100", "900"],
-          fg: ["800", "200"],
-          icon: ["800 60%", "200 60%"]
-        },
-        disabled: {
-          _hue: "gray",
-          accent: {
-            fg: ["200", "800"]
-          },
-          avatar: {
-            "*": {
-              _blend: ["screen", "multiply"],
-              bg: ["gray/100", "gray/900"],
-              fg: ["white", "black"]
-            }
-          },
-          badge: {
-            "*": {
-              _hue: "gray",
-              bg: ["50", "950"],
-              fg: ["gray/200", "gray/800"],
-              dot: ["gray/200", "gray/800"],
-              icon: ["gray/200", "gray/800"]
-            }
-          },
-          code: {
-            bg: ["50", "950"],
-            fg: ["200", "800"]
-          },
-          fg: ["400", "600"],
-          icon: ["300", "700"],
-          muted: {
-            fg: ["400", "600"]
-          },
-          kbd: {
-            bg: ["white", "black"],
-            fg: ["200", "800"],
-            border: ["100", "900"]
-          },
-          link: {
-            fg: ["200", "800"]
-          }
-        }
-      }
-    }
-  },
-  input: {
-    "*": {
-      "*": {
-        _blend: ["multiply", "screen"],
-        bg: ["white", "black"],
-        border: ["200", "700"],
-        fg: ["black", "200"],
-        muted: {
-          bg: ["50", "950"]
-        },
-        placeholder: ["400", "600"]
-      },
-      hovered: {
-        border: ["300", "700"]
-      },
-      readOnly: {
-        bg: ["50", "950"],
-        border: ["200", "800"],
-        fg: ["800", "200"]
-      },
-      disabled: {
-        bg: ["50", "950"],
-        fg: ["400", "600"],
-        border: ["100", "900"],
-        placeholder: ["200", "800 50%"]
-      }
-    },
-    invalid: {
-      "*": {
-        _hue: "red",
-        bg: ["100", "950"]
-      }
-    }
-  },
-  selectable: {
-    "*": {
-      "*": {
-        _blend: ["multiply", "screen"],
-        accent: {
-          fg: ["purple/700 70%", "purple/300 70%"]
-        },
-        avatar: {
-          "*": {
-            _blend: ["screen", "multiply"],
-            bg: ["500", "400"],
-            fg: ["white", "black"]
-          }
-        },
-        badge: {
-          "*": {
-            bg: ["100", "900"],
-            fg: ["600", "400"],
-            dot: ["500", "500"],
-            icon: ["500", "500"]
-          }
-        },
-        bg: ["white", "black"],
-        border: ["200", "800"],
-        code: {
-          bg: ["50", "950"],
-          fg: ["600", "400"]
-        },
-        fg: ["700", "300"],
-        icon: ["700 75%", "300 75%"],
-        kbd: {
-          bg: ["white", "black"],
-          fg: ["600", "400"],
-          border: ["200", "800"]
-        },
-        link: {
-          fg: ["blue/700 70%", "blue/300 70%"]
-        },
-        muted: {
-          bg: ["50", "950"],
-          fg: ["700 75%", "300 75%"]
-        },
-        skeleton: {
-          from: ["100", "900"],
-          to: ["100 50%", "900 50%"]
-        }
-      },
-      hovered: {
-        bg: ["50", "950"]
-      },
-      pressed: {
-        bg: ["100", "900"]
-      },
-      selected: {
-        _blend: ["screen", "multiply"],
-        accent: {
-          fg: ["purple/300", "purple/700"]
-        },
-        avatar: {
-          "*": {
-            _blend: ["multiply", "screen"],
-            bg: ["white", "black"],
-            fg: ["black", "white"]
-          }
-        },
-        badge: {
-          "*": {
-            bg: ["900", "100"],
-            fg: ["400", "600"],
-            dot: ["500", "500"],
-            icon: ["500", "500"]
-          }
-        },
-        bg: ["500", "400"],
-        border: ["500 20%", "400 20%"],
-        code: {
-          bg: ["500 20%", "400 20%"],
-          fg: ["200", "600"]
-        },
-        fg: ["white", "black"],
-        icon: ["100 70%", "900 70%"],
-        kbd: {
-          bg: ["black", "white"],
-          fg: ["200", "600"],
-          border: ["800", "200"]
-        },
-        link: {
-          fg: ["blue/200", "blue/600"]
-        },
-        muted: {
-          bg: ["500 10%", "400 10%"],
-          fg: ["100 70%", "900 70%"]
-        },
-        skeleton: {
-          from: ["900", "100"],
-          to: ["900 50%", "100 50%"]
-        }
-      },
-      disabled: {
-        _hue: "gray",
-        accent: {
-          fg: ["200", "800"]
-        },
-        avatar: {
-          "*": {
-            _blend: ["screen", "multiply"],
-            bg: ["gray/100", "gray/900"],
-            fg: ["white", "black"]
-          }
-        },
-        badge: {
-          "*": {
-            _hue: "gray",
-            bg: ["50", "950"],
-            fg: ["gray/200", "gray/800"],
-            dot: ["gray/200", "gray/800"],
-            icon: ["gray/200", "gray/800"]
-          }
-        },
-        border: ["100", "900"],
-        code: {
-          bg: ["50", "950"],
-          fg: ["200", "800"]
-        },
-        fg: ["200", "800"],
-        icon: ["200", "800"],
-        kbd: {
-          bg: ["white", "black"],
-          fg: ["200", "800"],
-          border: ["100", "900"]
-        },
-        link: {
-          fg: ["200", "800"]
-        },
-        muted: {
-          bg: ["50 50%", "950 50%"],
-          fg: ["200", "800"]
-        }
-      }
-    },
-    default: {
-      selected: {
-        _hue: "blue"
-      }
-    },
-    critical: {
-      disabled: {
-        bg: ["50 50%", "950 50%"]
-      }
-    }
-  },
-  syntax: {
-    atrule: ["purple/600", "purple/400"],
-    attrName: ["green/600", "green/400"],
-    attrValue: ["yellow/600", "yellow/400"],
-    attribute: ["yellow/600", "yellow/400"],
-    boolean: ["purple/600", "purple/400"],
-    builtin: ["purple/600", "purple/400"],
-    cdata: ["yellow/600", "yellow/400"],
-    char: ["yellow/600", "yellow/400"],
-    class: ["orange/600", "orange/400"],
-    className: ["cyan/600", "cyan/400"],
-    comment: ["gray/400", "gray/600"],
-    constant: ["purple/600", "purple/400"],
-    deleted: ["red/600", "red/400"],
-    entity: ["red/600", "red/400"],
-    function: ["green/600", "green/400"],
-    hexcode: ["blue/600", "blue/400"],
-    id: ["purple/600", "purple/400"],
-    important: ["purple/600", "purple/400"],
-    inserted: ["yellow/600", "yellow/400"],
-    keyword: ["magenta/600", "magenta/400"],
-    number: ["purple/600", "purple/400"],
-    operator: ["magenta/600", "magenta/400"],
-    property: ["blue/600", "blue/400"],
-    pseudoClass: ["yellow/600", "yellow/400"],
-    pseudoElement: ["yellow/600", "yellow/400"],
-    punctuation: ["gray/600", "gray/400"],
-    regex: ["blue/600", "blue/400"],
-    selector: ["red/600", "red/400"],
-    string: ["yellow/600", "yellow/400"],
-    symbol: ["purple/600", "purple/400"],
-    tag: ["red/600", "red/400"],
-    unit: ["orange/600", "orange/400"],
-    url: ["red/600", "red/400"],
-    variable: ["red/600", "red/400"]
-  }
-};
-function isRecord(value) {
-  return !!(value && typeof value == "object" && !Array.isArray(value));
-}
-function merge(...records) {
-  const _records = records.filter(Boolean);
-  return _records.length === 0 ? {} : _records.reduce(_merge, {});
-}
-function _merge(acc, source) {
-  for (const key of Object.keys(source)) {
-    const prevValue = acc[key], nextValue = source[key];
-    isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
-  }
-  return acc;
-}
-function resolveColorTokens(inputTokens) {
-  const tokens = merge(defaultColorTokens, inputTokens);
-  return {
-    base: resolveBaseColorTokens(tokens),
-    button: resolveButtonColorTokens(tokens),
-    input: resolveInputColorTokens(tokens),
-    selectable: resolveSelectableColorTokens(tokens),
-    syntax: tokens.syntax
-  };
-}
-function resolveBaseColorTokens(sparseTokens) {
-  const tokens = {};
-  for (const tone of THEME_COLOR_CARD_TONES)
-    tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
-  return tokens;
-}
-function resolveBaseColorTones(inputTokens, tone) {
-  const spec = merge(inputTokens?.base?.["*"], inputTokens?.base?.[tone]), hue = spec._hue || inputTokens?.base?.[tone]?._hue || "gray";
-  return {
-    ...spec,
-    _hue: hue,
-    avatar: {
-      gray: merge({ _hue: "gray" }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({ _hue: "blue" }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({ _hue: "purple" }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({ _hue: "magenta" }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({ _hue: "red" }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({ _hue: "orange" }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({ _hue: "yellow" }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({ _hue: "green" }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({ _hue: "cyan" }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue || hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.critical
-      }
-    }
-  };
-}
-function resolveButtonColorTokens(inputTokens) {
-  const tokens = {};
-  for (const mode of THEME_COLOR_BUTTON_MODES)
-    tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode);
-  return tokens;
-}
-function resolveButtonToneColorTokens(inputTokens, mode) {
-  const tokens = {};
-  for (const tone of THEME_COLOR_STATE_TONES)
-    tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone);
-  return tokens;
-}
-function resolveButtonModeColorTokens(inputTokens, mode, tone) {
-  const tokens = {};
-  for (const state of THEME_COLOR_STATES)
-    tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state);
-  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;
-  return {
-    ...spec,
-    _hue: hue,
-    avatar: {
-      gray: merge({ _hue: "gray" }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({ _hue: "blue" }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({ _hue: "purple" }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({ _hue: "magenta" }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({ _hue: "red" }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({ _hue: "orange" }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({ _hue: "yellow" }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({ _hue: "green" }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({ _hue: "cyan" }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.critical
-      }
-    }
-  };
-}
-function resolveInputColorTokens(inputTokens) {
-  const tokens = {};
-  for (const mode of THEME_COLOR_INPUT_MODES)
-    tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
-  return tokens;
-}
-function resolveInputModeColorTokens(inputTokens, mode) {
-  const states = {};
-  for (const state of THEME_COLOR_INPUT_STATES)
-    states[state] = resolveInputStateColorTokens(inputTokens, mode, state);
-  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 };
-}
-function resolveSelectableColorTokens(inputTokens) {
-  const tokens = {};
-  for (const tone of THEME_COLOR_STATE_TONES)
-    tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone);
-  return tokens;
-}
-function resolveSelectableToneColorTokens(inputTokens, tone) {
-  const states = {
-    _hue: inputTokens?.selectable?.[tone]?._hue || inputTokens?.base?.[tone]?._hue
-  };
-  for (const state of THEME_COLOR_STATES)
-    states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state);
-  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;
-  return {
-    ...spec,
-    _hue: hue,
-    avatar: {
-      gray: merge({ _hue: "gray" }, spec.avatar?.["*"], spec.avatar?.gray),
-      blue: merge({ _hue: "blue" }, spec.avatar?.["*"], spec.avatar?.blue),
-      purple: merge({ _hue: "purple" }, spec.avatar?.["*"], spec.avatar?.purple),
-      magenta: merge({ _hue: "magenta" }, spec.avatar?.["*"], spec.avatar?.magenta),
-      red: merge({ _hue: "red" }, spec.avatar?.["*"], spec.avatar?.red),
-      orange: merge({ _hue: "orange" }, spec.avatar?.["*"], spec.avatar?.orange),
-      yellow: merge({ _hue: "yellow" }, spec.avatar?.["*"], spec.avatar?.yellow),
-      green: merge({ _hue: "green" }, spec.avatar?.["*"], spec.avatar?.green),
-      cyan: merge({ _hue: "cyan" }, spec.avatar?.["*"], spec.avatar?.cyan)
-    },
-    badge: {
-      default: {
-        _hue: inputTokens?.base?.default?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.default
-      },
-      primary: {
-        _hue: inputTokens?.base?.primary?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.primary
-      },
-      positive: {
-        _hue: inputTokens?.base?.positive?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.positive
-      },
-      caution: {
-        _hue: inputTokens?.base?.caution?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.caution
-      },
-      critical: {
-        _hue: inputTokens?.base?.critical?._hue,
-        ...spec.badge?.["*"],
-        ...spec.badge?.critical
-      }
-    }
-  };
-}
-function buildColorTheme(config) {
-  const resolvedConfig = {
-    ...config,
-    color: resolveColorTokens(config?.color)
-  };
-  return {
-    light: buildColorScheme({ scheme: "light" }, resolvedConfig),
-    dark: buildColorScheme({ scheme: "dark" }, resolvedConfig)
-  };
-}
-function buildColorScheme(options, config) {
-  const { scheme } = options;
-  return {
-    transparent: buildCardColorTheme({ scheme, tone: "transparent" }, config),
-    default: buildCardColorTheme({ scheme, tone: "default" }, config),
-    primary: buildCardColorTheme({ scheme, tone: "primary" }, config),
-    positive: buildCardColorTheme({ scheme, tone: "positive" }, config),
-    caution: buildCardColorTheme({ scheme, tone: "caution" }, config),
-    critical: buildCardColorTheme({ scheme, tone: "critical" }, config)
-  };
-}
-function buildCardColorTheme(options, config) {
-  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),
-    backdrop: resolveColorTokenValue(context, tokens?.backdrop),
-    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
-    bg: resolveColorTokenValue(context, tokens?.bg),
-    border: resolveColorTokenValue(context, tokens?.border),
-    button: buildButtonColorTheme({ scheme }, config),
-    code: {
-      bg: resolveColorTokenValue(context, tokens?.code?.bg),
-      fg: resolveColorTokenValue(context, tokens?.code?.fg)
-    },
-    fg: resolveColorTokenValue(context, tokens?.fg),
-    focusRing: resolveColorTokenValue(context, tokens?.focusRing),
-    icon: resolveColorTokenValue(context, tokens?.icon),
-    input: buildInputColorTheme({ scheme, tone }, config),
-    kbd: {
-      bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
-      fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
-      border: resolveColorTokenValue(context, tokens?.kbd?.border)
-    },
-    link: {
-      fg: resolveColorTokenValue(context, tokens?.link?.fg)
-    },
-    muted: {
-      bg: resolveColorTokenValue(context, tokens?.muted?.bg),
-      fg: resolveColorTokenValue(context, tokens?.muted?.fg)
-    },
-    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)
-  };
-}
-function buildShadowColorTheme(options, config) {
-  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),
-    penumbra: resolveColorTokenValue(context, tokens?.shadow?.penumbra),
-    ambient: resolveColorTokenValue(context, tokens?.shadow?.ambient)
-  };
-}
-function buildAvatarColorTheme(options, stateTokens) {
-  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)
-  };
-}
-function _buildAvatarColorTheme(options, stateTokens) {
-  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),
-    fg: resolveColorTokenValue(context, tokens?.fg)
-  };
-}
-function buildBadgeColorTheme(tokens, options, config) {
-  const { scheme } = options;
-  return {
-    default: _buildBadgeColorTheme(tokens, { scheme, tone: "default" }, config),
-    primary: _buildBadgeColorTheme(tokens, { scheme, tone: "primary" }, config),
-    positive: _buildBadgeColorTheme(tokens, { scheme, tone: "positive" }, config),
-    caution: _buildBadgeColorTheme(tokens, { scheme, tone: "caution" }, config),
-    critical: _buildBadgeColorTheme(tokens, { 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 };
-  return {
-    bg: resolveColorTokenValue(context, tokens?.bg),
-    fg: resolveColorTokenValue(context, tokens?.fg),
-    dot: resolveColorTokenValue(context, tokens?.dot),
-    icon: resolveColorTokenValue(context, tokens?.icon)
-  };
-}
-function buildButtonColorTheme(options, config) {
-  const { scheme } = options, modes = {};
-  for (const mode of THEME_COLOR_BUTTON_MODES)
-    modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
-  return modes;
-}
-function buildButtonTonesColorTheme(options, config) {
-  const { mode, scheme } = options, tones2 = {};
-  for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
-  return tones2;
-}
-function buildButtonStatesColorTheme(options, config) {
-  const { mode, scheme, tone } = options, states = {};
-  for (const state of THEME_COLOR_STATES)
-    states[state] = buildButtonStateColorTheme({ mode, tone, scheme, state }, config);
-  return states;
-}
-function buildButtonStateColorTheme(options, config) {
-  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),
-    bg: resolveColorTokenValue(context, tokens?.bg),
-    border: resolveColorTokenValue(context, tokens?.border),
-    code: {
-      bg: resolveColorTokenValue(context, tokens?.code?.bg),
-      fg: resolveColorTokenValue(context, tokens?.code?.fg)
-    },
-    fg: resolveColorTokenValue(context, tokens?.fg),
-    icon: resolveColorTokenValue(context, tokens?.icon),
-    muted: {
-      bg: resolveColorTokenValue(context, tokens?.muted?.bg),
-      fg: resolveColorTokenValue(context, tokens?.muted?.fg)
-    },
-    kbd: {
-      bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
-      fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
-      border: resolveColorTokenValue(context, tokens?.kbd?.border)
-    },
-    link: {
-      fg: resolveColorTokenValue(context, tokens?.link?.fg)
-    },
-    skeleton: {
-      from: resolveColorTokenValue(context, tokens?.skeleton?.from),
-      to: resolveColorTokenValue(context, tokens?.skeleton?.to)
-    }
-  };
-}
-function buildInputColorTheme(options, config) {
-  const { scheme, tone } = options;
-  return {
-    default: buildInputStatesColorTheme({ mode: "default", scheme, tone }, config),
-    invalid: buildInputStatesColorTheme({ mode: "invalid", scheme, tone }, config)
-  };
-}
-function buildInputStatesColorTheme(options, config) {
-  const { mode, scheme, tone } = options;
-  return {
-    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 { 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),
-    border: resolveColorTokenValue(context, tokens?.border),
-    fg: resolveColorTokenValue(context, tokens?.fg),
-    muted: {
-      bg: resolveColorTokenValue(context, tokens?.muted?.bg)
-    },
-    placeholder: resolveColorTokenValue(context, tokens?.placeholder)
-  };
-}
-function buildSelectableColorTheme(options, config) {
-  const { scheme } = options, tones2 = {};
-  for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
-  return tones2;
-}
-function buildSelectableStatesColorTheme(options, config) {
-  const { scheme, tone } = options, states = {};
-  for (const state of THEME_COLOR_STATES)
-    states[state] = buildSelectableStateColorTheme({ tone, scheme, state }, config);
-  return states;
-}
-function buildSelectableStateColorTheme(options, config) {
-  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),
-    bg: resolveColorTokenValue(context, tokens?.bg),
-    border: resolveColorTokenValue(context, tokens?.border),
-    code: {
-      bg: resolveColorTokenValue(context, tokens?.code?.bg),
-      fg: resolveColorTokenValue(context, tokens?.code?.fg)
-    },
-    fg: resolveColorTokenValue(context, tokens?.fg),
-    icon: resolveColorTokenValue(context, tokens?.icon),
-    muted: {
-      bg: resolveColorTokenValue(context, tokens?.muted?.bg),
-      fg: resolveColorTokenValue(context, tokens?.muted?.fg)
-    },
-    kbd: {
-      bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
-      fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
-      border: resolveColorTokenValue(context, tokens?.kbd?.border)
-    },
-    link: {
-      fg: resolveColorTokenValue(context, tokens?.link?.fg)
-    },
-    skeleton: {
-      from: resolveColorTokenValue(context, tokens?.skeleton?.from),
-      to: resolveColorTokenValue(context, tokens?.skeleton?.to)
-    }
-  };
-}
-function buildSyntaxColorTheme(options, config) {
-  const { scheme } = options, tokens = config?.color?.syntax, context = { hue: "gray", scheme };
-  return {
-    atrule: resolveColorTokenValue(context, tokens?.atrule),
-    attrName: resolveColorTokenValue(context, tokens?.attrName),
-    attrValue: resolveColorTokenValue(context, tokens?.attrValue),
-    attribute: resolveColorTokenValue(context, tokens?.attribute),
-    boolean: resolveColorTokenValue(context, tokens?.boolean),
-    builtin: resolveColorTokenValue(context, tokens?.builtin),
-    cdata: resolveColorTokenValue(context, tokens?.cdata),
-    char: resolveColorTokenValue(context, tokens?.char),
-    class: resolveColorTokenValue(context, tokens?.class),
-    className: resolveColorTokenValue(context, tokens?.className),
-    comment: resolveColorTokenValue(context, tokens?.comment),
-    constant: resolveColorTokenValue(context, tokens?.constant),
-    deleted: resolveColorTokenValue(context, tokens?.deleted),
-    doctype: resolveColorTokenValue(context, tokens?.doctype),
-    entity: resolveColorTokenValue(context, tokens?.entity),
-    function: resolveColorTokenValue(context, tokens?.function),
-    hexcode: resolveColorTokenValue(context, tokens?.hexcode),
-    id: resolveColorTokenValue(context, tokens?.id),
-    important: resolveColorTokenValue(context, tokens?.important),
-    inserted: resolveColorTokenValue(context, tokens?.inserted),
-    keyword: resolveColorTokenValue(context, tokens?.keyword),
-    number: resolveColorTokenValue(context, tokens?.number),
-    operator: resolveColorTokenValue(context, tokens?.operator),
-    prolog: resolveColorTokenValue(context, tokens?.prolog),
-    property: resolveColorTokenValue(context, tokens?.property),
-    pseudoClass: resolveColorTokenValue(context, tokens?.pseudoClass),
-    pseudoElement: resolveColorTokenValue(context, tokens?.pseudoElement),
-    punctuation: resolveColorTokenValue(context, tokens?.punctuation),
-    regex: resolveColorTokenValue(context, tokens?.regex),
-    selector: resolveColorTokenValue(context, tokens?.selector),
-    string: resolveColorTokenValue(context, tokens?.string),
-    symbol: resolveColorTokenValue(context, tokens?.symbol),
-    tag: resolveColorTokenValue(context, tokens?.tag),
-    unit: resolveColorTokenValue(context, tokens?.unit),
-    url: resolveColorTokenValue(context, tokens?.url),
-    variable: resolveColorTokenValue(context, tokens?.variable)
-  };
-}
-const defaultColorPalette = color;
-function mixChannel(b, s, weight) {
-  const delta = (s - b) * weight;
-  return b + delta;
-}
-function mix(b, s, weight) {
-  return {
-    r: mixChannel(b.r, s.r, weight),
-    g: mixChannel(b.g, s.g, weight),
-    b: mixChannel(b.b, s.b, weight)
-  };
-}
-function multiplyChannel(b, s) {
-  return b * s;
-}
-function multiply(b, s) {
-  return {
-    r: multiplyChannel(b.r / 255, s.r / 255) * 255,
-    g: multiplyChannel(b.g / 255, s.g / 255) * 255,
-    b: multiplyChannel(b.b / 255, s.b / 255) * 255
-  };
-}
-function screenChannel(b, s) {
-  return b + s - b * s;
-}
-function screen(b, s) {
-  return {
-    r: screenChannel(b.r / 255, s.r / 255) * 255,
-    g: screenChannel(b.g / 255, s.g / 255) * 255,
-    b: screenChannel(b.b / 255, s.b / 255) * 255
-  };
-}
-function lerp(x, y, a) {
-  return x * (1 - a) + y * a;
-}
-function invlerp(x, y, a) {
-  return clamp((a - x) / (y - x));
-}
-function clamp(a, min = 0, max = 1) {
-  return Math.min(max, Math.max(min, a));
-}
-function range(x1, y1, x2, y2, a) {
-  return lerp(x2, y2, invlerp(x1, y1, a));
-}
-function round(value) {
-  return Math.round(value);
-}
-function hexToRgb(hex) {
-  if (hex.length === 4) {
-    const hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
-    return {
-      r: parseInt(hexR + hexR, 16),
-      g: parseInt(hexG + hexG, 16),
-      b: parseInt(hexB + hexB, 16)
-    };
-  }
-  return {
-    r: parseInt(hex.slice(1, 3), 16),
-    g: parseInt(hex.slice(3, 5), 16),
-    b: parseInt(hex.slice(5, 7), 16)
-  };
-}
-function rgbaToRGBA(rgba2) {
-  const values = rgba2.replace(/rgba\(|\)/g, "").split(",");
-  return {
-    r: parseInt(values[0]),
-    g: parseInt(values[1]),
-    b: parseInt(values[2]),
-    a: parseFloat(values[3])
-  };
-}
-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 }) {
-  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 };
-}
-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;
-  let r = 0, g = 0, b = 0;
-  return 0 <= hsl.h && hsl.h < 60 ? (r = c, g = x, b = 0) : 60 <= hsl.h && hsl.h < 120 ? (r = x, g = c, b = 0) : 120 <= hsl.h && hsl.h < 180 ? (r = 0, g = c, b = x) : 180 <= hsl.h && hsl.h < 240 ? (r = 0, g = x, b = c) : 240 <= hsl.h && hsl.h < 300 ? (r = x, g = 0, b = c) : 300 <= hsl.h && hsl.h < 360 && (r = c, g = 0, b = x), {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255)
-  };
-}
-const HEX_CHARS = "0123456789ABCDEFabcdef", HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
-function isHexChars(str) {
-  for (const c of str)
-    if (HEX_CHARS.indexOf(c) === -1)
-      return !1;
-  return !0;
-}
-function isHex(str) {
-  return str[0] !== "#" || !(str.length === 4 || str.length === 7) ? !1 : isHexChars(str.slice(1));
-}
-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]) };
-}
-function parseColor(color2) {
-  if (!color2) return { r: 0, g: 0, b: 0 };
-  if (typeof color2 != "string")
-    throw new Error("parseColor: expected a string");
-  if (isHex(color2))
-    return hexToRgb(color2);
-  if (color2.startsWith("hsl("))
-    return hslToRgb(parseHsl(color2));
-  if (color2.startsWith("rgba("))
-    return rgbaToRGBA(color2);
-  throw new Error(`parseColor: unexpected color format: "${color2}"`);
-}
-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 }) {
-  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
-}
-function rgb_lrgb1(v) {
-  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-}
-function lrgb_luminance([r, g, b]) {
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function rgba(color2, a) {
-  const rgb = parseColor(color2);
-  return `rgba(${rgb.r},${rgb.g},${rgb.b},${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 = {
-    r: [black2.r, white2.r],
-    g: [black2.g, white2.g],
-    b: [black2.b, white2.b]
-  }, convertedBgColor = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE)
-  }, convertedColor = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color2.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color2.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color2.b), ...RGB_RANGE)
-  }, resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor), v = {
-    r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
-    g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
-    b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b)
-  };
-  return rgbToHex(v);
-}
-function renderColorValue(str, options) {
-  const { bg, blendMode, colorPalette } = options;
-  if (bg === "white")
-    throw new Error("Cannot blend with white background");
-  const node = parseTokenValue(str);
-  if (!node || node.type !== "color")
-    throw new Error(`Invalid color token value: ${str}`);
-  let hex = "";
-  if (node.key === "black" && (hex = renderColorHex(colorPalette.black)), node.key === "white" && (hex = renderColorHex(colorPalette.white)), node.hue && node.tint && (hex = renderColorHex(colorPalette[node.hue][node.tint])), !hex)
-    throw new Error(`Invalid color token value: ${str}`);
-  const hexBeforeMix = hex, mixOptions = {
-    blendMode,
-    bg,
-    black: renderColorHex(colorPalette.black),
-    // opacity: node.opacity,
-    white: renderColorHex(colorPalette.white)
-  };
-  try {
-    if (hex = mixThemeColor(hex, mixOptions), bg && node.mix !== void 0) {
-      const from = hexToRgb(bg), to = hexToRgb(hex);
-      hex = rgbToHex(mix(from, to, node.mix));
+    skeleton: {
+      from: state.skeleton?.from || state.border,
+      to: state.skeleton?.to || state.border
     }
-  } catch (err) {
-    throw console.warn("could not blend", hex, mixOptions), err;
-  }
-  return hex === "#aN" && (console.warn(`invalid color token value: ${str}`), hex = hexBeforeMix), node.opacity !== void 0 && (hex = rgba(hex, node.opacity)), hex;
-}
-function renderColorHex(color2) {
-  return typeof color2 == "string" ? color2 : color2.hex;
+  };
 }
-function renderThemeColorSchemes(value, config) {
-  const colorPalette = config?.palette ?? defaultColorPalette;
+function inputStatesThemeColor_v0_v2(states) {
   return {
-    light: renderThemeColorScheme(colorPalette, value.light),
-    dark: renderThemeColorScheme(colorPalette, value.dark)
+    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 renderThemeColorScheme(colorPalette, value) {
-  const toneEntries = Object.entries(value), [, transparentTone] = toneEntries.find(([k]) => k === "transparent"), [, defaultTone] = toneEntries.find(([k]) => k === "default"), renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette }), renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette }), bg = renderedDefaultTone.bg;
-  if (bg === "white")
-    throw new Error("Cannot blend with white background");
-  return Object.fromEntries([
-    ["transparent", renderedTransparentTone],
-    ["default", renderedDefaultTone],
-    ...toneEntries.filter(([k]) => k !== "default" && k !== "transparent").map(([k, v]) => [k, renderThemeColor(v, { bg, colorPalette })])
-  ]);
-}
-function renderThemeColor(value, options) {
-  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
-  }), selectable = renderThemeColorSelectable(value.selectable, {
-    colorPalette,
-    baseBg,
-    blendMode
-  }), shadow = {
-    outline: renderColorValue(value.shadow.outline, colorOptions),
-    umbra: renderColorValue(value.shadow.umbra, {
-      ...colorOptions,
-      bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
-    }),
-    penumbra: renderColorValue(value.shadow.penumbra, {
-      ...colorOptions,
-      bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
-    }),
-    ambient: renderColorValue(value.shadow.ambient, {
-      ...colorOptions,
-      bg: void 0,
-      colorPalette: { ...colorPalette, black: "#000000" }
-    })
-  };
+function inputStateThemeColor_v0_v2(state) {
   return {
-    _blend: blendMode,
-    _dark: value._dark,
-    accent: {
-      fg: renderColorValue(value.accent.fg, colorOptions)
-    },
-    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
-    backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, { baseBg, colorPalette, blendMode }),
-    bg: baseBg,
-    border: renderColorValue(value.border, colorOptions),
-    button,
-    code: {
-      bg: renderColorValue(value.code.bg, colorOptions),
-      fg: renderColorValue(value.code.fg, colorOptions)
-    },
-    fg: renderColorValue(value.fg, colorOptions),
-    focusRing: renderColorValue(value.focusRing, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions),
-    input: renderThemeColorInput(value.input, { baseBg, colorPalette, blendMode }),
-    kbd: renderThemeColorKBD(value.kbd, { baseBg, colorPalette, blendMode }),
-    link: {
-      fg: renderColorValue(value.link.fg, colorOptions)
-    },
+    bg: state.bg,
+    border: state.border,
+    fg: state.fg,
     muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions),
-      fg: renderColorValue(value.muted.fg, colorOptions)
-    },
-    shadow,
-    skeleton: {
-      from: renderColorValue(value.skeleton.from, colorOptions),
-      to: renderColorValue(value.skeleton.to, colorOptions)
+      bg: state.bg2
     },
-    syntax: renderSyntaxColorTheme(value.syntax, { baseBg, colorPalette, blendMode }),
-    selectable
-  };
-}
-function renderThemeColorKBD(value, options) {
-  const { baseBg, blendMode, colorPalette } = options, rootOptions = {
-    bg: baseBg,
-    blendMode,
-    colorPalette
-  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
-    bg,
-    blendMode,
-    colorPalette
-  };
-  return {
-    bg,
-    fg: renderColorValue(value.fg, colorOptions),
-    border: renderColorValue(value.border, colorOptions)
-  };
-}
-function renderThemeColorAvatar(value, options) {
-  return {
-    gray: renderThemeColorAvatarColor(value.gray, options),
-    blue: renderThemeColorAvatarColor(value.blue, options),
-    purple: renderThemeColorAvatarColor(value.purple, options),
-    magenta: renderThemeColorAvatarColor(value.magenta, options),
-    red: renderThemeColorAvatarColor(value.red, options),
-    orange: renderThemeColorAvatarColor(value.orange, options),
-    yellow: renderThemeColorAvatarColor(value.yellow, options),
-    green: renderThemeColorAvatarColor(value.green, options),
-    cyan: renderThemeColorAvatarColor(value.cyan, options)
-  };
-}
-function renderThemeColorAvatarColor(value, options) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
-    bg,
-    blendMode,
-    colorPalette
-  };
-  return {
-    _blend: blendMode,
-    bg,
-    fg: renderColorValue(value.fg, colorOptions)
-  };
-}
-function renderThemeColorBadge(value, options) {
-  return {
-    default: renderThemeColorBadgeColor(value.default, options),
-    primary: renderThemeColorBadgeColor(value.primary, options),
-    positive: renderThemeColorBadgeColor(value.positive, options),
-    caution: renderThemeColorBadgeColor(value.caution, options),
-    critical: renderThemeColorBadgeColor(value.critical, options)
-  };
-}
-function renderThemeColorBadgeColor(value, options) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
-    bg,
-    blendMode,
-    colorPalette
-  };
-  return {
-    bg,
-    dot: renderColorValue(value.dot, colorOptions),
-    fg: renderColorValue(value.fg, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions)
-  };
-}
-function renderThemeColorButton(value, options) {
-  return {
-    default: renderThemeColorButtonTones(value.default, options),
-    ghost: renderThemeColorButtonTones(value.ghost, options),
-    bleed: renderThemeColorButtonTones(value.bleed, options)
-  };
-}
-function renderThemeColorButtonTones(value, options) {
-  return {
-    default: renderThemeColorButtonStates(value.default, options),
-    primary: renderThemeColorButtonStates(value.primary, options),
-    positive: renderThemeColorButtonStates(value.positive, options),
-    caution: renderThemeColorButtonStates(value.caution, options),
-    critical: renderThemeColorButtonStates(value.critical, options)
-  };
-}
-function renderThemeColorButtonStates(value, options) {
-  return {
-    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)
+    placeholder: state.placeholder
   };
 }
-function renderThemeColorState(value, options) {
-  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
-    bg,
-    blendMode,
-    colorPalette
-  };
-  return {
-    _blend: blendMode,
-    accent: {
-      fg: renderColorValue(value.accent.fg, colorOptions)
-    },
-    avatar: renderThemeColorAvatar(value.avatar, { baseBg: bg, colorPalette, blendMode }),
-    badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
-    bg,
-    border: renderColorValue(value.border, colorOptions),
-    code: {
-      bg: renderColorValue(value.code.bg, colorOptions),
-      fg: renderColorValue(value.code.fg, colorOptions)
-    },
-    fg: renderColorValue(value.fg, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions),
-    link: {
-      fg: renderColorValue(value.link.fg, colorOptions)
+const cache$2 = /* @__PURE__ */ new WeakMap();
+function v0_v2(v0) {
+  if (v0.v2) return v0.v2;
+  const cached_v2 = cache$2.get(v0);
+  if (cached_v2) return cached_v2;
+  const {
+    avatar,
+    button,
+    color,
+    container,
+    fonts: font,
+    input,
+    layer,
+    media,
+    radius,
+    shadows: shadow,
+    space,
+    styles: style
+  } = v0, v2 = {
+    _version: 2,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar
     },
-    muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions),
-      fg: renderColorValue(value.muted.fg, colorOptions)
+    button: {
+      ...defaultThemeConfig.button,
+      ...button
     },
-    kbd: {
-      bg: renderColorValue(value.kbd.bg, colorOptions),
-      fg: renderColorValue(value.kbd.fg, colorOptions),
-      border: renderColorValue(value.kbd.border, colorOptions)
+    card: defaultThemeConfig.card,
+    color: {
+      light: {
+        transparent: themeColor_v0_v2(color.light.transparent),
+        default: themeColor_v0_v2(color.light.default),
+        neutral: themeColor_v0_v2(color.light.transparent),
+        primary: themeColor_v0_v2(color.light.primary),
+        suggest: themeColor_v0_v2(color.light.primary),
+        positive: themeColor_v0_v2(color.light.positive),
+        caution: themeColor_v0_v2(color.light.caution),
+        critical: themeColor_v0_v2(color.light.critical)
+      },
+      dark: {
+        transparent: themeColor_v0_v2(color.dark.transparent),
+        default: themeColor_v0_v2(color.dark.default),
+        neutral: themeColor_v0_v2(color.dark.transparent),
+        primary: themeColor_v0_v2(color.dark.primary),
+        suggest: themeColor_v0_v2(color.dark.primary),
+        positive: themeColor_v0_v2(color.dark.positive),
+        caution: themeColor_v0_v2(color.dark.caution),
+        critical: themeColor_v0_v2(color.dark.critical)
+      }
     },
-    skeleton: {
-      from: renderColorValue(value.skeleton?.from, colorOptions),
-      to: renderColorValue(value.skeleton?.to, colorOptions)
-    }
-  };
-}
-function renderThemeColorInput(value, options) {
-  return {
-    default: renderInputStatesColorTheme(value.default, options),
-    invalid: renderInputStatesColorTheme(value.invalid, options)
-  };
-}
-function renderInputStatesColorTheme(value, options) {
-  return {
-    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 };
-  return {
-    _blend: blendMode,
-    bg,
-    border: renderColorValue(value.border, colorOptions),
-    fg: renderColorValue(value.fg, colorOptions),
-    muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions)
+    container,
+    font,
+    input: {
+      ...defaultThemeConfig.input,
+      ...input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...input.checkbox
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...input.radio
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...input.switch
+      }
     },
-    placeholder: renderColorValue(value.placeholder, colorOptions)
-  };
-}
-function renderThemeColorSelectable(value, options) {
-  return {
-    default: renderThemeColorSelectableStates(value.default, options),
-    primary: renderThemeColorSelectableStates(value.primary, options),
-    positive: renderThemeColorSelectableStates(value.positive, options),
-    caution: renderThemeColorSelectableStates(value.caution, options),
-    critical: renderThemeColorSelectableStates(value.critical, options)
-  };
-}
-function renderThemeColorSelectableStates(value, options) {
-  return {
-    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 };
-  return {
-    atrule: renderColorValue(value.atrule, colorOptions),
-    attrName: renderColorValue(value.attrName, colorOptions),
-    attrValue: renderColorValue(value.attrValue, colorOptions),
-    attribute: renderColorValue(value.attribute, colorOptions),
-    boolean: renderColorValue(value.boolean, colorOptions),
-    builtin: renderColorValue(value.builtin, colorOptions),
-    cdata: renderColorValue(value.cdata, colorOptions),
-    char: renderColorValue(value.char, colorOptions),
-    class: renderColorValue(value.class, colorOptions),
-    className: renderColorValue(value.className, colorOptions),
-    comment: renderColorValue(value.comment, colorOptions),
-    constant: renderColorValue(value.constant, colorOptions),
-    deleted: renderColorValue(value.deleted, colorOptions),
-    doctype: renderColorValue(value.doctype, colorOptions),
-    entity: renderColorValue(value.entity, colorOptions),
-    function: renderColorValue(value.function, colorOptions),
-    hexcode: renderColorValue(value.hexcode, colorOptions),
-    id: renderColorValue(value.id, colorOptions),
-    important: renderColorValue(value.important, colorOptions),
-    inserted: renderColorValue(value.inserted, colorOptions),
-    keyword: renderColorValue(value.keyword, colorOptions),
-    number: renderColorValue(value.number, colorOptions),
-    operator: renderColorValue(value.operator, colorOptions),
-    prolog: renderColorValue(value.prolog, colorOptions),
-    property: renderColorValue(value.property, colorOptions),
-    pseudoClass: renderColorValue(value.pseudoClass, colorOptions),
-    pseudoElement: renderColorValue(value.pseudoElement, colorOptions),
-    punctuation: renderColorValue(value.punctuation, colorOptions),
-    regex: renderColorValue(value.regex, colorOptions),
-    selector: renderColorValue(value.selector, colorOptions),
-    string: renderColorValue(value.string, colorOptions),
-    symbol: renderColorValue(value.symbol, colorOptions),
-    tag: renderColorValue(value.tag, colorOptions),
-    unit: renderColorValue(value.unit, colorOptions),
-    url: renderColorValue(value.url, colorOptions),
-    variable: renderColorValue(value.variable, colorOptions)
-  };
-}
-function buildTheme(config) {
-  const colorTheme = buildColorTheme(config), v2 = {
-    _version: 2,
-    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 ?? defaultThemeConfig.container,
-    font: config?.font ?? defaultThemeFonts,
-    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
+    layer: layer ?? defaultThemeConfig.layer,
+    media,
+    radius,
+    shadow,
+    space,
+    style
   };
-  return v2_v0(v2);
+  return cache$2.set(v0, v2), v2;
 }
-const cache = /* @__PURE__ */ new Map();
+const cache$1 = /* @__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 || 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 = {
+  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, color_v2_9 = themeColor_v0_v2_9(color_v2), layer_v2 = v2.layer || defaultThemeConfig.layer, theme = {
     sanity: {
       ...v0,
       color: color_v0,
@@ -3004,7 +3068,7 @@ function getScopedTheme(themeProp, scheme, tone) {
       v2: {
         ...v2,
         _resolved: !0,
-        color: color_v2,
+        color: color_v2_9,
         layer: layer_v2
       }
     }
@@ -3012,17 +3076,62 @@ function getScopedTheme(themeProp, scheme, tone) {
   return _setCachedTheme(themeProp, scheme, tone, theme), theme;
 }
 function _getCachedTheme(rootTheme, scheme, tone) {
-  const schemeCache = cache.get(scheme);
+  const schemeCache = cache$1.get(scheme);
   if (!schemeCache) return;
   const toneCache = schemeCache.get(tone);
   if (toneCache)
     return toneCache.get(rootTheme);
 }
 function _setCachedTheme(rootTheme, scheme, tone, theme) {
-  cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
-  const schemeCache = cache.get(scheme);
+  cache$1.has(scheme) || cache$1.set(scheme, /* @__PURE__ */ new Map());
+  const schemeCache = cache$1.get(scheme);
   schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
 }
+const cache = /* @__PURE__ */ new WeakMap();
+function getTheme_v2(theme) {
+  if (theme.sanity.v2?._resolved) return theme.sanity.v2;
+  const cached_v2 = cache.get(theme);
+  if (cached_v2) return cached_v2;
+  const v2 = {
+    _version: 2,
+    _resolved: !0,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...theme.sanity.button
+    },
+    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
+      }
+    },
+    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.set(theme, v2), v2;
+}
 export {
   AVATAR_SIZE,
   COLOR_CONFIG_AVATAR_COLORS,
@@ -3039,6 +3148,7 @@ export {
   FONT_HEADING_SIZE,
   FONT_LABEL_SIZE,
   FONT_TEXT_SIZE,
+  HUES,
   RADIUS,
   SHADOW,
   SPACE,
@@ -3051,8 +3161,12 @@ export {
   THEME_COLOR_SCHEMES,
   THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
+  TINTS,
+  buildColor_v3,
   buildTheme,
+  buildTheme_v3,
   createColorTheme,
+  defaultTokens,
   getContrastRatio,
   getScopedTheme,
   getTheme_v2,
@@ -3070,19 +3184,17 @@ export {
   isColorTintKey,
   isColorTokenValue,
   isColorValue,
-  is_v0,
-  is_v2,
   mix,
   multiply,
   parseColor,
   parseTokenKey,
   parseTokenValue,
+  renderColor,
+  resolveTokens,
   rgbToHex,
   rgbToHsl,
   rgba,
   rgbaToRGBA,
-  screen,
-  v0_v2,
-  v2_v0
+  screen
 };
 //# sourceMappingURL=theme.mjs.map