@sanity/ui 2.8.13-canary.1 → 2.8.14

package/dist/theme.esm.js

@@ -57,226 +57,46 @@ 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" })
     }
   };
 }
@@ -467,10 +287,7 @@ 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,
@@ -501,12 +318,7 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       to: dark ? white : black
     }
   },
-  solid: ({
-    base,
-    dark,
-    state,
-    tone
-  }) => {
+  solid: ({ base, dark, state, tone }) => {
     const color2 = colors[tone];
     return state === "hovered" ? {
       bg: dark ? color2.light : color2.dark,
@@ -550,12 +362,7 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       skeleton: base.skeleton
     };
   },
-  muted: ({
-    base,
-    dark,
-    state,
-    tone
-  }) => {
+  muted: ({ base, dark, state, tone }) => {
     const color2 = colors[tone];
     return state === "hovered" ? {
       bg: dark ? color2.darker : color2.lighter,
@@ -599,12 +406,7 @@ 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",
@@ -652,9 +454,7 @@ 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,
@@ -682,14 +482,8 @@ 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,
@@ -804,283 +598,64 @@ 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)
@@ -1097,10 +672,7 @@ 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),
@@ -1109,10 +681,7 @@ 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
   };
@@ -1126,42 +695,48 @@ 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',
@@ -1171,49 +746,56 @@ const defaultThemeFonts = {
       semibold: 900,
       bold: 900
     },
-    sizes: [{
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 13,
-      iconSize: 17,
-      lineHeight: 19,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 23,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 21,
-      iconSize: 33,
-      lineHeight: 29,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 27,
-      iconSize: 41,
-      lineHeight: 35,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 9.5,
-      descenderHeight: 8.5,
-      fontSize: 33,
-      iconSize: 49,
-      lineHeight: 41,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 10.5,
-      descenderHeight: 9.5,
-      fontSize: 38,
-      iconSize: 53,
-      lineHeight: 47,
-      letterSpacing: 0
-    }]
+    sizes: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: 0
+      }
+    ]
   },
   label: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
@@ -1223,49 +805,56 @@ const defaultThemeFonts = {
       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
-    }]
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5
+      }
+    ]
   },
   text: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
@@ -1275,42 +864,48 @@ 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: 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
-    }]
+    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
+      }
+    ]
   }
 };
 function is_v0(themeProp) {
@@ -1502,7 +1097,20 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
-const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = ["transparent", "default", "primary", "positive", "caution", "critical"], THEME_COLOR_STATE_TONES = ["default", "primary", "positive", "caution", "critical"], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "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);
 }
