@sanity/ui 3.0.2 → 4.0.0-static.2

package/dist/theme.cjs

@@ -0,0 +1,870 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var color = require("@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: color.black,
+      white: color.white,
+      hues: color.hues
+    },
+    radius: defaultTheme.radius,
+    shadow: defaultTheme.shadow,
+    space: defaultTheme.space
+  };
+}
+exports.AVATAR_COLORS = AVATAR_COLORS;
+exports.AVATAR_SIZE = AVATAR_SIZE;
+exports.BUTTON_MODES = BUTTON_MODES;
+exports.CARD_TONES = CARD_TONES;
+exports.COLOR_SCHEMES = COLOR_SCHEMES;
+exports.COLOR_VARIANTS = COLOR_VARIANTS;
+exports.CONTAINER = CONTAINER;
+exports.CONTAINER_SCALE = CONTAINER_SCALE;
+exports.ELEMENT_TONES = ELEMENT_TONES;
+exports.FONT_CODE_SIZE = FONT_CODE_SIZE;
+exports.FONT_HEADING_SIZE = FONT_HEADING_SIZE;
+exports.FONT_LABEL_SIZE = FONT_LABEL_SIZE;
+exports.FONT_TEXT_SIZE = FONT_TEXT_SIZE;
+exports.HUES = HUES;
+exports.RADIUS = RADIUS;
+exports.SHADOW = SHADOW;
+exports.SPACE = SPACE;
+exports.TINTS = TINTS;
+exports._parseColorToken = _parseColorToken;
+exports.buildTheme = buildTheme;
+exports.resolveTokens = resolveTokens;
+//# sourceMappingURL=theme.cjs.map