@sanity/ui 3.0.0-static.25 → 3.0.0-static.27

package/dist/theme.cjs

@@ -121,6 +121,18 @@ const defaultThemeConfig = {
         width: 1
       }
     }
+  },
+  style: {
+    button: {
+      root: {
+        transition: "background-color 100ms,border-color 100ms,color 100ms"
+      }
+    }
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
   }
 };
 function is_v2(themeProp) {
@@ -1708,494 +1720,437 @@ function _createColor(opts, dark, name) {
     muted
   };
 }
-const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER_SCALE = [0, 1, 2, 3, 4, 5], CONTAINER = [...CONTAINER_SCALE, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6], SPACE = [0, 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], 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 _parseColorToken(str, options) {
-  const {
-    defaultHue
-  } = options;
-  let cursor = 0;
-  return parseColorNode();
-  function _consume(s) {
-    if (str.startsWith(s, cursor))
-      return cursor += s.length, s;
-  }
-  function _peek() {
-    return str[cursor];
-  }
-  function parseColorNode() {
-    ignoreWhitespace();
-    let v = _consume("black") || _consume("white");
-    if (v)
-      return {
-        type: "color",
-        name: v,
-        opacity: parseOpacity() ?? 1,
-        mix: parseMix() ?? 1
-      };
-    for (const hue of HUES)
-      if (v = _consume(String(hue)), v) {
-        if (_peek() !== "-")
-          throw new Error('Expected "-" after hue key');
-        cursor += 1;
-        const tint2 = parseTint();
-        if (!tint2)
-          throw new Error("Expected tint after hue");
-        return {
-          type: "tint",
-          hue,
-          tint: tint2,
-          opacity: parseOpacity() ?? 1,
-          mix: parseMix() ?? 1
-        };
-      }
-    const tint = parseTint();
-    if (tint)
-      return {
-        type: "tint",
-        hue: defaultHue,
-        tint,
-        opacity: parseOpacity() ?? 1,
-        mix: parseMix() ?? 1
-      };
-    if (str === "inherit")
-      return {
-        type: "inherit"
-      };
-    throw new Error(`Invalid color: ${str}`);
-  }
-  function parseTint() {
-    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 parseMix() {
-    ignoreWhitespace();
-    const match = RE_PERCENTAGE.exec(str.slice(cursor));
-    if (match)
-      return cursor += match[0].length, parseFloat(match[1]) / 100;
-  }
-  function parseOpacity() {
-    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++;
-  }
-}
-const defaultThemeFonts = {
+const defaultThemeFonts$1 = {
   code: {
     family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-    weight: {
+    weights: {
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700
     },
-    scale: [{
+    sizes: [{
       ascenderHeight: 4,
       descenderHeight: 4,
       fontSize: 10,
       iconSize: 17,
       lineHeight: 15,
-      letterSpacing: 0,
-      customIconSize: 12
+      letterSpacing: 0
     }, {
       ascenderHeight: 5,
       descenderHeight: 5,
       fontSize: 13,
       iconSize: 21,
       lineHeight: 19,
-      letterSpacing: 0,
-      customIconSize: 16
+      letterSpacing: 0
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 16,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0,
-      customIconSize: 20
+      letterSpacing: 0
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 19,
       iconSize: 29,
       lineHeight: 27,
-      letterSpacing: 0,
-      customIconSize: 24
+      letterSpacing: 0
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 22,
       iconSize: 33,
       lineHeight: 31,
-      letterSpacing: 0,
-      customIconSize: 28
+      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",
-    weight: {
+    weights: {
       regular: 600,
       medium: 700,
       semibold: 800,
       bold: 900
     },
-    scale: [{
+    sizes: [{
       ascenderHeight: 5,
       descenderHeight: 5,
       fontSize: 13,
       iconSize: 17,
       lineHeight: 19,
-      letterSpacing: 0,
-      customIconSize: 12
+      letterSpacing: 0
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 16,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0,
-      customIconSize: 20
+      letterSpacing: 0
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 21,
       iconSize: 33,
       lineHeight: 29,
-      letterSpacing: -0.25,
-      customIconSize: 28
+      letterSpacing: -0.25
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 27,
       iconSize: 41,
       lineHeight: 35,
-      letterSpacing: -0.5,
-      customIconSize: 36
+      letterSpacing: -0.5
     }, {
       ascenderHeight: 9.5,
       descenderHeight: 8.5,
       fontSize: 33,
       iconSize: 49,
       lineHeight: 41,
-      letterSpacing: -1,
-      customIconSize: 44
+      letterSpacing: -1
     }, {
       ascenderHeight: 10.5,
       descenderHeight: 9.5,
       fontSize: 38,
       iconSize: 53,
       lineHeight: 47,
-      letterSpacing: -1,
-      customIconSize: 48
+      letterSpacing: -1
     }]
   },
   label: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weight: {
+    weights: {
       regular: 500,
       medium: 600,
       semibold: 700,
       bold: 800
     },
-    scale: [{
+    sizes: [{
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 8.1,
       iconSize: 13,
       lineHeight: 10,
-      letterSpacing: 0.5,
-      customIconSize: 8
+      letterSpacing: 0.5
     }, {
       ascenderHeight: 1.5,
       descenderHeight: 2.5,
       fontSize: 9.5,
       iconSize: 15,
       lineHeight: 11,
-      letterSpacing: 0.5,
-      customIconSize: 10
+      letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 10.8,
       iconSize: 17,
       lineHeight: 12,
-      letterSpacing: 0.5,
-      customIconSize: 12
+      letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 12.25,
       iconSize: 19,
       lineHeight: 13,
-      letterSpacing: 0.5,
-      customIconSize: 14
+      letterSpacing: 0.5
     }, {
       ascenderHeight: 1.5,
       descenderHeight: 2.5,
       fontSize: 13.6,
       iconSize: 21,
       lineHeight: 14,
-      letterSpacing: 0.5,
-      customIconSize: 16
+      letterSpacing: 0.5
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 15,
       iconSize: 23,
       lineHeight: 15,
-      letterSpacing: 0.5,
-      customIconSize: 18
+      letterSpacing: 0.5
     }]
   },
   text: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weight: {
+    weights: {
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700
     },
-    scale: [{
+    sizes: [{
       ascenderHeight: 4,
       descenderHeight: 4,
       fontSize: 10,
       iconSize: 17,
       lineHeight: 15,
-      letterSpacing: 0,
-      customIconSize: 12
+      letterSpacing: 0
     }, {
       ascenderHeight: 5,
       descenderHeight: 5,
       fontSize: 13,
       iconSize: 21,
       lineHeight: 19,
-      letterSpacing: 0,
-      customIconSize: 16
+      letterSpacing: 0
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 15,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0,
-      customIconSize: 20
+      letterSpacing: 0
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 18,
       iconSize: 29,
       lineHeight: 27,
-      letterSpacing: 0,
-      customIconSize: 24
+      letterSpacing: 0
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 21,
       iconSize: 33,
       lineHeight: 31,
-      letterSpacing: 0,
-      customIconSize: 28
+      letterSpacing: 0
     }]
   }
-}, defaultTokens = {
-  color: {
-    "*": {
-      backdrop: ["gray-100/0.5", "black/0.5"],
-      code: {
-        bg: ["50", "950"],
-        fg: ["700", "300"],
-        token: {
-          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: ["green-600", "green-400"],
-          keyword: ["magenta-600", "magenta-400"],
-          number: ["purple-600", "purple-400"],
-          operator: ["magenta-600", "magenta-400"],
-          prolog: ["gray-600", "gray-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"]
-        }
-      },
-      focusRing: ["blue-500", "blue-500"],
-      link: {
-        fg: ["blue-600", "blue-400"]
-      },
-      shadow: {
-        outline: ["600/0.3", "500/0.4"],
-        umbra: ["600/0.1", "black/0.2"],
-        penumbra: ["600/0.07", "black/0.14"],
-        ambient: ["600/0.06", "black/0.12"]
-      },
-      skeleton: {
-        from: ["200 70%", "800 35%"],
-        to: ["200 40%", "800 50%"]
-      },
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["100 75%", "900 75%"],
-              4: ["300", "700"]
-            },
-            border: {
-              0: ["200", "700 50%"],
-              4: ["300 75%", "500"]
-            },
-            fg: {
-              0: ["900", "100"],
-              4: ["700", "300"]
-            }
-          },
-          primary: {
-            _hue: "blue",
-            bg: {
-              0: ["inherit", "inherit"]
-            }
-          },
-          suggest: {
-            _hue: "purple",
-            bg: {
-              0: ["inherit", "inherit"]
-            }
-          },
-          positive: {
-            _hue: "green",
-            bg: {
-              0: ["inherit", "inherit"]
-            }
-          },
-          caution: {
-            _hue: "yellow",
-            bg: {
-              0: ["inherit", "inherit"]
-            }
-          },
-          critical: {
-            _hue: "red",
-            bg: {
-              0: ["inherit", "inherit"]
-            }
-          }
-        },
-        solid: {
-          "*": {
-            bg: {
-              0: ["500", "400"],
-              4: ["600", "300"]
-            },
-            border: {
-              0: ["400", "200"],
-              4: ["500", "100"]
-            },
-            fg: {
-              0: ["white", "black"],
-              4: ["200", "700"]
-            }
-          },
-          default: {
-            bg: {
-              0: ["800", "200"],
-              4: ["black", "white"]
-            },
-            border: {
-              0: ["700", "300"],
-              4: ["800", "200"]
-            }
-          },
-          primary: {
-            _hue: "blue"
-          },
-          suggest: {
-            _hue: "purple"
-          },
-          positive: {
-            _hue: "green"
-          },
-          caution: {
-            _hue: "yellow"
-          },
-          critical: {
-            _hue: "red"
-          }
+}, 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.COLOR_HUES;
+function isColorBlendModeValue(str) {
+  return THEME_COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueKey(str) {
+  return color.COLOR_HUES.includes(str);
+}
+function isColorTintKey(str) {
+  return color.COLOR_TINTS.includes(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];
+function isColorConfigBaseTone(str) {
+  return COLOR_CONFIG_CARD_TONES.includes(str);
+}
+function isColorConfigBaseKey(str) {
+  return COLOR_CONFIG_CARD_KEYS.includes(str);
+}
+function isColorConfigStateKey(str) {
+  return COLOR_CONFIG_STATE_KEYS.includes(str);
+}
+function isColorConfigStateTone(str) {
+  return COLOR_CONFIG_STATE_TONES.includes(str);
+}
+function isColorConfigBlendKey(str) {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str);
+}
+function isColorValue(str) {
+  return str === "black" || str === "white";
+}
+function isColorOpacityValue(str) {
+  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function isColorMixPercentValue(str) {
+  return /^\d+%$/.test(str);
+}
+function parseTokenValue(str) {
+  const segments = str.split("/");
+  let nextSegment = segments.shift() || "";
+  const [segment0, segment0mix] = nextSegment.split(" ");
+  if (isColorTintKey(segment0)) {
+    const tint = segment0, segment1 = segments.shift() || "";
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
+      return {
+        type: "color",
+        tint,
+        mix: mix2
+      };
+    }
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        tint,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      tint
+    };
+  }
+  if (isColorValue(segment0)) {
+    const key = segment0, segment1 = segments.shift() || "";
+    if (isColorMixPercentValue(segment0mix)) {
+      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
+      return {
+        type: "color",
+        key,
+        mix: mix2
+      };
+    }
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        key,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      key
+    };
+  }
+  if (isColorHueKey(segment0)) {
+    const hue = segment0;
+    nextSegment = segments.shift() || "";
+    const [segment1, segment1mix] = nextSegment.split(" ");
+    if (isColorTintKey(segment1)) {
+      const tint = segment1, segment2 = segments.shift() || "";
+      if (isColorMixPercentValue(segment1mix)) {
+        const mix2 = Number(segment1mix.slice(0, -1)) / 100;
+        return {
+          type: "color",
+          hue,
+          tint,
+          mix: mix2
+        };
+      }
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2);
+        return {
+          type: "color",
+          hue,
+          tint,
+          opacity
+        };
+      }
+      return {
+        type: "color",
+        hue,
+        tint
+      };
+    }
+    return {
+      type: "hue",
+      value: hue
+    };
+  }
+  if (isColorBlendModeValue(segment0))
+    return {
+      type: "blendMode",
+      value: segment0
+    };
+}
+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);
+}
+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
+  });
+}
+const defaultColorTokens = {
+  base: {
+    "*": {
+      _blend: ["multiply", "screen"],
+      accent: {
+        fg: ["purple/600", "purple/400"]
+      },
+      avatar: {
+        "*": {
+          _blend: ["screen", "multiply"],
+          bg: ["500", "400"],
+          fg: ["white", "black"]
+        }
+      },
+      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"]
         }
+      },
+      bg: ["50", "950"],
+      border: ["200", "800"],
+      code: {
+        bg: ["50", "950"],
+        fg: ["600", "400"]
+      },
+      fg: ["800", "200"],
+      focusRing: ["blue/500", "blue/500"],
+      icon: ["600", "400"],
+      kbd: {
+        bg: ["white", "black"],
+        fg: ["600", "400"],
+        border: ["200", "800"]
+      },
+      link: {
+        fg: ["blue/600", "blue/300"]
+      },
+      muted: {
+        bg: ["50", "950"],
+        fg: ["700 75%", "300 75%"]
+      },
+      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"]
+      },
+      skeleton: {
+        from: ["100", "900"],
+        to: ["100 50%", "900 50%"]
       }
     },
     transparent: {
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["gray-50", "black"],
-              4: ["200", "800"]
-            },
-            border: {
-              0: ["200 50%", "800 50%"],
-              4: ["300", "600"]
-            },
-            fg: {
-              0: ["black", "100"],
-              4: ["700", "400"]
-            }
-          }
-        }
-      }
+      bg: ["50", "black"]
     },
     default: {
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["white", "950"],
-              4: ["200", "800"]
-            },
-            border: {
-              0: ["200 50%", "800 50%"],
-              4: ["300 75%", "600"]
-            },
-            fg: {
-              0: ["black", "white"],
-              4: ["600", "400"]
-            }
-          }
-        }
+      bg: ["white", "950"],
+      fg: ["800", "200"],
+      muted: {
+        fg: ["600", "400"]
       }
     },
     primary: {
@@ -2205,707 +2160,1262 @@ const defaultThemeFonts = {
       _hue: "purple"
     },
     positive: {
-      _hue: "green"
+      _hue: "green",
+      shadow: {
+        outline: ["500/0.4", "500/0.4"]
+      }
     },
     caution: {
-      _hue: "yellow"
+      _hue: "yellow",
+      shadow: {
+        outline: ["600/0.3", "500/0.4"]
+      }
     },
     critical: {
       _hue: "red"
     }
-  }
-};
-function merge(...records) {
-  return records.filter(Boolean).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 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: {
-      gray: {
-        _hue: tokens?.avatar?.gray?._hue ?? "gray",
-        bg: tokens?.avatar?.gray?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.gray?.fg ?? ["white", "900"]
+  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: ["600", "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%"]
+          }
+        }
       },