@@ -1515,7 +1123,33 @@ function isColorTintKey(str) {
 function isColorButtonMode(str) {
   return THEME_COLOR_BUTTON_MODES.includes(str);
 }
-const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+const COLOR_CONFIG_STATE_KEYS = [
+  "_hue",
+  "bg",
+  "fg",
+  "border",
+  "focusRing",
+  "muted/fg",
+  "accent/fg",
+  "link/fg",
+  "code/bg",
+  "code/fg",
+  "skeleton/from",
+  "skeleton/to",
+  "status/dot",
+  "status/icon"
+], COLOR_CONFIG_CARD_KEYS = [
+  ...COLOR_CONFIG_STATE_KEYS,
+  "_hue",
+  "bg",
+  "fg",
+  "border",
+  "focusRing",
+  "shadow/outline",
+  "shadow/umbra",
+  "shadow/penumbra",
+  "shadow/ambient"
+], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
 function parseTokenKey(str) {
   const segments = str.split("/"), segment0 = segments.shift() || "";
   if (isColorConfigBaseTone(segment0)) {
@@ -1681,16 +1315,10 @@ function compileColorTokenValue(node) {
 }
 const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
 function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
-  const {
-    hue,
-    scheme
-  } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  const { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
   if (!node || node.type !== "color")
     throw new Error(`Invalid color token: ${value[0]}`);
-  return compileColorTokenValue({
-    ...node,
-    hue: node.hue || hue
-  });
+  return compileColorTokenValue({ ...node, hue: node.hue || hue });
 }
 const defaultColorTokens = {
   base: {
@@ -1765,24 +1393,16 @@ const defaultColorTokens = {
         fg: ["600", "400"]
       }
     },
-    primary: {
-      _hue: "blue"
-    },
+    primary: { _hue: "blue" },
     positive: {
       _hue: "green",
-      shadow: {
-        outline: ["500/0.4", "500/0.4"]
-      }
+      shadow: { outline: ["500/0.4", "500/0.4"] }
     },
     caution: {
       _hue: "yellow",
-      shadow: {
-        outline: ["600/0.3", "500/0.4"]
-      }
+      shadow: { outline: ["600/0.3", "500/0.4"] }
     },
-    critical: {
-      _hue: "red"
-    }
+    critical: { _hue: "red" }
   },
   button: {
     default: {
@@ -2127,7 +1747,7 @@ const defaultColorTokens = {
       "*": {
         _blend: ["multiply", "screen"],
         bg: ["white", "black"],
-        border: ["200", "800"],
+        border: ["200", "700"],
         fg: ["black", "200"],
         muted: {
           bg: ["50", "950"]
@@ -2143,6 +1763,7 @@ const defaultColorTokens = {
         fg: ["800", "200"]
       },
       disabled: {
+        bg: ["50", "950"],
         fg: ["400", "600"],
         border: ["100", "900"],
         placeholder: ["200", "800 50%"]
@@ -2379,33 +2000,15 @@ function resolveBaseColorTones(inputTokens, tone) {
     ...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)
+      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: {
@@ -2455,38 +2058,25 @@ function resolveButtonModeColorTokens(inputTokens, mode, tone) {
   return tokens;
 }
 function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
-  const spec = merge(inputTokens?.button?.[mode]?.["*"]?.["*"], inputTokens?.button?.[mode]?.[tone]?.["*"], inputTokens?.button?.[mode]?.["*"]?.[state], inputTokens?.button?.[mode]?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+  const spec = merge(
+    inputTokens?.button?.[mode]?.["*"]?.["*"],
+    inputTokens?.button?.[mode]?.[tone]?.["*"],
+    inputTokens?.button?.[mode]?.["*"]?.[state],
+    inputTokens?.button?.[mode]?.[tone]?.[state]
+  ), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
     ...spec,
     _hue: hue,
     avatar: {
-      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)
+      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: {
@@ -2530,11 +2120,13 @@ function resolveInputModeColorTokens(inputTokens, mode) {
   return states;
 }
 function resolveInputStateColorTokens(inputTokens, mode, state) {
-  const spec = merge(inputTokens?.input?.["*"]?.["*"], inputTokens?.input?.[mode]?.["*"], inputTokens?.input?.["*"]?.[state], inputTokens?.input?.[mode]?.[state]), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
-  return {
-    ...spec,
-    _hue: hue
-  };
+  const spec = merge(
+    inputTokens?.input?.["*"]?.["*"],
+    inputTokens?.input?.[mode]?.["*"],
+    inputTokens?.input?.["*"]?.[state],
+    inputTokens?.input?.[mode]?.[state]
+  ), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
+  return { ...spec, _hue: hue };
 }
 function resolveSelectableColorTokens(inputTokens) {
   const tokens = {};
@@ -2551,38 +2143,25 @@ function resolveSelectableToneColorTokens(inputTokens, tone) {
   return states;
 }
 function resolveSelectableStateColorTokens(inputTokens, tone, state) {
-  const spec = merge(inputTokens?.selectable?.["*"]?.["*"], inputTokens?.selectable?.[tone]?.["*"], inputTokens?.selectable?.["*"]?.[state], inputTokens?.selectable?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+  const spec = merge(
+    inputTokens?.selectable?.["*"]?.["*"],
+    inputTokens?.selectable?.[tone]?.["*"],
+    inputTokens?.selectable?.["*"]?.[state],
+    inputTokens?.selectable?.[tone]?.[state]
+  ), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
     ...spec,
     _hue: hue,
     avatar: {
-      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)
+      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: {
@@ -2619,71 +2198,35 @@ function buildColorTheme(config) {
     color: resolveColorTokens(config?.color)
   };
   return {
-    light: buildColorScheme({
-      scheme: "light"
-    }, resolvedConfig),
-    dark: buildColorScheme({
-      scheme: "dark"
-    }, resolvedConfig)
+    light: buildColorScheme({ scheme: "light" }, resolvedConfig),
+    dark: buildColorScheme({ scheme: "dark" }, resolvedConfig)
   };
 }
 function buildColorScheme(options, config) {
-  const {
-    scheme
-  } = options;
+  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)
+    transparent: buildCardColorTheme({ scheme, tone: "transparent" }, config),
+    default: buildCardColorTheme({ scheme, tone: "default" }, config),
+    primary: buildCardColorTheme({ scheme, tone: "primary" }, config),
+    positive: buildCardColorTheme({ scheme, tone: "positive" }, config),
+    caution: buildCardColorTheme({ scheme, tone: "caution" }, config),
+    critical: buildCardColorTheme({ scheme, tone: "critical" }, config)
   };
 }
 function buildCardColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options, tokens = config?.color?.base?.[tone], context = {
-    hue: tokens?._hue || "gray",
-    scheme
-  };
+  const { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = { hue: tokens?._hue || "gray", scheme };
   return {
     _blend: (tokens?._blend || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
     _dark: scheme === "dark",
     accent: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({
-      scheme
-    }, tokens),
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
     backdrop: resolveColorTokenValue(context, tokens?.backdrop),
-    badge: buildBadgeColorTheme(tokens?.badge, {
-      scheme
-    }, config),
+    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
-    button: buildButtonColorTheme({
-      scheme
-    }, config),
+    button: buildButtonColorTheme({ scheme }, config),
     code: {
       bg: resolveColorTokenValue(context, tokens?.code?.bg),
       fg: resolveColorTokenValue(context, tokens?.code?.fg)
@@ -2691,10 +2234,7 @@ function buildCardColorTheme(options, config) {
     fg: resolveColorTokenValue(context, tokens?.fg),
     focusRing: resolveColorTokenValue(context, tokens?.focusRing),
     icon: resolveColorTokenValue(context, tokens?.icon),
-    input: buildInputColorTheme({
-      scheme,
-      tone
-    }, config),
+    input: buildInputColorTheme({ scheme, tone }, config),
     kbd: {
       bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
       fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
@@ -2707,30 +2247,17 @@ function buildCardColorTheme(options, config) {
       bg: resolveColorTokenValue(context, tokens?.muted?.bg),
       fg: resolveColorTokenValue(context, tokens?.muted?.fg)
     },
-    selectable: buildSelectableColorTheme({
-      scheme
-    }, config),
-    shadow: buildShadowColorTheme({
-      scheme,
-      tone
-    }, config),
+    selectable: buildSelectableColorTheme({ scheme }, config),
+    shadow: buildShadowColorTheme({ scheme, tone }, config),
     skeleton: {
       from: resolveColorTokenValue(context, tokens?.skeleton?.from),
       to: resolveColorTokenValue(context, tokens?.skeleton?.to)
     },
-    syntax: buildSyntaxColorTheme({
-      scheme
-    }, config)
+    syntax: buildSyntaxColorTheme({ scheme }, config)
   };
 }
 function buildShadowColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options, tokens = config?.color?.base?.[tone], context = {
-    hue: tokens?._hue || "gray",
-    scheme
-  };
+  const { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = { hue: tokens?._hue || "gray", scheme };
   return {
     outline: resolveColorTokenValue(context, tokens?.shadow?.outline),
     umbra: resolveColorTokenValue(context, tokens?.shadow?.umbra),
@@ -2739,56 +2266,21 @@ function buildShadowColorTheme(options, config) {
   };
 }
 function buildAvatarColorTheme(options, stateTokens) {
-  const {
-    scheme
-  } = options;
+  const { scheme } = options;
   return {
-    gray: _buildAvatarColorTheme({
-      color: "gray",
-      scheme
-    }, stateTokens),
-    blue: _buildAvatarColorTheme({
-      color: "blue",
-      scheme
-    }, stateTokens),
-    purple: _buildAvatarColorTheme({
-      color: "purple",
-      scheme
-    }, stateTokens),
-    magenta: _buildAvatarColorTheme({
-      color: "magenta",
-      scheme
-    }, stateTokens),
-    red: _buildAvatarColorTheme({
-      color: "red",
-      scheme
-    }, stateTokens),
-    orange: _buildAvatarColorTheme({
-      color: "orange",
-      scheme
-    }, stateTokens),
-    yellow: _buildAvatarColorTheme({
-      color: "yellow",
-      scheme
-    }, stateTokens),
-    green: _buildAvatarColorTheme({
-      color: "green",
-      scheme
-    }, stateTokens),
-    cyan: _buildAvatarColorTheme({
-      color: "cyan",
-      scheme
-    }, stateTokens)
+    gray: _buildAvatarColorTheme({ color: "gray", scheme }, stateTokens),
+    blue: _buildAvatarColorTheme({ color: "blue", scheme }, stateTokens),
+    purple: _buildAvatarColorTheme({ color: "purple", scheme }, stateTokens),
+    magenta: _buildAvatarColorTheme({ color: "magenta", scheme }, stateTokens),
+    red: _buildAvatarColorTheme({ color: "red", scheme }, stateTokens),
+    orange: _buildAvatarColorTheme({ color: "orange", scheme }, stateTokens),
+    yellow: _buildAvatarColorTheme({ color: "yellow", scheme }, stateTokens),
+    green: _buildAvatarColorTheme({ color: "green", scheme }, stateTokens),
+    cyan: _buildAvatarColorTheme({ color: "cyan", scheme }, stateTokens)
   };
 }
 function _buildAvatarColorTheme(options, stateTokens) {
-  const {
-    color: color2,
-    scheme
-  } = options, tokens = stateTokens?.avatar?.[color2], context = {
-    hue: tokens?._hue || "gray",
-    scheme
-  };
+  const { color: color2, scheme } = options, tokens = stateTokens?.avatar?.[color2], context = { hue: tokens?._hue || "gray", scheme };
   return {
     _blend: (tokens?._blend || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
     bg: resolveColorTokenValue(context, tokens?.bg),
@@ -2796,40 +2288,17 @@ function _buildAvatarColorTheme(options, stateTokens) {
   };
 }
 function buildBadgeColorTheme(tokens, options, config) {
-  const {
-    scheme
-  } = options;
+  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)
+    default: _buildBadgeColorTheme(tokens, { scheme, tone: "default" }, config),
+    primary: _buildBadgeColorTheme(tokens, { scheme, tone: "primary" }, config),
+    positive: _buildBadgeColorTheme(tokens, { scheme, tone: "positive" }, config),
+    caution: _buildBadgeColorTheme(tokens, { scheme, tone: "caution" }, config),
+    critical: _buildBadgeColorTheme(tokens, { scheme, tone: "critical" }, config)
   };
 }
 function _buildBadgeColorTheme(parentTokens, options, config) {
-  const {
-    scheme,
-    tone
-  } = options, tokens = parentTokens?.[tone], context = {
-    hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray",
-    scheme
-  };
+  const { scheme, tone } = options, tokens = parentTokens?.[tone], context = { hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray", scheme };
   return {
     bg: resolveColorTokenValue(context, tokens?.bg),
     fg: resolveColorTokenValue(context, tokens?.fg),
@@ -2838,65 +2307,32 @@ function _buildBadgeColorTheme(parentTokens, options, config) {
   };
 }
 function buildButtonColorTheme(options, config) {
-  const {
-    scheme
-  } = options, modes = {};
+  const { scheme } = options, modes = {};
   for (const mode of THEME_COLOR_BUTTON_MODES)
-    modes[mode] = buildButtonTonesColorTheme({
-      scheme,
-      mode
-    }, config);
+    modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
   return modes;
 }
 function buildButtonTonesColorTheme(options, config) {
-  const {
-    mode,
-    scheme
-  } = options, tones2 = {};
+  const { mode, scheme } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildButtonStatesColorTheme({
-      mode,
-      scheme,
-      tone
-    }, config);
+    tones2[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
   return tones2;
 }
 function buildButtonStatesColorTheme(options, config) {
-  const {
-    mode,
-    scheme,
-    tone
-  } = options, states = {};
+  const { mode, scheme, tone } = options, states = {};
   for (const state of THEME_COLOR_STATES)
-    states[state] = buildButtonStateColorTheme({
-      mode,
-      tone,
-      scheme,
-      state
-    }, config);
+    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
-  };
+  const { mode, tone, scheme, state } = options, tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     accent: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({
-      scheme
-    }, tokens),
-    badge: buildBadgeColorTheme(tokens?.badge, {
-      scheme
-    }, config),
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
     code: {
@@ -2924,66 +2360,23 @@ function buildButtonStateColorTheme(options, config) {
   };
 }
 function buildInputColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options;
+  const { scheme, tone } = options;
   return {
-    default: buildInputStatesColorTheme({
-      mode: "default",
-      scheme,
-      tone
-    }, config),
-    invalid: buildInputStatesColorTheme({
-      mode: "invalid",
-      scheme,
-      tone
-    }, config)
+    default: buildInputStatesColorTheme({ mode: "default", scheme, tone }, config),
+    invalid: buildInputStatesColorTheme({ mode: "invalid", scheme, tone }, config)
   };
 }
 function buildInputStatesColorTheme(options, config) {
-  const {
-    mode,
-    scheme,
-    tone
-  } = options;
+  const { mode, scheme, tone } = options;
   return {
-    enabled: buildInputStateColorTheme({
-      mode,
-      scheme,
-      state: "enabled",
-      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)
+    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
-  };
+  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),
@@ -2996,49 +2389,26 @@ function buildInputStateColorTheme(options, config) {
   };
 }
 function buildSelectableColorTheme(options, config) {
-  const {
-    scheme
-  } = options, tones2 = {};
+  const { scheme } = options, tones2 = {};
   for (const tone of THEME_COLOR_STATE_TONES)
-    tones2[tone] = buildSelectableStatesColorTheme({
-      scheme,
-      tone
-    }, config);
+    tones2[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
   return tones2;
 }
 function buildSelectableStatesColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options, states = {};
+  const { scheme, tone } = options, states = {};
   for (const state of THEME_COLOR_STATES)
-    states[state] = buildSelectableStateColorTheme({
-      tone,
-      scheme,
-      state
-    }, config);
+    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
-  };
+  const { scheme, state, tone } = options, tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     accent: {
       fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    avatar: buildAvatarColorTheme({
-      scheme
-    }, tokens),
-    badge: buildBadgeColorTheme(tokens?.badge, {
-      scheme
-    }, config),
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
     bg: resolveColorTokenValue(context, tokens?.bg),
     border: resolveColorTokenValue(context, tokens?.border),
     code: {
@@ -3066,12 +2436,7 @@ function buildSelectableStateColorTheme(options, config) {
   };
 }
 function buildSyntaxColorTheme(options, config) {
-  const {
-    scheme
-  } = options, tokens = config?.color?.syntax, context = {
-    hue: "gray",
-    scheme
-  };
+  const { scheme } = options, tokens = config?.color?.syntax, context = { hue: "gray", scheme };
   return {
     atrule: resolveColorTokenValue(context, tokens?.atrule),
     attrName: resolveColorTokenValue(context, tokens?.attrName),
@@ -3186,19 +2551,11 @@ function rgbToHex(color2) {
   const r = round(clamp(Math.round(color2.r), 0, 255)), g = round(clamp(Math.round(color2.g), 0, 255)), b = round(clamp(Math.round(color2.b), 0, 255));
   return "a" in color2 ? `rgba(${r},${g},${b},${color2.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
-function rgbToHsl({
-  r,
-  g,
-  b
-}) {
+function rgbToHsl({ r, g, b }) {
   r /= 255, g /= 255, b /= 255;
   const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
   let h = 0, s = 0, l = 0;
-  return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), {
-    h,
-    s,
-    l
-  };
+  return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), { h, s, l };
 }
 function hslToRgb(hsl) {
   const s = hsl.s / 100, l = hsl.l / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1)), m = l - c / 2;
@@ -3223,18 +2580,10 @@ function parseHsl(str) {
   const res = HSL_RE.exec(str);
   if (!res)
     throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
-  return {
-    h: parseInt(res[1]),
-    s: parseFloat(res[3]),
-    l: parseFloat(res[5])
-  };
+  return { h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5]) };
 }
 function parseColor(color2) {
-  if (!color2) return {
-    r: 0,
-    g: 0,
-    b: 0
-  };
+  if (!color2) return { r: 0, g: 0, b: 0 };
   if (typeof color2 != "string")
     throw new Error("parseColor: expected a string");
   if (isHex(color2))
@@ -3249,11 +2598,7 @@ function getContrastRatio(bg, fg) {
   const rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
   return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
 }
-function rgb_lrgb({
-  r,
-  g,
-  b
-}) {
+function rgb_lrgb({ r, g, b }) {
   return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
 }
 function rgb_lrgb1(v) {
@@ -3268,9 +2613,7 @@ function rgba(color2, a) {
 }
 const RGB_RANGE = [0, 255];
 function mixThemeColor(value, options) {
-  const {
-    blendMode
-  } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
+  const { blendMode } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
     r: [black2.r, white2.r],
     g: [black2.g, white2.g],
     b: [black2.b, white2.b]
@@ -3290,11 +2633,7 @@ function mixThemeColor(value, options) {
   return rgbToHex(v);
 }
 function renderColorValue(str, options) {
-  const {
-    bg,
-    blendMode,
-    colorPalette
-  } = options;
+  const { bg, blendMode, colorPalette } = options;
   if (bg === "white")
     throw new Error("Cannot blend with white background");
   const node = parseTokenValue(str);
@@ -3331,31 +2670,17 @@ function renderThemeColorSchemes(value, config) {
   };
 }
 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;
+  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
-  })])]);
+  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, {
+  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
@@ -3368,26 +2693,17 @@ function renderThemeColor(value, options) {
     umbra: renderColorValue(value.shadow.umbra, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     }),
     penumbra: renderColorValue(value.shadow.penumbra, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     }),
     ambient: renderColorValue(value.shadow.ambient, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     })
   };
   return {
@@ -3396,17 +2712,9 @@ function renderThemeColor(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
     backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    badge: renderThemeColorBadge(value.badge, { baseBg, colorPalette, blendMode }),
     bg: baseBg,
     border: renderColorValue(value.border, colorOptions),
     button,
@@ -3417,16 +2725,8 @@ function renderThemeColor(value, options) {
     fg: renderColorValue(value.fg, colorOptions),
     focusRing: renderColorValue(value.focusRing, colorOptions),
     icon: renderColorValue(value.icon, colorOptions),
-    input: renderThemeColorInput(value.input, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
-    kbd: renderThemeColorKBD(value.kbd, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    input: renderThemeColorInput(value.input, { baseBg, colorPalette, blendMode }),
+    kbd: renderThemeColorKBD(value.kbd, { baseBg, colorPalette, blendMode }),
     link: {
       fg: renderColorValue(value.link.fg, colorOptions)
     },
@@ -3439,20 +2739,12 @@ function renderThemeColor(value, options) {
       from: renderColorValue(value.skeleton.from, colorOptions),
       to: renderColorValue(value.skeleton.to, colorOptions)
     },
-    syntax: renderSyntaxColorTheme(value.syntax, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    syntax: renderSyntaxColorTheme(value.syntax, { baseBg, colorPalette, blendMode }),
     selectable
   };
 }
 function renderThemeColorKBD(value, options) {
-  const {
-    baseBg,
-    blendMode,
-    colorPalette
-  } = options, rootOptions = {
+  const { baseBg, blendMode, colorPalette } = options, rootOptions = {
     bg: baseBg,
     blendMode,
     colorPalette
@@ -3481,11 +2773,7 @@ function renderThemeColorAvatar(value, options) {
   };
 }
 function renderThemeColorAvatarColor(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options, blendMode = value._blend || "multiply", rootOptions = {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -3510,11 +2798,7 @@ function renderThemeColorBadge(value, options) {
   };
 }
 function renderThemeColorBadgeColor(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options, blendMode = rootBlendMode, rootOptions = {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -3556,11 +2840,7 @@ function renderThemeColorButtonStates(value, options) {
   };
 }
 function renderThemeColorState(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options, blendMode = value._blend || "multiply", rootOptions = {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
     bg: baseBg,
     blendMode: rootBlendMode,
     colorPalette
@@ -3574,16 +2854,8 @@ function renderThemeColorState(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg: bg,
-      colorPalette,
-      blendMode
-    }),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg: bg,
-      colorPalette,
-      blendMode
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg: bg, colorPalette, blendMode }),
+    badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -3625,19 +2897,7 @@ function renderInputStatesColorTheme(value, options) {
   };
 }
 function renderInputStateColorTheme(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options, blendMode = value._blend || "multiply", rootOptions = {
-    colorPalette,
-    bg: baseBg,
-    blendMode: rootBlendMode
-  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
-    colorPalette,
-    bg,
-    blendMode
-  };
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode }, bg = renderColorValue(value.bg, rootOptions), colorOptions = { colorPalette, bg, blendMode };
   return {
     _blend: blendMode,
     bg,
@@ -3668,15 +2928,7 @@ function renderThemeColorSelectableStates(value, options) {
   };
 }
 function renderSyntaxColorTheme(value, options) {
-  const {
-    colorPalette,
-    baseBg,
-    blendMode
-  } = options, colorOptions = {
-    colorPalette,
-    bg: baseBg,
-    blendMode
-  };
+  const { colorPalette, baseBg, blendMode } = options, colorOptions = { colorPalette, bg: baseBg, blendMode };
   return {
     atrule: renderColorValue(value.atrule, colorOptions),
     attrName: renderColorValue(value.attrName, colorOptions),