@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/dist/theme.esm.js

@@ -0,0 +1,4113 @@
+import { COLOR_HUES, COLOR_TINTS, color } from '@sanity/color';
+function createSelectableTones(opts, base, dark, solid, muted) {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
+  };
+}
+function _createSelectableStates(opts, base, dark, solid, muted, tone) {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: "enabled",
+      tone
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: "hovered",
+      tone
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: "pressed",
+      tone
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: "selected",
+      tone
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: "disabled",
+      tone
+    })
+  };
+}
+function createSolidTones(opts, base, dark, name) {
+  return {
+    default: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "selected"
+      })
+    },
+    transparent: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "selected"
+      })
+    },
+    primary: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "selected"
+      })
+    },
+    positive: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "selected"
+      })
+    },
+    caution: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "selected"
+      })
+    },
+    critical: {
+      enabled: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.solid({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "selected"
+      })
+    }
+  };
+}
+function createButtonTones(opts, base, dark, solid, muted, mode) {
+  return {
+    default: opts.button({
+      base,
+      dark,
+      solid: solid.default,
+      muted: muted.default,
+      mode
+    }),
+    primary: opts.button({
+      base,
+      dark,
+      solid: solid.primary,
+      muted: muted.primary,
+      mode
+    }),
+    positive: opts.button({
+      base,
+      dark,
+      solid: solid.positive,
+      muted: muted.positive,
+      mode
+    }),
+    caution: opts.button({
+      base,
+      dark,
+      solid: solid.caution,
+      muted: muted.caution,
+      mode
+    }),
+    critical: opts.button({
+      base,
+      dark,
+      solid: solid.critical,
+      muted: muted.critical,
+      mode
+    })
+  };
+}
+function createButtonModes(opts, base, dark, solid, muted) {
+  return {
+    default: createButtonTones(opts, base, dark, solid, muted, "default"),
+    ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
+    bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
+  };
+}
+function createCardStates(opts, base, dark, name, solid, muted) {
+  return {
+    enabled: opts.card({
+      base,
+      dark,
+      name,
+      state: "enabled",
+      solid,
+      muted
+    }),
+    disabled: opts.card({
+      base,
+      dark,
+      name,
+      state: "disabled",
+      solid,
+      muted
+    }),
+    hovered: opts.card({
+      base,
+      dark,
+      name,
+      state: "hovered",
+      solid,
+      muted
+    }),
+    pressed: opts.card({
+      base,
+      dark,
+      name,
+      state: "pressed",
+      solid,
+      muted
+    }),
+    selected: opts.card({
+      base,
+      dark,
+      name,
+      state: "selected",
+      solid,
+      muted
+    })
+  };
+}
+const black = "hsl(0, 0%, 0%)";
+const white = "hsl(0, 0%, 100%)";
+const colors = {
+  default: {
+    lightest: "hsl(0, 0%, 95%)",
+    lighter: "hsl(0, 0%, 70%)",
+    light: "hsl(0, 0%, 65%)",
+    base: "hsl(0, 0%, 50%)",
+    dark: "hsl(0, 0%, 35%)",
+    darker: "hsl(0, 0%, 20%)",
+    darkest: "hsl(0, 0%, 5%)"
+  },
+  transparent: {
+    lightest: "hsl(240, 100%, 95%)",
+    lighter: "hsl(240, 100%, 70%)",
+    light: "hsl(240, 100%, 65%)",
+    base: "hsl(240, 100%, 50%)",
+    dark: "hsl(240, 100%, 35%)",
+    darker: "hsl(240, 100%, 20%)",
+    darkest: "hsl(240, 100%, 5%)"
+  },
+  primary: {
+    lightest: "hsl(240, 100%, 95%)",
+    lighter: "hsl(240, 100%, 70%)",
+    light: "hsl(240, 100%, 65%)",
+    base: "hsl(240, 100%, 50%)",
+    dark: "hsl(240, 100%, 35%)",
+    darker: "hsl(240, 100%, 20%)",
+    darkest: "hsl(240, 100%, 5%)"
+  },
+  positive: {
+    lightest: "hsl(120, 100%, 95%)",
+    lighter: "hsl(120, 100%, 70%)",
+    light: "hsl(120, 100%, 65%)",
+    base: "hsl(120, 100%, 50%)",
+    dark: "hsl(120, 100%, 35%)",
+    darker: "hsl(120, 100%, 20%)",
+    darkest: "hsl(120, 100%, 5%)"
+  },
+  caution: {
+    lightest: "hsl(60, 100%, 95%)",
+    lighter: "hsl(60, 100%, 70%)",
+    light: "hsl(60, 100%, 65%)",
+    base: "hsl(60, 100%, 50%)",
+    dark: "hsl(60, 100%, 35%)",
+    darker: "hsl(60, 100%, 20%)",
+    darkest: "hsl(60, 100%, 5%)"
+  },
+  critical: {
+    lightest: "hsl(0, 100%, 95%)",
+    lighter: "hsl(0, 100%, 70%)",
+    light: "hsl(0, 100%, 65%)",
+    base: "hsl(0, 100%, 50%)",
+    dark: "hsl(0, 100%, 35%)",
+    darker: "hsl(0, 100%, 20%)",
+    darkest: "hsl(0, 100%, 5%)"
+  }
+};
+const spots = {
+  gray: "hsl(0, 0%, 50%)",
+  red: "hsl(0, 100%, 50%)",
+  orange: "hsl(30, 100%, 50%)",
+  yellow: "hsl(60, 100%, 50%)",
+  green: "hsl(120, 100%, 50%)",
+  cyan: "hsl(180, 100%, 50%)",
+  blue: "hsl(240, 100%, 50%)",
+  purple: "hsl(270, 100%, 50%)",
+  magenta: "hsl(300, 100%, 50%)"
+};
+const tones = {
+  transparent: {
+    bg: [colors.transparent.darkest, colors.transparent.lightest],
+    fg: [colors.transparent.lightest, colors.transparent.darkest],
+    border: [colors.transparent.darker, colors.transparent.lighter],
+    focusRing: [colors.transparent.base, colors.transparent.base]
+  },
+  primary: {
+    bg: [colors.primary.darkest, colors.primary.lightest],
+    fg: [colors.primary.lightest, colors.primary.darkest],
+    border: [colors.primary.darker, colors.primary.lighter],
+    focusRing: [colors.primary.base, colors.primary.base]
+  },
+  positive: {
+    bg: [colors.positive.darkest, colors.positive.lightest],
+    fg: [colors.positive.lightest, colors.positive.darkest],
+    border: [colors.positive.darker, colors.positive.lighter],
+    focusRing: [colors.positive.base, colors.positive.base]
+  },
+  caution: {
+    bg: [colors.caution.darkest, colors.caution.lightest],
+    fg: [colors.caution.lightest, colors.caution.darkest],
+    border: [colors.caution.darker, colors.caution.lighter],
+    focusRing: [colors.caution.base, colors.caution.base]
+  },
+  critical: {
+    bg: [colors.critical.darkest, colors.critical.lightest],
+    fg: [colors.critical.lightest, colors.critical.darkest],
+    border: [colors.critical.darker, colors.critical.lighter],
+    focusRing: [colors.critical.base, colors.critical.base]
+  }
+};
+const defaultOpts = {
+  base: _ref => {
+    let {
+      dark,
+      name
+    } = _ref;
+    if (name === "default") {
+      return {
+        bg: dark ? black : white,
+        fg: dark ? white : black,
+        border: dark ? colors.default.darkest : colors.default.lightest,
+        focusRing: colors.primary.base,
+        shadow: {
+          outline: black,
+          umbra: black,
+          penumbra: black,
+          ambient: black
+        },
+        skeleton: {
+          from: dark ? white : black,
+          to: dark ? white : black
+        }
+      };
+    }
+    return {
+      bg: tones[name].bg[dark ? 0 : 1],
+      fg: tones[name].fg[dark ? 0 : 1],
+      border: tones[name].border[dark ? 0 : 1],
+      focusRing: tones[name].focusRing[dark ? 0 : 1],
+      shadow: {
+        outline: black,
+        umbra: black,
+        penumbra: black,
+        ambient: black
+      },
+      skeleton: {
+        from: dark ? white : black,
+        to: dark ? white : black
+      }
+    };
+  },
+  solid: _ref2 => {
+    let {
+      base,
+      dark,
+      state,
+      tone
+    } = _ref2;
+    const color = colors[tone];
+    if (state === "hovered") {
+      return {
+        bg: dark ? color.light : color.dark,
+        bg2: dark ? color.light : color.dark,
+        border: dark ? color.lighter : color.darker,
+        fg: dark ? color.darkest : color.lightest,
+        icon: dark ? color.darkest : color.lightest,
+        muted: {
+          fg: black
+        },
+        accent: {
+          fg: black
+        },
+        link: {
+          fg: black
+        },
+        code: {
+          bg: black,
+          fg: black
+        },
+        skeleton: base.skeleton
+      };
+    }
+    return {
+      bg: color.base,
+      bg2: color.base,
+      border: dark ? color.light : color.dark,
+      fg: dark ? color.darkest : color.lightest,
+      icon: dark ? color.darkest : color.lightest,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    };
+  },
+  muted: _ref3 => {
+    let {
+      base,
+      dark,
+      state,
+      tone
+    } = _ref3;
+    const color = colors[tone];
+    if (state === "hovered") {
+      return {
+        bg: dark ? color.darker : color.lighter,
+        bg2: dark ? color.darker : color.lighter,
+        border: dark ? color.lighter : color.darker,
+        fg: dark ? color.lightest : color.darkest,
+        icon: dark ? color.lightest : color.darkest,
+        muted: {
+          fg: black
+        },
+        accent: {
+          fg: black
+        },
+        link: {
+          fg: black
+        },
+        code: {
+          bg: black,
+          fg: black
+        },
+        skeleton: base.skeleton
+      };
+    }
+    return {
+      bg: dark ? color.darkest : color.lightest,
+      bg2: dark ? color.darkest : color.lightest,
+      border: dark ? color.darker : color.lighter,
+      fg: dark ? color.lighter : color.darker,
+      icon: dark ? color.lighter : color.darker,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    };
+  },
+  button: _ref4 => {
+    let {
+      base,
+      mode,
+      muted,
+      solid
+    } = _ref4;
+    if (mode === "bleed") {
+      return {
+        ...muted,
+        enabled: {
+          bg: "transparent",
+          bg2: "transparent",
+          fg: muted.enabled.fg,
+          icon: muted.enabled.fg,
+          border: "transparent",
+          muted: {
+            fg: black
+          },
+          accent: {
+            fg: black
+          },
+          link: {
+            fg: black
+          },
+          code: {
+            bg: black,
+            fg: black
+          },
+          skeleton: base.skeleton
+        },
+        hovered: {
+          bg: muted.enabled.bg,
+          bg2: muted.enabled.bg,
+          fg: muted.hovered.fg,
+          icon: muted.hovered.fg,
+          border: "transparent",
+          muted: {
+            fg: black
+          },
+          accent: {
+            fg: black
+          },
+          link: {
+            fg: black
+          },
+          code: {
+            bg: black,
+            fg: black
+          },
+          skeleton: base.skeleton
+        }
+      };
+    }
+    if (mode === "ghost") return {
+      ...solid,
+      enabled: muted.enabled
+    };
+    return solid;
+  },
+  card: _ref5 => {
+    let {
+      base
+    } = _ref5;
+    return {
+      bg: black,
+      bg2: black,
+      fg: black,
+      icon: black,
+      border: black,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    };
+  },
+  input: () => {
+    return {
+      bg: black,
+      bg2: black,
+      fg: black,
+      border: black,
+      placeholder: black
+    };
+  },
+  selectable: _ref6 => {
+    let {
+      muted,
+      state,
+      tone
+    } = _ref6;
+    return muted[tone][state];
+  },
+  spot: _ref7 => {
+    let {
+      key
+    } = _ref7;
+    return spots[key];
+  },
+  syntax: () => ({
+    atrule: black,
+    attrName: black,
+    attrValue: black,
+    attribute: black,
+    boolean: black,
+    builtin: black,
+    cdata: black,
+    char: black,
+    class: black,
+    className: black,
+    comment: black,
+    constant: black,
+    deleted: black,
+    doctype: black,
+    entity: black,
+    function: black,
+    hexcode: black,
+    id: black,
+    important: black,
+    inserted: black,
+    keyword: black,
+    number: black,
+    operator: black,
+    prolog: black,
+    property: black,
+    pseudoClass: black,
+    pseudoElement: black,
+    punctuation: black,
+    regex: black,
+    selector: black,
+    string: black,
+    symbol: black,
+    tag: black,
+    unit: black,
+    url: black,
+    variable: black
+  })
+};
+function createInputModes(opts, base, dark, solid, muted) {
+  return {
+    default: {
+      enabled: opts.input({
+        base,
+        dark,
+        mode: "default",
+        state: "enabled",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      disabled: opts.input({
+        base,
+        dark,
+        mode: "default",
+        state: "disabled",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      hovered: opts.input({
+        base,
+        dark,
+        mode: "default",
+        state: "hovered",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      readOnly: opts.input({
+        base,
+        dark,
+        mode: "default",
+        state: "readOnly",
+        solid: solid.default,
+        muted: muted.default
+      })
+    },
+    invalid: {
+      enabled: opts.input({
+        base,
+        dark,
+        mode: "invalid",
+        state: "enabled",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      disabled: opts.input({
+        base,
+        dark,
+        mode: "invalid",
+        state: "disabled",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      hovered: opts.input({
+        base,
+        dark,
+        mode: "invalid",
+        state: "hovered",
+        solid: solid.default,
+        muted: muted.default
+      }),
+      readOnly: opts.input({
+        base,
+        dark,
+        mode: "invalid",
+        state: "readOnly",
+        solid: solid.default,
+        muted: muted.default
+      })
+    }
+  };
+}
+function createMutedTones(opts, base, dark, name) {
+  return {
+    default: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "default",
+        name,
+        state: "selected"
+      })
+    },
+    transparent: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "transparent",
+        name,
+        state: "selected"
+      })
+    },
+    primary: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "primary",
+        name,
+        state: "selected"
+      })
+    },
+    positive: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "positive",
+        name,
+        state: "selected"
+      })
+    },
+    caution: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "caution",
+        name,
+        state: "selected"
+      })
+    },
+    critical: {
+      enabled: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "enabled"
+      }),
+      disabled: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "disabled"
+      }),
+      hovered: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "hovered"
+      }),
+      pressed: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "pressed"
+      }),
+      selected: opts.muted({
+        base,
+        dark,
+        tone: "critical",
+        name,
+        state: "selected"
+      })
+    }
+  };
+}
+function createSpot(opts, base, dark) {
+  return {
+    gray: opts.spot({
+      base,
+      dark,
+      key: "gray"
+    }),
+    blue: opts.spot({
+      base,
+      dark,
+      key: "blue"
+    }),
+    purple: opts.spot({
+      base,
+      dark,
+      key: "purple"
+    }),
+    magenta: opts.spot({
+      base,
+      dark,
+      key: "magenta"
+    }),
+    red: opts.spot({
+      base,
+      dark,
+      key: "red"
+    }),
+    orange: opts.spot({
+      base,
+      dark,
+      key: "orange"
+    }),
+    yellow: opts.spot({
+      base,
+      dark,
+      key: "yellow"
+    }),
+    green: opts.spot({
+      base,
+      dark,
+      key: "green"
+    }),
+    cyan: opts.spot({
+      base,
+      dark,
+      key: "cyan"
+    })
+  };
+}
+function createColorTheme() {
+  let partialOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const builders = {
+    ...defaultOpts,
+    ...partialOpts
+  };
+  return {
+    light: _createColorScheme(builders, false),
+    dark: _createColorScheme(builders, true)
+  };
+}
+function _createColorScheme(opts, dark) {
+  return {
+    default: _createColor(opts, dark, "default"),
+    transparent: _createColor(opts, dark, "transparent"),
+    primary: _createColor(opts, dark, "primary"),
+    positive: _createColor(opts, dark, "positive"),
+    caution: _createColor(opts, dark, "caution"),
+    critical: _createColor(opts, dark, "critical")
+  };
+}
+function _createColor(opts, dark, name) {
+  const base = opts.base({
+    dark,
+    name
+  });
+  const solid = createSolidTones(opts, base, dark, name);
+  const muted = createMutedTones(opts, base, dark, name);
+  return {
+    base,
+    button: createButtonModes(opts, base, dark, solid, muted),
+    card: createCardStates(opts, base, dark, name, solid, muted),
+    dark,
+    input: createInputModes(opts, base, dark, solid, muted),
+    selectable: createSelectableTones(opts, base, dark, solid, muted),
+    spot: createSpot(opts, base, dark),
+    syntax: opts.syntax({
+      base,
+      dark
+    }),
+    solid,
+    muted
+  };
+}
+const THEME_COLOR_BLEND_MODES = ["multiply", "screen"];
+const THEME_COLOR_BASE_TONES = ["transparent", "default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const THEME_COLOR_STATE_TONES = ["default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
+const THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
+const THEME_COLOR_INPUT_MODES = ["default", "invalid"];
+const THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"];
+const THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+function isColorBlendModeValue(str) {
+  return THEME_COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueKey(str) {
+  return COLOR_HUES.includes(str);
+}
+function isColorTintKey(str) {
+  return COLOR_TINTS.includes(str);
+}
+function isColorButtonMode(str) {
+  return THEME_COLOR_BUTTON_MODES.includes(str);
+}
+const COLOR_CONFIG_BASE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_BLEND_KEYS = ["_blend"];
+const COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS];
+const COLOR_CONFIG_BASE_TONES = ["*", ...THEME_COLOR_BASE_TONES];
+const COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES];
+const COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES];
+const COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES];
+const COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+function parseTokenKey(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join("/");
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+  }
+  if (segment0 === "button") {
+    const segment1 = segments.shift() || "";
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || "";
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join("/");
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+      }
+    }
+  }
+  return void 0;
+}
+function parseTokenValue(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorTintKey(segment0)) {
+    const tint = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        tint,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      tint
+    };
+  }
+  if (isColorValue(segment0)) {
+    const key = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        key,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      key
+    };
+  }
+  if (isColorHueKey(segment0)) {
+    const hue = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorTintKey(segment1)) {
+      const tint = segment1;
+      const segment2 = segments.shift() || "";
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2);
+        return {
+          type: "color",
+          key: "".concat(hue, "/").concat(tint),
+          hue,
+          tint,
+          opacity
+        };
+      }
+      return {
+        type: "color",
+        key: "".concat(hue, "/").concat(tint),
+        hue,
+        tint
+      };
+    }
+    return {
+      type: "hue",
+      value: "".concat(hue)
+    };
+  }
+  if (isColorOpacityValue(segment0)) {
+    const opacity = Number(segment0);
+    return {
+      type: "color",
+      opacity
+    };
+  }
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0;
+    return {
+      type: "blendMode",
+      value
+    };
+  }
+  return void 0;
+}
+function isColorConfigBaseTone(str) {
+  return COLOR_CONFIG_BASE_TONES.includes(str);
+}
+function isColorConfigBaseKey(str) {
+  return COLOR_CONFIG_BASE_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 isColorTokenValue(str) {
+  var _a, _b;
+  return ((_a = parseTokenValue(str)) == null ? void 0 : _a.type) === "color" || ((_b = parseTokenValue(str)) == null ? void 0 : _b.type) === "hue";
+}
+function isColorValue(str) {
+  return str === "black" || str === "white";
+}
+function isColorOpacityValue(str) {
+  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function resolveColorTokenValue(context, value) {
+  const {
+    hue,
+    scheme
+  } = context;
+  const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token: ".concat(value[0]));
+  }
+  return compileColorTokenValue({
+    ...node,
+    hue: node.hue || hue
+  });
+}
+function compileColorTokenValue(node) {
+  let key = "";
+  if (node.key === "black" || node.key === "white") {
+    key = node.key;
+  } else {
+    key = "".concat(node.hue, "/").concat(node.tint);
+  }
+  if (node.opacity !== void 0) {
+    key += "/".concat(node.opacity);
+  }
+  return key;
+}
+const defaultColorTokens = {
+  avatar: {
+    "*": {
+      _blend: ["screen", "multiply"],
+      _hue: "gray",
+      bg: ["500", "400"],
+      fg: ["white", "black"]
+    },
+    blue: {
+      _hue: "blue"
+    },
+    purple: {
+      _hue: "purple"
+    },
+    magenta: {
+      _hue: "magenta"
+    },
+    red: {
+      _hue: "red"
+    },
+    orange: {
+      _hue: "orange"
+    },
+    yellow: {
+      _hue: "yellow",
+      bg: ["600", "400"]
+    },
+    green: {
+      _hue: "green",
+      bg: ["600", "400"]
+    },
+    cyan: {
+      _hue: "cyan",
+      bg: ["600", "400"]
+    }
+  },
+  badge: {
+    "*": {
+      _blend: ["multiply", "screen"],
+      bg: ["100", "900"],
+      fg: ["800", "200"]
+    }
+  },
+  base: {
+    "*": {
+      _blend: ["multiply", "screen"],
+      bg: ["50", "950"],
+      fg: ["800", "200"],
+      border: ["200", "900"],
+      focusRing: ["blue/500", "blue/500"],
+      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/0.5", "900/0.5"]
+      }
+    },
+    transparent: {
+      bg: ["50", "black"],
+      fg: ["600", "400"]
+    },
+    default: {
+      bg: ["white", "950"],
+      fg: ["black", "200"]
+    },
+    primary: {
+      _hue: "blue"
+    },
+    positive: {
+      _hue: "green"
+    },
+    caution: {
+      _hue: "yellow"
+    },
+    critical: {
+      _hue: "red"
+    }
+  },
+  button: {
+    default: {
+      "*": {
+        "*": {
+          _blend: ["screen", "multiply"],
+          bg: ["500", "400"],
+          bg2: ["900", "50"],
+          fg: ["white", "black"],
+          icon: ["200", "900"],
+          border: ["500/0", "400/0"],
+          muted: {
+            fg: ["200", "700"]
+          },
+          accent: {
+            fg: ["purple/200", "purple/700"]
+          },
+          link: {
+            fg: ["blue/200", "blue/700"]
+          },
+          code: {
+            bg: ["500/0.2", "400/0.2"],
+            fg: ["200", "700"]
+          },
+          skeleton: {
+            from: ["900", "100"],
+            to: ["900/0.5", "100/0.5"]
+          }
+        },
+        hovered: {
+          bg: ["600", "300"],
+          border: ["600/0", "300/0"]
+        },
+        pressed: {
+          bg: ["700", "200"]
+        },
+        selected: {
+          bg: ["700", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          bg: ["200", "900"],
+          icon: ["white", "black"]
+        }
+      },
+      default: {
+        "*": {
+          bg: ["800", "200"]
+        },
+        hovered: {
+          bg: ["900", "100"]
+        },
+        pressed: {
+          bg: ["black", "white"]
+        },
+        selected: {
+          bg: ["black", "white"]
+        }
+      },
+      positive: {
+        "*": {
+          bg: ["600", "400"]
+        },
+        hovered: {
+          bg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["800", "200"]
+        },
+        selected: {
+          bg: ["800", "200"]
+        }
+      },
+      caution: {
+        "*": {
+          bg: ["600", "400"]
+        },
+        hovered: {
+          bg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["800", "200"]
+        },
+        selected: {
+          bg: ["800", "200"]
+        }
+      }
+    },
+    ghost: {
+      "*": {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["50", "950"],
+          bg2: ["100", "950"],
+          fg: ["700", "400"],
+          icon: ["600", "500"],
+          border: ["200", "900"],
+          muted: {
+            fg: ["700/0.6", "400/0.6"]
+          },
+          accent: {
+            fg: ["purple/700/0.6", "purple/400/0.8"]
+          },
+          link: {
+            fg: ["blue/700/0.6", "blue/400/0.8"]
+          },
+          code: {
+            bg: ["500/0.1", "400/0.1"],
+            fg: ["700/0.6", "400/0.6"]
+          },
+          skeleton: {
+            from: ["100", "900"],
+            to: ["100/0.5", "900/0.5"]
+          }
+        },
+        hovered: {
+          bg: ["100", "900"],
+          fg: ["700", "400"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "300"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "300"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["200", "900"],
+          icon: ["200", "900"],
+          border: ["100", "950"],
+          muted: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          accent: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          link: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          code: {
+            bg: ["50/0.5", "950/0.5"],
+            fg: ["200/0.6", "900/0.6"]
+          }
+        }
+      },
+      critical: {
+        "*": {
+          border: ["500/0.2", "900"]
+        }
+      }
+    },
+    bleed: {
+      "*": {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["white", "black"],
+          bg2: ["100", "950"],
+          fg: ["700", "400"],
+          icon: ["600", "500"],
+          border: ["white/0", "black/0"],
+          muted: {
+            fg: ["600", "300"]
+          },
+          accent: {
+            fg: ["purple/600", "purple/300"]
+          },
+          link: {
+            fg: ["blue/600", "blue/300"]
+          },
+          code: {
+            bg: ["100", "950"],
+            fg: ["600", "300"]
+          },
+          skeleton: {
+            from: ["100", "900"],
+            to: ["100/0.5", "900/0.5"]
+          }
+        },
+        hovered: {
+          bg: ["50", "950"],
+          fg: ["700", "400"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "300"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "300"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["200", "900"],
+          muted: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          accent: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          link: {
+            fg: ["200/0.6", "900/0.6"]
+          },
+          code: {
+            bg: ["50/0.5", "950/0.5"],
+            fg: ["200/0.6", "900/0.6"]
+          }
+        }
+      }
+    }
+  },
+  card: {
+    "*": {
+      _blend: ["multiply", "screen"],
+      bg: ["white", "black"],
+      bg2: ["100", "950"],
+      fg: ["black", "white"],
+      icon: ["500", "400"],
+      border: ["200", "900"],
+      muted: {
+        fg: ["gray/600", "gray/400"]
+      },
+      accent: {
+        fg: ["purple/600", "purple/300"]
+      },
+      link: {
+        fg: ["blue/700", "blue/300"]
+      },
+      code: {
+        bg: ["100", "950"],
+        fg: ["gray/600", "gray/400"]
+      },
+      skeleton: {
+        from: ["100", "900"],
+        to: ["100/0.5", "900/0.5"]
+      }
+    },
+    hovered: {
+      bg: ["100", "950"]
+    },
+    pressed: {
+      bg: ["100", "900"]
+    },
+    selected: {
+      _blend: ["screen", "multiply"],
+      bg: ["500", "400"],
+      border: ["800", "200"],
+      bg2: ["950", "50"],
+      fg: ["white", "black"]
+    },
+    disabled: {
+      _hue: "gray",
+      fg: ["200", "900"],
+      icon: ["200", "800"],
+      border: ["100", "900/0.5"],
+      muted: {
+        fg: ["200/0.5", "800/0.5"]
+      },
+      accent: {
+        fg: ["200/0.6", "800/0.6"]
+      },
+      link: {
+        fg: ["200/0.6", "800/0.6"]
+      },
+      code: {
+        bg: ["100/0.6", "950/0.6"],
+        fg: ["200/0.6", "800/0.6"]
+      }
+    }
+  },
+  input: {
+    "*": {
+      "*": {
+        _blend: ["multiply", "screen"],
+        bg: ["white", "black"],
+        bg2: ["50", "950"],
+        fg: ["black", "200"],
+        border: ["200", "900"],
+        placeholder: ["400", "600/0.5"]
+      },
+      hovered: {
+        border: ["300", "800"]
+      },
+      readOnly: {
+        border: ["200/0", "900/0"],
+        bg: ["100", "950"],
+        fg: ["800", "200"]
+      },
+      disabled: {
+        fg: ["200", "800"],
+        border: ["100", "900"]
+      }
+    },
+    invalid: {
+      "*": {
+        _hue: "red",
+        bg: ["100", "950"]
+      }
+    }
+  },
+  kbd: {
+    _blend: ["multiply", "screen"],
+    bg: ["white", "black"],
+    fg: ["600", "400"],
+    border: ["200", "900"]
+  },
+  selectable: {
+    "*": {
+      "*": {
+        _blend: ["multiply", "screen"],
+        bg: ["white", "black"],
+        bg2: ["50", "950"],
+        fg: ["900", "200"],
+        icon: ["600", "400"],
+        border: ["200", "900"],
+        muted: {
+          fg: ["700", "400"]
+        },
+        accent: {
+          fg: ["purple/600", "purple/400"]
+        },
+        link: {
+          fg: ["blue/700", "blue/400"]
+        },
+        code: {
+          bg: ["100", "950"],
+          fg: ["700", "400"]
+        },
+        skeleton: {
+          from: ["100", "900"],
+          to: ["100/0.5", "900/0.5"]
+        }
+      },
+      hovered: {
+        bg: ["50", "950"]
+      },
+      pressed: {
+        bg: ["100", "900"]
+      },
+      selected: {
+        _blend: ["screen", "multiply"],
+        bg: ["500", "400"],
+        bg2: ["900", "50"],
+        fg: ["white", "black"],
+        icon: ["200", "900"],
+        border: ["500/0.2", "400/0.2"],
+        muted: {
+          fg: ["200", "700"]
+        },
+        accent: {
+          fg: ["purple/200", "purple/700"]
+        },
+        link: {
+          fg: ["blue/200", "blue/700"]
+        },
+        code: {
+          bg: ["500/0.2", "400/0.2"],
+          fg: ["200", "700"]
+        },
+        skeleton: {
+          from: ["900", "100"],
+          to: ["900/0.5", "100/0.5"]
+        }
+      },
+      disabled: {
+        fg: ["200", "800"],
+        icon: ["200", "800"],
+        muted: {
+          fg: ["200", "800/0.5"]
+        },
+        accent: {
+          fg: ["purple/200", "purple/800/0.5"]
+        },
+        link: {
+          fg: ["blue/200", "blue/800/0.5"]
+        },
+        code: {
+          bg: ["100", "950/0.5"],
+          fg: ["200", "800/0.5"]
+        }
+      }
+    },
+    default: {
+      selected: {
+        _hue: "blue"
+        // bg: ['500', '400'],
+      }
+    },
+
+    critical: {
+      disabled: {
+        bg: ["50/0.5", "950/0.5"]
+      }
+    }
+  },
+  syntax: {
+    atrule: ["purple/700", "purple/400"],
+    attrName: ["green/700", "green/400"],
+    attrValue: ["yellow/700", "yellow/400"],
+    attribute: ["yellow/700", "yellow/400"],
+    boolean: ["purple/700", "purple/400"],
+    builtin: ["purple/700", "purple/400"],
+    cdata: ["yellow/700", "yellow/400"],
+    char: ["yellow/700", "yellow/400"],
+    class: ["orange/700", "orange/400"],
+    className: ["cyan/700", "cyan/400"],
+    comment: ["gray/700/0.5", "gray/400/0.5"],
+    constant: ["purple/700", "purple/400"],
+    deleted: ["red/700", "red/400"],
+    entity: ["red/700", "red/400"],
+    function: ["green/700", "green/400"],
+    hexcode: ["blue/700", "blue/400"],
+    id: ["purple/700", "purple/400"],
+    important: ["purple/700", "purple/400"],
+    inserted: ["yellow/700", "yellow/400"],
+    keyword: ["magenta/700", "magenta/400"],
+    number: ["purple/700", "purple/400"],
+    operator: ["magenta/700", "magenta/400"],
+    property: ["blue/700", "blue/400"],
+    pseudoClass: ["yellow/700", "yellow/400"],
+    pseudoElement: ["yellow/700", "yellow/400"],
+    punctuation: ["gray/700", "gray/400"],
+    regex: ["blue/700", "blue/400"],
+    selector: ["red/700", "red/400"],
+    string: ["yellow/700", "yellow/400"],
+    symbol: ["purple/700", "purple/400"],
+    tag: ["red/700", "red/400"],
+    unit: ["orange/700", "orange/400"],
+    url: ["red/700", "red/400"],
+    variable: ["red/700", "red/400"]
+  }
+};
+function merge(target, source) {
+  const ret = {
+    ...target
+  };
+  for (const key of Object.keys(source)) {
+    const prevValue = target[key];
+    const nextValue = source[key];
+    if (isRecord(prevValue) && isRecord(nextValue)) {
+      ret[key] = merge(prevValue, nextValue);
+    } else {
+      ret[key] = nextValue;
+    }
+  }
+  return ret;
+}
+function isRecord(value) {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function resolveColorTokens(inputTokens) {
+  const sparseTokens = merge(defaultColorTokens, inputTokens != null ? inputTokens : {});
+  return {
+    avatar: resolveAvatarColorTokens(sparseTokens),
+    badge: resolveBadgeColorTokens(sparseTokens),
+    base: resolveBaseColorTokens(sparseTokens),
+    button: resolveButtonColorTokens(sparseTokens),
+    card: resolveCardColorTokens(sparseTokens),
+    input: resolveInputColorTokens(sparseTokens),
+    kbd: resolveKBDColorTokens(sparseTokens),
+    selectable: resolveSelectableColorTokens(sparseTokens),
+    spot: resolveSpotColorTokens(sparseTokens),
+    syntax: resolveSyntaxColorTokens(sparseTokens)
+  };
+}
+function resolveKBDColorTokens(sparseTokens) {
+  return sparseTokens == null ? void 0 : sparseTokens.kbd;
+}
+function resolveAvatarColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const color of THEME_COLOR_AVATAR_COLORS) {
+    tokens[color] = _resolveAvatarColorTokens(sparseTokens, color);
+  }
+  return tokens;
+}
+function _resolveAvatarColorTokens(sparseTokens, color) {
+  var _a, _b;
+  const spec0 = (_a = sparseTokens == null ? void 0 : sparseTokens.avatar) == null ? void 0 : _a[color];
+  const spec1 = (_b = sparseTokens == null ? void 0 : sparseTokens.avatar) == null ? void 0 : _b["*"];
+  return {
+    ...spec1,
+    ...spec0
+  };
+}
+function resolveBadgeColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = _resolveBadgeColorTokens(sparseTokens, tone);
+  }
+  return tokens;
+}
+function _resolveBadgeColorTokens(sparseTokens, tone) {
+  var _a, _b;
+  const spec0 = (_a = sparseTokens == null ? void 0 : sparseTokens.badge) == null ? void 0 : _a[tone];
+  const spec1 = (_b = sparseTokens == null ? void 0 : sparseTokens.badge) == null ? void 0 : _b["*"];
+  return {
+    ...spec1,
+    ...spec0
+  };
+}
+function resolveBaseColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_BASE_TONES) {
+    tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
+  }
+  return tokens;
+}
+function resolveBaseColorTones(sparseTokens, tone) {
+  var _a, _b;
+  const spec0 = (_a = sparseTokens == null ? void 0 : sparseTokens.base) == null ? void 0 : _a[tone];
+  const spec1 = (_b = sparseTokens == null ? void 0 : sparseTokens.base) == null ? void 0 : _b["*"];
+  return {
+    ...spec1,
+    ...spec0,
+    shadow: {
+      ...(spec1 == null ? void 0 : spec1.shadow),
+      ...(spec0 == null ? void 0 : spec0.shadow)
+    },
+    skeleton: {
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveButtonColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonToneColorTokens(sparseTokens, mode);
+  }
+  return tokens;
+}
+function resolveButtonToneColorTokens(sparseTokens, mode) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonModeColorTokens(sparseTokens, mode, tone);
+  }
+  return tokens;
+}
+function resolveButtonModeColorTokens(sparseTokens, mode, tone) {
+  var _a, _b, _c, _d;
+  const spec0 = (_b = (_a = sparseTokens.button) == null ? void 0 : _a[mode]) == null ? void 0 : _b[tone];
+  const spec1 = (_d = (_c = sparseTokens.button) == null ? void 0 : _c[mode]) == null ? void 0 : _d["*"];
+  const tokens = {
+    ...spec1,
+    ...spec0
+  };
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state);
+  }
+  return tokens;
+}
+function resolveButtonStateColorTokens(tokens, tone, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const spec0 = (_c = (_b = (_a = tokens == null ? void 0 : tokens.button) == null ? void 0 : _a[mode]) == null ? void 0 : _b[tone]) == null ? void 0 : _c[state];
+  const spec1 = (_f = (_e = (_d = tokens == null ? void 0 : tokens.button) == null ? void 0 : _d[mode]) == null ? void 0 : _e["*"]) == null ? void 0 : _f[state];
+  const spec2 = (_i = (_h = (_g = tokens == null ? void 0 : tokens.button) == null ? void 0 : _g[mode]) == null ? void 0 : _h[tone]) == null ? void 0 : _i["*"];
+  const spec3 = (_l = (_k = (_j = tokens == null ? void 0 : tokens.button) == null ? void 0 : _j[mode]) == null ? void 0 : _k["*"]) == null ? void 0 : _l["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue) || (spec2 == null ? void 0 : spec2._hue) || (spec3 == null ? void 0 : spec3._hue) || ((_n = (_m = tokens == null ? void 0 : tokens.base) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue);
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {
+      ...(spec3 == null ? void 0 : spec3.muted),
+      ...(spec2 == null ? void 0 : spec2.muted),
+      ...(spec1 == null ? void 0 : spec1.muted),
+      ...(spec0 == null ? void 0 : spec0.muted)
+    },
+    accent: {
+      ...(spec3 == null ? void 0 : spec3.accent),
+      ...(spec2 == null ? void 0 : spec2.accent),
+      ...(spec1 == null ? void 0 : spec1.accent),
+      ...(spec0 == null ? void 0 : spec0.accent)
+    },
+    link: {
+      ...(spec3 == null ? void 0 : spec3.link),
+      ...(spec2 == null ? void 0 : spec2.link),
+      ...(spec1 == null ? void 0 : spec1.link),
+      ...(spec0 == null ? void 0 : spec0.link)
+    },
+    code: {
+      ...(spec3 == null ? void 0 : spec3.code),
+      ...(spec2 == null ? void 0 : spec2.code),
+      ...(spec1 == null ? void 0 : spec1.code),
+      ...(spec0 == null ? void 0 : spec0.code)
+    },
+    skeleton: {
+      ...(spec3 == null ? void 0 : spec3.skeleton),
+      ...(spec2 == null ? void 0 : spec2.skeleton),
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveCardColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveCardStateColorTokens(sparseTokens, state);
+  }
+  return tokens;
+}
+function resolveCardStateColorTokens(tokens, state) {
+  var _a, _b;
+  const spec0 = (_a = tokens == null ? void 0 : tokens.card) == null ? void 0 : _a[state];
+  const spec1 = (_b = tokens == null ? void 0 : tokens.card) == null ? void 0 : _b["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue);
+  return {
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {
+      ...(spec1 == null ? void 0 : spec1.muted),
+      ...(spec0 == null ? void 0 : spec0.muted)
+    },
+    accent: {
+      ...(spec1 == null ? void 0 : spec1.accent),
+      ...(spec0 == null ? void 0 : spec0.accent)
+    },
+    link: {
+      ...(spec1 == null ? void 0 : spec1.link),
+      ...(spec0 == null ? void 0 : spec0.link)
+    },
+    code: {
+      ...(spec1 == null ? void 0 : spec1.code),
+      ...(spec0 == null ? void 0 : spec0.code)
+    },
+    skeleton: {
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveInputColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const mode of THEME_COLOR_INPUT_MODES) {
+    tokens[mode] = resolveInputModeColorTokens(sparseTokens, mode);
+  }
+  return tokens;
+}
+function resolveInputModeColorTokens(sparseTokens, mode) {
+  const states = {};
+  for (const state of THEME_COLOR_INPUT_STATES) {
+    states[state] = resolveInputStateColorTokens(sparseTokens, mode, state);
+  }
+  return states;
+}
+function resolveInputStateColorTokens(tokens, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const spec0 = (_b = (_a = tokens == null ? void 0 : tokens.input) == null ? void 0 : _a[mode]) == null ? void 0 : _b[state];
+  const spec1 = (_d = (_c = tokens == null ? void 0 : tokens.input) == null ? void 0 : _c["*"]) == null ? void 0 : _d[state];
+  const spec2 = (_f = (_e = tokens == null ? void 0 : tokens.input) == null ? void 0 : _e[mode]) == null ? void 0 : _f["*"];
+  const spec3 = (_h = (_g = tokens == null ? void 0 : tokens.input) == null ? void 0 : _g["*"]) == null ? void 0 : _h["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue) || (spec2 == null ? void 0 : spec2._hue) || (spec3 == null ? void 0 : spec3._hue) || ((_j = (_i = tokens == null ? void 0 : tokens.input) == null ? void 0 : _i[mode]) == null ? void 0 : _j._hue);
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue
+  };
+}
+function resolveSelectableColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveSelectableToneColorTokens(sparseTokens, tone);
+  }
+  return tokens;
+}
+function resolveSelectableToneColorTokens(sparseTokens, tone) {
+  var _a, _b, _c, _d;
+  const states = {
+    _hue: ((_b = (_a = sparseTokens == null ? void 0 : sparseTokens.selectable) == null ? void 0 : _a[tone]) == null ? void 0 : _b._hue) || ((_d = (_c = sparseTokens == null ? void 0 : sparseTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue)
+  };
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = resolveSelectableStateColorTokens(sparseTokens, state, tone);
+  }
+  return states;
+}
+function resolveSelectableStateColorTokens(tokens, state, tone) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const spec0 = (_b = (_a = tokens == null ? void 0 : tokens.selectable) == null ? void 0 : _a[tone]) == null ? void 0 : _b[state];
+  const spec1 = (_d = (_c = tokens == null ? void 0 : tokens.selectable) == null ? void 0 : _c["*"]) == null ? void 0 : _d[state];
+  const spec2 = (_f = (_e = tokens == null ? void 0 : tokens.selectable) == null ? void 0 : _e[tone]) == null ? void 0 : _f["*"];
+  const spec3 = (_h = (_g = tokens == null ? void 0 : tokens.selectable) == null ? void 0 : _g["*"]) == null ? void 0 : _h["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue) || (spec2 == null ? void 0 : spec2._hue) || (spec3 == null ? void 0 : spec3._hue) || ((_j = (_i = tokens == null ? void 0 : tokens.base) == null ? void 0 : _i[tone]) == null ? void 0 : _j._hue);
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {
+      ...(spec3 == null ? void 0 : spec3.muted),
+      ...(spec2 == null ? void 0 : spec2.muted),
+      ...(spec1 == null ? void 0 : spec1.muted),
+      ...(spec0 == null ? void 0 : spec0.muted)
+    },
+    accent: {
+      ...(spec3 == null ? void 0 : spec3.accent),
+      ...(spec2 == null ? void 0 : spec2.accent),
+      ...(spec1 == null ? void 0 : spec1.accent),
+      ...(spec0 == null ? void 0 : spec0.accent)
+    },
+    link: {
+      ...(spec3 == null ? void 0 : spec3.link),
+      ...(spec2 == null ? void 0 : spec2.link),
+      ...(spec1 == null ? void 0 : spec1.link),
+      ...(spec0 == null ? void 0 : spec0.link)
+    },
+    code: {
+      ...(spec3 == null ? void 0 : spec3.code),
+      ...(spec2 == null ? void 0 : spec2.code),
+      ...(spec1 == null ? void 0 : spec1.code),
+      ...(spec0 == null ? void 0 : spec0.code)
+    },
+    skeleton: {
+      ...(spec3 == null ? void 0 : spec3.skeleton),
+      ...(spec2 == null ? void 0 : spec2.skeleton),
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveSpotColorTokens(sparseTokens) {
+  return {
+    ...sparseTokens.spot
+  };
+}
+function resolveSyntaxColorTokens(sparseTokens) {
+  return {
+    ...sparseTokens.syntax
+  };
+}
+const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
+function buildColorTheme(config) {
+  return {
+    light: buildColorScheme({
+      scheme: "light"
+    }, config),
+    dark: buildColorScheme({
+      scheme: "dark"
+    }, config)
+  };
+}
+function buildColorScheme(options, config) {
+  const {
+    scheme
+  } = options;
+  const resolvedConfig = {
+    ...config,
+    color: resolveColorTokens(config == null ? void 0 : config.color)
+  };
+  return {
+    transparent: buildBaseColorTheme({
+      scheme,
+      tone: "transparent"
+    }, resolvedConfig),
+    default: buildBaseColorTheme({
+      scheme,
+      tone: "default"
+    }, resolvedConfig),
+    primary: buildBaseColorTheme({
+      scheme,
+      tone: "primary"
+    }, resolvedConfig),
+    positive: buildBaseColorTheme({
+      scheme,
+      tone: "positive"
+    }, resolvedConfig),
+    caution: buildBaseColorTheme({
+      scheme,
+      tone: "caution"
+    }, resolvedConfig),
+    critical: buildBaseColorTheme({
+      scheme,
+      tone: "critical"
+    }, resolvedConfig)
+  };
+}
+function buildBaseColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const {
+    scheme,
+    tone
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const context = {
+    hue,
+    scheme
+  };
+  const bg = resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE);
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const button = buildButtonColorTheme({
+    scheme
+  }, config);
+  const selectable = buildSelectableColorTheme({
+    scheme
+  }, config);
+  const _dark = scheme === "dark";
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    _dark,
+    avatar: buildAvatarColorTheme({
+      scheme
+    }, config),
+    badge: buildBadgeColorTheme({
+      scheme
+    }, config),
+    base: {
+      bg,
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE),
+      border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || DEFAULT_COLOR_TOKEN_VALUE),
+      focusRing: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.focusRing) || DEFAULT_COLOR_TOKEN_VALUE),
+      shadow: {
+        outline: resolveColorTokenValue(context, ((_c = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _c.outline) || DEFAULT_COLOR_TOKEN_VALUE),
+        umbra: resolveColorTokenValue(context, ((_d = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _d.umbra) || DEFAULT_COLOR_TOKEN_VALUE),
+        penumbra: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _e.penumbra) || DEFAULT_COLOR_TOKEN_VALUE),
+        ambient: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _f.ambient) || DEFAULT_COLOR_TOKEN_VALUE)
+      },
+      skeleton: {
+        from: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _g.from) || DEFAULT_COLOR_TOKEN_VALUE),
+        to: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _h.to) || DEFAULT_COLOR_TOKEN_VALUE)
+      }
+    },
+    button,
+    // card: buildCardColorTheme({scheme, baseTone: tone}, config),
+    card: selectable.default,
+    input: buildInputColorTheme({
+      scheme,
+      tone
+    }, config),
+    kbd: {
+      _blend: (((_j = (_i = config == null ? void 0 : config.color) == null ? void 0 : _i.kbd) == null ? void 0 : _j._blend) || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
+      bg: resolveColorTokenValue(context, ((_l = (_k = config == null ? void 0 : config.color) == null ? void 0 : _k.kbd) == null ? void 0 : _l.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+      fg: resolveColorTokenValue(context, ((_n = (_m = config == null ? void 0 : config.color) == null ? void 0 : _m.kbd) == null ? void 0 : _n.fg) || DEFAULT_COLOR_TOKEN_VALUE),
+      border: resolveColorTokenValue(context, ((_p = (_o = config == null ? void 0 : config.color) == null ? void 0 : _o.kbd) == null ? void 0 : _p.border) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    spot: buildSpotColorTheme({
+      scheme
+    }, config),
+    syntax: buildSyntaxColorTheme({
+      scheme
+    }, config),
+    solid: {
+      ...button.default,
+      transparent: button.default.default
+    },
+    muted: {
+      ...button.bleed,
+      transparent: button.bleed.default
+    },
+    selectable,
+    dark: _dark
+    // deprecated
+  };
+}
+
+function buildAvatarColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  return {
+    gray: _buildAvatarColorTheme({
+      color: "gray",
+      scheme
+    }, config),
+    blue: _buildAvatarColorTheme({
+      color: "blue",
+      scheme
+    }, config),
+    purple: _buildAvatarColorTheme({
+      color: "purple",
+      scheme
+    }, config),
+    magenta: _buildAvatarColorTheme({
+      color: "magenta",
+      scheme
+    }, config),
+    red: _buildAvatarColorTheme({
+      color: "red",
+      scheme
+    }, config),
+    orange: _buildAvatarColorTheme({
+      color: "orange",
+      scheme
+    }, config),
+    yellow: _buildAvatarColorTheme({
+      color: "yellow",
+      scheme
+    }, config),
+    green: _buildAvatarColorTheme({
+      color: "green",
+      scheme
+    }, config),
+    cyan: _buildAvatarColorTheme({
+      color: "cyan",
+      scheme
+    }, config)
+  };
+}
+function _buildAvatarColorTheme(options, config) {
+  var _a, _b;
+  const {
+    color,
+    scheme
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.avatar) == null ? void 0 : _b[color];
+  const context = {
+    hue: (tokens == null ? void 0 : tokens._hue) || "gray",
+    scheme
+  };
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"];
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+  };
+}
+function buildBadgeColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  return {
+    default: _buildBadgeColorTheme({
+      scheme,
+      tone: "default"
+    }, config),
+    primary: _buildBadgeColorTheme({
+      scheme,
+      tone: "primary"
+    }, config),
+    positive: _buildBadgeColorTheme({
+      scheme,
+      tone: "positive"
+    }, config),
+    caution: _buildBadgeColorTheme({
+      scheme,
+      tone: "caution"
+    }, config),
+    critical: _buildBadgeColorTheme({
+      scheme,
+      tone: "critical"
+    }, config)
+  };
+}
+function _buildBadgeColorTheme(options, config) {
+  var _a, _b, _c, _d, _e;
+  const {
+    scheme,
+    tone
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.badge) == null ? void 0 : _b[tone];
+  const hue = (tokens == null ? void 0 : tokens._hue) || ((_e = (_d = (_c = config == null ? void 0 : config.color) == null ? void 0 : _c.base) == null ? void 0 : _d[tone]) == null ? void 0 : _e._hue) || "gray";
+  const context = {
+    hue,
+    scheme
+  };
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"];
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+  };
+}
+function buildButtonColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  const modes = {};
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    modes[mode] = buildButtonTonesColorTheme({
+      scheme,
+      mode
+    }, config);
+  }
+  return modes;
+}
+function buildButtonTonesColorTheme(options, config) {
+  const {
+    mode,
+    scheme
+  } = options;
+  const tones = {};
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildButtonStatesColorTheme({
+      mode,
+      scheme,
+      tone
+    }, config);
+  }
+  return tones;
+}
+function buildButtonStatesColorTheme(options, config) {
+  const {
+    mode,
+    scheme,
+    tone
+  } = options;
+  const states = {};
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildButtonStateColorTheme({
+      mode,
+      tone,
+      scheme,
+      state
+    }, config);
+  }
+  return states;
+}
+function buildButtonStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const {
+    mode,
+    tone,
+    scheme,
+    state
+  } = options;
+  const tokens = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.button) == null ? void 0 : _b[mode]) == null ? void 0 : _c[tone]) == null ? void 0 : _d[state];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const context = {
+    hue,
+    scheme
+  };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    bg2: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg2) || DEFAULT_COLOR_TOKEN_VALUE),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE),
+    border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || DEFAULT_COLOR_TOKEN_VALUE),
+    icon: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.icon) || DEFAULT_COLOR_TOKEN_VALUE),
+    muted: {
+      fg: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _e.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    accent: {
+      fg: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _f.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    link: {
+      fg: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.link) == null ? void 0 : _g.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    code: {
+      bg: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.code) == null ? void 0 : _h.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+      fg: resolveColorTokenValue(context, ((_i = tokens == null ? void 0 : tokens.code) == null ? void 0 : _i.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    skeleton: {
+      from: resolveColorTokenValue(context, ((_j = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _j.from) || DEFAULT_COLOR_TOKEN_VALUE),
+      to: resolveColorTokenValue(context, ((_k = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _k.to) || DEFAULT_COLOR_TOKEN_VALUE)
+    }
+  };
+}
+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",
+      tone
+    }, config),
+    hovered: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "hovered",
+      tone
+    }, config),
+    readOnly: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "readOnly",
+      tone
+    }, config),
+    disabled: buildInputStateColorTheme({
+      mode,
+      scheme,
+      state: "disabled",
+      tone
+    }, config)
+  };
+}
+function buildInputStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    mode,
+    tone,
+    scheme,
+    state
+  } = options;
+  const tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.input) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state];
+  const hue = (tokens == null ? void 0 : tokens._hue) || ((_f = (_e = (_d = config == null ? void 0 : config.color) == null ? void 0 : _d.base) == null ? void 0 : _e[tone]) == null ? void 0 : _f._hue) || "gray";
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const context = {
+    hue,
+    scheme
+  };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    bg2: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg2) || DEFAULT_COLOR_TOKEN_VALUE),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE),
+    border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || DEFAULT_COLOR_TOKEN_VALUE),
+    placeholder: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.placeholder) || DEFAULT_COLOR_TOKEN_VALUE)
+  };
+}
+function buildSelectableColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  const tones = {};
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildSelectableStatesColorTheme({
+      scheme,
+      tone
+    }, config);
+  }
+  return tones;
+}
+function buildSelectableStatesColorTheme(options, config) {
+  const {
+    scheme,
+    tone
+  } = options;
+  const states = {};
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildSelectableStateColorTheme({
+      tone,
+      scheme,
+      state
+    }, config);
+  }
+  return states;
+}
+function buildSelectableStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const {
+    scheme,
+    state,
+    tone
+  } = options;
+  const tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.selectable) == null ? void 0 : _b[tone]) == null ? void 0 : _c[state];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const context = {
+    hue,
+    scheme
+  };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    bg2: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg2) || DEFAULT_COLOR_TOKEN_VALUE),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || DEFAULT_COLOR_TOKEN_VALUE),
+    border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || DEFAULT_COLOR_TOKEN_VALUE),
+    icon: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.icon) || DEFAULT_COLOR_TOKEN_VALUE),
+    muted: {
+      fg: resolveColorTokenValue(context, ((_d = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _d.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    accent: {
+      fg: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _e.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    link: {
+      fg: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.link) == null ? void 0 : _f.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    code: {
+      bg: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.code) == null ? void 0 : _g.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+      fg: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.code) == null ? void 0 : _h.fg) || DEFAULT_COLOR_TOKEN_VALUE)
+    },
+    skeleton: {
+      from: resolveColorTokenValue(context, ((_i = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _i.from) || DEFAULT_COLOR_TOKEN_VALUE),
+      to: resolveColorTokenValue(context, ((_j = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _j.to) || DEFAULT_COLOR_TOKEN_VALUE)
+    }
+  };
+}
+function buildSpotColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const {
+    scheme
+  } = options;
+  const tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.avatar;
+  const context = {
+    hue: "gray",
+    scheme
+  };
+  return {
+    gray: resolveColorTokenValue(context, ((_b = tokens == null ? void 0 : tokens.gray) == null ? void 0 : _b.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    cyan: resolveColorTokenValue(context, ((_c = tokens == null ? void 0 : tokens.cyan) == null ? void 0 : _c.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    blue: resolveColorTokenValue(context, ((_d = tokens == null ? void 0 : tokens.blue) == null ? void 0 : _d.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    purple: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.purple) == null ? void 0 : _e.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    magenta: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.magenta) == null ? void 0 : _f.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    red: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.red) == null ? void 0 : _g.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    orange: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.orange) == null ? void 0 : _h.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    yellow: resolveColorTokenValue(context, ((_i = tokens == null ? void 0 : tokens.yellow) == null ? void 0 : _i.bg) || DEFAULT_COLOR_TOKEN_VALUE),
+    green: resolveColorTokenValue(context, ((_j = tokens == null ? void 0 : tokens.green) == null ? void 0 : _j.bg) || DEFAULT_COLOR_TOKEN_VALUE)
+  };
+}
+function buildSyntaxColorTheme(options, config) {
+  var _a;
+  const {
+    scheme
+  } = options;
+  const tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.syntax;
+  const context = {
+    hue: "gray",
+    scheme
+  };
+  return {
+    atrule: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.atrule) || DEFAULT_COLOR_TOKEN_VALUE),
+    attrName: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.attrName) || DEFAULT_COLOR_TOKEN_VALUE),
+    attrValue: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.attrValue) || DEFAULT_COLOR_TOKEN_VALUE),
+    attribute: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.attribute) || DEFAULT_COLOR_TOKEN_VALUE),
+    boolean: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.boolean) || DEFAULT_COLOR_TOKEN_VALUE),
+    builtin: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.builtin) || DEFAULT_COLOR_TOKEN_VALUE),
+    cdata: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.cdata) || DEFAULT_COLOR_TOKEN_VALUE),
+    char: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.char) || DEFAULT_COLOR_TOKEN_VALUE),
+    class: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.class) || DEFAULT_COLOR_TOKEN_VALUE),
+    className: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.className) || DEFAULT_COLOR_TOKEN_VALUE),
+    comment: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.comment) || DEFAULT_COLOR_TOKEN_VALUE),
+    constant: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.constant) || DEFAULT_COLOR_TOKEN_VALUE),
+    deleted: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.deleted) || DEFAULT_COLOR_TOKEN_VALUE),
+    doctype: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.doctype) || DEFAULT_COLOR_TOKEN_VALUE),
+    entity: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.entity) || DEFAULT_COLOR_TOKEN_VALUE),
+    function: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.function) || DEFAULT_COLOR_TOKEN_VALUE),
+    hexcode: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.hexcode) || DEFAULT_COLOR_TOKEN_VALUE),
+    id: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.id) || DEFAULT_COLOR_TOKEN_VALUE),
+    important: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.important) || DEFAULT_COLOR_TOKEN_VALUE),
+    inserted: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.inserted) || DEFAULT_COLOR_TOKEN_VALUE),
+    keyword: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.keyword) || DEFAULT_COLOR_TOKEN_VALUE),
+    number: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.number) || DEFAULT_COLOR_TOKEN_VALUE),
+    operator: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.operator) || DEFAULT_COLOR_TOKEN_VALUE),
+    prolog: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.prolog) || DEFAULT_COLOR_TOKEN_VALUE),
+    property: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.property) || DEFAULT_COLOR_TOKEN_VALUE),
+    pseudoClass: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.pseudoClass) || DEFAULT_COLOR_TOKEN_VALUE),
+    pseudoElement: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.pseudoElement) || DEFAULT_COLOR_TOKEN_VALUE),
+    punctuation: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.punctuation) || DEFAULT_COLOR_TOKEN_VALUE),
+    regex: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.regex) || DEFAULT_COLOR_TOKEN_VALUE),
+    selector: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.selector) || DEFAULT_COLOR_TOKEN_VALUE),
+    string: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.string) || DEFAULT_COLOR_TOKEN_VALUE),
+    symbol: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.symbol) || DEFAULT_COLOR_TOKEN_VALUE),
+    tag: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.tag) || DEFAULT_COLOR_TOKEN_VALUE),
+    unit: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.unit) || DEFAULT_COLOR_TOKEN_VALUE),
+    url: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.url) || DEFAULT_COLOR_TOKEN_VALUE),
+    variable: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.variable) || DEFAULT_COLOR_TOKEN_VALUE)
+  };
+}
+const BORDER_WIDTH = 1;
+const OUTLINE_WIDTH$1 = 0.5;
+const defaultThemeConfig = {
+  avatar: {
+    sizes: [{
+      distance: -3,
+      size: 25
+    }, {
+      distance: -6,
+      size: 35
+    }, {
+      distance: -9,
+      size: 55
+    }],
+    focusRing: {
+      offset: 1,
+      width: 1
+    }
+  },
+  button: {
+    textWeight: "medium",
+    border: {
+      width: BORDER_WIDTH
+    },
+    focusRing: {
+      offset: -1,
+      width: 2
+    }
+  },
+  card: {
+    border: {
+      width: BORDER_WIDTH
+    },
+    focusRing: {
+      offset: -1,
+      width: 1
+    },
+    shadow: {
+      outline: OUTLINE_WIDTH$1
+    }
+  },
+  container: [480, 640, 960, 1280, 1600, 1920],
+  focusRing: {
+    offset: 1,
+    width: 2
+  },
+  media: [360, 600, 900, 1200, 1800, 2400],
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  shadows: [null, {
+    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: BORDER_WIDTH
+    },
+    checkbox: {
+      size: 17,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    switch: {
+      width: 25,
+      height: 17,
+      padding: 2,
+      transitionDurationMs: 150,
+      transitionTimingFunction: "ease-out",
+      focusRing: {
+        offset: 1,
+        width: 1
+      }
+    },
+    select: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    text: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    }
+  },
+  styles: {
+    button: {
+      root: {
+        transition: "background-color 100ms,border-color 100ms,color 100ms"
+      }
+    }
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  }
+};
+
+const defaultThemeFonts = {
+  code: {
+    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  },
+  heading: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 17,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 29,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 27,
+      iconSize: 41,
+      lineHeight: 35,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 9.5,
+      descenderHeight: 8.5,
+      fontSize: 33,
+      iconSize: 49,
+      lineHeight: 41,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 10.5,
+      descenderHeight: 9.5,
+      fontSize: 38,
+      iconSize: 53,
+      lineHeight: 47,
+      letterSpacing: 0
+    }]
+  },
+  label: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 9.8,
+      iconSize: 15,
+      lineHeight: 11,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 11.25,
+      iconSize: 17,
+      lineHeight: 12,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 12.75,
+      iconSize: 19,
+      lineHeight: 13,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 14,
+      iconSize: 21,
+      lineHeight: 14,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 15.5,
+      iconSize: 23,
+      lineHeight: 15,
+      letterSpacing: 0.5
+    }]
+  },
+  text: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7.5,
+      descenderHeight: 6.5,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8.5,
+      descenderHeight: 7.5,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  }
+};
+const defaultColorPalette = color;
+function mixChannel(b, s, weight) {
+  const diff = s - b;
+  const delta = diff * 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) {
+  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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);
+    const hexG = hex.slice(2, 3);
+    const 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(rgba) {
+  const values = rgba.replace(/rgba\(|\)/g, "").split(",");
+  return {
+    r: parseInt(values[0]),
+    g: parseInt(values[1]),
+    b: parseInt(values[2]),
+    a: parseFloat(values[3])
+  };
+}
+function rgbToHex(color) {
+  const r = round(clamp(Math.round(color.r), 0, 255));
+  const g = round(clamp(Math.round(color.g), 0, 255));
+  const b = round(clamp(Math.round(color.b), 0, 255));
+  if ("a" in color) {
+    return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(color.a, ")");
+  }
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+function rgbToHsl(_ref8) {
+  let {
+    r,
+    g,
+    b
+  } = _ref8;
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+  if (delta == 0) h = 0;else if (cmax == r) h = (g - b) / delta % 6;else if (cmax == g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4;
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return {
+    h,
+    s,
+    l
+  };
+}
+function hslToRgb(hsl) {
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (0 <= hsl.h && hsl.h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= hsl.h && hsl.h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= hsl.h && hsl.h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= hsl.h && hsl.h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= hsl.h && hsl.h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= hsl.h && hsl.h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+const HEX_CHARS = "0123456789ABCDEFabcdef";
+const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
+function isHexChars(str) {
+  for (const c of str) {
+    if (HEX_CHARS.indexOf(c) === -1) {
+      return false;
+    }
+  }
+  return true;
+}
+function isHex(str) {
+  if (str[0] !== "#") return false;
+  if (!(str.length === 4 || str.length === 7)) return false;
+  return isHexChars(str.slice(1));
+}
+function parseHsl(str) {
+  const res = HSL_RE.exec(str);
+  if (!res) {
+    throw new Error('parseHsl: string is not a HSL color: "'.concat(str, '"'));
+  }
+  return {
+    h: parseInt(res[1]),
+    s: parseFloat(res[3]),
+    l: parseFloat(res[5])
+  };
+}
+function parseColor(color) {
+  if (!color) return {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+  if (typeof color !== "string") {
+    throw new Error("parseColor: expected a string");
+  }
+  if (isHex(color)) {
+    return hexToRgb(color);
+  }
+  if (color.startsWith("hsl(")) {
+    return hslToRgb(parseHsl(color));
+  }
+  if (color.startsWith("rgba(")) {
+    return rgbaToRGBA(color);
+  }
+  throw new Error('parseColor: unexpected color format: "'.concat(color, '"'));
+}
+function getContrastRatio(bg, fg) {
+  const rgb1 = parseColor(bg);
+  const rgb2 = parseColor(fg);
+  const c1 = rgb_lrgb(rgb1);
+  const c2 = rgb_lrgb(rgb2);
+  const l1 = lrgb_luminance(c1);
+  const l2 = lrgb_luminance(c2);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+function rgb_lrgb(_ref9) {
+  let {
+    r,
+    g,
+    b
+  } = _ref9;
+  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
+}
+function rgb_lrgb1(v) {
+  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+}
+function lrgb_luminance(_ref10) {
+  let [r, g, b] = _ref10;
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rgba(color, a) {
+  const rgb = parseColor(color);
+  return "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(a, ")");
+}
+const RGB_RANGE = [0, 255];
+function mixThemeColor(value, options) {
+  const {
+    blendMode
+  } = options;
+  const color = parseColor(value);
+  const black = parseColor(options.black);
+  const white = parseColor(options.white);
+  const bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white : black;
+  const paletteRange = {
+    r: [black.r, white.r],
+    g: [black.g, white.g],
+    b: [black.b, white.b]
+  };
+  const 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)
+  };
+  const convertedColor = {
+    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
+    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
+    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE)
+  };
+  const resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor);
+  const 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 renderColorValue(str, options) {
+  const {
+    bg,
+    blendMode,
+    colorPalette
+  } = options;
+  const node = parseTokenValue(str);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  let hex = "";
+  if (node.key === "black") {
+    hex = renderColorHex(colorPalette.black);
+  }
+  if (node.key === "white") {
+    hex = renderColorHex(colorPalette.white);
+  }
+  if (node.hue && node.tint) {
+    hex = renderColorHex(colorPalette[node.hue][node.tint]);
+  }
+  if (!hex) {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  const hexBeforeMix = hex;
+  try {
+    hex = mixThemeColor(hex, {
+      blendMode,
+      bg,
+      black: renderColorHex(colorPalette.black),
+      // opacity: node.opacity,
+      white: renderColorHex(colorPalette.white)
+    });
+  } catch (err) {
+    console.log("could not blend", hex);
+  }
+  if (hex === "#aN") {
+    console.warn("invalid color token value: ".concat(str));
+    hex = hexBeforeMix;
+  }
+  if (node.opacity !== void 0) {
+    hex = rgba(hex, node.opacity);
+  }
+  return hex;
+}
+function renderColorHex(color) {
+  return typeof color === "string" ? color : color.hex;
+}
+function renderThemeColorSchemes(value, config) {
+  var _a;
+  const colorPalette = (_a = config == null ? void 0 : config.palette) != null ? _a : defaultColorPalette;
+  return {
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark)
+  };
+}
+function renderThemeColorScheme(colorPalette, value) {
+  const toneEntries = Object.entries(value);
+  const [, transparentTone] = toneEntries.find(_ref11 => {
+    let [k] = _ref11;
+    return k === "transparent";
+  });
+  const [, defaultTone] = toneEntries.find(_ref12 => {
+    let [k] = _ref12;
+    return k === "default";
+  });
+  const renderedTransparentTone = renderThemeColor(transparentTone, {
+    colorPalette
+  });
+  const renderedDefaultTone = renderThemeColor(defaultTone, {
+    colorPalette
+  });
+  const bg = renderedDefaultTone.base.bg;
+  return Object.fromEntries([["transparent", renderedTransparentTone], ["default", renderedDefaultTone], ...toneEntries.filter(_ref13 => {
+    let [k] = _ref13;
+    return k !== "default" && k !== "transparent";
+  }).map(_ref14 => {
+    let [k, v] = _ref14;
+    return [k, renderThemeColor(v, {
+      bg,
+      colorPalette
+    })];
+  })]);
+}
+function renderThemeColor(value, options) {
+  var _a, _b;
+  const {
+    colorPalette,
+    bg
+  } = options;
+  const blendMode = value._blend || "multiply";
+  const baseBg = renderColorValue(value.base.bg, {
+    colorPalette,
+    bg,
+    blendMode
+  });
+  const colorOptions = {
+    colorPalette,
+    bg: baseBg,
+    blendMode
+  };
+  const base = {
+    bg: baseBg,
+    fg: renderColorValue(value.base.fg, colorOptions),
+    border: renderColorValue(value.base.border, colorOptions),
+    focusRing: renderColorValue(value.base.focusRing, colorOptions),
+    shadow: {
+      outline: renderColorValue(value.base.shadow.outline, colorOptions),
+      umbra: renderColorValue(value.base.shadow.umbra, {
+        ...colorOptions,
+        bg: void 0,
+        colorPalette: {
+          ...colorPalette,
+          black: "#000000"
+        }
+      }),
+      penumbra: renderColorValue(value.base.shadow.penumbra, {
+        ...colorOptions,
+        bg: void 0,
+        colorPalette: {
+          ...colorPalette,
+          black: "#000000"
+        }
+      }),
+      ambient: renderColorValue(value.base.shadow.ambient, {
+        ...colorOptions,
+        bg: void 0,
+        colorPalette: {
+          ...colorPalette,
+          black: "#000000"
+        }
+      })
+    },
+    skeleton: value.base.skeleton && {
+      from: renderColorValue((_a = value.base.skeleton) == null ? void 0 : _a.from, colorOptions),
+      to: renderColorValue((_b = value.base.skeleton) == null ? void 0 : _b.to, colorOptions)
+    }
+  };
+  const button = renderThemeColorButton(value.button, {
+    colorPalette,
+    base,
+    blendMode
+  });
+  const selectable = renderThemeColorSelectable(value.selectable || value.button.ghost, {
+    colorPalette,
+    base,
+    blendMode
+  });
+  return {
+    ...value,
+    _blend: blendMode,
+    avatar: renderThemeColorAvatar(value.avatar, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    badge: renderThemeColorBadge(value.badge, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    base,
+    button,
+    card: renderThemeColorButtonStates(value.card, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    input: renderThemeColorInput(value.input, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    kbd: renderThemeColorKBD(value.kbd, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    spot: renderSpotColorTheme(value.spot, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    syntax: renderSyntaxColorTheme(value.syntax, {
+      base,
+      colorPalette,
+      blendMode
+    }),
+    solid: {
+      ...button.default,
+      transparent: button.default.default
+    },
+    muted: {
+      ...button.bleed,
+      transparent: button.bleed.default
+    },
+    selectable
+  };
+}
+function renderThemeColorKBD(value, options) {
+  const {
+    base,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options;
+  const blendMode = (value == null ? void 0 : value._blend) || "multiply";
+  const rootOptions = {
+    bg: base.bg,
+    blendMode: rootBlendMode,
+    colorPalette
+  };
+  const bg = renderColorValue((value == null ? void 0 : value.bg) || "gray/500", rootOptions);
+  const colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    _blend: blendMode,
+    bg,
+    fg: renderColorValue((value == null ? void 0 : value.fg) || "gray/500", colorOptions),
+    border: renderColorValue((value == null ? void 0 : value.border) || "gray/500", colorOptions)
+  };
+}
+function renderThemeColorAvatar(value, options) {
+  return {
+    gray: renderThemeColorAvatarColor(value == null ? void 0 : value.gray, options),
+    blue: renderThemeColorAvatarColor(value == null ? void 0 : value.blue, options),
+    purple: renderThemeColorAvatarColor(value == null ? void 0 : value.purple, options),
+    magenta: renderThemeColorAvatarColor(value == null ? void 0 : value.magenta, options),
+    red: renderThemeColorAvatarColor(value == null ? void 0 : value.red, options),
+    orange: renderThemeColorAvatarColor(value == null ? void 0 : value.orange, options),
+    yellow: renderThemeColorAvatarColor(value == null ? void 0 : value.yellow, options),
+    green: renderThemeColorAvatarColor(value == null ? void 0 : value.green, options),
+    cyan: renderThemeColorAvatarColor(value == null ? void 0 : value.cyan, options)
+  };
+}
+function renderThemeColorAvatarColor(value, options) {
+  const {
+    base,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options;
+  const blendMode = (value == null ? void 0 : value._blend) || "multiply";
+  const rootOptions = {
+    bg: base.bg,
+    blendMode: rootBlendMode,
+    colorPalette
+  };
+  const bg = renderColorValue((value == null ? void 0 : value.bg) || "gray/500", rootOptions);
+  const colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    _blend: blendMode,
+    bg,
+    fg: renderColorValue((value == null ? void 0 : value.fg) || "gray/500", colorOptions)
+  };
+}
+function renderThemeColorBadge(value, options) {
+  return {
+    default: renderThemeColorBadgeColor(value == null ? void 0 : value.default, options),
+    primary: renderThemeColorBadgeColor(value == null ? void 0 : value.primary, options),
+    positive: renderThemeColorBadgeColor(value == null ? void 0 : value.positive, options),
+    caution: renderThemeColorBadgeColor(value == null ? void 0 : value.caution, options),
+    critical: renderThemeColorBadgeColor(value == null ? void 0 : value.critical, options)
+  };
+}
+function renderThemeColorBadgeColor(value, options) {
+  const {
+    base,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options;
+  const blendMode = (value == null ? void 0 : value._blend) || "multiply";
+  const rootOptions = {
+    bg: base.bg,
+    blendMode: rootBlendMode,
+    colorPalette
+  };
+  const bg = renderColorValue((value == null ? void 0 : value.bg) || "gray/500", rootOptions);
+  const colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    bg,
+    fg: renderColorValue((value == null ? void 0 : value.fg) || "gray/500", colorOptions)
+  };
+}
+function renderThemeColorButton(value, options) {
+  return {
+    default: renderThemeColorButtonTones(value.default, options),
+    ghost: renderThemeColorButtonTones(value.ghost, options),
+    bleed: renderThemeColorButtonTones(value.bleed, options)
+  };
+}
+function renderThemeColorButtonTones(value, options) {
+  return {
+    default: renderThemeColorButtonStates(value.default, options),
+    primary: renderThemeColorButtonStates(value.primary, options),
+    positive: renderThemeColorButtonStates(value.positive, options),
+    caution: renderThemeColorButtonStates(value.caution, options),
+    critical: renderThemeColorButtonStates(value.critical, options)
+  };
+}
+function renderThemeColorButtonStates(value, options) {
+  return {
+    enabled: renderThemeColorGenericState(value.enabled, options),
+    hovered: renderThemeColorGenericState(value.hovered, options),
+    pressed: renderThemeColorGenericState(value.pressed, options),
+    selected: renderThemeColorGenericState(value.selected, options),
+    disabled: renderThemeColorGenericState(value.disabled, options)
+  };
+}
+function renderThemeColorGenericState(value, options) {
+  var _a, _b;
+  const {
+    base,
+    blendMode: rootBlendMode,
+    colorPalette
+  } = options;
+  const blendMode = value._blend || "multiply";
+  const rootOptions = {
+    bg: base.bg,
+    blendMode: rootBlendMode,
+    colorPalette
+  };
+  const bg = renderColorValue(value.bg, rootOptions);
+  const colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    _blend: blendMode,
+    bg,
+    bg2: renderColorValue(value.bg2 || value.bg, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
+    border: renderColorValue(value.border, colorOptions),
+    icon: renderColorValue(value.icon, colorOptions),
+    muted: {
+      fg: renderColorValue(value.muted.fg, colorOptions)
+    },
+    accent: {
+      fg: renderColorValue(value.accent.fg, colorOptions)
+    },
+    link: {
+      fg: renderColorValue(value.link.fg, colorOptions)
+    },
+    code: {
+      bg: renderColorValue(value.code.bg, colorOptions),
+      fg: renderColorValue(value.code.fg, colorOptions)
+    },
+    skeleton: value.skeleton && {
+      from: renderColorValue((_a = value.skeleton) == null ? void 0 : _a.from, colorOptions),
+      to: renderColorValue((_b = value.skeleton) == null ? void 0 : _b.to, colorOptions)
+    }
+  };
+}
+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 {
+    colorPalette,
+    base,
+    blendMode: rootBlendMode
+  } = options;
+  const blendMode = value._blend || "multiply";
+  const rootOptions = {
+    colorPalette,
+    bg: base.bg,
+    blendMode: rootBlendMode
+  };
+  const bg = renderColorValue(value.bg, rootOptions);
+  const colorOptions = {
+    colorPalette,
+    bg,
+    blendMode
+  };
+  return {
+    _blend: blendMode,
+    bg,
+    bg2: renderColorValue(value.bg2, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
+    border: renderColorValue(value.border, colorOptions),
+    placeholder: renderColorValue(value.placeholder, colorOptions)
+  };
+}
+function renderThemeColorSelectable(value, options) {
+  return {
+    default: renderThemeColorSelectableStates(value.default, options),
+    primary: renderThemeColorSelectableStates(value.primary, options),
+    positive: renderThemeColorSelectableStates(value.positive, options),
+    caution: renderThemeColorSelectableStates(value.caution, options),
+    critical: renderThemeColorSelectableStates(value.critical, options)
+  };
+}
+function renderThemeColorSelectableStates(value, options) {
+  return {
+    enabled: renderThemeColorGenericState(value.enabled, options),
+    hovered: renderThemeColorGenericState(value.hovered, options),
+    pressed: renderThemeColorGenericState(value.pressed, options),
+    selected: renderThemeColorGenericState(value.selected, options),
+    disabled: renderThemeColorGenericState(value.disabled, options)
+  };
+}
+function renderSpotColorTheme(value, options) {
+  const {
+    colorPalette,
+    base,
+    blendMode
+  } = options;
+  const colorOptions = {
+    colorPalette,
+    bg: base.bg,
+    blendMode
+  };
+  return {
+    gray: renderColorValue(value.gray, colorOptions),
+    cyan: renderColorValue(value.cyan, colorOptions),
+    blue: renderColorValue(value.blue, colorOptions),
+    purple: renderColorValue(value.purple, colorOptions),
+    magenta: renderColorValue(value.magenta, colorOptions),
+    red: renderColorValue(value.red, colorOptions),
+    orange: renderColorValue(value.orange, colorOptions),
+    yellow: renderColorValue(value.yellow, colorOptions),
+    green: renderColorValue(value.green, colorOptions)
+  };
+}
+function renderSyntaxColorTheme(value, options) {
+  const {
+    colorPalette,
+    base,
+    blendMode
+  } = options;
+  const colorOptions = {
+    colorPalette,
+    bg: base.bg,
+    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) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const colorTheme = buildColorTheme(config);
+  return {
+    avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : defaultThemeConfig.avatar,
+    button: (_b = config == null ? void 0 : config.button) != null ? _b : defaultThemeConfig.button,
+    card: (_c = config == null ? void 0 : config.card) != null ? _c : defaultThemeConfig.card,
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: (_d = config == null ? void 0 : config.container) != null ? _d : defaultThemeConfig.container,
+    focusRing: (_e = config == null ? void 0 : config.focusRing) != null ? _e : defaultThemeConfig.focusRing,
+    fonts: (_f = config == null ? void 0 : config.fonts) != null ? _f : defaultThemeFonts,
+    input: (_g = config == null ? void 0 : config.input) != null ? _g : defaultThemeConfig.input,
+    media: (_h = config == null ? void 0 : config.media) != null ? _h : defaultThemeConfig.media,
+    radius: (_i = config == null ? void 0 : config.radius) != null ? _i : defaultThemeConfig.radius,
+    shadows: (_j = config == null ? void 0 : config.shadows) != null ? _j : defaultThemeConfig.shadows,
+    space: (_k = config == null ? void 0 : config.space) != null ? _k : defaultThemeConfig.space,
+    styles: (_l = config == null ? void 0 : config.styles) != null ? _l : defaultThemeConfig.styles
+  };
+}
+const STROKE_WIDTH = 1;
+const OUTLINE_WIDTH = 0.5;
+const config = {
+  avatar: {
+    sizes: [{
+      distance: -3,
+      size: 19
+    }, {
+      distance: -6,
+      size: 31
+    }, {
+      distance: -9,
+      size: 51
+    }],
+    focusRing: {
+      offset: 0,
+      width: 1
+    }
+  },
+  button: {
+    textWeight: "medium",
+    border: {
+      width: STROKE_WIDTH
+    },
+    focusRing: {
+      offset: -1,
+      width: 2
+    }
+  },
+  card: {
+    border: {
+      width: STROKE_WIDTH
+    },
+    focusRing: {
+      offset: -1,
+      width: 1
+    },
+    shadow: {
+      outline: OUTLINE_WIDTH
+    }
+  },
+  container: [480, 640, 960, 1280, 1600, 1920],
+  focusRing: {
+    offset: 1,
+    width: 2
+  },
+  media: [360, 600, 900, 1200, 1800, 2400],
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  shadows: [null, {
+    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: STROKE_WIDTH
+    },
+    checkbox: {
+      size: 17,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    switch: {
+      width: 21,
+      height: 13,
+      padding: 2,
+      transitionDurationMs: 150,
+      transitionTimingFunction: "ease-out",
+      focusRing: {
+        offset: 1,
+        width: 1
+      }
+    },
+    select: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    },
+    text: {
+      focusRing: {
+        offset: -1,
+        width: 1
+      }
+    }
+  }
+};
+const fonts = {
+  code: {
+    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  },
+  heading: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 17,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7,
+      descenderHeight: 7,
+      fontSize: 21,
+      iconSize: 33,
+      lineHeight: 29,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8,
+      descenderHeight: 8,
+      fontSize: 27,
+      iconSize: 41,
+      lineHeight: 35,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 9.5,
+      descenderHeight: 8.5,
+      fontSize: 33,
+      iconSize: 49,
+      lineHeight: 41,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 10.5,
+      descenderHeight: 9.5,
+      fontSize: 38,
+      iconSize: 53,
+      lineHeight: 47,
+      letterSpacing: 0
+    }]
+  },
+  label: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
+    },
+    sizes: [{
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 9.8,
+      iconSize: 15,
+      lineHeight: 11,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 11.25,
+      iconSize: 17,
+      lineHeight: 12,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 12.75,
+      iconSize: 19,
+      lineHeight: 13,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 14,
+      iconSize: 21,
+      lineHeight: 14,
+      letterSpacing: 0.5
+    }, {
+      ascenderHeight: 2,
+      descenderHeight: 2,
+      fontSize: 15.5,
+      iconSize: 23,
+      lineHeight: 15,
+      letterSpacing: 0.5
+    }]
+  },
+  text: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    sizes: [{
+      ascenderHeight: 4,
+      descenderHeight: 4,
+      fontSize: 10,
+      iconSize: 17,
+      lineHeight: 15,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 5,
+      descenderHeight: 5,
+      fontSize: 13,
+      iconSize: 21,
+      lineHeight: 19,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 6,
+      descenderHeight: 6,
+      fontSize: 16,
+      iconSize: 25,
+      lineHeight: 23,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 7.5,
+      descenderHeight: 6.5,
+      fontSize: 19,
+      iconSize: 29,
+      lineHeight: 27,
+      letterSpacing: 0
+    }, {
+      ascenderHeight: 8.5,
+      descenderHeight: 7.5,
+      fontSize: 22,
+      iconSize: 33,
+      lineHeight: 31,
+      letterSpacing: 0
+    }]
+  }
+};
+const studioTheme = buildTheme({
+  ...config,
+  fonts
+});
+export { COLOR_CONFIG_AVATAR_COLORS, COLOR_CONFIG_BASE_KEYS, COLOR_CONFIG_BASE_TONES, COLOR_CONFIG_BLEND_KEYS, 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_BASE_TONES, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, getContrastRatio, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, mix, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, studioTheme };
+//# sourceMappingURL=theme.esm.js.map