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

package/dist/theme.js

@@ -1,7 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var color = require("@sanity/color");
-const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
+var v3_v2 = require("./_chunks-cjs/v3_v2.js"), color = require("@sanity/color");
+function isColorBlendModeValue(str) {
+  return v3_v2.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 v3_v2.THEME_COLOR_BUTTON_MODES.includes(str);
+}
+const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
     default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
@@ -1173,7 +1185,7 @@ const defaultThemeConfig = {
       zOffset: 200
     }
   },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
+  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
   shadow: [null, {
     umbra: [0, 0, 0, 0],
     penumbra: [0, 0, 0, 0],
@@ -1289,10 +1301,10 @@ const defaultThemeConfig = {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     featureSettings: "'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1",
     weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
     },
     sizes: [{
       ascenderHeight: 5,
@@ -1435,39 +1447,7 @@ const defaultThemeConfig = {
       letterSpacing: 0
     }]
   }
-}, THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
-  "transparent",
-  "default",
-  "neutral",
-  "primary",
-  // deprecated
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], THEME_COLOR_STATE_TONES = [
-  "default",
-  "neutral",
-  "primary",
-  // deprecated
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = color.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 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]+)?/;
+}, HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
 function parseColor$1(str) {
   let cursor = 0;
   const color2 = getColor();
@@ -1566,7 +1546,7 @@ function buildColorScheme_v3(tokens, options) {
     scheme
   } = options;
   return {
-    card: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCard_v3(tokens[tone], {
+    card: v3_v2.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCard_v3(tokens[tone], {
       scheme
     }), acc), {})
   };
@@ -1581,7 +1561,7 @@ function buildColorCard_v3(tokens, options) {
   };
   return {
     _hue: tokens._hue ?? "gray",
-    avatar: THEME_COLOR_AVATAR_COLORS.reduce((acc, hue) => {
+    avatar: v3_v2.THEME_COLOR_AVATAR_COLORS.reduce((acc, hue) => {
       const avatarTokens = tokens.avatar[hue];
       return acc[hue] = {
         bg: renderColor(avatarTokens.bg, {
@@ -1597,48 +1577,6 @@ function buildColorCard_v3(tokens, options) {
       }, acc;
     }, {}),
     backdrop: renderColor(tokens.backdrop, context),
-    code: {
-      bg: renderColor(tokens.code.bg, context),
-      fg: renderColor(tokens.code.fg, context),
-      token: {
-        atrule: renderColor(tokens.code.token.atrule, context),
-        attrName: renderColor(tokens.code.token.attrName, context),
-        attrValue: renderColor(tokens.code.token.attrValue, context),
-        attribute: renderColor(tokens.code.token.attribute, context),
-        boolean: renderColor(tokens.code.token.boolean, context),
-        builtin: renderColor(tokens.code.token.builtin, context),
-        cdata: renderColor(tokens.code.token.cdata, context),
-        char: renderColor(tokens.code.token.char, context),
-        class: renderColor(tokens.code.token.class, context),
-        className: renderColor(tokens.code.token.className, context),
-        comment: renderColor(tokens.code.token.comment, context),
-        constant: renderColor(tokens.code.token.constant, context),
-        deleted: renderColor(tokens.code.token.deleted, context),
-        doctype: renderColor(tokens.code.token.doctype, context),
-        entity: renderColor(tokens.code.token.entity, context),
-        function: renderColor(tokens.code.token.function, context),
-        hexcode: renderColor(tokens.code.token.hexcode, context),
-        id: renderColor(tokens.code.token.id, context),
-        important: renderColor(tokens.code.token.important, context),
-        inserted: renderColor(tokens.code.token.inserted, context),
-        keyword: renderColor(tokens.code.token.keyword, context),
-        number: renderColor(tokens.code.token.number, context),
-        operator: renderColor(tokens.code.token.operator, context),
-        prolog: renderColor(tokens.code.token.prolog, context),
-        property: renderColor(tokens.code.token.property, context),
-        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
-        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
-        punctuation: renderColor(tokens.code.token.punctuation, context),
-        regex: renderColor(tokens.code.token.regex, context),
-        selector: renderColor(tokens.code.token.selector, context),
-        string: renderColor(tokens.code.token.string, context),
-        symbol: renderColor(tokens.code.token.symbol, context),
-        tag: renderColor(tokens.code.token.tag, context),
-        unit: renderColor(tokens.code.token.unit, context),
-        url: renderColor(tokens.code.token.url, context),
-        variable: renderColor(tokens.code.token.variable, context)
-      }
-    },
     focusRing: renderColor(tokens.focusRing, context),
     shadow: {
       outline: renderColor(tokens.shadow.outline, context),
@@ -1650,9 +1588,47 @@ function buildColorCard_v3(tokens, options) {
       from: renderColor(tokens.skeleton.from, context),
       to: renderColor(tokens.skeleton.to, context)
     },
+    token: {
+      atrule: renderColor(tokens.token.atrule, context),
+      attrName: renderColor(tokens.token.attrName, context),
+      attrValue: renderColor(tokens.token.attrValue, context),
+      attribute: renderColor(tokens.token.attribute, context),
+      boolean: renderColor(tokens.token.boolean, context),
+      builtin: renderColor(tokens.token.builtin, context),
+      cdata: renderColor(tokens.token.cdata, context),
+      char: renderColor(tokens.token.char, context),
+      class: renderColor(tokens.token.class, context),
+      className: renderColor(tokens.token.className, context),
+      comment: renderColor(tokens.token.comment, context),
+      constant: renderColor(tokens.token.constant, context),
+      deleted: renderColor(tokens.token.deleted, context),
+      doctype: renderColor(tokens.token.doctype, context),
+      entity: renderColor(tokens.token.entity, context),
+      function: renderColor(tokens.token.function, context),
+      hexcode: renderColor(tokens.token.hexcode, context),
+      id: renderColor(tokens.token.id, context),
+      important: renderColor(tokens.token.important, context),
+      inserted: renderColor(tokens.token.inserted, context),
+      keyword: renderColor(tokens.token.keyword, context),
+      number: renderColor(tokens.token.number, context),
+      operator: renderColor(tokens.token.operator, context),
+      prolog: renderColor(tokens.token.prolog, context),
+      property: renderColor(tokens.token.property, context),
+      pseudoClass: renderColor(tokens.token.pseudoClass, context),
+      pseudoElement: renderColor(tokens.token.pseudoElement, context),
+      punctuation: renderColor(tokens.token.punctuation, context),
+      regex: renderColor(tokens.token.regex, context),
+      selector: renderColor(tokens.token.selector, context),
+      string: renderColor(tokens.token.string, context),
+      symbol: renderColor(tokens.token.symbol, context),
+      tag: renderColor(tokens.token.tag, context),
+      unit: renderColor(tokens.token.unit, context),
+      url: renderColor(tokens.token.url, context),
+      variable: renderColor(tokens.token.variable, context)
+    },
     variant: {
       solid: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+        ...v3_v2.THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
           ...acc,
           [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
             scheme
@@ -1660,7 +1636,7 @@ function buildColorCard_v3(tokens, options) {
         }), {})
       },
       tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+        ...v3_v2.THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
           ...acc,
           [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
             scheme
@@ -1694,53 +1670,59 @@ function buildColorElement_v3(tokens, options) {
     }
   };
 }
-const defaultTokens = {
+const defaultPalette = {
+  chroma: {
+    min: 5e-3,
+    max: 0.2325
+  },
+  luminosity: {
+    min: 0.1875,
+    max: 1
+  },
+  hues: {
+    gray: {
+      h: 277,
+      c: 0.04
+    },
+    blue: {
+      h: 273,
+      c: 0.185
+    },
+    purple: {
+      h: 295,
+      c: 0.4
+    },
+    magenta: {
+      h: 12,
+      c: 0.4
+    },
+    red: {
+      h: 30,
+      c: 0.4
+    },
+    orange: {
+      h: 68,
+      c: 0.4
+    },
+    yellow: {
+      h: 90,
+      c: 0.4
+    },
+    green: {
+      h: 171,
+      c: 0.4
+    },
+    cyan: {
+      h: 194,
+      c: 0.4
+    }
+  }
+}, defaultTokens = {
   color: {
     "*": {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ["black/0.5", "gray/100/0.5"],
-      code: {
-        bg: ["950", "50"],
-        fg: ["300", "700"],
-        token: {
-          atrule: ["purple/300", "purple/600"],
-          attrName: ["green/300", "green/600"],
-          attrValue: ["yellow/300", "yellow/600"],
-          attribute: ["yellow/300", "yellow/600"],
-          boolean: ["purple/300", "purple/600"],
-          builtin: ["purple/300", "purple/600"],
-          cdata: ["yellow/300", "yellow/600"],
-          char: ["yellow/300", "yellow/600"],
-          class: ["orange/300", "orange/600"],
-          className: ["cyan/300", "cyan/600"],
-          comment: ["gray/600", "gray/300"],
-          constant: ["purple/300", "purple/600"],
-          deleted: ["red/300", "red/600"],
-          entity: ["red/300", "red/600"],
-          function: ["green/300", "green/600"],
-          hexcode: ["blue/300", "blue/600"],
-          id: ["purple/300", "purple/600"],
-          important: ["purple/300", "purple/600"],
-          inserted: ["green/300", "green/600"],
-          keyword: ["magenta/300", "magenta/600"],
-          number: ["purple/300", "purple/600"],
-          operator: ["magenta/300", "magenta/600"],
-          prolog: ["gray/300", "gray/600"],
-          property: ["blue/300", "blue/600"],
-          pseudoClass: ["yellow/300", "yellow/600"],
-          pseudoElement: ["yellow/300", "yellow/600"],
-          punctuation: ["gray/300", "gray/600"],
-          regex: ["blue/300", "blue/600"],
-          selector: ["red/300", "red/600"],
-          string: ["yellow/300", "yellow/600"],
-          symbol: ["purple/300", "purple/600"],
-          tag: ["red/300", "red/600"],
-          unit: ["orange/300", "orange/600"],
-          url: ["red/300", "red/600"],
-          variable: ["red/300", "red/600"]
-        }
-      },
-      focusRing: ["blue/500", "blue/500"],
+      focusRing: ["blue/500", "blue/300"],
       link: {
         fg: ["blue/400", "blue/600"]
       },
@@ -1750,16 +1732,53 @@ const defaultTokens = {
         penumbra: ["black/0.14", "500/0.07"],
         ambient: ["black/0.12", "500/0.06"]
       },
+      token: {
+        atrule: ["purple/300", "purple/600"],
+        attrName: ["green/300", "green/600"],
+        attrValue: ["yellow/300", "yellow/600"],
+        attribute: ["yellow/300", "yellow/600"],
+        boolean: ["purple/300", "purple/600"],
+        builtin: ["purple/300", "purple/600"],
+        cdata: ["yellow/300", "yellow/600"],
+        char: ["yellow/300", "yellow/600"],
+        class: ["orange/300", "orange/600"],
+        className: ["cyan/300", "cyan/600"],
+        comment: ["gray/600", "gray/300"],
+        constant: ["purple/300", "purple/600"],
+        deleted: ["red/300", "red/600"],
+        entity: ["red/300", "red/600"],
+        function: ["green/300", "green/600"],
+        hexcode: ["blue/300", "blue/600"],
+        id: ["purple/300", "purple/600"],
+        important: ["purple/300", "purple/600"],
+        inserted: ["green/300", "green/600"],
+        keyword: ["magenta/300", "magenta/600"],
+        number: ["purple/300", "purple/600"],
+        operator: ["magenta/300", "magenta/600"],
+        prolog: ["gray/300", "gray/600"],
+        property: ["blue/300", "blue/600"],
+        pseudoClass: ["yellow/300", "yellow/600"],
+        pseudoElement: ["yellow/300", "yellow/600"],
+        punctuation: ["gray/300", "gray/600"],
+        regex: ["blue/300", "blue/600"],
+        selector: ["red/300", "red/600"],
+        string: ["yellow/300", "yellow/600"],
+        symbol: ["purple/300", "purple/600"],
+        tag: ["red/300", "red/600"],
+        unit: ["orange/300", "orange/600"],
+        url: ["red/300", "red/600"],
+        variable: ["red/300", "red/600"]
+      },
       variant: {
         tinted: {
           "*": {
             bg: {
-              0: ["950", "50"],
-              4: ["800", "200"]
+              0: ["900", "50"],
+              4: ["800", "150"]
             },
             border: {
-              0: ["700", "100"],
-              4: ["500", "300"]
+              0: ["800", "150"],
+              4: ["600", "350"]
             },
             fg: {
               0: ["100", "900"],
@@ -1785,8 +1804,8 @@ const defaultTokens = {
         solid: {
           "*": {
             bg: {
-              0: ["400", "500"],
-              4: ["300", "600"]
+              0: ["300", "500"],
+              4: ["200", "600"]
             },
             border: {
               0: ["200", "400"],
@@ -1831,15 +1850,15 @@ const defaultTokens = {
           "*": {
             bg: {
               0: ["black", "gray/50"],
-              4: ["800", "300 50%"]
+              4: ["900", "150"]
             },
             border: {
-              0: ["800", "300 40%"],
-              4: ["600", "300"]
+              0: ["900", "150"],
+              4: ["700", "350"]
             },
             fg: {
-              0: ["100", "black"],
-              4: ["400", "700"]
+              0: ["150", "black"],
+              4: ["550", "600"]
             }
           }
         }
@@ -1850,12 +1869,12 @@ const defaultTokens = {
         tinted: {
           "*": {
             bg: {
-              0: ["950", "white"],
-              4: ["800", "200"]
+              0: ["gray/950", "white"],
+              4: ["850", "100"]
             },
             border: {
-              0: ["800", "100"],
-              4: ["600", "300"]
+              0: ["850", "100"],
+              4: ["650", "300"]
             },
             fg: {
               0: ["white", "black"],
@@ -1865,18 +1884,6 @@ const defaultTokens = {
         }
       }
     },
-    neutral: {
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["900", "50"],
-              4: ["700", "200"]
-            }
-          }
-        }
-      }
-    },
     primary: {
       _hue: "blue"
     },
@@ -1925,7 +1932,7 @@ function resolveTokens(tokens = {}) {
   return {
     color: {
       "*": resolveCardColorTokens(tokens.color?.["*"]),
-      ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+      ...v3_v2.THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
         ...acc,
         [tone]: resolveCardColorTokens(merge(tokens.color?.["*"], tokens.color?.[tone]))
       }), {})
@@ -1983,48 +1990,6 @@ function resolveCardColorTokens(tokens) {
       }
     },
     backdrop: tokens?.backdrop ?? ["900", "100"],
-    code: {
-      bg: tokens?.code?.bg ?? ["950", "50"],
-      fg: tokens?.code?.fg ?? ["400", "600"],
-      token: {
-        atrule: tokens?.code?.token?.atrule ?? ["400", "600"],
-        attribute: tokens?.code?.token?.attribute ?? ["400", "600"],
-        attrName: tokens?.code?.token?.attrName ?? ["400", "600"],
-        attrValue: tokens?.code?.token?.attrValue ?? ["400", "600"],
-        boolean: tokens?.code?.token?.boolean ?? ["400", "600"],
-        builtin: tokens?.code?.token?.builtin ?? ["400", "600"],
-        cdata: tokens?.code?.token?.cdata ?? ["400", "600"],
-        char: tokens?.code?.token?.char ?? ["400", "600"],
-        class: tokens?.code?.token?.class ?? ["400", "600"],
-        className: tokens?.code?.token?.className ?? ["400", "600"],
-        comment: tokens?.code?.token?.comment ?? ["600", "400"],
-        constant: tokens?.code?.token?.constant ?? ["400", "600"],
-        deleted: tokens?.code?.token?.deleted ?? ["400", "600"],
-        doctype: tokens?.code?.token?.doctype ?? ["400", "600"],
-        entity: tokens?.code?.token?.entity ?? ["400", "600"],
-        function: tokens?.code?.token?.function ?? ["400", "600"],
-        hexcode: tokens?.code?.token?.hexcode ?? ["400", "600"],
-        id: tokens?.code?.token?.id ?? ["400", "600"],
-        important: tokens?.code?.token?.important ?? ["400", "600"],
-        inserted: tokens?.code?.token?.inserted ?? ["400", "600"],
-        keyword: tokens?.code?.token?.keyword ?? ["400", "600"],
-        number: tokens?.code?.token?.number ?? ["400", "600"],
-        operator: tokens?.code?.token?.operator ?? ["400", "600"],
-        prolog: tokens?.code?.token?.prolog ?? ["400", "600"],
-        property: tokens?.code?.token?.property ?? ["400", "600"],
-        pseudoClass: tokens?.code?.token?.pseudoClass ?? ["400", "600"],
-        pseudoElement: tokens?.code?.token?.pseudoElement ?? ["400", "600"],
-        punctuation: tokens?.code?.token?.punctuation ?? ["400", "600"],
-        regex: tokens?.code?.token?.regex ?? ["400", "600"],
-        selector: tokens?.code?.token?.selector ?? ["400", "600"],
-        string: tokens?.code?.token?.string ?? ["400", "600"],
-        symbol: tokens?.code?.token?.symbol ?? ["400", "600"],
-        tag: tokens?.code?.token?.tag ?? ["400", "600"],
-        unit: tokens?.code?.token?.unit ?? ["400", "600"],
-        url: tokens?.code?.token?.url ?? ["400", "600"],
-        variable: tokens?.code?.token?.variable ?? ["400", "600"]
-      }
-    },
     focusRing: tokens?.focusRing ?? ["500", "500"],
     link: {
       fg: tokens?.link?.fg ?? ["400", "600"]
@@ -2039,14 +2004,52 @@ function resolveCardColorTokens(tokens) {
       from: tokens?.skeleton?.from ?? ["900", "100"],
       to: tokens?.skeleton?.to ?? ["950", "50"]
     },
+    token: {
+      atrule: tokens?.token?.atrule ?? ["400", "600"],
+      attribute: tokens?.token?.attribute ?? ["400", "600"],
+      attrName: tokens?.token?.attrName ?? ["400", "600"],
+      attrValue: tokens?.token?.attrValue ?? ["400", "600"],
+      boolean: tokens?.token?.boolean ?? ["400", "600"],
+      builtin: tokens?.token?.builtin ?? ["400", "600"],
+      cdata: tokens?.token?.cdata ?? ["400", "600"],
+      char: tokens?.token?.char ?? ["400", "600"],
+      class: tokens?.token?.class ?? ["400", "600"],
+      className: tokens?.token?.className ?? ["400", "600"],
+      comment: tokens?.token?.comment ?? ["600", "400"],
+      constant: tokens?.token?.constant ?? ["400", "600"],
+      deleted: tokens?.token?.deleted ?? ["400", "600"],
+      doctype: tokens?.token?.doctype ?? ["400", "600"],
+      entity: tokens?.token?.entity ?? ["400", "600"],
+      function: tokens?.token?.function ?? ["400", "600"],
+      hexcode: tokens?.token?.hexcode ?? ["400", "600"],
+      id: tokens?.token?.id ?? ["400", "600"],
+      important: tokens?.token?.important ?? ["400", "600"],
+      inserted: tokens?.token?.inserted ?? ["400", "600"],
+      keyword: tokens?.token?.keyword ?? ["400", "600"],
+      number: tokens?.token?.number ?? ["400", "600"],
+      operator: tokens?.token?.operator ?? ["400", "600"],
+      prolog: tokens?.token?.prolog ?? ["400", "600"],
+      property: tokens?.token?.property ?? ["400", "600"],
+      pseudoClass: tokens?.token?.pseudoClass ?? ["400", "600"],
+      pseudoElement: tokens?.token?.pseudoElement ?? ["400", "600"],
+      punctuation: tokens?.token?.punctuation ?? ["400", "600"],
+      regex: tokens?.token?.regex ?? ["400", "600"],
+      selector: tokens?.token?.selector ?? ["400", "600"],
+      string: tokens?.token?.string ?? ["400", "600"],
+      symbol: tokens?.token?.symbol ?? ["400", "600"],
+      tag: tokens?.token?.tag ?? ["400", "600"],
+      unit: tokens?.token?.unit ?? ["400", "600"],
+      url: tokens?.token?.url ?? ["400", "600"],
+      variable: tokens?.token?.variable ?? ["400", "600"]
+    },
     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), {})
+        ...v3_v2.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), {})
+        ...v3_v2.THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.tinted?.["*"], tokens?.variant?.tinted?.[tone])), acc), {})
       }
     }
   };
@@ -2074,6 +2077,7 @@ function buildTheme_v3(options) {
   } = options ?? {}, tokens = resolveTokens(options?.tokens ?? defaultTokens);
   return {
     _version: 3,
+    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,
@@ -2197,229 +2201,11 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
-function themeColor_v3_v2(options) {
-  const {
-    color: color2,
-    dark
-  } = options;
-  return {
-    _blend: "screen",
-    _dark: dark,
-    ...buildColorState({
-      cardColor: color2,
-      state: "enabled",
-      tone: "default",
-      variant: "tinted"
-    }),
-    backdrop: color2.backdrop,
-    button: THEME_COLOR_BUTTON_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color2,
-      state,
-      tone,
-      variant: mode === "default" ? "solid" : "tinted"
-    }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones2), {}), modes), {}),
-    focusRing: color2.focusRing,
-    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color2.variant.tinted.default), states), {}), modes), {}),
-    selectable: THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color2,
-      // cardVars: vars,
-      state,
-      tone,
-      variant: "tinted"
-    }), states), {}), tones2), {}),
-    shadow: color2.shadow,
-    syntax: color2.code.token
-  };
-}
-const stateShades = {
-  enabled: {
-    bg: [0, 1, 2],
-    border: [0, 1, 2],
-    fg: [0, 1, 2]
-  },
-  hovered: {
-    bg: [1, 2, 3],
-    border: [1, 2, 3],
-    fg: [1, 2, 3]
-  },
-  pressed: {
-    bg: [2, 3, 4],
-    border: [2, 3, 4],
-    fg: [2, 3, 4]
-  },
-  selected: {
-    bg: [3, 4, 4],
-    border: [3, 4, 4],
-    fg: [3, 4, 4]
-  },
-  disabled: {
-    bg: [4, 4, 4],
-    border: [4, 4, 4],
-    fg: [4, 4, 4]
-  }
-};
-function mix$1(tokens, index) {
-  return index === 0 ? tokens[0] : index === 4 ? tokens[4] : `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`;
-}
-function buildColorState(options) {
-  const {
-    cardColor,
-    state,
-    tone,
-    variant
-  } = options, color2 = cardColor.variant[variant][tone], shades = stateShades[state];
-  return {
-    accent: {
-      fg: color2.fg[4]
-    },
-    avatar: cardColor.avatar,
-    badge: THEME_COLOR_STATE_TONES.reduce((tones2, tone2) => (tones2[tone2] = {
-      bg: mix$1(color2.bg, 1),
-      fg: mix$1(color2.fg, 1),
-      dot: mix$1(color2.fg, 3),
-      icon: mix$1(color2.fg, 3)
-    }, tones2), {}),
-    bg: mix$1(color2.bg, shades.bg[0]),
-    border: mix$1(color2.border, shades.border[0]),
-    fg: mix$1(color2.fg, shades.fg[0]),
-    code: {
-      bg: mix$1(color2.bg, shades.bg[1]),
-      fg: mix$1(color2.fg, shades.fg[2])
-    },
-    icon: mix$1(color2.fg, shades.fg[2]),
-    kbd: {
-      bg: mix$1(color2.bg, 0),
-      fg: mix$1(color2.fg, 0),
-      border: mix$1(color2.bg, 0)
-    },
-    link: {
-      fg: mix$1(color2.fg, shades.fg[2])
-    },
-    muted: {
-      bg: mix$1(color2.bg, shades.bg[1]),
-      fg: mix$1(color2.fg, shades.fg[2])
-    },
-    skeleton: cardColor.skeleton
-  };
-}
-function buildInputState(colorElement) {
-  return {
-    bg: colorElement.bg[0],
-    border: colorElement.bg[0],
-    fg: colorElement.fg[0],
-    muted: {
-      bg: colorElement.bg[0]
-    },
-    placeholder: colorElement.fg[0]
-  };
-}
-function v3_v2(theme_v3) {
-  return {
-    _version: 2,
-    avatar: theme_v3.avatar,
-    button: theme_v3.button,
-    card: theme_v3.card,
-    color: {
-      dark: {
-        transparent: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.transparent,
-          dark: !0
-          // vars: vars.color.dark.transparent,
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.default,
-          dark: !0
-          // vars: vars.color.dark.default,
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.neutral,
-          dark: !0
-          // vars: vars.color.dark.neutral,
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.primary,
-          dark: !0
-          // vars: vars.color.dark.primary,
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.suggest,
-          dark: !0
-          // vars: vars.color.dark.suggest,
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.positive,
-          dark: !0
-          // vars: vars.color.dark.positive,
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.caution,
-          dark: !0
-          // vars: vars.color.dark.caution,
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.critical,
-          dark: !0
-          // vars: vars.color.dark.critical,
-        })
-      },
-      light: {
-        transparent: themeColor_v3_v2({
-          color: theme_v3.color.light.card.transparent,
-          dark: !1
-          // vars: vars.color.light.transparent,
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.light.card.default,
-          dark: !1
-          // vars: vars.color.light.default,
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.light.card.neutral,
-          dark: !1
-          // vars: vars.color.light.neutral,
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.light.card.primary,
-          dark: !1
-          // vars: vars.color.light.primary,
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.light.card.suggest,
-          dark: !1
-          // vars: vars.color.light.suggest,
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.light.card.positive,
-          dark: !1
-          // vars: vars.color.light.positive,
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.light.card.caution,
-          dark: !1
-          // vars: vars.color.light.caution,
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.light.card.critical,
-          dark: !1
-          // vars: vars.color.light.critical,
-        })
-      }
-    },
-    container: theme_v3.container,
-    font: theme_v3.font,
-    input: theme_v3.input,
-    layer: theme_v3.layer,
-    media: theme_v3.media,
-    radius: theme_v3.radius,
-    shadow: theme_v3.shadow,
-    space: theme_v3.space
-  };
-}
 function buildTheme(_config) {
   const v3 = buildTheme_v3({
     v2: _config
   });
-  return v2_v0(v3_v2(v3), v3);
+  return v2_v0(v3_v2.v3_v2(v3), v3);
 }
 function mixChannel(b, s, weight) {
   const delta = (s - b) * weight;
@@ -2568,7 +2354,7 @@ function rgba(color2, a) {
   const rgb = parseColor(color2);
   return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
 }
-const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+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 = ["*", ...v3_v2.THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...v3_v2.THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...v3_v2.THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...v3_v2.THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...v3_v2.THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...v3_v2.THEME_COLOR_INPUT_STATES];
 function parseTokenKey(str) {
   const segments = str.split("/"), segment0 = segments.shift() || "";
   if (isColorConfigBaseTone(segment0)) {
@@ -3134,6 +2920,15 @@ function getTheme_v2(theme) {
   };
   return cache.set(theme, v2), v2;
 }
+exports.THEME_COLOR_AVATAR_COLORS = v3_v2.THEME_COLOR_AVATAR_COLORS;
+exports.THEME_COLOR_BLEND_MODES = v3_v2.THEME_COLOR_BLEND_MODES;
+exports.THEME_COLOR_BUTTON_MODES = v3_v2.THEME_COLOR_BUTTON_MODES;
+exports.THEME_COLOR_CARD_TONES = v3_v2.THEME_COLOR_CARD_TONES;
+exports.THEME_COLOR_INPUT_MODES = v3_v2.THEME_COLOR_INPUT_MODES;
+exports.THEME_COLOR_INPUT_STATES = v3_v2.THEME_COLOR_INPUT_STATES;
+exports.THEME_COLOR_SCHEMES = v3_v2.THEME_COLOR_SCHEMES;
+exports.THEME_COLOR_STATES = v3_v2.THEME_COLOR_STATES;
+exports.THEME_COLOR_STATE_TONES = v3_v2.THEME_COLOR_STATE_TONES;
 exports.AVATAR_SIZE = AVATAR_SIZE;
 exports.COLOR_CONFIG_AVATAR_COLORS = COLOR_CONFIG_AVATAR_COLORS;
 exports.COLOR_CONFIG_BLEND_KEYS = COLOR_CONFIG_BLEND_KEYS;
@@ -3153,20 +2948,12 @@ exports.HUES = HUES;
 exports.RADIUS = RADIUS;
 exports.SHADOW = SHADOW;
 exports.SPACE = SPACE;
-exports.THEME_COLOR_AVATAR_COLORS = THEME_COLOR_AVATAR_COLORS;
-exports.THEME_COLOR_BLEND_MODES = THEME_COLOR_BLEND_MODES;
-exports.THEME_COLOR_BUTTON_MODES = THEME_COLOR_BUTTON_MODES;
-exports.THEME_COLOR_CARD_TONES = THEME_COLOR_CARD_TONES;
-exports.THEME_COLOR_INPUT_MODES = THEME_COLOR_INPUT_MODES;
-exports.THEME_COLOR_INPUT_STATES = THEME_COLOR_INPUT_STATES;
-exports.THEME_COLOR_SCHEMES = THEME_COLOR_SCHEMES;
-exports.THEME_COLOR_STATES = THEME_COLOR_STATES;
-exports.THEME_COLOR_STATE_TONES = THEME_COLOR_STATE_TONES;
 exports.TINTS = TINTS;
 exports.buildColor_v3 = buildColor_v3;
 exports.buildTheme = buildTheme;
 exports.buildTheme_v3 = buildTheme_v3;
 exports.createColorTheme = createColorTheme;
+exports.defaultPalette = defaultPalette;
 exports.defaultTokens = defaultTokens;
 exports.getContrastRatio = getContrastRatio;
 exports.getScopedTheme = getScopedTheme;