@sanity/ui 4.0.0-v4.1 → 4.0.0

package/dist/theme.js

@@ -1,870 +1,55 @@
-import { hues, white, black } from "@sanity/color";
-const HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], 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], COLOR_SCHEMES = ["light", "dark"], COLOR_VARIANTS = ["tinted", "solid"], AVATAR_COLORS = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], CARD_TONES = [
-  "transparent",
-  "default",
-  "neutral",
-  "primary",
-  // selections
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], ELEMENT_TONES = [
-  "default",
-  "neutral",
-  "primary",
-  // selections
-  "suggest",
-  "positive",
-  "caution",
-  "critical"
-], BUTTON_MODES = ["default", "ghost", "bleed"], 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 defaultColor = {
-  "*": {
-    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: ["300 75%", "700 75%"]
-          },
-          border: {
-            0: ["200", "800 75%"],
-            4: ["400", "700"]
-          },
-          fg: {
-            0: ["black", "100"],
-            4: ["700", "400"]
-          }
-        }
-      }
-    }
-  },
-  default: {
-    variant: {
-      tinted: {
-        "*": {
-          bg: {
-            0: ["white", "950"],
-            4: ["300 75%", "700"]
-          },
-          border: {
-            0: ["100", "800 75%"],
-            4: ["300", "700"]
-          },
-          fg: {
-            0: ["black", "white"],
-            4: ["600", "400"]
-          }
-        }
-      }
-    }
-  },
-  primary: {
-    _hue: "blue"
-  },
-  suggest: {
-    _hue: "purple"
-  },
-  positive: {
-    _hue: "green"
-  },
-  caution: {
-    _hue: "yellow"
-  },
-  critical: {
-    _hue: "red"
-  }
-}, defaultTheme = {
-  avatar: {
-    sizes: [{
-      distance: -4,
-      size: 19
-    }, {
-      distance: -4,
-      size: 25
-    }, {
-      distance: -8,
-      size: 33
-    }, {
-      distance: -12,
-      size: 49
-    }],
-    focusRing: {
-      offset: 1,
-      width: 1
-    }
-  },
-  button: {
-    textWeight: "medium",
-    border: {
-      width: 1
-    },
-    focusRing: {
-      offset: -1,
-      width: 1
-    }
-  },
-  card: {
-    border: {
-      width: 1
-    },
-    focusRing: {
-      offset: -1,
-      width: 1
-    },
-    shadow: {
-      outline: 0.5
-    }
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: {
-      zOffset: 600
-    },
-    popover: {
-      zOffset: 400
-    },
-    tooltip: {
-      zOffset: 200
-    }
-  },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
-  shadow: [void 0, {
-    umbra: [0, 0, 0, 0],
-    penumbra: [0, 0, 0, 0],
-    ambient: [0, 0, 0, 0]
-  }, {
-    umbra: [0, 3, 5, -2],
-    penumbra: [0, 6, 10, 0],
-    ambient: [0, 1, 18, 1]
-  }, {
-    umbra: [0, 7, 8, -4],
-    penumbra: [0, 12, 17, 2],
-    ambient: [0, 5, 22, 4]
-  }, {
-    umbra: [0, 9, 11, -5],
-    penumbra: [0, 18, 28, 2],
-    ambient: [0, 7, 34, 6]
-  }, {
-    umbra: [0, 11, 15, -7],
-    penumbra: [0, 24, 38, 3],
-    ambient: [0, 9, 46, 8]
-  }],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: 1
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out",
-      focusRing: {
-        offset: 1,
-        width: 1
-      }
-    },
-    select: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    text: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    }
-  }
-}, defaultFonts = {
-  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: 18.75,
-      iconSize: 29,
-      lineHeight: 27,
-      letterSpacing: 0,
-      customIconSize: 24
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 21.5,
-      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: 9.75,
-      iconSize: 17,
-      lineHeight: 15,
-      letterSpacing: 0,
-      customIconSize: 12
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 12.5,
-      iconSize: 21,
-      lineHeight: 19,
-      letterSpacing: 0,
-      customIconSize: 16
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 15.25,
-      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: 20.75,
-      iconSize: 33,
-      lineHeight: 31,
-      letterSpacing: 0,
-      customIconSize: 28
-    }]
-  }
-};
-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?.["*"]),
-      ...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?.["*"]),
-        ...ELEMENT_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.solid?.["*"], tokens?.variant?.solid?.[tone])), acc), {})
-      },
-      tinted: {
-        "*": resolveElementTokens(tokens?.variant?.tinted?.["*"]),
-        ...ELEMENT_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(options) {
-  const tokens = resolveTokens({
-    color: options?.color ?? defaultColor
-  });
-  return {
-    _version: 3,
-    _tokens: tokens,
-    avatar: defaultTheme.avatar,
-    button: defaultTheme.button,
-    card: defaultTheme.card,
-    color: tokens.color,
-    container: defaultTheme.container,
-    font: defaultFonts,
-    input: defaultTheme.input,
-    layer: defaultTheme.layer,
-    media: defaultTheme.media,
-    palette: {
-      black,
-      white,
-      hues
-    },
-    radius: defaultTheme.radius,
-    shadow: defaultTheme.shadow,
-    space: defaultTheme.space
-  };
-}
-export {
-  AVATAR_COLORS,
-  AVATAR_SIZE,
-  BUTTON_MODES,
-  CARD_TONES,
-  COLOR_SCHEMES,
-  COLOR_VARIANTS,
-  CONTAINER,
-  CONTAINER_SCALE,
-  ELEMENT_TONES,
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  HUES,
-  RADIUS,
-  SHADOW,
-  SPACE,
-  TINTS,
-  _parseColorToken,
-  buildTheme,
-  resolveTokens
-};
-//# sourceMappingURL=theme.js.map
+import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
+import { i as is_v2, n as v2_v0, r as v0_v2, t as getScopedTheme } from "./getScopedTheme-C-sZsyAz.js";
+import { A as COLOR_CONFIG_STATE_TONES, B as THEME_COLOR_INPUT_STATES, C as COLOR_CONFIG_BLEND_KEYS, D as COLOR_CONFIG_INPUT_STATES, E as COLOR_CONFIG_INPUT_MODES, F as THEME_COLOR_AVATAR_COLORS, H as THEME_COLOR_STATES, I as THEME_COLOR_BLEND_MODES, L as THEME_COLOR_BUTTON_MODES, M as isColorButtonMode, N as isColorHueKey, O as COLOR_CONFIG_STATES, P as isColorTintKey, R as THEME_COLOR_CARD_TONES, S as COLOR_CONFIG_AVATAR_COLORS, T as COLOR_CONFIG_CARD_TONES, U as THEME_COLOR_STATE_TONES, V as THEME_COLOR_SCHEMES, _ as isColorConfigStateKey, a as rgba, b as isColorTokenValue, c as hslToRgb, d as rgbaToRGBA, f as mix, g as isColorConfigBlendKey, h as isColorConfigBaseTone, i as multiply, j as isColorBlendModeValue, k as COLOR_CONFIG_STATE_KEYS, l as rgbToHex, m as isColorConfigBaseKey, n as buildTheme, o as parseColor, p as parseTokenValue, r as screen, s as hexToRgb, t as createColorTheme, u as rgbToHsl, v as isColorConfigStateTone, w as COLOR_CONFIG_CARD_KEYS, x as isColorValue, y as isColorOpacityValue, z as THEME_COLOR_INPUT_MODES } from "./factory-BA3gEfyI.js";
+/** @internal */
+function getContrastRatio(bg, fg) {
+	let rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
+	return (Math.max(l1, l2) + .05) / (Math.min(l1, l2) + .05);
+}
+function rgb_lrgb({ r, g, b }) {
+	return [
+		rgb_lrgb1(r / 255),
+		rgb_lrgb1(g / 255),
+		rgb_lrgb1(b / 255)
+	];
+}
+function rgb_lrgb1(v) {
+	return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+}
+function lrgb_luminance([r, g, b]) {
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/** @internal */
+function parseTokenKey(str) {
+	let segments = str.split("/"), segment0 = segments.shift() || "";
+	if (isColorConfigBaseTone(segment0)) {
+		let key = segments.join("/");
+		if (isColorConfigBaseKey(key) || isColorConfigBlendKey(key)) return {
+			type: "base",
+			tone: segment0,
+			key
+		};
+	}
+	if (segment0 === "button") {
+		let segment1 = segments.shift() || "";
+		if (isColorConfigStateTone(segment1)) {
+			let segment2 = segments.shift() || "";
+			if (isColorButtonMode(segment2)) {
+				let key = segments.join("/");
+				if (isColorConfigStateKey(key) || isColorConfigBlendKey(key)) return {
+					type: "button",
+					tone: segment1,
+					mode: segment2,
+					key
+				};
+			}
+		}
+	}
+}
+/** @internal */
+function is_v0(themeProp) {
+	return themeProp._version === 0;
+}
+export { COLOR_CONFIG_AVATAR_COLORS, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_INPUT_MODES, COLOR_CONFIG_INPUT_STATES, COLOR_CONFIG_STATES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_SCHEMES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, getContrastRatio, getScopedTheme, getTheme_v2, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, is_v0, is_v2, mix, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, v0_v2, v2_v0 };
+
+//# sourceMappingURL=theme.js.map