-      blue: {
-        _hue: tokens?.avatar?.blue?._hue ?? "blue",
-        bg: tokens?.avatar?.blue?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.blue?.fg ?? ["white", "900"]
+      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: ["200", "800"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["200", "800"],
+          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"]
+          }
+        }
       },
-      purple: {
-        _hue: tokens?.avatar?.purple?._hue ?? "purple",
-        bg: tokens?.avatar?.purple?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.purple?.fg ?? ["white", "900"]
+      positive: {
+        "*": {
+          border: ["600 20%", "800"]
+        }
       },
-      magenta: {
-        _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
-        bg: tokens?.avatar?.magenta?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.magenta?.fg ?? ["white", "900"]
+      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", "900"],
+          fg: ["800", "200"],
+          icon: ["800 70%", "300 70%"]
+        },
+        pressed: {
+          bg: ["100", "800"],
+          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"]
       },
-      red: {
-        _hue: tokens?.avatar?.red?._hue ?? "red",
-        bg: tokens?.avatar?.red?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.red?.fg ?? ["white", "900"]
+      hovered: {
+        border: ["300", "700"]
       },
-      orange: {
-        _hue: tokens?.avatar?.orange?._hue ?? "orange",
-        bg: tokens?.avatar?.orange?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.orange?.fg ?? ["white", "900"]
+      readOnly: {
+        bg: ["50", "950"],
+        border: ["200", "800"],
+        fg: ["800", "200"]
       },
-      yellow: {
-        _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
-        bg: tokens?.avatar?.yellow?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.yellow?.fg ?? ["white", "900"]
+      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%"]
+        }
       },
-      green: {
-        _hue: tokens?.avatar?.green?._hue ?? "green",
-        bg: tokens?.avatar?.green?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.green?.fg ?? ["white", "900"]
+      hovered: {
+        bg: ["50", "950"]
       },
-      cyan: {
-        _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
-        bg: tokens?.avatar?.cyan?.bg ?? ["500", "400"],
-        fg: tokens?.avatar?.cyan?.fg ?? ["white", "900"]
+      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"]
+        }
       }
     },
-    backdrop: tokens?.backdrop ?? ["100", "900"],
-    code: {
-      bg: tokens?.code?.bg ?? ["50", "950"],
-      fg: tokens?.code?.fg ?? ["600", "400"],
-      token: {
-        atrule: tokens?.code?.token?.atrule ?? ["600", "400"],
-        attribute: tokens?.code?.token?.attribute ?? ["600", "400"],
-        attrName: tokens?.code?.token?.attrName ?? ["600", "400"],
-        attrValue: tokens?.code?.token?.attrValue ?? ["600", "400"],
-        boolean: tokens?.code?.token?.boolean ?? ["600", "400"],
-        builtin: tokens?.code?.token?.builtin ?? ["600", "400"],
-        cdata: tokens?.code?.token?.cdata ?? ["600", "400"],
-        char: tokens?.code?.token?.char ?? ["600", "400"],
-        class: tokens?.code?.token?.class ?? ["600", "400"],
-        className: tokens?.code?.token?.className ?? ["600", "400"],
-        comment: tokens?.code?.token?.comment ?? ["400", "600"],
-        constant: tokens?.code?.token?.constant ?? ["600", "400"],
-        deleted: tokens?.code?.token?.deleted ?? ["600", "400"],
-        doctype: tokens?.code?.token?.doctype ?? ["600", "400"],
-        entity: tokens?.code?.token?.entity ?? ["600", "400"],
-        function: tokens?.code?.token?.function ?? ["600", "400"],
-        hexcode: tokens?.code?.token?.hexcode ?? ["600", "400"],
-        id: tokens?.code?.token?.id ?? ["600", "400"],
-        important: tokens?.code?.token?.important ?? ["600", "400"],
-        inserted: tokens?.code?.token?.inserted ?? ["600", "400"],
-        keyword: tokens?.code?.token?.keyword ?? ["600", "400"],
-        number: tokens?.code?.token?.number ?? ["600", "400"],
-        operator: tokens?.code?.token?.operator ?? ["600", "400"],
-        prolog: tokens?.code?.token?.prolog ?? ["600", "400"],
-        property: tokens?.code?.token?.property ?? ["600", "400"],
-        pseudoClass: tokens?.code?.token?.pseudoClass ?? ["600", "400"],
-        pseudoElement: tokens?.code?.token?.pseudoElement ?? ["600", "400"],
-        punctuation: tokens?.code?.token?.punctuation ?? ["600", "400"],
-        regex: tokens?.code?.token?.regex ?? ["600", "400"],
-        selector: tokens?.code?.token?.selector ?? ["600", "400"],
-        string: tokens?.code?.token?.string ?? ["600", "400"],
-        symbol: tokens?.code?.token?.symbol ?? ["600", "400"],
-        tag: tokens?.code?.token?.tag ?? ["600", "400"],
-        unit: tokens?.code?.token?.unit ?? ["600", "400"],
-        url: tokens?.code?.token?.url ?? ["600", "400"],
-        variable: tokens?.code?.token?.variable ?? ["600", "400"]
+    default: {
+      selected: {
+        _hue: "blue"
       }
     },
-    focusRing: tokens?.focusRing ?? ["500", "500"],
-    link: {
-      fg: tokens?.link?.fg ?? ["600", "400"]
-    },
-    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 ?? ["100", "900"],
-      to: tokens?.skeleton?.to ?? ["50", "950"]
-    },
-    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), {})
-      },
-      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), {})
+    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$1(value) {
+  return !!(value && typeof value == "object" && !Array.isArray(value));
+}
+function merge$1(...records) {
+  const _records = records.filter(Boolean);
+  return _records.length === 0 ? {} : _records.reduce(_merge$1, {});
+}
+function _merge$1(acc, source) {
+  for (const key of Object.keys(source)) {
+    const prevValue = acc[key], nextValue = source[key];
+    isRecord$1(prevValue) && isRecord$1(nextValue) ? acc[key] = merge$1(prevValue, nextValue) : acc[key] = nextValue;
+  }
+  return acc;
+}
+function resolveColorTokens(inputTokens) {
+  const tokens = merge$1(defaultColorTokens, inputTokens);
+  return {
+    base: resolveBaseColorTokens(tokens),
+    button: resolveButtonColorTokens(tokens),
+    input: resolveInputColorTokens(tokens),
+    selectable: resolveSelectableColorTokens(tokens),
+    syntax: tokens.syntax
   };
 }
