@sanity/ui 2.0.0-alpha.5 → 2.0.0-alpha.6

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
-import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
-import { black as black$1, hues, white as white$1 } from '@sanity/color';
+import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
+import { white, black, hues, gray, blue, purple, magenta, red, orange, yellow, green, cyan } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
@@ -874,6 +874,15 @@ function hexToRgb(hex) {
     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(_ref2) {
   let {
     r,
@@ -991,1915 +1000,416 @@ function parseColor(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 rgba(color, a) {
   const rgb = parseColor(color);
   return "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(a, ")");
 }
-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$1 = {
-  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: _ref4 => {
-    let {
-      dark,
-      name
-    } = _ref4;
-    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$1[name].bg[dark ? 0 : 1],
-      fg: tones$1[name].fg[dark ? 0 : 1],
-      border: tones$1[name].border[dark ? 0 : 1],
-      focusRing: tones$1[name].focusRing[dark ? 0 : 1],
-      shadow: {
-        outline: black,
-        umbra: black,
-        penumbra: black,
-        ambient: black
-      },
-      skeleton: {
-        from: dark ? white : black,
-        to: dark ? white : black
-      }
-    };
-  },
-  solid: _ref5 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref5;
-    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,
-        iconColor: 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,
-      iconColor: dark ? color.darkest : color.lightest,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  muted: _ref6 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref6;
-    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,
-        iconColor: 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,
-      iconColor: dark ? color.lighter : color.darker,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  button: _ref7 => {
-    let {
-      base,
-      mode,
-      muted,
-      solid
-    } = _ref7;
-    if (mode === "bleed") {
-      return {
-        ...muted,
-        enabled: {
-          bg: "transparent",
-          bg2: "transparent",
-          fg: muted.enabled.fg,
-          iconColor: 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,
-          iconColor: 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: _ref8 => {
-    let {
-      base
-    } = _ref8;
-    return {
-      bg: black,
-      bg2: black,
-      fg: black,
-      iconColor: 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: _ref9 => {
-    let {
-      muted,
-      state,
-      tone
-    } = _ref9;
-    return muted[tone][state];
-  },
-  spot: _ref10 => {
-    let {
-      key
-    } = _ref10;
-    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 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 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
-  };
-}
 function multiply(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
   const hex = rgbToHex(multiply$1(b, s));
+  if (s.a) {
+    return rgba(hex, s.a);
+  }
   return hex;
 }
 function screen(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
   const hex = rgbToHex(screen$1(b, s));
+  if (s.a) {
+    return rgba(hex, s.a);
+  }
   return hex;
 }
+const colorKeys = ["text-primary", "text-secondary", "text-inactive",
+// TODO: Can this be replaced by other of the text colors? It's used by the code html element if it's inside a text
+"text-code", "text-muted", "text-link", "text-accent", "bg-base", "bg-base-hover", "bg-base-active", "bg-accent", "bg-accent-hover", "bg-accent-active", "bg-tint",
+// TODO: Can we replace this with bg_tint?  It's used by the code html element if it's inside a text
+"bg-tint-code", "icon-default", "icon-inverted", "border-base", "border-base-hover", "border-accent", "border-accent-inverted",
+// Colors starting with -base won't be affected by the mix function
+"base-bg-card",
+// This is used by the card when a tone is defined, it will also override the bg-base in the rest of the components.
+"base-bg-raw",
+// This is the same color as bg-base, but it won't be overridden by the card bg color, used in selectable items.
+"base-shadow-outline-color", "base-shadow-umbra-color", "base-shadow-penumbra-color", "base-shadow-ambient-color", "base-text-color",
+// Color used by the buttons for default mode text
+"skeleton-from", "skeleton-to"];
 const defaultTints = {
   light: {
-    text_primary: "900",
-    text_secondary: "600",
-    text_inactive: "500",
-    bg_base: white$1,
-    bg_base_hover: "50",
-    bg_base_active: "100",
-    bg_accent: "500",
-    bg_accent_hover: "600",
-    bg_accent_active: "700",
-    bg_tint: "50",
-    icon_default: "500",
-    icon_inverted: white$1,
-    border_base: "100",
-    border_accent: "500",
-    border_accent_inverted: white$1
-  },
-  dark: {
-    text_primary: "50",
-    text_secondary: "300",
-    text_inactive: "400",
-    bg_base: black$1,
-    bg_base_hover: "900",
-    bg_base_active: "800",
-    bg_accent: "500",
-    bg_accent_hover: "400",
-    bg_accent_active: "300",
-    bg_tint: "900",
-    icon_default: "300",
-    icon_inverted: hues.gray[900],
-    border_base: "800",
-    border_accent: "300",
-    border_accent_inverted: hues.gray[900]
-  }
-};
-const colorTints = {
-  light: {
-    default: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: black$1,
-      border_accent: "600"
+    "text-primary": "900",
+    "text-secondary": "600",
+    "text-inactive": "500",
+    "text-code": "600",
+    "text-muted": "600",
+    "text-link": {
+      type: "colorTint",
+      value: hues.blue["600"]
     },
-    primary: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: black$1,
-      border_accent: "600"
+    "text-accent": {
+      type: "colorTint",
+      value: hues.red["500"]
     },
-    positive: {
-      ...defaultTints.light,
-      bg_base_hover: hues.gray[50],
-      bg_base_active: "50",
-      bg_accent: "400",
-      bg_accent_hover: "500",
-      bg_accent_active: "600",
-      border_accent: "400"
+    "bg-base": {
+      type: "colorTint",
+      value: white
     },
-    transparent: defaultTints.light,
-    caution: defaultTints.light,
-    critical: defaultTints.light
-  },
-  dark: {
-    default: {
-      ...defaultTints.dark,
-      text_primary: white$1,
-      bg_accent: white$1,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
+    "bg-base-hover": "50",
+    "bg-base-active": "100",
+    "bg-accent": "500",
+    "bg-accent-hover": "600",
+    "bg-accent-active": "700",
+    "bg-tint": "50",
+    "bg-tint-code": "50",
+    "icon-default": "500",
+    "icon-inverted": {
+      type: "colorTint",
+      value: white
     },
-    primary: {
-      ...defaultTints.dark,
-      text_primary: white$1,
-      bg_accent: white$1,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
+    "border-base": "100",
+    "border-base-hover": "200",
+    "border-accent": "500",
+    "border-accent-inverted": {
+      type: "colorTint",
+      value: white
     },
-    positive: {
-      ...defaultTints.dark,
-      bg_base_hover: hues.gray[900],
-      bg_base_active: "900",
-      bg_accent: "400",
-      bg_accent_hover: "300",
-      bg_accent_active: "200",
-      border_accent: "400"
+    "base-bg-card": "50",
+    "base-bg-raw": {
+      type: "colorTint",
+      value: white
     },
-    transparent: defaultTints.dark,
-    caution: defaultTints.dark,
-    critical: defaultTints.dark
-  }
-};
-const getColorValue = (tints, dark, tone, key) => {
-  const value = colorTints[dark ? "dark" : "light"][tone][key];
-  if (typeof value === "string") {
-    return tints[value];
-  }
-  return value;
-};
-const getColorHex = (tints, dark, tone, key) => {
-  return getColorValue(tints, dark, tone, key).hex;
-};
-const tones = {
-  default: hues.gray,
-  transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
-  caution: hues.yellow,
-  critical: hues.red
-};
-const NEUTRAL_TONES = ["default", "transparent"];
-const color = createColorTheme({
-  base: _ref11 => {
-    let {
-      dark,
-      name
-    } = _ref11;
-    if (name === "default") {
-      const tints2 = hues.gray;
-      const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
-      return {
-        fg: dark ? white$1.hex : black$1.hex,
-        bg: getColorHex(tones["default"], dark, "default", "bg_base"),
-        border: getColorHex(tones["default"], dark, "default", "border_base"),
-        focusRing: getColorHex(tones["positive"], dark, "positive", "border_accent"),
-        shadow: {
-          outline: rgba(tints2[500].hex, 0.4),
-          umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
-          penumbra: dark ? rgba(tints2[950].hex, 0.28) : rgba(tints2[500].hex, 0.14),
-          ambient: dark ? rgba(tints2[950].hex, 0.24) : rgba(tints2[500].hex, 0.12)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (name === "transparent") {
-      const tints2 = tones.default;
-      const skeletonFrom2 = tints2[dark ? 800 : 200].hex;
-      return {
-        fg: tints2[dark ? 100 : 900].hex,
-        bg: tints2[dark ? 950 : 50].hex,
-        border: tints2[dark ? 800 : 300].hex,
-        focusRing: hues.blue[500].hex,
-        shadow: {
-          outline: rgba(tints2[500].hex, 0.4),
-          umbra: dark ? rgba(tints2[900].hex, 0.4) : rgba(tints2[500].hex, 0.2),
-          penumbra: dark ? rgba(tints2[900].hex, 0.28) : rgba(tints2[500].hex, 0.14),
-          ambient: dark ? rgba(tints2[900].hex, 0.24) : rgba(tints2[500].hex, 0.12)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    const tints = tones[name] || tones.default;
-    const skeletonFrom = tints[dark ? 800 : 200].hex;
-    return {
-      fg: tints[dark ? 100 : 900].hex,
-      bg: getColorHex(tints, dark, name, "bg_base"),
-      border: getColorHex(tints, dark, name, "border_base"),
-      focusRing: getColorHex(tints, dark, name, "border_accent"),
-      shadow: {
-        outline: rgba(tints[500].hex, 0.4),
-        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  solid: _ref12 => {
-    let {
-      base,
-      dark,
-      name,
-      state,
-      tone
-    } = _ref12;
-    const mix = dark ? screen : multiply;
-    const mix2 = dark ? multiply : screen;
-    const defaultTints = tones[name] || tones.default;
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
-    let tints = tones[tone === "default" ? name : tone] || defaultTints;
-    if (state === "disabled") {
-      tints = defaultTints;
-      const bg2 = getColorHex(tones.default, dark, "default", "bg_tint");
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
-      return {
-        bg: bg2,
-        bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: getColorHex(tones.default, dark, "default", "bg_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
-        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        accent: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        link: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        code: {
-          bg: bg2,
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_hover");
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
-      return {
-        bg: bg2,
-        bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "pressed") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_active");
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 600].hex);
-      return {
-        bg: bg2,
-        bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        tints = tones.primary;
-      }
-      const bg2 = mix(base.bg, tints[dark ? 200 : 800].hex);
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
-      return {
-        bg: bg2,
-        bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
+    "base-text-color": {
+      type: "colorTint",
+      value: white
+    },
+    "base-shadow-outline-color": {
+      type: "colorWithOpacity",
+      tint: "500",
+      opacity: 0.4
+    },
+    "base-shadow-umbra-color": {
+      type: "colorWithOpacity",
+      tint: "500",
+      opacity: 0.2
+    },
+    "base-shadow-penumbra-color": {
+      type: "colorWithOpacity",
+      tint: "500",
+      opacity: 0.14
+    },
+    "base-shadow-ambient-color": {
+      type: "colorWithOpacity",
+      tint: "500",
+      opacity: 0.12
+    },
+    "skeleton-from": "100",
+    "skeleton-to": {
+      type: "colorWithOpacity",
+      tint: "50",
+      opacity: 0.5
     }
-    const bg = getColorHex(tints, dark, tone, "bg_accent");
-    const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
-    return {
-      bg,
-      bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: bg,
-      fg: getColorHex(tints, dark, "default", "bg_base"),
-      iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
-      muted: {
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex)
-      },
-      accent: {
-        fg: mix2(bg, hues.red[dark ? 900 : 100].hex)
-      },
-      link: {
-        fg: mix2(bg, hues.blue[dark ? 900 : 100].hex)
-      },
-      code: {
-        bg: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex)
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
   },
-  muted: _ref13 => {
-    let {
-      base,
-      dark,
-      name,
-      state,
-      tone
-    } = _ref13;
-    const mix = dark ? screen : multiply;
-    const defaultTints = tones[name] || tones.default;
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
-    let tints = tones[tone === "default" ? name : tone] || defaultTints;
-    if (state === "disabled") {
-      tints = defaultTints;
-      const bg2 = base.bg;
-      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
-      return {
-        bg: bg2,
-        bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
-        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
-        muted: {
-          fg: getColorHex(tones.default, dark, "default", "text_inactive")
-        },
-        accent: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        link: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        code: {
-          bg: bg2,
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: rgba(skeletonFrom2, 0.5),
-          to: rgba(skeletonFrom2, 0.25)
-        }
-      };
-    }
-    if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, name, "bg_base_hover");
-      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
-      return {
-        bg: bg2,
-        bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: mix(bg2, tints[dark ? 900 : 100].hex),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "pressed") {
-      if (isNeutral) {
-        tints = tones.primary;
-      }
-      const bg2 = getColorHex(tints, dark, name, "bg_base_active");
-      const skeletonFrom2 = mix(bg2, getColorHex(tints, dark, name, "bg_base_active"));
-      return {
-        bg: bg2,
-        bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, "border_base"),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        tints = tones.primary;
-      }
-      const bg2 = mix(base.bg, tints[dark ? 900 : 100].hex);
-      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
-      return {
-        bg: bg2,
-        bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, "border_base"),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
+  dark: {
+    "text-primary": "50",
+    "text-secondary": "300",
+    "text-inactive": "400",
+    "text-code": "400",
+    "text-muted": "400",
+    "text-link": {
+      type: "colorTint",
+      value: hues.blue["400"]
+    },
+    "text-accent": {
+      type: "colorTint",
+      value: hues.red["400"]
+    },
+    "bg-base": {
+      type: "colorTint",
+      value: black
+    },
+    "bg-base-hover": "900",
+    "bg-base-active": "800",
+    "bg-accent": "500",
+    "bg-accent-hover": "400",
+    "bg-accent-active": "300",
+    "bg-tint": "900",
+    "bg-tint-code": "950",
+    "icon-default": "300",
+    "icon-inverted": {
+      type: "colorTint",
+      value: hues.gray[900]
+    },
+    "border-base": "800",
+    "border-base-hover": "700",
+    "border-accent": "300",
+    "border-accent-inverted": {
+      type: "colorTint",
+      value: hues.gray[900]
+    },
+    "base-bg-card": "950",
+    "base-text-color": {
+      type: "colorTint",
+      value: black
+    },
+    "base-shadow-outline-color": {
+      type: "colorWithOpacity",
+      tint: "500",
+      opacity: 0.4
+    },
+    "base-shadow-umbra-color": {
+      type: "colorWithOpacity",
+      tint: "900",
+      opacity: 0.4
+    },
+    "base-shadow-penumbra-color": {
+      type: "colorWithOpacity",
+      tint: "900",
+      opacity: 0.28
+    },
+    "base-shadow-ambient-color": {
+      type: "colorWithOpacity",
+      tint: "900",
+      opacity: 0.24
+    },
+    "base-bg-raw": {
+      type: "colorTint",
+      value: black
+    },
+    "skeleton-from": "900",
+    "skeleton-to": {
+      type: "colorWithOpacity",
+      tint: "50",
+      opacity: 0.5
     }
-    const bg = base.bg;
-    const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
-    return {
-      bg,
-      bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, getColorHex(tints, dark, name, "bg_base")),
-      fg: getColorHex(tints, dark, tone, "text_primary"),
-      iconColor: getColorHex(tints, dark, name, "icon_default"),
-      muted: {
-        fg: getColorHex(tints, dark, tone, "text_secondary")
+  }
+};
+const colorTints = {
+  light: {
+    default: {
+      ...defaultTints.light,
+      "base-bg-card": {
+        type: "colorTint",
+        value: white
       },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
+      "bg-accent": "900",
+      "bg-accent-hover": "950",
+      "bg-accent-active": {
+        type: "colorTint",
+        value: black
       },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
+      "border-accent": "600"
+    },
+    primary: {
+      ...defaultTints.light,
+      "bg-accent": "900",
+      "bg-accent-hover": "950",
+      "bg-accent-active": {
+        type: "colorTint",
+        value: black
       },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: getColorHex(tints, dark, tone, "text_secondary")
+      "border-accent": "600"
+    },
+    positive: {
+      ...defaultTints.light,
+      "bg-base-hover": {
+        type: "colorTint",
+        value: hues.gray[50]
       },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  button: _ref14 => {
-    let {
-      base,
-      mode,
-      muted,
-      solid
-    } = _ref14;
-    if (mode === "bleed") {
-      return {
-        enabled: {
-          ...muted.enabled,
-          border: muted.enabled.bg
-        },
-        hovered: {
-          ...muted.hovered,
-          border: muted.hovered.bg
-        },
-        pressed: {
-          ...muted.pressed,
-          border: muted.pressed.bg
-        },
-        selected: {
-          ...muted.selected,
-          border: muted.selected.bg
-        },
-        disabled: {
-          ...muted.disabled,
-          border: muted.disabled.bg
-        }
-      };
-    }
-    if (mode === "ghost") {
-      return {
-        ...muted,
-        enabled: {
-          ...muted.enabled,
-          border: base.border
-        }
-      };
+      "bg-base-active": "50",
+      "bg-accent": "400",
+      "bg-accent-hover": "500",
+      "bg-accent-active": "600",
+      "border-accent": "400"
+    },
+    transparent: defaultTints.light,
+    caution: defaultTints.light,
+    critical: {
+      ...defaultTints.light,
+      "text-inactive": "300"
     }
-    return solid;
   },
-  card: _ref15 => {
-    let {
-      base,
-      dark,
-      muted,
-      name,
-      solid,
-      state
-    } = _ref15;
-    if (state === "hovered") {
-      return muted[name].hovered;
-    }
-    if (state === "disabled") {
-      return muted[name].disabled;
-    }
-    const isNeutral = NEUTRAL_TONES.includes(name);
-    const tints = tones[name] || tones.default;
-    const mix = dark ? screen : multiply;
-    if (state === "pressed") {
-      if (isNeutral) {
-        return muted.primary.pressed;
-      }
-      return muted[name].pressed;
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        return solid.primary.enabled;
-      }
-      return solid[name].enabled;
-    }
-    const bg = base.bg;
-    const skeletonFrom = mix(base.bg, tints[dark ? 900 : 100].hex);
-    return {
-      bg,
-      bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      fg: base.fg,
-      iconColor: getColorHex(tints, dark, name, "icon_default"),
-      border: base.border,
-      muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
+  dark: {
+    default: {
+      ...defaultTints.dark,
+      "base-bg-card": {
+        type: "colorTint",
+        value: black
       },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
+      "text-primary": {
+        type: "colorTint",
+        value: white
       },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
+      "bg-accent": {
+        type: "colorTint",
+        value: white
       },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: tints[dark ? 400 : 600].hex
+      "bg-accent-hover": "50",
+      "bg-accent-active": "100",
+      "base-shadow-umbra-color": {
+        type: "colorWithOpacity",
+        tint: "950",
+        opacity: 0.4
       },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  input: _ref16 => {
-    let {
-      base,
-      dark,
-      mode,
-      state
-    } = _ref16;
-    const mix = dark ? screen : multiply;
-    if (mode === "invalid") {
-      const tints = tones.critical;
-      return {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        bg2: getColorHex(tints, dark, "critical", "text_secondary"),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: getColorHex(tints, dark, "critical", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    if (state === "hovered") {
-      return {
-        bg: base.bg,
-        bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
-        fg: base.fg,
-        border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    if (state === "disabled") {
-      return {
-        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
-        bg2: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    if (state === "readOnly") {
-      return {
-        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
-        bg2: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    return {
-      bg: base.bg,
-      bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
-      fg: base.fg,
-      border: base.border,
-      placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-    };
-  },
-  selectable: _ref17 => {
-    let {
-      base,
-      muted,
-      tone,
-      solid,
-      state
-    } = _ref17;
-    if (state === "enabled") {
-      return {
-        ...muted[tone].enabled,
-        bg: base.bg
-      };
-    }
-    if (state === "pressed") {
-      if (tone === "default") {
-        return muted.primary.pressed;
-      }
-      return muted[tone].pressed;
-    }
-    if (state === "selected") {
-      if (tone === "default") {
-        return solid.primary.enabled;
+      "base-shadow-penumbra-color": {
+        type: "colorWithOpacity",
+        tint: "950",
+        opacity: 0.28
+      },
+      "base-shadow-ambient-color": {
+        type: "colorWithOpacity",
+        tint: "950",
+        opacity: 0.24
       }
-      return solid[tone].enabled;
-    }
-    if (state === "disabled") {
-      return {
-        ...muted[tone].disabled,
-        bg: base.bg
-      };
+    },
+    primary: {
+      ...defaultTints.dark,
+      "text-primary": {
+        type: "colorTint",
+        value: white
+      },
+      "bg-accent": {
+        type: "colorTint",
+        value: white
+      },
+      "bg-accent-hover": "50",
+      "bg-accent-active": "100"
+    },
+    positive: {
+      ...defaultTints.dark,
+      "bg-base-hover": {
+        type: "colorTint",
+        value: hues.gray[900]
+      },
+      "bg-base-active": "900",
+      "bg-accent": "400",
+      "bg-accent-hover": "300",
+      "bg-accent-active": "200",
+      "border-accent": "400"
+    },
+    transparent: defaultTints.dark,
+    caution: defaultTints.dark,
+    critical: {
+      ...defaultTints.dark,
+      "text-inactive": "700"
     }
-    return muted[tone][state];
-  },
-  spot: _ref18 => {
-    let {
-      base,
-      dark,
-      key
-    } = _ref18;
-    const mix = dark ? screen : multiply;
-    return mix(base.bg, hues[key][dark ? 400 : 500].hex);
-  },
-  syntax: _ref19 => {
-    let {
-      base,
-      dark
-    } = _ref19;
-    const mix = dark ? screen : multiply;
-    const mainShade = dark ? 400 : 600;
-    const secondaryShade = dark ? 600 : 400;
+  }
+};
+const getColorValue = (tints, scheme, tone, key) => {
+  const value = colorTints[scheme][tone][key];
+  if (typeof value === "string") {
+    return tints[value];
+  }
+  if (value.type === "colorWithOpacity") {
+    const base = tints[value.tint];
     return {
-      atrule: mix(base.bg, hues.purple[mainShade].hex),
-      attrName: mix(base.bg, hues.green[mainShade].hex),
-      attrValue: mix(base.bg, hues.yellow[mainShade].hex),
-      attribute: mix(base.bg, hues.yellow[mainShade].hex),
-      boolean: mix(base.bg, hues.purple[mainShade].hex),
-      builtin: mix(base.bg, hues.purple[mainShade].hex),
-      cdata: mix(base.bg, hues.yellow[mainShade].hex),
-      char: mix(base.bg, hues.yellow[mainShade].hex),
-      class: mix(base.bg, hues.orange[mainShade].hex),
-      className: mix(base.bg, hues.cyan[mainShade].hex),
-      comment: mix(base.bg, hues.gray[secondaryShade].hex),
-      constant: mix(base.bg, hues.purple[mainShade].hex),
-      deleted: mix(base.bg, hues.red[mainShade].hex),
-      doctype: mix(base.bg, hues.gray[secondaryShade].hex),
-      entity: mix(base.bg, hues.red[mainShade].hex),
-      function: mix(base.bg, hues.green[mainShade].hex),
-      hexcode: mix(base.bg, hues.blue[mainShade].hex),
-      id: mix(base.bg, hues.purple[mainShade].hex),
-      important: mix(base.bg, hues.purple[mainShade].hex),
-      inserted: mix(base.bg, hues.yellow[mainShade].hex),
-      keyword: mix(base.bg, hues.magenta[mainShade].hex),
-      number: mix(base.bg, hues.purple[mainShade].hex),
-      operator: mix(base.bg, hues.magenta[mainShade].hex),
-      prolog: mix(base.bg, hues.gray[secondaryShade].hex),
-      property: mix(base.bg, hues.blue[mainShade].hex),
-      pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
-      pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
-      punctuation: mix(base.bg, hues.gray[mainShade].hex),
-      regex: mix(base.bg, hues.blue[mainShade].hex),
-      selector: mix(base.bg, hues.red[mainShade].hex),
-      string: mix(base.bg, hues.yellow[mainShade].hex),
-      symbol: mix(base.bg, hues.purple[mainShade].hex),
-      tag: mix(base.bg, hues.red[mainShade].hex),
-      unit: mix(base.bg, hues.orange[mainShade].hex),
-      url: mix(base.bg, hues.red[mainShade].hex),
-      variable: mix(base.bg, hues.red[mainShade].hex)
+      hex: rgba(base.hex, value.opacity),
+      title: "".concat(base.title, " ").concat(Math.round(value.opacity * 100), "%")
     };
   }
-});
+  return value.value;
+};
+const getColorHex = (tints, scheme, tone, key) => {
+  return getColorValue(tints, scheme, tone, key).hex;
+};
+const getToneCssVar = (tone, key) => "--".concat(tone, "-").concat(key);
+const createTonesVariables = function (scheme, tones) {
+  let defaultTone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "default";
+  let baseBg = arguments.length > 3 ? arguments[3] : undefined;
+  const tonesVariables = {};
+  const keys = Object.keys(tones);
+  const mix = scheme === "dark" ? screen : multiply;
+  const needsMixing = defaultTone !== "default";
+  keys.forEach(_tone => {
+    const tone = _tone == "default" ? defaultTone : _tone;
+    const tint = tones[tone];
+    colorKeys.forEach(key => {
+      const colorHex = getColorHex(tint, scheme, tone, key);
+      const varName = getToneCssVar(_tone, key);
+      const willBeMixed = needsMixing && !key.startsWith("base-");
+      tonesVariables[varName] = willBeMixed ? mix(baseBg, colorHex) : colorHex;
+    });
+  });
+  if (defaultTone !== "default") {
+    tonesVariables[getToneCssVar("default", "bg-base")] = tonesCssVariables.default["base-bg-card"];
+  }
+  return tonesVariables;
+};
+const themeNames = ["default", "transparent", "primary", "positive", "caution", "critical"];
+const tonesCssVariables = themeNames.reduce((acc, tone) => {
+  acc[tone] = colorKeys.reduce((acc2, key) => {
+    acc2[key] = "var(".concat(getToneCssVar(tone, key), ")");
+    return acc2;
+  }, {});
+  return acc;
+}, {});
+const mutableCardVariables = {
+  "bg-color": "--card-bg-color",
+  "muted-fg-color": "--card-muted-fg-color",
+  "icon-color": "--card-icon-color",
+  "fg-color": "--card-fg-color",
+  "bg-image": "--card-bg-image",
+  "accent-color": "--card-accent-fg-color"
+};
+const mutableVariables = Object.keys(mutableCardVariables).reduce((acc, key) => {
+  const item = key;
+  acc[item] = "var(".concat(mutableCardVariables[item], ")");
+  return acc;
+}, {});
+const cardVariables = {
+  "--card-shadow-outline-color": tonesCssVariables.default["base-shadow-outline-color"],
+  "--card-shadow-umbra-color": tonesCssVariables.default["base-shadow-umbra-color"],
+  "--card-shadow-penumbra-color": tonesCssVariables.default["base-shadow-penumbra-color"],
+  "--card-shadow-ambient-color": tonesCssVariables.default["base-shadow-ambient-color"],
+  "--card-focus-ring-color": tonesCssVariables.positive["bg-accent"],
+  "--card-icon-color": tonesCssVariables.default["icon-default"],
+  "--card-bg-image": "inherit",
+  // Card
+  "--card-bg-color": tonesCssVariables.default["bg-base"],
+  "--card-fg-color": tonesCssVariables.default["text-primary"],
+  "--card-muted-fg-color": tonesCssVariables.default["text-secondary"],
+  "--card-accent-fg-color": tonesCssVariables.default["text-accent"],
+  "--card-link-fg-color": tonesCssVariables.default["text-link"],
+  "--card-code-bg-color": tonesCssVariables.default["bg-tint-code"],
+  "--card-code-fg-color": tonesCssVariables.default["text-code"],
+  "--card-skeleton-color-from": tonesCssVariables.default["skeleton-from"],
+  "--card-skeleton-color-to": tonesCssVariables.default["skeleton-to"],
+  // @todo: deprecate
+  "--card-link-color": tonesCssVariables.default["text-link"],
+  "--card-hairline-soft-color": tonesCssVariables.default["border-base"],
+  "--card-hairline-hard-color": tonesCssVariables.default["border-base"],
+  // Card
+  "--card-bg2-color": tonesCssVariables.default["bg-tint"]
+};
+const createCssVars = function (scheme, tones) {
+  let defaultTone = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "default";
+  const baseBg = getColorHex(tones[defaultTone], scheme, defaultTone, "base-bg-card");
+  const tonesVars = createTonesVariables(scheme, tones, defaultTone, baseBg);
+  return {
+    ...tonesVars,
+    ...cardVariables
+  };
+};
+const cssVars = {
+  ...tonesCssVariables,
+  /**
+   * This variables are mutable, they can be updated by other components.
+   * The main component that updates them is the card, these are the only ones that should be exposed for use from the cards.
+   */
+  mutable: mutableVariables
+};
+const tones = {
+  default: hues.gray,
+  transparent: hues.gray,
+  primary: hues.gray,
+  positive: hues.cyan,
+  caution: hues.yellow,
+  critical: hues.red
+};
 const fonts = {
   code: {
     family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
@@ -3119,7 +1629,14 @@ const studioTheme = {
       width: 1
     }
   },
-  color,
+  color: {
+    tones,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore This is necessary until workshop is updated.
+    base: {
+      bg: "#fffff"
+    }
+  },
   container: [320, 640, 960, 1280, 1600, 1920],
   focusRing: {
     offset: 1,
@@ -3218,6 +1735,11 @@ const DEFAULT_THEME_LAYER = {
     zOffset: 200
   }
 };
+function cssObjectToCssString(rules) {
+  return Object.keys(rules).reduce((acc, key) => {
+    return "".concat(acc).concat(key, ": ").concat(rules[key], "; ");
+  }, "");
+}
 function getGlobalScope() {
   if (typeof globalThis !== "undefined") return globalThis;
   if (typeof window !== "undefined") return window;
@@ -3226,9 +1748,41 @@ function getGlobalScope() {
   throw new Error("@sanity/ui: could not locate global scope");
 }
 const globalScope = getGlobalScope();
-const key$8 = Symbol.for("@sanity/ui/context/theme");
+const key$9 = Symbol.for("@sanity/ui/context/theme");
+globalScope[key$9] = globalScope[key$9] || createContext(null);
+const ThemeContext = globalScope[key$9];
+const key$8 = Symbol.for("@sanity/ui/context/toneContext");
 globalScope[key$8] = globalScope[key$8] || createContext(null);
-const ThemeContext = globalScope[key$8];
+const ToneContext = globalScope[key$8];
+function ToneProvider(props) {
+  const {
+    children,
+    scheme,
+    tone
+  } = props;
+  const root = useRootTheme();
+  const value = useMemo(() => ({
+    version: 0,
+    scheme: scheme || root.scheme,
+    tone
+  }), [root.scheme, scheme, tone]);
+  return /* @__PURE__ */jsx(ToneContext.Provider, {
+    value,
+    children
+  });
+}
+var __freeze$E = Object.freeze;
+var __defProp$F = Object.defineProperty;
+var __template$E = (cooked, raw) => __freeze$E(__defProp$F(cooked, "raw", {
+  value: __freeze$E(raw || cooked.slice())
+}));
+var _a$E;
+const GlobalVariables = createGlobalStyle(_a$E || (_a$E = __template$E(["\n  :root {\n    ", "\n  }\n"])), _ref4 => {
+  let {
+    $vars
+  } = _ref4;
+  return $vars;
+});
 function ThemeProvider(props) {
   const parentTheme = useContext(ThemeContext);
   const {
@@ -3240,38 +1794,44 @@ function ThemeProvider(props) {
   const theme = useMemo(() => {
     if (!themeProp) return null;
     const {
-      color: rootColor,
       layer: rootLayer,
       ...restTheme
     } = themeProp;
-    const colorScheme = rootColor[scheme] || rootColor.light;
-    const color = colorScheme[tone] || colorScheme.default;
     const layer = rootLayer || DEFAULT_THEME_LAYER;
     return {
       sanity: {
         ...restTheme,
-        color,
         layer
       }
     };
-  }, [scheme, themeProp, tone]);
+  }, [themeProp]);
   const value = useMemo(() => themeProp && {
     version: 0,
     theme: themeProp,
     scheme,
     tone
   }, [themeProp, scheme, tone]);
+  const cssVariables = useMemo(() => {
+    if (!(themeProp == null ? void 0 : themeProp.color.tones)) return;
+    return cssObjectToCssString(createCssVars(scheme, themeProp == null ? void 0 : themeProp.color.tones));
+  }, [scheme, themeProp == null ? void 0 : themeProp.color.tones]);
   if (!theme) {
     return /* @__PURE__ */jsx("pre", {
       children: 'ThemeProvider: no "theme" property provided'
     });
   }
-  return /* @__PURE__ */jsx(ThemeContext.Provider, {
+  return /* @__PURE__ */jsxs(ThemeContext.Provider, {
     value,
-    children: /* @__PURE__ */jsx(ThemeProvider$1, {
+    children: [/* @__PURE__ */jsx(GlobalVariables, {
+      $vars: cssVariables
+    }), /* @__PURE__ */jsx(ThemeProvider$1, {
       theme,
-      children
-    })
+      children: /* @__PURE__ */jsx(ToneProvider, {
+        tone,
+        scheme,
+        children
+      })
+    })]
   });
 }
 function isRecord(value) {
@@ -3438,7 +1998,17 @@ function useCustomValidity(ref, customValidity) {
     }
   }, [customValidity, ref]);
 }
-const BORDER_VALUE = "1px solid var(--card-border-color)";
+function useToneContext() {
+  const value = useContext(ToneContext);
+  if (!value) {
+    throw new Error("useToneContext(): missing context value");
+  }
+  if (!isRecord(value) || value.version !== 0) {
+    throw new Error("useToneContext(): the context value is not compatible");
+  }
+  return value;
+}
+const BORDER_VALUE = "1px solid ".concat(cssVars.default["border-base"]);
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
@@ -3694,8 +2264,8 @@ function focusRingStyle(opts) {
   } = opts;
   const focusRingOutsetWidth = focusRing.offset + focusRing.width;
   const focusRingInsetWidth = 0 - focusRing.offset;
-  const bgColor = base ? base.bg : "var(--card-bg-color)";
-  return [focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")].filter(Boolean).join(",");
+  const bgColor = base ? base.bg : cssVars.mutable["bg-color"];
+  return [focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px ").concat(cssVars.positive["border-accent"]), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px ").concat(cssVars.positive["border-accent"])].filter(Boolean).join(",");
 }
 const GRID_CSS = {
   "&&:not([hidden])": {
@@ -3960,13 +2530,11 @@ function textInputRootStyle() {
 function textInputBaseStyle(props) {
   const {
     theme,
-    $scheme,
     $tone,
     $weight
   } = props;
   const font = theme.sanity.fonts.text;
-  const color = theme.sanity.color.input;
-  return css(_b$m || (_b$m = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return css(_b$m || (_b$m = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    --input-fg-color: ", ";\n    --input-placeholder-color: ", ";\n\n    /* enabled */\n    &:not(:invalid):not(:disabled):not(:read-only) {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* disabled */\n    &:not(:invalid):disabled {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* invalid */\n    &:invalid {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* readOnly */\n    &:read-only {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, cssVars[$tone]["text-primary"], cssVars[$tone]["text-inactive"], cssVars[$tone]["text-primary"], cssVars[$tone]["text-inactive"], cssVars[$tone]["text-primary"], cssVars[$tone]["text-inactive"], cssVars.critical["text-primary"], cssVars.critical["text-inactive"], cssVars[$tone]["text-primary"], cssVars[$tone]["text-inactive"]);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3988,7 +2556,6 @@ function textInputRepresentationStyle(props) {
   const {
     $hasPrefix,
     $hasSuffix,
-    $scheme,
     $tone,
     theme
   } = props;
@@ -3998,26 +2565,22 @@ function textInputRepresentationStyle(props) {
   const {
     focusRing
   } = input.text;
-  const color = theme.sanity.color.input;
-  return css(_c$d || (_c$d = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
-    color: color.default.enabled.border,
+  return css(_c$d || (_c$d = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: ", ";\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    ", ": ", ";\n    ", ": ", ";\n\n    /* enabled */\n    &[data-border] {\n      --input-box-shadow: ", ";\n    }\n\n    /* invalid */\n    *:not(:disabled):invalid + & {\n      ", ": ", ";\n      ", ": ", ";\n\n      &[data-border] {\n        --input-box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    *:not(:disabled):focus + & {\n      &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      &:not([data-border]) {\n        --input-box-shadow: ", ";\n      }\n    }\n\n    /* disabled */\n    *:disabled + & {\n      ", ": ", " !important;\n     ", ": ", " !important;\n    }\n\n    /* readOnly */\n    *:read-only + & {\n      ", ": ", " !important;\n     ", ": ", " !important;\n    }\n\n    /* hovered */\n    @media (hover: hover) {\n\n      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n    }\n    }\n  "])), cssVars.mutable["bg-color"], $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, mutableCardVariables["bg-color"], cssVars[$tone]["bg-base"], mutableCardVariables["fg-color"], cssVars[$tone]["text-primary"], focusRingBorderStyle({
+    color: cssVars[$tone]["border-base"],
     width: input.border.width
-  }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
-    color: color.invalid.enabled.border,
+  }), mutableCardVariables["bg-color"], cssVars.critical["bg-tint"], mutableCardVariables["fg-color"], cssVars.critical["text-primary"], focusRingBorderStyle({
+    color: cssVars.critical["border-base"],
     width: input.border.width
   }), focusRingStyle({
     border: {
-      color: color.default.enabled.border,
+      color: cssVars[$tone]["border-base"],
       width: input.border.width
     },
     focusRing
   }), focusRingStyle({
     focusRing
-  }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
-    color: color.default.disabled.border,
-    width: input.border.width
-  }), color.default.readOnly.bg, color.default.readOnly.fg, color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
-    color: color.default.hovered.border,
+  }), mutableCardVariables["bg-color"], cssVars.default["bg-tint"], mutableCardVariables["fg-color"], cssVars.default["text-primary"], mutableCardVariables["bg-color"], cssVars.default["bg-tint"], mutableCardVariables["fg-color"], cssVars.default["text-primary"], focusRingBorderStyle({
+    color: cssVars.default["border-base-hover"],
     width: input.border.width
   }));
 }
@@ -4059,10 +2622,10 @@ function toBoxShadow(shadow, color) {
 }
 function shadowStyle(shadow) {
   if (!shadow) return EMPTY_RECORD;
-  const outline = "0 0 0 ".concat(rem(1), " var(--card-shadow-outline-color)");
-  const umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)");
-  const penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)");
-  const ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
+  const outline = "0 0 0 ".concat(rem(1), " ").concat(cssVars.default["base-shadow-outline-color"]);
+  const umbra = toBoxShadow(shadow.umbra, cssVars.default["base-shadow-umbra-color"]);
+  const penumbra = toBoxShadow(shadow.penumbra, cssVars.default["base-shadow-penumbra-color"]);
+  const ambient = toBoxShadow(shadow.ambient, cssVars.default["base-shadow-ambient-color"]);
   return {
     boxShadow: "".concat(outline, ", ").concat(umbra, ", ").concat(penumbra, ", ").concat(ambient)
   };
@@ -4092,7 +2655,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return css(_c$c || (_c$c = __template$C(["\n    color: ", ";\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: ", ";\n      color: ", ";\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: ", ";\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 3px ", ";\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: ", ";\n    }\n  "])), cssVars.mutable["fg-color"], $accent && css(_a$C || (_a$C = __template$C(["\n      color: ", ";\n    "])), cssVars.default["text-accent"]), $muted && css(_b$l || (_b$l = __template$C(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), theme.sanity.fonts.code.family, cssVars.default["bg-tint-code"], cssVars.default["text-code"], cssVars.default["text-link"], cssVars.mutable["bg-color"], cssVars.positive["border-accent"], weights.bold, cssVars.mutable["icon-color"]);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4133,6 +2696,44 @@ const Text = forwardRef(function Text2(props, ref) {
     })
   });
 });
+const spotColor = {
+  gray: {
+    dark: gray["400"],
+    light: gray["500"]
+  },
+  blue: {
+    dark: blue["400"],
+    light: blue["500"]
+  },
+  purple: {
+    dark: purple["400"],
+    light: purple["500"]
+  },
+  magenta: {
+    dark: magenta["400"],
+    light: magenta["500"]
+  },
+  red: {
+    dark: red["400"],
+    light: red["500"]
+  },
+  orange: {
+    dark: orange["400"],
+    light: orange["500"]
+  },
+  yellow: {
+    dark: yellow["400"],
+    light: yellow["500"]
+  },
+  green: {
+    dark: green["400"],
+    light: green["500"]
+  },
+  cyan: {
+    dark: cyan["400"],
+    light: cyan["500"]
+  }
+};
 const avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
@@ -4191,7 +2792,7 @@ function avatarRootStyle(props) {
     position: "relative",
     boxSizing: "border-box",
     userSelect: "none",
-    boxShadow: "0 0 0 1px var(--card-bg-color)",
+    boxShadow: "0 0 0 1px ".concat(cssVars.mutable["bg-color"]),
     '&[data-status="inactive"]': {
       opacity: 0.5
     },
@@ -4245,17 +2846,11 @@ function responsiveAvatarSizeStyle(props) {
     };
   });
 }
-function avatarInitialsStyle(props) {
-  const {
-    theme
-  } = props;
-  const {
-    base
-  } = theme.sanity.color;
+function avatarInitialsStyle() {
   return {
     width: "100%",
     height: "100%",
-    color: base.fg,
+    color: cssVars.default["text-primary"],
     alignItems: "center",
     justifyContent: "center",
     textTransform: "uppercase",
@@ -4269,7 +2864,7 @@ function avatarInitialsStyle(props) {
 function avatarBgStrokeStyle() {
   return {
     strokeWidth: "4px",
-    stroke: "var(--card-bg-color)"
+    stroke: cssVars.mutable["bg-color"]
   };
 }
 function avatarStrokeStyle() {
@@ -4303,7 +2898,10 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
   const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
   const size = useArrayProp(sizeProp);
   const theme = useTheme();
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray;
+  const {
+    scheme
+  } = useToneContext();
+  const color = spotColor[colorKey][scheme].hex;
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
@@ -4425,7 +3023,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: ", ";\n    background:  ", ";\n    box-shadow:\n      0 0 0 1px  ", ",\n      inset 0 0 0 1.5px ", ");\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), cssVars.mutable["fg-color"], cssVars.mutable["bg-color"], cssVars.mutable["bg-color"], cssVars.default["border-base"], rem(theme.sanity.space[2]));
 }
 const Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
@@ -4596,7 +3194,7 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return css(_c$b || (_c$b = __template$y(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$k || (_b$k = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return css(_c$b || (_c$b = __template$y(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$y || (_a$y = __template$y(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$k || (_b$k = __template$y(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), fonts.code.family);
 }
 var __freeze$x = Object.freeze;
 var __defProp$y = Object.defineProperty;
@@ -4642,15 +3240,13 @@ const Label = forwardRef(function Label2(props, ref) {
 function badgeStyle(props) {
   const {
     $mode,
-    $tone,
-    theme
+    $tone
   } = props;
-  const palette = theme.sanity.color[$mode === "outline" ? "muted" : "solid"];
-  const color = palette[$tone] || palette.default;
   return {
-    backgroundColor: color.enabled.bg,
-    color: color.enabled.fg,
-    boxShadow: "inset 0 0 0 1px ".concat(color.enabled.border),
+    // backgroundColor: color.enabled.bg,
+    backgroundColor: $mode === "outline" ? cssVars[$tone]["bg-base"] : cssVars[$tone]["bg-tint"],
+    color: cssVars[$tone]["text-secondary"],
+    boxShadow: $mode === "outline" ? "inset 0 0 0 1px ".concat(cssVars[$tone]["border-base"]) : void 0,
     cursor: "default",
     "&:not([hidden])": {
       display: "inline-block"
@@ -4725,37 +3321,6 @@ const Spinner = forwardRef(function Spinner2(props, ref) {
     children: /* @__PURE__ */jsx(SpinnerIcon, {})
   });
 });
-function _colorVarsStyle(base, color) {
-  let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  return {
-    // Base
-    // @todo: rename to "--base-"?
-    "--card-shadow-outline-color": base.shadow.outline,
-    "--card-shadow-umbra-color": base.shadow.umbra,
-    "--card-shadow-penumbra-color": base.shadow.penumbra,
-    "--card-shadow-ambient-color": base.shadow.ambient,
-    "--card-focus-ring-color": base.focusRing,
-    "--card-icon-color": color.iconColor,
-    // Card
-    "--card-bg-color": color.bg,
-    "--card-bg2-color": color.bg2,
-    "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.bg2 || color.bg, " 0% 50%)") : void 0,
-    "--card-fg-color": color.fg,
-    "--card-border-color": color.border,
-    "--card-muted-fg-color": (_a = color.muted) == null ? void 0 : _a.fg,
-    "--card-accent-fg-color": (_b = color.accent) == null ? void 0 : _b.fg,
-    "--card-link-fg-color": (_c = color.link) == null ? void 0 : _c.fg,
-    "--card-code-bg-color": (_d = color.code) == null ? void 0 : _d.bg,
-    "--card-code-fg-color": (_e = color.code) == null ? void 0 : _e.fg,
-    "--card-skeleton-color-from": (_f = color.skeleton) == null ? void 0 : _f.from,
-    "--card-skeleton-color-to": (_g = color.skeleton) == null ? void 0 : _g.to,
-    // @todo: deprecate
-    "--card-link-color": (_h = color.link) == null ? void 0 : _h.fg,
-    "--card-hairline-soft-color": color.border,
-    "--card-hairline-hard-color": color.border
-  };
-}
 var __freeze$v = Object.freeze;
 var __defProp$w = Object.defineProperty;
 var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
@@ -4781,32 +3346,60 @@ function buttonColorStyles(props) {
   var _a2, _b;
   const {
     $mode,
-    theme
+    theme,
+    $tone
   } = props;
   const {
     focusRing
   } = theme.sanity.button;
   const shadow = props.$mode !== "bleed";
-  const base = theme.sanity.color.base;
-  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default;
-  const color = mode[props.$tone] || mode.default;
   const border = {
     width: buttonTheme.border.width,
-    color: "var(--card-border-color)"
+    color: $mode === "default" ? cssVars[$tone]["bg-accent"] : $mode === "ghost" ? cssVars[$tone]["border-base"] : cssVars[$tone]["bg-base"]
   };
-  return [_colorVarsStyle(base, color.enabled), {
-    backgroundColor: "var(--card-bg-color)",
-    color: "var(--card-fg-color)",
+  return [{
+    // This is going to be used by the text elements inside the button
+    [mutableCardVariables["fg-color"]]: $mode === "default" ? cssVars[$tone]["base-text-color"] : cssVars[$tone]["text-primary"],
+    [mutableCardVariables["muted-fg-color"]]: $mode === "default" ? cssVars[$tone]["base-text-color"] : cssVars[$tone]["text-secondary"],
+    [mutableCardVariables["icon-color"]]: $mode === "default" ? cssVars[$tone]["icon-inverted"] : cssVars[$tone]["icon-default"],
+    [mutableCardVariables["bg-color"]]: $mode === "default" ? cssVars[$tone]["bg-accent"] : cssVars[$tone]["bg-base"],
+    // Override the default variables for elements used inside buttons
+    [getToneCssVar("default", "bg-tint-code")]: $mode === "default" ? cssVars[$tone]["bg-accent"] : cssVars[$tone]["bg-tint-code"],
+    ...($mode === "default" && {
+      [getToneCssVar("default", "text-code")]: cssVars[$tone]["base-text-color"],
+      [getToneCssVar("default", "text-code")]: cssVars[$tone]["base-text-color"],
+      [getToneCssVar("default", "text-link")]: cssVars[$tone]["base-text-color"],
+      [getToneCssVar("default", "text-accent")]: cssVars[$tone]["base-text-color"]
+    }),
+    '&:disabled, &[data-disabled="true"]': {
+      /* Updates the variables for the */
+      [mutableCardVariables["fg-color"]]: cssVars.primary["text-inactive"],
+      [mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-inactive"],
+      [mutableCardVariables["icon-color"]]: cssVars.primary["border-base"],
+      [mutableCardVariables["bg-color"]]: $mode === "default" ? cssVars.primary["bg-tint"] : cssVars.default["bg-base"]
+    }
+  }, {
+    backgroundColor: $mode === "default" ? cssVars[$tone]["bg-accent"] : cssVars[$tone]["bg-base"],
+    color: $mode === "default" ? cssVars[$tone]["base-text-color"] : cssVars[$tone]["text-primary"],
     boxShadow: focusRingBorderStyle(border),
-    '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+    '&:disabled, &[data-disabled="true"]': {
+      backgroundColor: $mode === "default" ? cssVars.primary["bg-tint"] : cssVars.default["bg-base"],
+      color: cssVars.primary["text-inactive"],
+      boxShadow: focusRingBorderStyle({
+        ...border,
+        color: $mode === "default" ? cssVars.primary["bg-tint"] : cssVars.primary["border-base"]
+      })
+    },
     "&:not([data-disabled='true'])": {
       boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0),
       "&:focus": {
         boxShadow: focusRingStyle({
-          base,
+          base: {
+            bg: cssVars.positive["border-accent"]
+          },
           border: {
             width: 2,
-            color: base.bg
+            color: cssVars.default["bg-base"]
           },
           focusRing
         })
@@ -4815,11 +3408,19 @@ function buttonColorStyles(props) {
         boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0)
       },
       "@media (hover: hover)": {
-        "&:hover": _colorVarsStyle(base, color.hovered),
-        "&:active": _colorVarsStyle(base, color.pressed),
-        "&[data-hovered]": _colorVarsStyle(base, color.hovered)
+        "&:hover": {
+          backgroundColor: $mode === "default" ? cssVars[$tone]["bg-accent-hover"] : cssVars[$tone]["bg-base-hover"]
+        },
+        "&:active": {
+          backgroundColor: $mode === "default" ? cssVars[$tone]["bg-accent-active"] : cssVars[$tone]["bg-base-active"]
+        },
+        "&[data-hovered]": {
+          backgroundColor: $mode === "default" ? cssVars[$tone]["bg-accent-hover"] : cssVars[$tone]["bg-base-hover"]
+        }
       },
-      "&[data-selected]": _colorVarsStyle(base, color.pressed)
+      "&[data-selected]": {
+        backgroundColor: $mode === "default" ? cssVars[$tone]["bg-accent-active"] : cssVars[$tone]["bg-base-active"]
+      }
     }
   }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
 }
@@ -4830,7 +3431,7 @@ var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
 }));
 var _a$u;
 const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_a$u || (_a$u = __template$u(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+const LoadingBox = styled.div(_a$u || (_a$u = __template$u(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])), cssVars.mutable["bg-color"]);
 const Button = forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -4924,6 +3525,52 @@ const Button = forwardRef(function Button2(props, ref) {
     })]
   });
 });
+function _colorVarStyleDisabled() {
+  let checkered = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return {
+    [getToneCssVar("default", "text-link")]: cssVars.default["text-secondary"],
+    [getToneCssVar("default", "text-accent")]: cssVars.default["text-secondary"],
+    [getToneCssVar("default", "text-code")]: cssVars.default["text-secondary"],
+    [getToneCssVar("default", "text-primary")]: cssVars.default["text-secondary"],
+    [mutableCardVariables["fg-color"]]: cssVars.primary["text-inactive"],
+    [mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-inactive"],
+    [mutableCardVariables["icon-color"]]: cssVars.primary["border-base"],
+    [mutableCardVariables["accent-color"]]: cssVars.primary["base-bg-card"],
+    [mutableCardVariables["bg-color"]]: cssVars.primary["bg-tint"],
+    [mutableCardVariables["bg-image"]]: checkered ? "repeating-conic-gradient(".concat(cssVars.default["base-bg-card"], " 0% 25%, ").concat(cssVars.default["bg-tint"], " 0% 50%)") : void 0
+  };
+}
+function _colorVarStyleSelected() {
+  return {
+    [mutableCardVariables["bg-color"]]: cssVars.default["bg-accent"],
+    [mutableCardVariables["fg-color"]]: cssVars.default["bg-base"],
+    [mutableCardVariables["muted-fg-color"]]: cssVars.default["base-bg-card"],
+    [mutableCardVariables["accent-color"]]: cssVars.default["base-bg-card"],
+    [mutableCardVariables["icon-color"]]: cssVars.primary["bg-base"]
+  };
+}
+function _colorVarStyleHover() {
+  return {
+    [mutableCardVariables["bg-color"]]: cssVars.default["bg-base-hover"]
+  };
+}
+function _colorVarStyleActive() {
+  return {
+    [mutableCardVariables["bg-color"]]: cssVars.default["bg-base-active"]
+  };
+}
+function _selectableVarStyle() {
+  return {
+    [mutableCardVariables["bg-color"]]: "inherit",
+    [mutableCardVariables["fg-color"]]: cssVars.default["text-secondary"]
+  };
+}
+function _selectableVarStyleDisabled() {
+  return {
+    ..._colorVarStyleDisabled(),
+    [mutableCardVariables["bg-color"]]: void 0
+  };
+}
 var __freeze$t = Object.freeze;
 var __defProp$u = Object.defineProperty;
 var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
@@ -4939,38 +3586,50 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_b$i || (_b$i = __template$t(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css(_b$i || (_b$i = __template$t(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: ", ";\n    "])), space[3], space[3], cssVars.mutable["bg-image"]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
   const {
     $checkered,
     $focusRing,
-    theme
+    theme,
+    $tone,
+    $scheme,
+    $updateCssVars
   } = props;
   const {
     focusRing
   } = theme.sanity.card;
-  const {
-    base,
-    card,
-    dark
-  } = theme.sanity.color;
   const border = {
     width: 0,
-    color: "var(--card-border-color)"
+    color: cssVars.positive["border-accent"]
   };
-  return css(_c$a || (_c$a = __template$t(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
-    base,
+  return css(_c$a || (_c$a = __template$t(["\n    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */\n    ", "\n    color-scheme: ", ";\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), $updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone), $scheme === "dark" ? "dark" : "light", $checkered && "--card-bg-image: repeating-conic-gradient(".concat(cssVars.default["base-bg-card"], " 0% 25%, ").concat(cssVars.default["bg-tint"], " 0% 50%)"), cssVars.mutable["bg-color"], cssVars.default["text-primary"], _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
     border,
     focusRing
-  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
-    base,
+  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
     border,
     focusRing
   }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Wrapper = _ref5 => {
+  let {
+    shouldAddContext,
+    scheme,
+    tone,
+    children
+  } = _ref5;
+  if (shouldAddContext) {
+    return /* @__PURE__ */jsx(ToneProvider, {
+      scheme,
+      tone,
+      children
+    });
+  }
+  return children;
+};
 const Card = forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -4983,23 +3642,28 @@ const Card = forwardRef(function Card2(props, ref) {
     borderLeft,
     pressed,
     radius = 0,
-    scheme,
+    scheme: schemeProp,
     selected,
     shadow,
     tone: toneProp = "default",
+    updateCssVars = false,
     ...restProps
   } = props;
   const as = isValidElementType(asProp) ? asProp : "div";
-  const rootTheme = useRootTheme();
-  const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
-  return /* @__PURE__ */jsx(ThemeColorProvider, {
+  const toneContext = useToneContext();
+  const tone = toneProp === "inherit" ? toneContext.tone : toneProp;
+  const scheme = schemeProp != null ? schemeProp : toneContext.scheme;
+  const shouldAddContext = scheme !== toneContext.scheme || tone !== toneContext.tone;
+  return /* @__PURE__ */jsx(Wrapper, {
+    shouldAddContext,
     scheme,
     tone,
     children: /* @__PURE__ */jsx(Root$u, {
       "data-as": typeof as === "string" ? as : void 0,
-      "data-scheme": rootTheme.scheme,
+      "data-scheme": scheme,
       "data-ui": "Card",
       "data-tone": tone,
+      $scheme: scheme != null ? scheme : toneContext.scheme,
       ...restProps,
       $border: useArrayProp(border),
       $borderTop: useArrayProp(borderTop),
@@ -5011,6 +3675,7 @@ const Card = forwardRef(function Card2(props, ref) {
       $radius: useArrayProp(radius),
       $shadow: useArrayProp(shadow),
       $tone: tone,
+      $updateCssVars: updateCssVars || shouldAddContext,
       "data-checkered": checkered ? "" : void 0,
       "data-pressed": pressed ? "" : void 0,
       "data-selected": selected ? "" : void 0,
@@ -5033,7 +3698,6 @@ function inputElementStyles(props) {
   const {
     theme
   } = props;
-  const color = theme.sanity.color.input;
   const {
     input,
     radius
@@ -5042,37 +3706,37 @@ function inputElementStyles(props) {
     focusRing
   } = input.checkbox;
   return css(_b$h || (_b$h = __template$s(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.2 !important;\n        }\n      }\n    }\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
-    color: color.default.enabled.border,
+    color: cssVars.default["border-base"],
     width: input.border.width
-  }), rem(radius[2]), color.default.enabled.bg, color.default.enabled.bg2, focusRingBorderStyle({
-    color: color.default.enabled.bg2,
+  }), rem(radius[2]), cssVars.default["bg-base"], cssVars.default["text-secondary"], focusRingBorderStyle({
+    color: cssVars.default["text-secondary"],
     width: input.border.width
-  }), color.default.enabled.bg, focusRingStyle({
+  }), cssVars.default["bg-base"], focusRingStyle({
     focusRing
   }), focusRingStyle({
     focusRing: {
       width: 1,
       offset: 1
     }
-  }), color.invalid.enabled.border, focusRingBorderStyle({
+  }), cssVars.critical["border-base"], focusRingBorderStyle({
     width: input.border.width,
-    color: color.invalid.enabled.bg2
-  }), color.default.disabled.fg, color.invalid.enabled.bg2, color.default.enabled.bg, focusRingStyle({
+    color: cssVars.critical["text-secondary"]
+  }), cssVars.default["text-secondary"], cssVars.critical["text-secondary"], cssVars.default["bg-base"], focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.invalid.readOnly.bg2
+      color: cssVars.critical["text-secondary"]
     },
     focusRing: {
       width: 1,
       offset: 1
     }
-  }), color.default.disabled.bg, focusRingBorderStyle({
+  }), cssVars.default["bg-tint"], focusRingBorderStyle({
     width: input.border.width,
-    color: color.default.disabled.border
-  }), color.default.disabled.fg, color.default.disabled.bg2, color.default.readOnly.bg, focusRingBorderStyle({
+    color: cssVars.default["border-base"]
+  }), cssVars.default["text-secondary"], cssVars.default["border-base"], cssVars.default["bg-tint"], focusRingBorderStyle({
     width: input.border.width,
-    color: color.default.readOnly.border
-  }), color.default.readOnly.fg, color.default.readOnly.bg2);
+    color: cssVars.default["border-base"]
+  }), cssVars.default["text-secondary"], cssVars.default["border-base"]);
 }
 const Root$t = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
@@ -5118,124 +3782,123 @@ var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
   value: __freeze$r(raw || cooked.slice())
 }));
 var _a$r;
-function codeSyntaxHighlightingStyle(_ref20) {
-  let {
-    theme
-  } = _ref20;
-  const color = theme.sanity.color.syntax;
+function codeSyntaxHighlightingStyle(scheme) {
+  const dark = scheme === "dark";
+  const mainShade = dark ? 400 : 600;
+  const secondaryShade = dark ? 600 : 400;
   return {
     "&.atrule": {
-      color: color.atrule
+      color: purple[mainShade].hex
     },
     "&.attr-name": {
-      color: color.attrName
+      color: green[mainShade].hex
     },
     "&.attr-value": {
-      color: color.attrValue
+      color: yellow[mainShade].hex
     },
     "&.attribute": {
-      color: color.attribute
+      color: yellow[mainShade].hex
     },
     "&.boolean": {
-      color: color.boolean
+      color: purple[mainShade].hex
     },
     "&.builtin": {
-      color: color.builtin
+      color: purple[mainShade].hex
     },
     "&.cdata": {
-      color: color.cdata
+      color: yellow[mainShade].hex
     },
     "&.char": {
-      color: color.char
+      color: yellow[mainShade].hex
     },
     "&.class": {
-      color: color.class
+      color: orange[mainShade].hex
     },
     "&.class-name": {
-      color: color.className
+      color: cyan[mainShade].hex
     },
     "&.comment": {
-      color: color.comment
+      color: gray[secondaryShade].hex
     },
     "&.constant": {
-      color: color.constant
+      color: purple[mainShade].hex
     },
     "&.deleted": {
-      color: color.deleted
+      color: red[mainShade].hex
     },
     "&.doctype": {
-      color: color.doctype
+      color: gray[secondaryShade].hex
     },
     "&.entity": {
-      color: color.entity
+      color: red[mainShade].hex
     },
     "&.function": {
-      color: color.function
+      color: green[mainShade].hex
     },
     "&.hexcode": {
-      color: color.hexcode
+      color: blue[mainShade].hex
     },
     "&.id": {
-      color: color.id
+      color: purple[mainShade].hex
     },
     "&.important": {
-      color: color.important
+      color: purple[mainShade].hex
     },
     "&.inserted": {
-      color: color.inserted
+      color: yellow[mainShade].hex
     },
     "&.keyword": {
-      color: color.keyword
+      color: magenta[mainShade].hex
     },
     "&.number": {
-      color: color.number
+      color: purple[mainShade].hex
     },
     "&.operator": {
-      color: color.operator
+      color: magenta[mainShade].hex
     },
     "&.prolog": {
-      color: color.prolog
+      color: gray[secondaryShade].hex
     },
     "&.property": {
-      color: color.property
+      color: blue[mainShade].hex
     },
     "&.pseudo-class": {
-      color: color.pseudoClass
+      color: yellow[mainShade].hex
     },
     "&.pseudo-element": {
-      color: color.pseudoElement
+      color: yellow[mainShade].hex
     },
     "&.punctuation": {
-      color: color.punctuation
+      color: gray[mainShade].hex
     },
     "&.regex": {
-      color: color.regex
+      color: blue[mainShade].hex
     },
     "&.selector": {
-      color: color.selector
+      color: red[mainShade].hex
     },
     "&.string": {
-      color: color.string
+      color: yellow[mainShade].hex
     },
     "&.symbol": {
-      color: color.symbol
+      color: purple[mainShade].hex
     },
     "&.tag": {
-      color: color.tag
+      color: red[mainShade].hex
     },
     "&.unit": {
-      color: color.unit
+      color: orange[mainShade].hex
     },
     "&.url": {
-      color: color.url
+      color: red[mainShade].hex
     },
     "&.variable": {
-      color: color.variable
+      color: red[mainShade].hex
     }
   };
 }
-function codeBaseStyle() {
-  return css(_a$r || (_a$r = __template$r(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+function codeBaseStyle(props) {
+  return css(_a$r || (_a$r = __template$r(["\n    color: ", ";\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), cssVars.default["text-code"], codeSyntaxHighlightingStyle(props.$scheme));
 }
 const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
@@ -5248,12 +3911,16 @@ const Code = forwardRef(function Code2(props, ref) {
   } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor.hasLanguage(language) : false;
+  const {
+    scheme
+  } = useToneContext();
   return /* @__PURE__ */jsxs(Root$s, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
     $weight: weight,
     ref,
+    $scheme: scheme,
     children: [!(language && registered) && /* @__PURE__ */jsx("code", {
       children
     }), language && registered && /* @__PURE__ */jsx(Refractor, {
@@ -5341,7 +4008,7 @@ function headingBaseStyle(props) {
     $muted,
     theme
   } = props;
-  return css(_c$9 || (_c$9 = __template$q(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$q || (_a$q = __template$q(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$q(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return css(_c$9 || (_c$9 = __template$q(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: ", ";\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 3px ", ";\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$q || (_a$q = __template$q(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$g || (_b$g = __template$q(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), theme.sanity.fonts.code.family, cssVars.default["text-link"], cssVars.mutable["bg-color"], cssVars.positive["border-accent"]);
 }
 var __freeze$p = Object.freeze;
 var __defProp$q = Object.defineProperty;
@@ -5435,7 +4102,7 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
 }));
 var _a$o;
 function kbdStyle() {
-  return css(_a$o || (_a$o = __template$o(["\n    background: var(--card-bg2-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$o || (_a$o = __template$o(["\n    background: ", ";\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])), cssVars.default["bg-tint"]);
 }
 const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
@@ -6175,8 +4842,8 @@ var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
 }));
 var _a$l, _b$e, _c$8;
 const Root$j = styled.div(_a$l || (_a$l = __template$l(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
-const BorderPath = styled.path(_b$e || (_b$e = __template$l(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled.path(_c$8 || (_c$8 = __template$l(["\n  fill: var(--card-bg-color);\n"])));
+const BorderPath = styled.path(_b$e || (_b$e = __template$l(["\n  fill: ", ";\n"])), cssVars.default["base-shadow-outline-color"]);
+const ShapePath = styled.path(_c$8 || (_c$8 = __template$l(["\n  fill: ", ";\n"])), cssVars.mutable["bg-color"]);
 const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
   return /* @__PURE__ */jsx(Root$j, {
     "data-ui": "Popover__arrow",
@@ -6229,6 +4896,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     zIndex
   } = useLayer();
+  const toneContext = useToneContext();
   const margins = useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
@@ -6254,14 +4922,16 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   return /* @__PURE__ */jsxs(Root$i, {
     "data-ui": "Popover",
     ...restProps,
+    "data-tone": tone,
     "data-placement": placement,
     radius,
     ref,
     scheme,
     shadow,
     sizing: "border",
+    updateCssVars: true,
+    tone: tone === "inherit" ? toneContext.tone : tone,
     style: rootStyle,
-    tone,
     children: [/* @__PURE__ */jsx(Flex, {
       "data-ui": "Popover__wrapper",
       direction: "column",
@@ -6371,13 +5041,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref21) {
+        apply(_ref6) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref21;
+          } = _ref6;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -6525,24 +5195,23 @@ function inputElementStyle(props) {
   const {
     focusRing
   } = input.radio;
-  const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_b$d || (_b$d = __template$k(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
-    color: color.default.enabled.border,
+  return css(_b$d || (_b$d = __template$k(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), cssVars.default["bg-base"], focusRingBorderStyle({
+    color: cssVars.default["border-base"],
     width: input.border.width
-  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.bg2, focusRingStyle({
+  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), cssVars.default["text-secondary"], focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.default.enabled.border
+      color: cssVars.default["border-base"]
     },
     focusRing
   }), focusRingBorderStyle({
-    color: color.default.enabled.border,
+    color: cssVars.default["border-base"],
     width: input.border.width
-  }), color.invalid.enabled.border, focusRingBorderStyle({
+  }), cssVars.critical["border-base"], focusRingBorderStyle({
     width: input.border.width,
-    color: color.invalid.enabled.bg2
-  }), color.invalid.enabled.bg2, color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.border, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.border);
+    color: cssVars.critical["text-secondary"]
+  }), cssVars.critical["text-secondary"], cssVars.default["border-base"], cssVars.default["bg-tint"], cssVars.default["border-base"], cssVars.default["border-base"], cssVars.default["bg-tint"], cssVars.default["border-base"]);
 }
 const Root$h = styled.div(radioBaseStyle);
 const Input$4 = styled.input(inputElementStyle);
@@ -6598,24 +5267,23 @@ function inputColorStyle(props) {
   const {
     focusRing
   } = input.select;
-  const color = theme.sanity.color.input;
-  return css(_c$7 || (_c$7 = __template$j(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
-    color: color.default.enabled.border,
+  return css(_c$7 || (_c$7 = __template$j(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), cssVars.default["bg-base"], cssVars.default["text-primary"], focusRingBorderStyle({
+    color: cssVars.default["border-base"],
     width: input.border.width
-  }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
-    color: color.default.hovered.border,
+  }), cssVars.default["bg-base-hover"], cssVars.default["text-primary"], focusRingBorderStyle({
+    color: cssVars.default["border-base-hover"],
     width: input.border.width
   }), focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.default.enabled.border
+      color: cssVars.default["border-base"]
     },
     focusRing
-  }), color.default.readOnly.bg, color.default.readOnly.fg, focusRingBorderStyle({
-    color: color.default.readOnly.border,
+  }), cssVars.default["bg-tint"], cssVars.default["text-primary"], focusRingBorderStyle({
+    color: cssVars.default["border-base"],
     width: input.border.width
-  }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
-    color: color.default.disabled.border,
+  }), cssVars.default["bg-tint"], cssVars.default["text-primary"], focusRingBorderStyle({
+    color: cssVars.default["border-base"],
     width: input.border.width
   }));
 }
@@ -6638,12 +5306,8 @@ function inputTextSizeStyle(props) {
 function inputStyle() {
   return [responsiveRadiusStyle, inputBaseStyle, inputColorStyle, inputTextSizeStyle, responsiveInputPaddingIconRightStyle];
 }
-function iconBoxStyle(props) {
-  const {
-    theme
-  } = props;
-  const color = theme.sanity.color.input;
-  return css(_d$5 || (_d$5 = __template$j(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+function iconBoxStyle() {
+  return css(_d$5 || (_d$5 = __template$j(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    ", ": ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        ", ": ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      ", ": ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      ", ": ", ";\n    }\n  "])), mutableCardVariables["fg-color"], cssVars.default["text-primary"], mutableCardVariables["fg-color"], cssVars.default["text-primary"], mutableCardVariables["fg-color"], cssVars.default["text-primary"], mutableCardVariables["fg-color"], cssVars.default["text-primary"]);
 }
 const selectStyle = {
   root: rootStyle,
@@ -6752,10 +5416,9 @@ function switchRepresentationStyles(props) {
   const {
     focusRing
   } = input.switch;
-  const color = theme.sanity.color.input;
-  return css(_c$6 || (_c$6 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: var(--card-focus-ring-color);\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: var(--card-focus-ring-color);\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.border, color.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_c$6 || (_c$6 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), cssVars.default["border-base"], cssVars.default["bg-base"], rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
-  }), color.default.enabled.bg, color.default.hovered.border, color.default.hovered.bg, color.default.enabled.bg, color.default.disabled.border, color.default.disabled.bg, color.default.readOnly.border, color.default.readOnly.bg);
+  }), cssVars.positive["border-accent"], cssVars.positive["bg-base"], cssVars.default["border-base"], cssVars.default["bg-base"], cssVars.positive["border-accent"], cssVars.positive["bg-base"], cssVars.default["border-base"], cssVars.default["bg-tint"], cssVars.default["border-base"], cssVars.default["bg-tint"]);
 }
 function switchTrackStyles(props) {
   const {
@@ -6844,34 +5507,30 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
     padding = 3,
     radius = 2,
     weight,
+    tone = "default",
     ...restProps
   } = props;
   const ref = useForwardedRef(forwardedRef);
-  const rootTheme = useRootTheme();
   useCustomValidity(ref, customValidity);
   return /* @__PURE__ */jsx(Root$d, {
     "data-ui": "TextArea",
     children: /* @__PURE__ */jsxs(InputRoot$1, {
       children: [/* @__PURE__ */jsx(Input$1, {
         "data-as": "textarea",
-        "data-scheme": rootTheme.scheme,
-        "data-tone": rootTheme.tone,
+        "data-tone": tone,
         ...restProps,
         $fontSize: useArrayProp(fontSize),
         $padding: useArrayProp(padding),
-        $scheme: rootTheme.scheme,
         $space: useArrayProp(0),
-        $tone: rootTheme.tone,
+        $tone: tone,
         $weight: weight,
         disabled,
         ref
       }), /* @__PURE__ */jsx(Presentation$1, {
         $radius: useArrayProp(radius),
-        $scheme: rootTheme.scheme,
-        $tone: rootTheme.tone,
+        $tone: tone,
         "data-border": border ? "" : void 0,
-        "data-scheme": rootTheme.scheme,
-        "data-tone": rootTheme.tone
+        "data-tone": tone
       })]
     })
   });
@@ -6923,10 +5582,12 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     customValidity,
     type = "text",
     weight,
+    tone: toneProp = "default",
     ...restProps
   } = props;
   const ref = useForwardedRef(forwardedRef);
-  const rootTheme = useRootTheme();
+  const toneContext = useToneContext();
+  const tone = toneProp === "default" ? toneContext.tone : toneProp;
   const fontSize = useArrayProp(fontSizeProp);
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
@@ -6963,11 +5624,9 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     $hasPrefix,
     $hasSuffix,
     $radius: radius,
-    $scheme: rootTheme.scheme,
-    $tone: rootTheme.tone,
+    $tone: tone,
     "data-border": border ? "" : void 0,
-    "data-scheme": rootTheme.scheme,
-    "data-tone": rootTheme.tone,
+    "data-tone": tone,
     children: [icon && /* @__PURE__ */jsx(LeftBox, {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
@@ -6981,7 +5640,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
         children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
       })
     })]
-  }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
+  }), [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix, tone]);
   const clearButtonBoxPadding = useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
@@ -7026,20 +5685,18 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   }), [radius, suffix]);
   return /* @__PURE__ */jsxs(Root$c, {
     "data-ui": "TextInput",
-    tone: rootTheme.tone,
+    tone,
     children: [prefixNode, /* @__PURE__ */jsxs(InputRoot, {
       children: [/* @__PURE__ */jsx(Input, {
         "data-as": "input",
-        "data-scheme": rootTheme.scheme,
-        "data-tone": rootTheme.tone,
+        "data-tone": tone,
         ...restProps,
         $fontSize: fontSize,
         $iconLeft: $hasIcon,
         $iconRight: $hasIconRight || $hasClearButton,
         $padding: padding,
-        $scheme: rootTheme.scheme,
         $space: space,
-        $tone: rootTheme.tone,
+        $tone: tone,
         $weight: weight,
         disabled,
         readOnly,
@@ -7086,8 +5743,8 @@ var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
 }));
 var _a$f, _b$9, _c$4;
 const Root$b = styled.div(_a$f || (_a$f = __template$f(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled.path(_b$9 || (_b$9 = __template$f(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled.path(_c$4 || (_c$4 = __template$f(["\n  fill: var(--card-bg-color);\n"])));
+const Border = styled.path(_b$9 || (_b$9 = __template$f(["\n  fill: ", ";\n"])), cssVars.default["base-shadow-outline-color"]);
+const Shape = styled.path(_c$4 || (_c$4 = __template$f(["\n  fill: ", ";\n"])), cssVars.mutable["bg-color"]);
 const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
   const {
     ...restProps
@@ -7186,12 +5843,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       mainAxis: 3
     }));
     ret.push(size$2({
-      apply(_ref22) {
+      apply(_ref7) {
         let {
           availableWidth,
           availableHeight,
           elements
-        } = _ref22;
+        } = _ref7;
         Object.assign(elements.floating.style, {
           maxWidth: "".concat(availableWidth - 4 * 2, "px"),
           // the padding is `4px`
@@ -7497,10 +6154,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref8 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref8;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7954,11 +6611,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   });
 });
 const BORDER_OFFSET_X = 12;
-function dialogStyle(_ref24) {
-  let {
-    theme
-  } = _ref24;
-  const color = theme.sanity.color.base;
+function dialogStyle() {
   return {
     "&:not([hidden])": {
       display: "flex"
@@ -7970,7 +6623,7 @@ function dialogStyle(_ref24) {
     alignItems: "center",
     justifyContent: "center",
     outline: "none",
-    background: color.shadow.umbra
+    background: cssVars.default["base-shadow-umbra-color"]
   };
 }
 function responsiveDialogPositionStyle(props) {
@@ -8008,9 +6661,9 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
 const DialogContainer = styled(Container)(_a$b || (_a$b = __template$b(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 const DialogCardRoot = styled(Card)(_b$6 || (_b$6 = __template$b(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const DialogLayout = styled(Flex)(_c$2 || (_c$2 = __template$b(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0);
+const DialogHeader = styled(Card)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    bottom: -1px;\n    border-bottom: 1px solid ", ";\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, cssVars.default["border-base"], props => props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0);
 const DialogContent = styled(Box)(_e || (_e = __template$b(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    top: -1px;\n    border-top: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0);
+const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    top: -1px;\n    border-top: 1px solid ", ";\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, cssVars.default["border-base"], props => props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0);
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   var _a2;
   const {
@@ -8752,7 +7405,7 @@ var __template$8 = (cooked, raw) => __freeze$8(__defProp$8(cooked, "raw", {
   value: __freeze$8(raw || cooked.slice())
 }));
 var _a$8;
-const MenuDivider = styled.hr(_a$8 || (_a$8 = __template$8(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled.hr(_a$8 || (_a$8 = __template$8(["\n  height: 1px;\n  border: 0;\n  background: ", ";\n  margin: 0;\n"])), cssVars.default["border-base"]);
 var __freeze$7 = Object.freeze;
 var __defProp$7 = Object.defineProperty;
 var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
@@ -8765,16 +7418,11 @@ function selectableBaseStyle() {
 function selectableColorStyle(props) {
   var _a2, _b2;
   const {
+    theme,
     $tone,
-    theme
+    $scheme
   } = props;
-  const {
-    base,
-    muted,
-    selectable
-  } = theme.sanity.color;
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_b$4 || (_b$4 = __template$7(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
+  return css(_b$4 || (_b$4 = __template$7(["\n    ", "\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n\n    /* &:is(button) - Looks like a button in default mode */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), $tone !== "default" && createCssVars($scheme, theme.sanity.color.tones, $tone), _selectableVarStyle(), cssVars.mutable["bg-color"], cssVars[$tone]["text-secondary"], _selectableVarStyleDisabled(), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), _selectableVarStyleDisabled(), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8802,6 +7450,9 @@ function MenuGroup(props) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useToneContext();
   const menu = useMenu();
   const {
     activeElement,
@@ -8891,6 +7542,7 @@ function MenuGroup(props) {
       "data-selected": !withinMenu && active ? "" : void 0,
       $radius: useArrayProp(radius),
       $tone: tone,
+      $scheme: scheme,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onMouseEnter: handleMouseEnter,
@@ -8948,6 +7600,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useToneContext();
   const menu = useMenu();
   const {
     activeElement,
@@ -8989,6 +7644,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     $radius: useArrayProp(radius),
     $padding: useArrayProp(0),
     $tone: tone,
+    $scheme: scheme,
     disabled,
     onClick: handleClick,
     onMouseEnter: onItemMouseEnter,
@@ -9043,18 +7699,18 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 }));
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    ", ",\n    ", ",\n    ", ",\n    ", ",\n    ", "\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), cssVars.default["skeleton-from"], cssVars.default["skeleton-to"], cssVars.default["skeleton-from"], cssVars.default["skeleton-from"], cssVars.default["skeleton-from"], keyframe);
+const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: ", ";\n  }\n"])), _ref9 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref9;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref10 => {
   let {
     $animated
-  } = _ref26;
-  return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
-});
+  } = _ref10;
+  return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: ", ";\n          "])), cssVars.default["skeleton-from"]);
+}, cssVars.default["skeleton-from"]);
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = forwardRef(function Skeleton2(props, ref) {
   const {
@@ -9083,12 +7739,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref11 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref11;
   const {
     media
   } = theme.sanity;
@@ -9436,12 +8092,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref12 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref12;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9734,18 +8390,8 @@ var _a$1, _b, _c;
 function treeItemRootStyle() {
   return css(_a$1 || (_a$1 = __template$1(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
-function treeItemRootColorStyle(props) {
-  const {
-    theme
-  } = props;
-  const $tone = "default";
-  const {
-    base,
-    muted,
-    selectable
-  } = theme.sanity.color;
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_b || (_b = __template$1(['\n    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */\n    &[role=\'none\'] {\n      & > [role=\'treeitem\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", '\n        }\n      }\n    }\n\n    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */\n    &[role=\'treeitem\'] {\n      & > [data-ui=\'TreeItem__box\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+function treeItemRootColorStyle() {
+  return css(_b || (_b = __template$1(['\n    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */\n    &[role=\'none\'] {\n      & > [role=\'treeitem\'] {\n        ', "\n\n        background-color:", ";\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", '\n        }\n      }\n    }\n\n    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */\n    &[role=\'treeitem\'] {\n      & > [data-ui=\'TreeItem__box\'] {\n        ', "\n        background-color: ", ";\n        color: ", ";\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), cardVariables, cssVars.mutable["bg-color"], _colorVarStyleActive(), _colorVarStyleHover(), _colorVarStyleSelected(), cardVariables, cssVars.mutable["bg-color"], cssVars.mutable["fg-color"], _colorVarStyleActive(), _colorVarStyleHover(), _colorVarStyleSelected());
 }
 function treeItemBoxStyle(props) {
   const {
@@ -9941,5 +8587,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createCssVars, cssVars, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map