-function resolveElementTokens(tokens) {
+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$1(inputTokens?.base?.["*"], inputTokens?.base?.[tone]), hue = spec._hue || inputTokens?.base?.[tone]?._hue || "gray";
   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]
-    }
+    ...spec,
+    _hue: hue,
+    avatar: color.COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge$1({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
+        ...spec.badge?.["*"],
+        ...spec.badge?.[tone2]
+      }
+    }), {})
   };
 }
-function buildTheme_v3(options) {
-  const {
-    v2
-  } = options ?? {}, tokens = resolveTokens(options?.tokens ?? defaultTokens);
+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$1(inputTokens?.button?.[mode]?.["*"]?.["*"], inputTokens?.button?.[mode]?.[tone]?.["*"], inputTokens?.button?.[mode]?.["*"]?.[state], inputTokens?.button?.[mode]?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
-    _version: 3,
-    _tokens: tokens,
-    avatar: v2?.avatar ?? defaultThemeConfig.avatar,
-    button: v2?.button ?? defaultThemeConfig.button,
-    card: v2?.card ?? defaultThemeConfig.card,
-    color: tokens.color,
-    container: v2?.container ?? defaultThemeConfig.container,
-    font: defaultThemeFonts,
-    input: v2?.input ?? defaultThemeConfig.input,
-    layer: v2?.layer ?? defaultThemeConfig.layer,
-    media: v2?.media ?? defaultThemeConfig.media,
-    palette: {
-      black: color.black,
-      white: color.white,
-      hues: color.hues
-    },
-    // TODO
-    radius: v2?.radius ?? defaultThemeConfig.radius,
-    // TODO
-    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
-    // TODO
-    space: v2?.space ?? defaultThemeConfig.space
+    ...spec,
+    _hue: hue,
+    avatar: color.COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge$1({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
+        ...spec.badge?.["*"],
+        ...spec.badge?.[tone2]
+      }
+    }), {})
   };
 }
-const COLOR_VARIANTS = ["tinted", "solid"], AVATAR_COLORS = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"];
-function renderColor(colorToken, options) {
-  const {
-    defaultHue,
-    palette
-  } = options, color2 = _parseColorToken(colorToken, {
-    defaultHue
-  });
-  return color2.type === "color" ? palette[color2.name].hex : color2.type === "tint" ? palette.hues[color2.hue][color2.tint].hex : "#000";
+function resolveInputColorTokens(inputTokens) {
+  const tokens = {};
+  for (const mode of THEME_COLOR_INPUT_MODES)
+    tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
+  return tokens;
 }
-function themeColor_v3_v2(options) {
-  const {
-    color: color2,
-    dark,
-    palette
-  } = options, i = dark ? 1 : 0, defaultHue = color2._hue, colorOptions = {
-    defaultHue,
-    palette
+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$1(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$1(inputTokens?.selectable?.["*"]?.["*"], inputTokens?.selectable?.[tone]?.["*"], inputTokens?.selectable?.["*"]?.[state], inputTokens?.selectable?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
   return {
-    _blend: "screen",
-    _dark: dark,
-    ...buildColorState({
-      cardColor: color2,
-      dark,
-      palette,
-      state: "enabled",
-      tone: "default",
-      variant: "tinted"
-    }),
-    backdrop: renderColor(color2.backdrop[i], colorOptions),
-    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: color2,
-      dark,
-      palette,
-      state,
-      tone,
-      variant: mode === "default" ? "solid" : "tinted"
-    }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones2), {}), modes), {}),
-    focusRing: renderColor(color2.focusRing[i], colorOptions),
-    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color2.variant.tinted.default, {
-      dark,
-      defaultHue,
-      palette
-    }), states), {}), modes), {}),
-    selectable: THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color2,
-      dark,
-      palette,
-      state,
-      tone,
-      variant: "tinted"
-    }), states), {}), tones2), {}),
-    shadow: {
-      outline: renderColor(color2.shadow.outline[i], colorOptions),
-      umbra: renderColor(color2.shadow.umbra[i], colorOptions),
-      penumbra: renderColor(color2.shadow.penumbra[i], colorOptions),
-      ambient: renderColor(color2.shadow.ambient[i], colorOptions)
-    },
-    syntax: {
-      atrule: renderColor(color2.code.token.atrule[i], colorOptions),
-      attrName: renderColor(color2.code.token.attrName[i], colorOptions),
-      attrValue: renderColor(color2.code.token.attrValue[i], colorOptions),
-      attribute: renderColor(color2.code.token.attribute[i], colorOptions),
-      boolean: renderColor(color2.code.token.boolean[i], colorOptions),
-      builtin: renderColor(color2.code.token.builtin[i], colorOptions),
-      cdata: renderColor(color2.code.token.cdata[i], colorOptions),
-      char: renderColor(color2.code.token.char[i], colorOptions),
-      class: renderColor(color2.code.token.class[i], colorOptions),
-      className: renderColor(color2.code.token.className[i], colorOptions),
-      comment: renderColor(color2.code.token.comment[i], colorOptions),
-      constant: renderColor(color2.code.token.constant[i], colorOptions),
-      deleted: renderColor(color2.code.token.deleted[i], colorOptions),
-      doctype: renderColor(color2.code.token.doctype[i], colorOptions),
-      entity: renderColor(color2.code.token.entity[i], colorOptions),
-      function: renderColor(color2.code.token.function[i], colorOptions),
-      hexcode: renderColor(color2.code.token.hexcode[i], colorOptions),
-      id: renderColor(color2.code.token.id[i], colorOptions),
-      important: renderColor(color2.code.token.important[i], colorOptions),
-      inserted: renderColor(color2.code.token.inserted[i], colorOptions),
-      keyword: renderColor(color2.code.token.keyword[i], colorOptions),
-      number: renderColor(color2.code.token.number[i], colorOptions),
-      operator: renderColor(color2.code.token.operator[i], colorOptions),
-      prolog: renderColor(color2.code.token.prolog[i], colorOptions),
-      property: renderColor(color2.code.token.property[i], colorOptions),
-      pseudoClass: renderColor(color2.code.token.pseudoClass[i], colorOptions),
-      pseudoElement: renderColor(color2.code.token.pseudoElement[i], colorOptions),
-      punctuation: renderColor(color2.code.token.punctuation[i], colorOptions),
-      regex: renderColor(color2.code.token.regex[i], colorOptions),
-      selector: renderColor(color2.code.token.selector[i], colorOptions),
-      string: renderColor(color2.code.token.string[i], colorOptions),
-      symbol: renderColor(color2.code.token.symbol[i], colorOptions),
-      tag: renderColor(color2.code.token.tag[i], colorOptions),
-      unit: renderColor(color2.code.token.unit[i], colorOptions),
-      url: renderColor(color2.code.token.url[i], colorOptions),
-      variable: renderColor(color2.code.token.variable[i], colorOptions)
-    }
+    ...spec,
+    _hue: hue,
+    avatar: color.COLOR_HUES.reduce((acc, hue2) => ({
+      ...acc,
+      [hue2]: merge$1({
+        _hue: hue2
+      }, spec.avatar?.["*"], spec.avatar?.[hue2])
+    }), {}),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [tone2]: {
+        _hue: inputTokens?.base?.[tone2]?._hue || hue,
+        ...spec.badge?.["*"],
+        ...spec.badge?.[tone2]
+      }
+    }), {})
   };
 }
-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, options) {
+function buildColorTheme(config) {
+  const resolvedConfig = {
+    color: resolveColorTokens(config?.color)
+  };
+  return {
+    light: buildColorScheme({
+      scheme: "light"
+    }, resolvedConfig),
+    dark: buildColorScheme({
+      scheme: "dark"
+    }, resolvedConfig)
+  };
+}
+function buildColorScheme(options, config) {
   const {
-    dark,
-    defaultHue,
-    palette
-  } = options, colorOptions = {
-    defaultHue,
-    palette
-  }, i = dark ? 1 : 0, from = renderColor(tokens[0][i], colorOptions), to = renderColor(tokens[4][i], colorOptions);
-  return index === 0 ? from : index === 4 ? to : `color-mix(in oklch, ${from}, ${to} ${index * 25}%)`;
+    scheme
+  } = options, colorScheme = {};
+  for (const tone of THEME_COLOR_CARD_TONES)
+    colorScheme[tone] = buildCardColorTheme({
+      scheme,
+      tone
+    }, config);
+  return colorScheme;
 }
-function buildColorState(options) {
+function buildCardColorTheme(options, config) {
   const {
-    cardColor,
-    dark,
-    palette,
-    state,
-    tone,
-    variant
-  } = options, color2 = cardColor.variant[variant][tone], shades = stateShades[state], defaultHue = cardColor._hue, colorOptions = {
-    defaultHue,
-    palette
-  }, i = dark ? 1 : 0;
+    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: renderColor(color2.fg[4][i], colorOptions)
-    },
-    avatar: {
-      gray: {
-        bg: renderColor(cardColor.avatar.gray.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.gray.fg[i], colorOptions)
-      },
-      blue: {
-        bg: renderColor(cardColor.avatar.blue.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.blue.fg[i], colorOptions)
-      },
-      purple: {
-        bg: renderColor(cardColor.avatar.purple.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.purple.fg[i], colorOptions)
-      },
-      magenta: {
-        bg: renderColor(cardColor.avatar.magenta.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.magenta.fg[i], colorOptions)
-      },
-      red: {
-        bg: renderColor(cardColor.avatar.red.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.red.fg[i], colorOptions)
-      },
-      orange: {
-        bg: renderColor(cardColor.avatar.orange.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.orange.fg[i], colorOptions)
-      },
-      yellow: {
-        bg: renderColor(cardColor.avatar.yellow.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.yellow.fg[i], colorOptions)
-      },
-      green: {
-        bg: renderColor(cardColor.avatar.green.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.green.fg[i], colorOptions)
-      },
-      cyan: {
-        bg: renderColor(cardColor.avatar.cyan.bg[i], colorOptions),
-        fg: renderColor(cardColor.avatar.cyan.fg[i], colorOptions)
-      }
+      fg: resolveColorTokenValue(context, tokens?.accent?.fg)
     },
-    // avatar: cardColor.avatar,
-    badge: THEME_COLOR_STATE_TONES.reduce((tones2, tone2) => (tones2[tone2] = {
-      bg: mix$1(color2.bg, 1, {
-        dark,
-        defaultHue,
-        palette
-      }),
-      fg: mix$1(color2.fg, 1, {
-        dark,
-        defaultHue,
-        palette
-      }),
-      dot: mix$1(color2.fg, 3, {
-        dark,
-        defaultHue,
-        palette
-      }),
-      icon: mix$1(color2.fg, 3, {
-        dark,
-        defaultHue,
-        palette
-      })
-    }, tones2), {}),
-    bg: mix$1(color2.bg, shades.bg[0], {
-      dark,
-      defaultHue,
-      palette
-    }),
-    border: mix$1(color2.border, shades.border[0], {
-      dark,
-      defaultHue,
-      palette
-    }),
-    fg: mix$1(color2.fg, shades.fg[0], {
-      dark,
-      defaultHue,
-      palette
-    }),
+    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,
+      tone
+    }, config),
     code: {
-      bg: mix$1(color2.bg, shades.bg[1], {
-        dark,
-        defaultHue,
-        palette
-      }),
-      fg: mix$1(color2.fg, shades.fg[2], {
-        dark,
-        defaultHue,
-        palette
-      })
+      bg: resolveColorTokenValue(context, tokens?.code?.bg),
+      fg: resolveColorTokenValue(context, tokens?.code?.fg)
     },
-    icon: mix$1(color2.fg, shades.fg[2], {
-      dark,
-      defaultHue,
-      palette
-    }),
+    fg: resolveColorTokenValue(context, tokens?.fg),
+    focusRing: resolveColorTokenValue(context, tokens?.focusRing),
+    icon: resolveColorTokenValue(context, tokens?.icon),
+    input: buildInputColorTheme({
+      scheme,
+      tone
+    }, config),
     kbd: {
-      bg: mix$1(color2.bg, 0, {
-        dark,
-        defaultHue,
-        palette
-      }),
-      fg: mix$1(color2.fg, 0, {
-        dark,
-        defaultHue,
-        palette
-      }),
-      border: mix$1(color2.bg, 0, {
-        dark,
-        defaultHue,
-        palette
-      })
+      bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
+      fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
+      border: resolveColorTokenValue(context, tokens?.kbd?.border)
     },
     link: {
-      fg: mix$1(color2.fg, shades.fg[2], {
-        dark,
-        defaultHue,
-        palette
-      })
+      fg: resolveColorTokenValue(context, tokens?.link?.fg)
     },
     muted: {
-      bg: mix$1(color2.bg, shades.bg[1], {
-        dark,
-        defaultHue,
-        palette
-      }),
-      fg: mix$1(color2.fg, shades.fg[2], {
-        dark,
-        defaultHue,
-        palette
-      })
+      bg: resolveColorTokenValue(context, tokens?.muted?.bg),
+      fg: resolveColorTokenValue(context, tokens?.muted?.fg)
     },
+    selectable: buildSelectableColorTheme({
+      scheme,
+      tone
+    }, config),
+    shadow: buildShadowColorTheme({
+      scheme,
+      tone
+    }, config),
     skeleton: {
-      from: renderColor(cardColor.skeleton.from[i], colorOptions),
-      to: renderColor(cardColor.skeleton.to[i], colorOptions)
-    }
+      from: resolveColorTokenValue(context, tokens?.skeleton?.from),
+      to: resolveColorTokenValue(context, tokens?.skeleton?.to)
+    },
+    syntax: buildSyntaxColorTheme({
+      scheme
+    }, config)
   };
 }
-function buildInputState(colorElement, options) {
+function buildShadowColorTheme(options, config) {
   const {
-    dark,
-    defaultHue,
-    palette
-  } = options, colorOptions = {
-    defaultHue,
-    palette
-  }, i = dark ? 1 : 0;
-  return {
-    bg: renderColor(colorElement.bg[0][i], colorOptions),
-    border: renderColor(colorElement.bg[0][i], colorOptions),
-    fg: renderColor(colorElement.fg[0][i], colorOptions),
-    muted: {
-      bg: renderColor(colorElement.bg[0][i], colorOptions)
-    },
-    placeholder: renderColor(colorElement.fg[0][i], colorOptions)
+    scheme,
+    tone
+  } = options, tokens = config?.color?.base?.[tone], context = {
+    hue: tokens?._hue || "gray",
+    scheme
   };
-}
-function v3_v2(theme_v3) {
-  const palette = theme_v3.palette;
   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.transparent,
-          dark: !0,
-          palette
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.default,
-          dark: !0,
-          palette
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.neutral,
-          dark: !0,
-          palette
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.primary,
-          dark: !0,
-          palette
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.suggest,
-          dark: !0,
-          palette
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.positive,
-          dark: !0,
-          palette
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.caution,
-          dark: !0,
-          palette
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.critical,
-          dark: !0,
-          palette
-        })
-      },
-      light: {
-        transparent: themeColor_v3_v2({
-          color: theme_v3.color.transparent,
-          dark: !1,
-          palette
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.default,
-          dark: !1,
-          palette
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.neutral,
-          dark: !1,
-          palette
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.primary,
-          dark: !1,
-          palette
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.suggest,
-          dark: !1,
-          palette
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.positive,
-          dark: !1,
-          palette
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.caution,
-          dark: !1,
-          palette
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.critical,
-          dark: !1,
-          palette
-        })
-      }
-    },
-    container: theme_v3.container,
-    font: {
-      code: {
-        family: theme_v3.font.code.family,
-        weights: theme_v3.font.code.weight,
-        sizes: theme_v3.font.code.scale
-      },
-      heading: {
-        family: theme_v3.font.heading.family,
-        weights: theme_v3.font.heading.weight,
-        sizes: theme_v3.font.heading.scale
-      },
-      label: {
-        family: theme_v3.font.label.family,
-        weights: theme_v3.font.label.weight,
-        sizes: theme_v3.font.label.scale
-      },
-      text: {
-        family: theme_v3.font.text.family,
-        weights: theme_v3.font.text.weight,
-        sizes: theme_v3.font.text.scale
-      }
-    },
-    input: theme_v3.input,
-    layer: theme_v3.layer,
-    media: theme_v3.media,
-    radius: Object.values(theme_v3.radius),
-    shadow: Object.values(theme_v3.shadow),
-    space: Object.values(theme_v3.space)
+    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 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) {
+function buildAvatarColorTheme(options, stateTokens) {
+  const {
+    scheme
+  } = options;
   return {
-    r: mixChannel(b.r, s.r, weight),
-    g: mixChannel(b.g, s.g, weight),
-    b: mixChannel(b.b, s.b, weight)
+    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 multiplyChannel(b, s) {
-  return b * s;
-}
-function multiply(b, s) {
+function _buildAvatarColorTheme(options, stateTokens) {
+  const {
+    color: color2,
+    scheme
+  } = options, tokens = stateTokens?.avatar?.[color2], context = {
+    hue: tokens?._hue || "gray",
+    scheme
+  };
   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
+    _blend: (tokens?._blend || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, tokens?.bg),
+    fg: resolveColorTokenValue(context, tokens?.fg)
   };
 }
-function screenChannel(b, s) {
-  return b + s - b * s;
+function buildBadgeColorTheme(tokens, options, config) {
+  const {
+    scheme
+  } = options, colorBadge = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorBadge[tone] = _buildBadgeColorTheme(tokens, {
+      scheme,
+      tone
+    }, config);
+  return colorBadge;
 }
-function screen(b, s) {
+function _buildBadgeColorTheme(parentTokens, options, config) {
+  const {
+    scheme,
+    tone
+  } = options, tokens = parentTokens?.[tone], context = {
+    hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray",
+    scheme
+  };
   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
+    bg: resolveColorTokenValue(context, tokens?.bg),
+    fg: resolveColorTokenValue(context, tokens?.fg),
+    dot: resolveColorTokenValue(context, tokens?.dot),
+    icon: resolveColorTokenValue(context, tokens?.icon)
   };
 }
-function clamp(a, min = 0, max = 1) {
-  return Math.min(max, Math.max(min, a));
+function buildButtonColorTheme(options, config) {
+  const {
+    scheme,
+    tone: cardTone
+  } = options, modes = {};
+  for (const mode of THEME_COLOR_BUTTON_MODES)
+    modes[mode] = buildButtonTonesColorTheme({
+      cardTone,
+      scheme,
+      mode
+    }, config);
+  return modes;
 }
-function round(value) {
-  return Math.round(value);
+function buildButtonTonesColorTheme(options, config) {
+  const {
+    cardTone,
+    mode,
+    scheme
+  } = options, tones2 = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tones2[tone] = buildButtonStatesColorTheme({
+      cardTone,
+      mode,
+      scheme,
+      tone
+    }, config);
+  return tones2;
 }
-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 buildButtonStatesColorTheme(options, config) {
+  const {
+    cardTone,
+    mode,
+    scheme,
+    tone
+  } = options, states = {};
+  for (const state of THEME_COLOR_STATES)
+    states[state] = buildButtonStateColorTheme({
+      cardTone,
+      mode,
+      tone,
+      scheme,
+      state
+    }, config);
+  return states;
+}
+function buildButtonStateColorTheme(options, config) {
+  const {
+    cardTone,
+    mode,
+    tone,
+    scheme,
+    state
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+    hue,
+    scheme
+  };
+  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",
+      cardTone: tone
+    }, config),
+    hovered: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "hovered",
+      cardTone: tone
+    }, config),
+    readOnly: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "readOnly",
+      cardTone: tone
+    }, config),
+    disabled: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "disabled",
+      cardTone: tone
+    }, config)
+  };
+}
+function buildInputStateColorTheme(options, config) {
+  const {
+    cardTone,
+    mode,
+    scheme,
+    state
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.input?.[mode]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+    hue,
+    scheme
+  };
+  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,
+    tone: cardTone
+  } = options, tones2 = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tones2[tone] = buildSelectableStatesColorTheme({
+      cardTone,
+      scheme,
+      tone
+    }, config);
+  return tones2;
+}
+function buildSelectableStatesColorTheme(options, config) {
+  const {
+    cardTone,
+    scheme,
+    tone
+  } = options, states = {};
+  for (const state of THEME_COLOR_STATES)
+    states[state] = buildSelectableStateColorTheme({
+      cardTone,
+      tone,
+      scheme,
+      state
+    }, config);
+  return states;
+}
+function buildSelectableStateColorTheme(options, config) {
+  const {
+    cardTone,
+    scheme,
+    state,
+    tone
+  } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+    hue,
+    scheme
+  };
+  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.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(",");
@@ -3002,155 +3512,1175 @@ function rgba(color2, a) {
   const rgb = parseColor(color2);
   return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
 }
-const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
-  "transparent",
-  "default",
-  "neutral",
-  "primary",
-  // deprecated
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], THEME_COLOR_STATE_TONES = [
-  "default",
-  "neutral",
-  "primary",
-  // deprecated
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = color.COLOR_HUES;
-function isColorBlendModeValue(str) {
-  return THEME_COLOR_BLEND_MODES.includes(str);
+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 isColorHueKey(str) {
-  return color.COLOR_HUES.includes(str);
+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));
+    }
+  } 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 isColorTintKey(str) {
-  return color.COLOR_TINTS.includes(str);
+function renderColorHex(color2) {
+  return typeof color2 == "string" ? color2 : color2.hex;
 }
-function isColorButtonMode(str) {
-  return THEME_COLOR_BUTTON_MODES.includes(str);
+function renderThemeColorSchemes(value, config) {
+  const colorPalette = config?.palette ?? defaultColorPalette;
+  return {
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark)
+  };
 }
-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 isColorConfigBaseTone(str) {
-  return COLOR_CONFIG_CARD_TONES.includes(str);
+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 isColorConfigBaseKey(str) {
-  return COLOR_CONFIG_CARD_KEYS.includes(str);
+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"
+      }
+    })
+  };
+  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)
+    },
+    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)
+    },
+    syntax: renderSyntaxColorTheme(value.syntax, {
+      baseBg,
+      colorPalette,
+      blendMode
+    }),
+    selectable
+  };
 }
-function isColorConfigStateKey(str) {
-  return COLOR_CONFIG_STATE_KEYS.includes(str);
+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 isColorConfigStateTone(str) {
-  return COLOR_CONFIG_STATE_TONES.includes(str);
+function renderThemeColorAvatar(value, options) {
+  const colorAvatar = {};
+  for (const hue of color.COLOR_HUES)
+    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options);
+  return colorAvatar;
 }
-function isColorConfigBlendKey(str) {
-  return COLOR_CONFIG_BLEND_KEYS.includes(str);
+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 isColorValue(str) {
-  return str === "black" || str === "white";
+function renderThemeColorBadge(value, options) {
+  const colorBadge = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options);
+  return colorBadge;
 }
-function isColorOpacityValue(str) {
-  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+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 isColorMixPercentValue(str) {
-  return /^\d+%$/.test(str);
+function renderThemeColorButton(value, options) {
+  return {
+    default: renderThemeColorButtonTones(value.default, options),
+    ghost: renderThemeColorButtonTones(value.ghost, options),
+    bleed: renderThemeColorButtonTones(value.bleed, options)
+  };
 }
-function parseTokenValue(str) {
-  const segments = str.split("/");
-  let nextSegment = segments.shift() || "";
-  const [segment0, segment0mix] = nextSegment.split(" ");
-  if (isColorTintKey(segment0)) {
-    const tint = segment0, segment1 = segments.shift() || "";
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
-      return {
-        type: "color",
-        tint,
-        mix: mix2
-      };
-    }
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1);
-      return {
-        type: "color",
-        tint,
-        opacity
-      };
-    }
-    return {
-      type: "color",
-      tint
-    };
-  }
-  if (isColorValue(segment0)) {
-    const key = segment0, segment1 = segments.shift() || "";
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
-      return {
-        type: "color",
-        key,
-        mix: mix2
-      };
+function renderThemeColorButtonTones(value, options) {
+  const colorButtonMode = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options);
+  return colorButtonMode;
+}
+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)
+  };
+}
+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)
+    },
+    muted: {
+      bg: renderColorValue(value.muted.bg, colorOptions),
+      fg: renderColorValue(value.muted.fg, colorOptions)
+    },
+    kbd: {
+      bg: renderColorValue(value.kbd.bg, colorOptions),
+      fg: renderColorValue(value.kbd.fg, colorOptions),
+      border: renderColorValue(value.kbd.border, colorOptions)
+    },
+    skeleton: {
+      from: renderColorValue(value.skeleton?.from, colorOptions),
+      to: renderColorValue(value.skeleton?.to, colorOptions)
     }
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1);
+  };
+}
+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)
+    },
+    placeholder: renderColorValue(value.placeholder, colorOptions)
+  };
+}
+function renderThemeColorSelectable(value, options) {
+  const colorSelectable = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options);
+  return colorSelectable;
+}
+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$1,
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style
+  };
+  return v2_v0(v2);
+}
+const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER_SCALE = [0, 1, 2, 3, 4, 5], CONTAINER = [...CONTAINER_SCALE, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6], SPACE = [0, 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], 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 _parseColorToken(str, options) {
+  const {
+    defaultHue
+  } = options;
+  let cursor = 0;
+  return parseColorNode();
+  function _consume(s) {
+    if (str.startsWith(s, cursor))
+      return cursor += s.length, s;
+  }
+  function _peek() {
+    return str[cursor];
+  }
+  function parseColorNode() {
+    ignoreWhitespace();
+    let v = _consume("black") || _consume("white");
+    if (v)
       return {
         type: "color",
-        key,
-        opacity
+        name: v,
+        opacity: parseOpacity() ?? 1,
+        mix: parseMix() ?? 1
       };
-    }
-    return {
-      type: "color",
-      key
-    };
-  }
-  if (isColorHueKey(segment0)) {
-    const hue = segment0;
-    nextSegment = segments.shift() || "";
-    const [segment1, segment1mix] = nextSegment.split(" ");
-    if (isColorTintKey(segment1)) {
-      const tint = segment1, segment2 = segments.shift() || "";
-      if (isColorMixPercentValue(segment1mix)) {
-        const mix2 = Number(segment1mix.slice(0, -1)) / 100;
-        return {
-          type: "color",
-          hue,
-          tint,
-          mix: mix2
-        };
-      }
-      if (isColorOpacityValue(segment2)) {
-        const opacity = Number(segment2);
+    for (const hue of HUES)
+      if (v = _consume(String(hue)), v) {
+        if (_peek() !== "-")
+          throw new Error('Expected "-" after hue key');
+        cursor += 1;
+        const tint2 = parseTint();
+        if (!tint2)
+          throw new Error("Expected tint after hue");
         return {
-          type: "color",
+          type: "tint",
           hue,
-          tint,
-          opacity
+          tint: tint2,
+          opacity: parseOpacity() ?? 1,
+          mix: parseMix() ?? 1
         };
       }
+    const tint = parseTint();
+    if (tint)
       return {
-        type: "color",
-        hue,
-        tint
+        type: "tint",
+        hue: defaultHue,
+        tint,
+        opacity: parseOpacity() ?? 1,
+        mix: parseMix() ?? 1
+      };
+    if (str === "inherit")
+      return {
+        type: "inherit"
       };
+    throw new Error(`Invalid color: ${str}`);
+  }
+  function parseTint() {
+    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 parseMix() {
+    ignoreWhitespace();
+    const match = RE_PERCENTAGE.exec(str.slice(cursor));
+    if (match)
+      return cursor += match[0].length, parseFloat(match[1]) / 100;
+  }
+  function parseOpacity() {
+    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;
     }
-    return {
-      type: "hue",
-      value: hue
-    };
   }
-  if (isColorBlendModeValue(segment0))
-    return {
-      type: "blendMode",
-      value: segment0
-    };
+  function ignoreWhitespace() {
+    for (; _peek() === " "; )
+      cursor++;
+  }
+}
+const defaultThemeFonts = {
+  code: {
+    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    scale: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0,
+      customIconSize: 12
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0,
+      customIconSize: 16
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0,
+      customIconSize: 20
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0,
+      customIconSize: 24
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0,
+      customIconSize: 28
+    }]
+  },
+  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",
+    weight: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
+    },
+    scale: [{
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 17,
+      lineHeight: 19,
+      letterSpacing: 0,
+      customIconSize: 12
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0,
+      customIconSize: 20
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 29,
+      letterSpacing: -0.25,
+      customIconSize: 28
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 27,
+      iconSize: 41,
+      lineHeight: 35,
+      letterSpacing: -0.5,
+      customIconSize: 36
+    }, {
+      ascenderHeight: 9.5,
+      descenderHeight: 8.5,
+      fontSize: 33,
+      iconSize: 49,
+      lineHeight: 41,
+      letterSpacing: -1,
+      customIconSize: 44
+    }, {
+      ascenderHeight: 10.5,
+      descenderHeight: 9.5,
+      fontSize: 38,
+      iconSize: 53,
+      lineHeight: 47,
+      letterSpacing: -1,
+      customIconSize: 48
+    }]
+  },
+  label: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weight: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800
+    },
+    scale: [{
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 8.1,
+      iconSize: 13,
+      lineHeight: 10,
+      letterSpacing: 0.5,
+      customIconSize: 8
+    }, {
+      ascenderHeight: 1.5,
+      descenderHeight: 2.5,
+      fontSize: 9.5,
+      iconSize: 15,
+      lineHeight: 11,
+      letterSpacing: 0.5,
+      customIconSize: 10
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 10.8,
+      iconSize: 17,
+      lineHeight: 12,
+      letterSpacing: 0.5,
+      customIconSize: 12
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 12.25,
+      iconSize: 19,
+      lineHeight: 13,
+      letterSpacing: 0.5,
+      customIconSize: 14
+    }, {
+      ascenderHeight: 1.5,
+      descenderHeight: 2.5,
+      fontSize: 13.6,
+      iconSize: 21,
+      lineHeight: 14,
+      letterSpacing: 0.5,
+      customIconSize: 16
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 15,
+      iconSize: 23,
+      lineHeight: 15,
+      letterSpacing: 0.5,
+      customIconSize: 18
+    }]
+  },
+  text: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    scale: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0,
+      customIconSize: 12
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0,
+      customIconSize: 16
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 15,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0,
+      customIconSize: 20
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 18,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0,
+      customIconSize: 24
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0,
+      customIconSize: 28
+    }]
+  }
+}, defaultTokens = {
+  color: {
+    "*": {
+      backdrop: ["gray-100/0.5", "black/0.5"],
+      code: {
+        bg: ["50", "950"],
+        fg: ["700", "300"],
+        token: {
+          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: ["green-600", "green-400"],
+          keyword: ["magenta-600", "magenta-400"],
+          number: ["purple-600", "purple-400"],
+          operator: ["magenta-600", "magenta-400"],
+          prolog: ["gray-600", "gray-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"]
+        }
+      },
+      focusRing: ["blue-500", "blue-500"],
+      link: {
+        fg: ["blue-600", "blue-400"]
+      },
+      shadow: {
+        outline: ["600/0.3", "500/0.4"],
+        umbra: ["600/0.1", "black/0.2"],
+        penumbra: ["600/0.07", "black/0.14"],
+        ambient: ["600/0.06", "black/0.12"]
+      },
+      skeleton: {
+        from: ["200 70%", "800 35%"],
+        to: ["200 40%", "800 50%"]
+      },
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["100 75%", "900 75%"],
+              4: ["300", "700"]
+            },
+            border: {
+              0: ["200", "700 50%"],
+              4: ["300 75%", "500"]
+            },
+            fg: {
+              0: ["900", "100"],
+              4: ["700", "300"]
+            }
+          },
+          primary: {
+            _hue: "blue",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
+          },
+          suggest: {
+            _hue: "purple",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
+          },
+          positive: {
+            _hue: "green",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
+          },
+          caution: {
+            _hue: "yellow",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
+          },
+          critical: {
+            _hue: "red",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
+          }
+        },
+        solid: {
+          "*": {
+            bg: {
+              0: ["500", "400"],
+              4: ["600", "300"]
+            },
+            border: {
+              0: ["400", "200"],
+              4: ["500", "100"]
+            },
+            fg: {
+              0: ["white", "black"],
+              4: ["200", "700"]
+            }
+          },
+          default: {
+            bg: {
+              0: ["800", "200"],
+              4: ["black", "white"]
+            },
+            border: {
+              0: ["700", "300"],
+              4: ["800", "200"]
+            }
+          },
+          primary: {
+            _hue: "blue"
+          },
+          suggest: {
+            _hue: "purple"
+          },
+          positive: {
+            _hue: "green"
+          },
+          caution: {
+            _hue: "yellow"
+          },
+          critical: {
+            _hue: "red"
+          }
+        }
+      }
+    },
+    transparent: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["gray-50", "black"],
+              4: ["200", "800"]
+            },
+            border: {
+              0: ["200 50%", "800 50%"],
+              4: ["300", "600"]
+            },
+            fg: {
+              0: ["black", "100"],
+              4: ["700", "400"]
+            }
+          }
+        }
+      }
+    },
+    default: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["white", "950"],
+              4: ["200", "800"]
+            },
+            border: {
+              0: ["200 50%", "800 50%"],
+              4: ["300 75%", "600"]
+            },
+            fg: {
+              0: ["black", "white"],
+              4: ["600", "400"]
+            }
+          }
+        }
+      }
+    },
+    primary: {
+      _hue: "blue"
+    },
+    suggest: {
+      _hue: "purple"
+    },
+    positive: {
+      _hue: "green"
+    },
+    caution: {
+      _hue: "yellow"
+    },
+    critical: {
+      _hue: "red"
+    }
+  }
+};
+function merge(...records) {
+  return records.filter(Boolean).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 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: {
+      gray: {
+        _hue: tokens?.avatar?.gray?._hue ?? "gray",
+        bg: tokens?.avatar?.gray?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.gray?.fg ?? ["white", "900"]
+      },
+      blue: {
+        _hue: tokens?.avatar?.blue?._hue ?? "blue",
+        bg: tokens?.avatar?.blue?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.blue?.fg ?? ["white", "900"]
+      },
+      purple: {
+        _hue: tokens?.avatar?.purple?._hue ?? "purple",
+        bg: tokens?.avatar?.purple?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.purple?.fg ?? ["white", "900"]
+      },
+      magenta: {
+        _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
+        bg: tokens?.avatar?.magenta?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.magenta?.fg ?? ["white", "900"]
+      },
+      red: {
+        _hue: tokens?.avatar?.red?._hue ?? "red",
+        bg: tokens?.avatar?.red?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.red?.fg ?? ["white", "900"]
+      },
+      orange: {
+        _hue: tokens?.avatar?.orange?._hue ?? "orange",
+        bg: tokens?.avatar?.orange?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.orange?.fg ?? ["white", "900"]
+      },
+      yellow: {
+        _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
+        bg: tokens?.avatar?.yellow?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.yellow?.fg ?? ["white", "900"]
+      },
+      green: {
+        _hue: tokens?.avatar?.green?._hue ?? "green",
+        bg: tokens?.avatar?.green?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.green?.fg ?? ["white", "900"]
+      },
+      cyan: {
+        _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
+        bg: tokens?.avatar?.cyan?.bg ?? ["500", "400"],
+        fg: tokens?.avatar?.cyan?.fg ?? ["white", "900"]
+      }
+    },
+    backdrop: tokens?.backdrop ?? ["100", "900"],
+    code: {
+      bg: tokens?.code?.bg ?? ["50", "950"],
+      fg: tokens?.code?.fg ?? ["600", "400"],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ["600", "400"],
+        attribute: tokens?.code?.token?.attribute ?? ["600", "400"],
+        attrName: tokens?.code?.token?.attrName ?? ["600", "400"],
+        attrValue: tokens?.code?.token?.attrValue ?? ["600", "400"],
+        boolean: tokens?.code?.token?.boolean ?? ["600", "400"],
+        builtin: tokens?.code?.token?.builtin ?? ["600", "400"],
+        cdata: tokens?.code?.token?.cdata ?? ["600", "400"],
+        char: tokens?.code?.token?.char ?? ["600", "400"],
+        class: tokens?.code?.token?.class ?? ["600", "400"],
+        className: tokens?.code?.token?.className ?? ["600", "400"],
+        comment: tokens?.code?.token?.comment ?? ["400", "600"],
+        constant: tokens?.code?.token?.constant ?? ["600", "400"],
+        deleted: tokens?.code?.token?.deleted ?? ["600", "400"],
+        doctype: tokens?.code?.token?.doctype ?? ["600", "400"],
+        entity: tokens?.code?.token?.entity ?? ["600", "400"],
+        function: tokens?.code?.token?.function ?? ["600", "400"],
+        hexcode: tokens?.code?.token?.hexcode ?? ["600", "400"],
+        id: tokens?.code?.token?.id ?? ["600", "400"],
+        important: tokens?.code?.token?.important ?? ["600", "400"],
+        inserted: tokens?.code?.token?.inserted ?? ["600", "400"],
+        keyword: tokens?.code?.token?.keyword ?? ["600", "400"],
+        number: tokens?.code?.token?.number ?? ["600", "400"],
+        operator: tokens?.code?.token?.operator ?? ["600", "400"],
+        prolog: tokens?.code?.token?.prolog ?? ["600", "400"],
+        property: tokens?.code?.token?.property ?? ["600", "400"],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ["600", "400"],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ["600", "400"],
+        punctuation: tokens?.code?.token?.punctuation ?? ["600", "400"],
+        regex: tokens?.code?.token?.regex ?? ["600", "400"],
+        selector: tokens?.code?.token?.selector ?? ["600", "400"],
+        string: tokens?.code?.token?.string ?? ["600", "400"],
+        symbol: tokens?.code?.token?.symbol ?? ["600", "400"],
+        tag: tokens?.code?.token?.tag ?? ["600", "400"],
+        unit: tokens?.code?.token?.unit ?? ["600", "400"],
+        url: tokens?.code?.token?.url ?? ["600", "400"],
+        variable: tokens?.code?.token?.variable ?? ["600", "400"]
+      }
+    },
+    focusRing: tokens?.focusRing ?? ["500", "500"],
+    link: {
+      fg: tokens?.link?.fg ?? ["600", "400"]
+    },
+    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 ?? ["100", "900"],
+      to: tokens?.skeleton?.to ?? ["50", "950"]
+    },
+    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), {})
+      },
+      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), {})
+      }
+    }
+  };
+}
+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]
+    }
+  };
+}
+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: tokens.color,
+    container: v2?.container ?? defaultThemeConfig.container,
+    font: defaultThemeFonts,
+    input: v2?.input ?? defaultThemeConfig.input,
+    layer: v2?.layer ?? defaultThemeConfig.layer,
+    media: v2?.media ?? defaultThemeConfig.media,
+    palette: {
+      black: color.black,
+      white: color.white,
+      hues: color.hues
+    },
+    // TODO
+    radius: v2?.radius ?? defaultThemeConfig.radius,
+    // TODO
+    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
+    // TODO
+    space: v2?.space ?? defaultThemeConfig.space
+  };
 }
-const cache = /* @__PURE__ */ new WeakMap();
+const COLOR_VARIANTS = ["tinted", "solid"], AVATAR_COLORS = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], cache = /* @__PURE__ */ new WeakMap();
 function getTheme_v2(theme) {
   if (theme.sanity.v2?._resolved) return theme.sanity.v2;
   const cached_v2 = cache.get(theme);