@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

package/dist/css.js

@@ -1,28 +1,26 @@
-import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
-import { SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, THEME_COLOR_CARD_TONES, AVATAR_SIZE, THEME_COLOR_STATE_TONES, HUES, TINTS, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
-const BREAKPOINTS = {
-  0: 0,
-  1: 360,
-  2: 600,
-  3: 900,
-  4: 1200,
-  5: 1800,
-  6: 2400
-}, PREFIX = "s-";
+import { HUES, TINTS, SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, CONTAINER_SCALE, COLOR_VARIANTS, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, AVATAR_COLORS, AVATAR_SIZE, _parseColorToken, buildTheme_v3, THEME_COLOR_SCHEMES } from "@sanity/ui/theme";
+var version = "3.0.0-static.19";
+function _hash(value) {
+  let h = 5381;
+  for (let index = 0, len = value.length; index < len; index++)
+    h = (h << 5) + h + value.charCodeAt(index) >>> 0;
+  return h.toString(36);
+}
+const PREFIX = `s${_hash(version).slice(0, 5)}-`;
 function isRecord(value) {
   return value !== null && typeof value == "object" && !Array.isArray(value);
 }
 function isArray(value) {
   return Array.isArray(value);
 }
-function rem(value) {
+function rem$1(value) {
   return value === 0 ? "0" : `${value / 16}rem`;
 }
-function px(value) {
+function px$1(value) {
   return value === 0 ? "0" : `${value}px`;
 }
-function toBoxShadow(value) {
-  return value ? value.map((n) => px(n)).join(" ") : "none";
+function toBoxShadow$1(value) {
+  return value ? value.map((n) => px$1(n)).join(" ") : "none";
 }
 function _compileStyle(style) {
   let css = "";
@@ -41,7 +39,7 @@ function _compileStyle(style) {
     }
   if (style.layers && Object.keys(style.layers).length > 0)
     for (const [layerName, layerRules] of Object.entries(style.layers))
-      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
+      Object.keys(layerRules).length > 0 && (css += `@layer ${layerName} {
 `, css += compileStyleRules(layerRules), css += `}
 
 `);
@@ -50,17 +48,17 @@ function _compileStyle(style) {
 function compileStyleRules(rules2) {
   let css = "";
   const mediaMap = /* @__PURE__ */ new Map();
-  for (const [selector, properties] of Object.entries(rules2))
-    if (properties) {
-      if (properties["@media"])
-        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
+  for (const [selector, properties2] of Object.entries(rules2))
+    if (properties2) {
+      if (properties2["@media"])
+        for (const [mediaQuery, mediaProps] of Object.entries(properties2["@media"])) {
           const arr = mediaMap.get(mediaQuery) ?? [];
           arr.push({
             selector,
             props: mediaProps
           }), mediaMap.set(mediaQuery, arr);
         }
-      css += compileStyleRule(selector, properties);
+      css += compileStyleRule(selector, properties2);
     }
   for (const [mediaQuery, mediaRules] of mediaMap) {
     css += `@media ${mediaQuery} {
@@ -73,15 +71,15 @@ function compileStyleRules(rules2) {
   }
   return css;
 }
-function compileStyleRule(_selector, properties) {
+function compileStyleRule(_selector, properties2) {
   let css = "";
   const {
     _prefix = !0,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     "@media": _mediaProps,
-    "@nest": nestedProps,
+    nest: nestedProps,
     ...restProperties
-  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
+  } = properties2, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
   if (Object.entries(restProperties).length && (css += `${selector} {
 `, css += compileProperties(restProperties), css += `}
 
@@ -98,7 +96,13 @@ function compileStyleRule(_selector, properties) {
 function compileProperties(props) {
   let css = "";
   const propEntries = Object.entries(props);
-  for (const [key, value] of propEntries)
+  for (const [key, value] of propEntries) {
+    if (key === "vars") {
+      for (const [k, v] of Object.entries(value))
+        css += `  ${k}: ${v};
+`;
+      continue;
+    }
     if (!key.startsWith("@"))
       if (isArray(value))
         for (const item of value)
@@ -107,526 +111,12 @@ function compileProperties(props) {
       else
         css += `  ${toSnakeCase(key)}: ${value};
 `;
+  }
   return css;
 }
 function toSnakeCase(str) {
   return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
-const varNames = {
-  avatar: {
-    distance: "--avatar-distance",
-    focusRing: {
-      offset: "--avatar-focus-ring-offset",
-      width: "--avatar-focus-ring-width"
-    },
-    size: "--avatar-size",
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
-      ...acc,
-      [size]: {
-        distance: `--avatar-${size}-distance`,
-        size: `--avatar-${size}-size`
-      }
-    }), {})
-  },
-  button: {
-    border: {
-      width: "--button-border-width"
-    },
-    focusRing: {
-      offset: "--button-focus-ring-offset",
-      width: "--button-focus-ring-width"
-    }
-  },
-  card: {
-    shadow: {
-      outline: "--card-shadow-outline"
-    }
-  },
-  color: {
-    // card scope
-    avatar: {
-      bg: "--color-avatar-bg",
-      fg: "--color-avatar-fg",
-      gray: {
-        bg: "--color-avatar-gray-bg",
-        fg: "--color-avatar-gray-fg"
-      },
-      blue: {
-        bg: "--color-avatar-blue-bg",
-        fg: "--color-avatar-blue-fg"
-      },
-      purple: {
-        bg: "--color-avatar-purple-bg",
-        fg: "--color-avatar-purple-fg"
-      },
-      magenta: {
-        bg: "--color-avatar-magenta-bg",
-        fg: "--color-avatar-magenta-fg"
-      },
-      red: {
-        bg: "--color-avatar-red-bg",
-        fg: "--color-avatar-red-fg"
-      },
-      orange: {
-        bg: "--color-avatar-orange-bg",
-        fg: "--color-avatar-gray-fg"
-      },
-      yellow: {
-        bg: "--color-avatar-yellow-bg",
-        fg: "--color-avatar-yellow-fg"
-      },
-      green: {
-        bg: "--color-avatar-green-bg",
-        fg: "--color-avatar-green-fg"
-      },
-      cyan: {
-        bg: "--color-avatar-cyan-bg",
-        fg: "--color-avatar-yellow-fg"
-      }
-    },
-    backdrop: "--color-backdrop",
-    bg: "--color-bg",
-    border: "--color-border",
-    code: {
-      bg: "--color-code-bg",
-      fg: "--color-code-fg",
-      token: {
-        atrule: "--color-code-token-atrule",
-        attrName: "--color-code-token-attr-name",
-        attrValue: "--color-code-token-attr-value",
-        attribute: "--color-code-token-attribute",
-        boolean: "--color-code-token-boolean",
-        builtin: "--color-code-token-builtin",
-        cdata: "--color-code-token-cdata",
-        char: "--color-code-token-char",
-        class: "--color-code-token-class",
-        className: "--color-code-token-class-name",
-        comment: "--color-code-token-comment",
-        constant: "--color-code-token-constant",
-        deleted: "--color-code-token-deleted",
-        doctype: "--color-code-token-doctype",
-        entity: "--color-code-token-entity",
-        function: "--color-code-token-function",
-        hexcode: "--color-code-token-hexcode",
-        id: "--color-code-token-id",
-        important: "--color-code-token-important",
-        inserted: "--color-code-token-inserted",
-        keyword: "--color-code-token-keyword",
-        number: "--color-code-token-number",
-        operator: "--color-code-token-operator",
-        prolog: "--color-code-token-prolog",
-        property: "--color-code-token-property",
-        pseudoClass: "--color-code-token-pseudo-class",
-        pseudoElement: "--color-code-token-pseudo-element",
-        punctuation: "--color-code-token-punctuation",
-        regex: "--color-code-token-regex",
-        selector: "--color-code-token-selector",
-        string: "--color-code-token-string",
-        symbol: "--color-code-token-symbol",
-        tag: "--color-code-token-tag",
-        unit: "--color-code-token-unit",
-        url: "--color-code-token-url",
-        variable: "--color-code-token-variable"
-      }
-    },
-    fg: "--color-fg",
-    focusRing: "--color-focus-ring",
-    input: {
-      bg: "--color-input-bg",
-      border: "--color-input-border",
-      fg: "--color-input-fg",
-      placeholder: "--color-input-placeholder"
-    },
-    link: {
-      fg: "--color-link-fg"
-    },
-    muted: {
-      bg: "--color-muted-bg",
-      fg: "--color-muted-fg"
-    },
-    shadow: {
-      outline: "--color-shadow-outline",
-      umbra: "--color-shadow-umbra",
-      penumbra: "--color-shadow-penumbra",
-      ambient: "--color-shadow-ambient"
-    },
-    skeleton: {
-      from: "--color-skeleton-from",
-      to: "--color-skeleton-to"
-    },
-    solid: buildColorVariantVarNames({
-      variant: "solid"
-    }),
-    tinted: buildColorVariantVarNames({
-      variant: "tinted"
-    }),
-    // tone scopes
-    ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
-      tone
-    }), acc), {}),
-    // scheme scopes
-    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
-      scheme: "dark",
-      tone
-    }), acc), {}),
-    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
-      scheme: "light",
-      tone
-    }), acc), {})
-  },
-  container: {
-    0: "--container-0",
-    1: "--container-1",
-    2: "--container-2",
-    3: "--container-3",
-    4: "--container-4",
-    5: "--container-5"
-  },
-  font: {
-    code: {
-      family: "--font-code-family",
-      featureSettings: "--font-code-feature-settings",
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-code-${size}-size`,
-          ascenderHeight: `--font-code-${size}-ascender-height`,
-          descenderHeight: `--font-code-${size}-descender-height`,
-          lineHeight: `--font-code-${size}-line-height`,
-          letterSpacing: `--font-code-${size}-letter-spacing`,
-          iconSize: `--font-code-${size}-icon-size`
-        }
-      }), {}),
-      weights: {
-        regular: "--font-code-weight-regular",
-        medium: "--font-code-weight-medium",
-        semibold: "--font-code-weight-semibold",
-        bold: "--font-code-weight-bold"
-      }
-    },
-    heading: {
-      family: "--font-heading-family",
-      featureSettings: "--font-heading-feature-settings",
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-heading-${size}-size`,
-          ascenderHeight: `--font-heading-${size}-ascender-height`,
-          descenderHeight: `--font-heading-${size}-descender-height`,
-          lineHeight: `--font-heading-${size}-line-height`,
-          letterSpacing: `--font-heading-${size}-letter-spacing`,
-          iconSize: `--font-heading-${size}-icon-size`
-        }
-      }), {}),
-      weights: {
-        regular: "--font-heading-weight-regular",
-        medium: "--font-heading-weight-medium",
-        semibold: "--font-heading-weight-semibold",
-        bold: "--font-heading-weight-bold"
-      }
-    },
-    label: {
-      family: "--font-label-family",
-      featureSettings: "--font-label-feature-settings",
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-label-${size}-size`,
-          ascenderHeight: `--font-label-${size}-ascender-height`,
-          descenderHeight: `--font-label-${size}-descender-height`,
-          lineHeight: `--font-label-${size}-line-height`,
-          letterSpacing: `--font-label-${size}-letter-spacing`,
-          iconSize: `--font-label-${size}-icon-size`
-        }
-      }), {}),
-      weights: {
-        regular: "--font-label-weight-regular",
-        medium: "--font-label-weight-medium",
-        semibold: "--font-label-weight-semibold",
-        bold: "--font-label-weight-bold"
-      }
-    },
-    text: {
-      family: "--font-text-family",
-      featureSettings: "--font-text-feature-settings",
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-text-${size}-size`,
-          ascenderHeight: `--font-text-${size}-ascender-height`,
-          descenderHeight: `--font-text-${size}-descender-height`,
-          lineHeight: `--font-text-${size}-line-height`,
-          letterSpacing: `--font-text-${size}-letter-spacing`,
-          iconSize: `--font-text-${size}-icon-size`
-        }
-      }), {}),
-      weights: {
-        regular: "--font-text-weight-regular",
-        medium: "--font-text-weight-medium",
-        semibold: "--font-text-weight-semibold",
-        bold: "--font-text-weight-bold"
-      }
-    }
-  },
-  input: {
-    border: {
-      width: "--input-border-width"
-    },
-    checkbox: {
-      focusRing: {
-        offset: "--input-checkbox-focus-ring-offset",
-        width: "--input-checkbox-focus-ring-width"
-      },
-      size: "--input-checkbox-size"
-    },
-    radio: {
-      focusRing: {
-        offset: "--input-radio-focus-ring-offset",
-        width: "--input-radio-focus-ring-width"
-      },
-      markSize: "--input-radio-mark-size",
-      size: "--input-radio-size"
-    },
-    select: {
-      focusRing: {
-        offset: "--input-select-focus-ring-offset",
-        width: "--input-select-focus-ring-width"
-      }
-    },
-    switch: {
-      focusRing: {
-        offset: "--input-switch-focus-ring-offset",
-        width: "--input-switch-focus-ring-width"
-      },
-      height: "--input-switch-height",
-      padding: "--input-switch-padding",
-      transitionDurationMs: "--input-switch-transition-duration-ms",
-      transitionTimingFunction: "--input-switch-transition-timing-function",
-      width: "--input-switch-width"
-    },
-    text: {
-      focusRing: {
-        offset: "--input-text-focus-ring-offset",
-        width: "--input-text-focus-ring-width"
-      }
-    },
-    fontSize: "--input-font-size",
-    lineHeight: "--input-line-height",
-    letterSpacing: "--input-letter-spacing",
-    ascenderHeight: "--input-ascender-height",
-    descenderHeight: "--input-descender-height",
-    gap: "--input-gap",
-    padding: "--input-padding"
-  },
-  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
-    umbra: `--shadow-${shadow2}-umbra`,
-    penumbra: `--shadow-${shadow2}-penumbra`,
-    ambient: `--shadow-${shadow2}-ambient`
-  }])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
-  // color
-  black: "--black",
-  white: "--white",
-  ...COLOR_HUES.reduce((acc, hue) => {
-    const tints = {};
-    for (const tint of COLOR_TINTS)
-      tints[tint] = `--${hue}-${tint}`;
-    return acc[hue] = tints, acc;
-  }, {})
-};
-function buildColorCardVarNames(props) {
-  const {
-    scheme,
-    tone
-  } = props, prefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
-  return {
-    avatar: {
-      gray: {
-        bg: `${prefix}-avatar-gray-bg`,
-        fg: `${prefix}-avatar-gray-fg`
-      },
-      blue: {
-        bg: `${prefix}-avatar-blue-bg`,
-        fg: `${prefix}-avatar-blue-fg`
-      },
-      purple: {
-        bg: `${prefix}-avatar-purple-bg`,
-        fg: `${prefix}-avatar-purple-fg`
-      },
-      magenta: {
-        bg: `${prefix}-avatar-magenta-bg`,
-        fg: `${prefix}-avatar-magenta-fg`
-      },
-      red: {
-        bg: `${prefix}-avatar-red-bg`,
-        fg: `${prefix}-avatar-red-fg`
-      },
-      orange: {
-        bg: `${prefix}-avatar-orange-bg`,
-        fg: `${prefix}-avatar-gray-fg`
-      },
-      yellow: {
-        bg: `${prefix}-avatar-yellow-bg`,
-        fg: `${prefix}-avatar-yellow-fg`
-      },
-      green: {
-        bg: `${prefix}-avatar-green-bg`,
-        fg: `${prefix}-avatar-green-fg`
-      },
-      cyan: {
-        bg: `${prefix}-avatar-cyan-bg`,
-        fg: `${prefix}-avatar-yellow-fg`
-      }
-    },
-    backdrop: `${prefix}-backdrop`,
-    code: {
-      bg: `${prefix}-code-bg`,
-      fg: `${prefix}-code-fg`,
-      token: {
-        atrule: `${prefix}-code-token-atrule`,
-        attrName: `${prefix}-code-token-attr-name`,
-        attrValue: `${prefix}-code-token-attr-value`,
-        attribute: `${prefix}-code-token-attribute`,
-        boolean: `${prefix}-code-token-boolean`,
-        builtin: `${prefix}-code-token-builtin`,
-        cdata: `${prefix}-code-token-cdata`,
-        char: `${prefix}-code-token-char`,
-        class: `${prefix}-code-token-class`,
-        className: `${prefix}-code-token-class-name`,
-        comment: `${prefix}-code-token-comment`,
-        constant: `${prefix}-code-token-constant`,
-        deleted: `${prefix}-code-token-deleted`,
-        doctype: `${prefix}-code-token-doctype`,
-        entity: `${prefix}-code-token-entity`,
-        function: `${prefix}-code-token-function`,
-        hexcode: `${prefix}-code-token-hexcode`,
-        id: `${prefix}-code-token-id`,
-        important: `${prefix}-code-token-important`,
-        inserted: `${prefix}-code-token-inserted`,
-        keyword: `${prefix}-code-token-keyword`,
-        number: `${prefix}-code-token-number`,
-        operator: `${prefix}-code-token-operator`,
-        prolog: `${prefix}-code-token-prolog`,
-        property: `${prefix}-code-token-property`,
-        pseudoClass: `${prefix}-code-token-pseudo-class`,
-        pseudoElement: `${prefix}-code-token-pseudo-element`,
-        punctuation: `${prefix}-code-token-punctuation`,
-        regex: `${prefix}-code-token-regex`,
-        selector: `${prefix}-code-token-selector`,
-        string: `${prefix}-code-token-string`,
-        symbol: `${prefix}-code-token-symbol`,
-        tag: `${prefix}-code-token-tag`,
-        unit: `${prefix}-code-token-unit`,
-        url: `${prefix}-code-token-url`,
-        variable: `${prefix}-code-token-variable`
-      }
-    },
-    focusRing: `${prefix}-focus-ring`,
-    link: {
-      fg: `${prefix}-link-fg`
-    },
-    muted: {
-      bg: `${prefix}-muted-bg`,
-      fg: `${prefix}-muted-fg`
-    },
-    shadow: {
-      outline: `${prefix}-shadow-outline`,
-      umbra: `${prefix}-shadow-umbra`,
-      penumbra: `${prefix}-shadow-penumbra`,
-      ambient: `${prefix}-shadow-ambient`
-    },
-    skeleton: {
-      from: `${prefix}-skeleton-from`,
-      to: `${prefix}-skeleton-to`
-    },
-    solid: buildColorVariantVarNames({
-      scheme,
-      tone,
-      variant: "solid"
-    }),
-    tinted: buildColorVariantVarNames({
-      scheme,
-      tone,
-      variant: "tinted"
-    })
-  };
-}
-function buildColorVariantVarNames(options) {
-  const {
-    scheme,
-    tone,
-    variant
-  } = options, prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
-    bg: {
-      0: `${prefix}-bg-0`,
-      1: `${prefix}-bg-1`,
-      2: `${prefix}-bg-2`,
-      3: `${prefix}-bg-3`,
-      4: `${prefix}-bg-4`
-    },
-    border: {
-      0: `${prefix}-border-0`,
-      1: `${prefix}-border-1`,
-      2: `${prefix}-border-2`,
-      3: `${prefix}-border-3`,
-      4: `${prefix}-border-4`
-    },
-    fg: {
-      0: `${prefix}-fg-0`,
-      1: `${prefix}-fg-1`,
-      2: `${prefix}-fg-2`,
-      3: `${prefix}-fg-3`,
-      4: `${prefix}-fg-4`
-    }
-  };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
-    vars2[elementTone] = {
-      bg: {
-        0: `${_prefix}-bg-0`,
-        1: `${_prefix}-bg-1`,
-        2: `${_prefix}-bg-2`,
-        3: `${_prefix}-bg-3`,
-        4: `${_prefix}-bg-4`
-      },
-      border: {
-        0: `${_prefix}-border-0`,
-        1: `${_prefix}-border-1`,
-        2: `${_prefix}-border-2`,
-        3: `${_prefix}-border-3`,
-        4: `${_prefix}-border-4`
-      },
-      fg: {
-        0: `${_prefix}-fg-0`,
-        1: `${_prefix}-fg-1`,
-        2: `${_prefix}-fg-2`,
-        3: `${_prefix}-fg-3`,
-        4: `${_prefix}-fg-4`
-      }
-    };
-  }
-  return vars2;
-}
-function _compilePalette() {
-  return _compileStyle({
-    layers: {
-      palette: {
-        ":root": compilePaletteProperties()
-      }
-    }
-  });
-}
-function compilePaletteProperties() {
-  const rules2 = {
-    [varNames.black]: color.black.hex,
-    [varNames.white]: color.white.hex
-  };
-  for (const hue of HUES)
-    for (const tint of TINTS)
-      rules2[varNames[hue][tint]] = color[hue][tint].hex;
-  return rules2;
-}
 function _mergeStyles(styles) {
   const keyframes2 = {}, layers = {}, rules2 = {};
   for (const s of styles) {
@@ -641,521 +131,781 @@ function _mergeStyles(styles) {
     rules: rules2
   };
 }
-function _responsiveRule(rules2, _name, properties) {
+function _responsiveRule(rules2, _name, properties2) {
   const name = _name.replace(/\./g, "_");
-  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
+  rules2[`.${name}`] = properties2, rules2[`.1\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 360px)": properties
+      "screen and (min-width: 360px)": properties2
     }
   }, rules2[`.2\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 600px)": properties
+      "screen and (min-width: 600px)": properties2
     }
   }, rules2[`.3\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 900px)": properties
+      "screen and (min-width: 900px)": properties2
     }
   }, rules2[`.4\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 1200px)": properties
+      "screen and (min-width: 1200px)": properties2
     }
   }, rules2[`.5\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 1800px)": properties
+      "screen and (min-width: 1800px)": properties2
     }
   }, rules2[`.6\\:${name}`] = {
     "@media": {
-      "screen and (min-width: 2400px)": properties
+      "screen and (min-width: 2400px)": properties2
     }
   };
 }
-const darkColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
-  darkColorVars[tone] = buildColorCardVars({
-    scheme: "dark",
-    tone
-  });
-const lightColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
-  lightColorVars[tone] = buildColorCardVars({
-    scheme: "light",
-    tone
-  });
-const colorVars = {
-  avatar: {
-    bg: `var(${varNames.color.avatar.bg})`,
-    fg: `var(${varNames.color.avatar.fg})`,
-    gray: {
-      bg: `var(${varNames.color.avatar.gray.bg})`,
-      fg: `var(${varNames.color.avatar.gray.fg})`
-    },
-    blue: {
-      bg: `var(${varNames.color.avatar.blue.bg})`,
-      fg: `var(${varNames.color.avatar.blue.fg})`
-    },
-    purple: {
-      bg: `var(${varNames.color.avatar.purple.bg})`,
-      fg: `var(${varNames.color.avatar.purple.fg})`
-    },
-    magenta: {
-      bg: `var(${varNames.color.avatar.magenta.bg})`,
-      fg: `var(${varNames.color.avatar.magenta.fg})`
-    },
-    red: {
-      bg: `var(${varNames.color.avatar.red.bg})`,
-      fg: `var(${varNames.color.avatar.red.fg})`
-    },
-    orange: {
-      bg: `var(${varNames.color.avatar.orange.bg})`,
-      fg: `var(${varNames.color.avatar.orange.fg})`
-    },
-    yellow: {
-      bg: `var(${varNames.color.avatar.yellow.bg})`,
-      fg: `var(${varNames.color.avatar.yellow.fg})`
+function _fromEntries(entries) {
+  return Object.fromEntries(entries);
+}
+function buildVarContract(contract, options) {
+  return {
+    vars: buildVars(contract, options),
+    varNames: buildVarNames(contract, options),
+    properties: buildProperties(contract, options)
+  };
+}
+function buildProperties(contract, options) {
+  const _properties = {};
+  function walk(c) {
+    for (const key in c)
+      typeof c[key] == "string" ? _properties[`--${options.prefix}${_hash(`${options.layer}.${c[key]}`)}`] = c[key] : c[key] === null || walk(c[key]);
+  }
+  return walk(contract), Object.freeze(_properties);
+}
+function buildVars(contract, options, path = "") {
+  const _vars = {};
+  for (const key in contract)
+    typeof contract[key] == "string" ? _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)})` : contract[key] === null ? _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)})` : _vars[key] = buildVars(contract[key], options, [path, key].join("."));
+  return Object.freeze(_vars);
+}
+function buildVarNames(contract, options, path = "") {
+  const _varNames = {};
+  for (const key in contract)
+    typeof contract[key] == "string" ? _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)}` : contract[key] === null ? _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)}` : _varNames[key] = buildVarNames(contract[key], options, [path, key].join("."));
+  return Object.freeze(_varNames);
+}
+function resolveTheme(options) {
+  const {
+    theme
+  } = options, paletteResult = buildVarContract({
+    palette: {
+      black: theme.palette.black.hex,
+      white: theme.palette.white.hex,
+      ..._fromEntries(HUES.map((hue) => [hue, _fromEntries(TINTS.map((tint) => [tint, theme.palette.hues[hue][tint].hex]))]))
+    }
+  }, {
+    layer: "palette",
+    prefix: "s"
+  }), themeResult = buildVarContract({
+    arrow: {
+      size: null
     },
-    green: {
-      bg: `var(${varNames.color.avatar.green.bg})`,
-      fg: `var(${varNames.color.avatar.green.fg})`
+    avatar: {
+      distance: null,
+      size: null,
+      focusRing: {
+        offset: px(theme.avatar.focusRing.offset),
+        width: px(theme.avatar.focusRing.width)
+      },
+      sizes: _fromEntries(AVATAR_SIZE.map((s) => [s, {
+        distance: rem(theme.avatar.sizes[s].distance),
+        size: rem(theme.avatar.sizes[s].size)
+      }]))
     },
-    cyan: {
-      bg: `var(${varNames.color.avatar.cyan.bg})`,
-      fg: `var(${varNames.color.avatar.cyan.fg})`
-    }
-  },
-  backdrop: `var(${varNames.color.backdrop})`,
-  bg: `var(${varNames.color.bg})`,
-  border: `var(${varNames.color.border})`,
-  code: {
-    bg: `var(${varNames.color.code.bg})`,
-    fg: `var(${varNames.color.code.fg})`,
-    token: {
-      atrule: `var(${varNames.color.code.token.atrule})`,
-      attrName: `var(${varNames.color.code.token.attrName})`,
-      attrValue: `var(${varNames.color.code.token.attrValue})`,
-      attribute: `var(${varNames.color.code.token.attribute})`,
-      boolean: `var(${varNames.color.code.token.boolean})`,
-      builtin: `var(${varNames.color.code.token.builtin})`,
-      cdata: `var(${varNames.color.code.token.cdata})`,
-      char: `var(${varNames.color.code.token.char})`,
-      class: `var(${varNames.color.code.token.class})`,
-      className: `var(${varNames.color.code.token.className})`,
-      comment: `var(${varNames.color.code.token.comment})`,
-      constant: `var(${varNames.color.code.token.constant})`,
-      deleted: `var(${varNames.color.code.token.deleted})`,
-      doctype: `var(${varNames.color.code.token.doctype})`,
-      entity: `var(${varNames.color.code.token.entity})`,
-      function: `var(${varNames.color.code.token.function})`,
-      hexcode: `var(${varNames.color.code.token.hexcode})`,
-      id: `var(${varNames.color.code.token.id})`,
-      important: `var(${varNames.color.code.token.important})`,
-      inserted: `var(${varNames.color.code.token.inserted})`,
-      keyword: `var(${varNames.color.code.token.keyword})`,
-      number: `var(${varNames.color.code.token.number})`,
-      operator: `var(${varNames.color.code.token.operator})`,
-      prolog: `var(${varNames.color.code.token.prolog})`,
-      property: `var(${varNames.color.code.token.property})`,
-      pseudoClass: `var(${varNames.color.code.token.pseudoClass})`,
-      pseudoElement: `var(${varNames.color.code.token.pseudoElement})`,
-      punctuation: `var(${varNames.color.code.token.punctuation})`,
-      regex: `var(${varNames.color.code.token.regex})`,
-      selector: `var(${varNames.color.code.token.selector})`,
-      string: `var(${varNames.color.code.token.string})`,
-      symbol: `var(${varNames.color.code.token.symbol})`,
-      tag: `var(${varNames.color.code.token.tag})`,
-      unit: `var(${varNames.color.code.token.unit})`,
-      url: `var(${varNames.color.code.token.url})`,
-      variable: `var(${varNames.color.code.token.variable})`
-    }
-  },
-  fg: `var(${varNames.color.fg})`,
-  focusRing: `var(${varNames.color.focusRing})`,
-  input: {
-    bg: `var(${varNames.color.input.bg})`,
-    border: `var(${varNames.color.input.border})`,
-    fg: `var(${varNames.color.input.fg})`,
-    placeholder: `var(${varNames.color.input.placeholder})`
-  },
-  link: {
-    fg: `var(${varNames.color.link.fg})`
-  },
-  muted: {
-    bg: `var(${varNames.color.muted.bg})`,
-    fg: `var(${varNames.color.muted.fg})`
-  },
-  shadow: {
-    outline: `var(${varNames.color.shadow.outline})`,
-    umbra: `var(${varNames.color.shadow.umbra})`,
-    penumbra: `var(${varNames.color.shadow.penumbra})`,
-    ambient: `var(${varNames.color.shadow.ambient})`
-  },
-  skeleton: {
-    from: `var(${varNames.color.skeleton.from})`,
-    to: `var(${varNames.color.skeleton.to})`
-  },
-  solid: buildColorVariantVars({
-    variant: "solid"
-  }),
-  tinted: buildColorVariantVars({
-    variant: "tinted"
-  }),
-  ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
-    ...acc,
-    [tone]: buildColorCardVars({
-      tone
-    })
-  }), {}),
-  dark: darkColorVars,
-  light: lightColorVars
-}, vars = {
-  avatar: {
-    distance: `var(${varNames.avatar.distance})`,
-    size: `var(${varNames.avatar.size})`,
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
-      ...acc,
-      [size]: {
-        size: `var(${varNames.avatar.sizes[size].size})`,
-        distance: `var(${varNames.avatar.sizes[size].distance})`
-      }
-    }), {})
-  },
-  card: {
-    shadow: {
-      outline: `var(${varNames.card.shadow.outline})`
-    }
-  },
-  color: colorVars,
-  container: {
-    0: `var(${varNames.container[0]})`,
-    1: `var(${varNames.container[1]})`,
-    2: `var(${varNames.container[2]})`,
-    3: `var(${varNames.container[3]})`,
-    4: `var(${varNames.container[4]})`,
-    5: `var(${varNames.container[5]})`
-  },
-  font: {
-    code: {
-      family: `var(${varNames.font.code.family})`,
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.code.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.code.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.code.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.code.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.code.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.code.sizes[size].iconSize})`
-        }
-      }), {}),
-      weight: {
-        regular: `var(${varNames.font.code.weights.regular})`,
-        medium: `var(${varNames.font.code.weights.medium})`,
-        semibold: `var(${varNames.font.code.weights.semibold})`,
-        bold: `var(${varNames.font.code.weights.bold})`
+    button: {
+      boxShadow: null,
+      focusRing: {
+        offset: px(theme.button.focusRing.offset),
+        width: px(theme.button.focusRing.width)
+      },
+      border: {
+        width: px(theme.button.border.width)
       }
     },
-    heading: {
-      family: `var(${varNames.font.heading.family})`,
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.heading.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.heading.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.heading.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.heading.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.heading.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.heading.sizes[size].iconSize})`
-        }
-      }), {}),
-      weight: {
-        regular: `var(${varNames.font.heading.weights.regular})`,
-        medium: `var(${varNames.font.heading.weights.medium})`,
-        semibold: `var(${varNames.font.heading.weights.semibold})`,
-        bold: `var(${varNames.font.heading.weights.bold})`
+    card: {
+      shadow: {
+        outline: px(theme.card.shadow.outline)
       }
     },
-    label: {
-      family: `var(${varNames.font.label.family})`,
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.label.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.label.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.label.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.label.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.label.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.label.sizes[size].iconSize})`
+    color: {
+      backdrop: null,
+      bg: null,
+      border: null,
+      code: {
+        bg: null,
+        fg: null,
+        token: {
+          atrule: null,
+          attrName: null,
+          attrValue: null,
+          attribute: null,
+          boolean: null,
+          builtin: null,
+          cdata: null,
+          char: null,
+          class: null,
+          className: null,
+          comment: null,
+          constant: null,
+          deleted: null,
+          doctype: null,
+          entity: null,
+          function: null,
+          hexcode: null,
+          id: null,
+          important: null,
+          inserted: null,
+          keyword: null,
+          number: null,
+          operator: null,
+          prolog: null,
+          property: null,
+          pseudoClass: null,
+          pseudoElement: null,
+          punctuation: null,
+          regex: null,
+          selector: null,
+          string: null,
+          symbol: null,
+          tag: null,
+          unit: null,
+          url: null,
+          variable: null
         }
-      }), {}),
+      },
+      fg: null,
+      focusRing: null,
+      link: {
+        fg: null
+      },
+      avatar: {
+        bg: null,
+        fg: null,
+        ..._fromEntries(AVATAR_COLORS.map((c) => [c, {
+          bg: null,
+          fg: null
+        }]))
+      },
+      button: {},
+      input: {
+        checkbox: {
+          bg: null,
+          border: null,
+          fg: null
+        },
+        radio: {
+          bg: null,
+          border: null,
+          fg: null
+        },
+        text: {
+          bg: null,
+          fg: null,
+          border: null,
+          placeholder: null,
+          invalid: {
+            bg: null,
+            border: null,
+            fg: null
+          }
+        },
+        switch: {
+          bg: null,
+          fg: null
+        }
+      },
+      muted: {
+        bg: null,
+        fg: null
+      },
+      shadow: {
+        outline: null,
+        umbra: null,
+        penumbra: null,
+        ambient: null
+      },
+      skeleton: {
+        from: null,
+        to: null
+      },
+      light: _fromEntries(THEME_COLOR_CARD_TONES.map((t) => [t, buildCardContract({
+        theme,
+        scheme: "light",
+        tone: t
+      })])),
+      dark: _fromEntries(THEME_COLOR_CARD_TONES.map((t) => [t, buildCardContract({
+        theme,
+        scheme: "dark",
+        tone: t
+      })])),
+      // tones
+      ..._fromEntries(THEME_COLOR_CARD_TONES.map((t) => [t, {
+        avatar: {
+          ..._fromEntries(AVATAR_COLORS.map((c) => [c, {
+            bg: null,
+            fg: null
+          }]))
+        },
+        backdrop: null,
+        code: {
+          bg: null,
+          fg: null,
+          token: {
+            atrule: null,
+            attrName: null,
+            attrValue: null,
+            attribute: null,
+            boolean: null,
+            builtin: null,
+            cdata: null,
+            char: null,
+            class: null,
+            className: null,
+            comment: null,
+            constant: null,
+            deleted: null,
+            doctype: null,
+            entity: null,
+            function: null,
+            hexcode: null,
+            id: null,
+            important: null,
+            inserted: null,
+            keyword: null,
+            number: null,
+            operator: null,
+            prolog: null,
+            property: null,
+            pseudoClass: null,
+            pseudoElement: null,
+            punctuation: null,
+            regex: null,
+            selector: null,
+            string: null,
+            symbol: null,
+            tag: null,
+            unit: null,
+            url: null,
+            variable: null
+          }
+        },
+        focusRing: null,
+        link: {
+          fg: null
+        },
+        shadow: {
+          outline: null,
+          umbra: null,
+          penumbra: null,
+          ambient: null
+        },
+        skeleton: {
+          from: null,
+          to: null
+        },
+        ..._fromEntries(COLOR_VARIANTS.map((v) => [v, {
+          bg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          fg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          border: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          ..._fromEntries(THEME_COLOR_STATE_TONES.map((t2) => [t2, {
+            bg: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            },
+            fg: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            },
+            border: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            }
+          }]))
+        }]))
+      }])),
+      ..._fromEntries(COLOR_VARIANTS.map((v) => [v, {
+        bg: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        fg: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        border: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        ..._fromEntries(THEME_COLOR_STATE_TONES.map((t) => [t, {
+          bg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          fg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          border: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          }
+        }]))
+      }]))
+    },
+    container: _fromEntries(CONTAINER_SCALE.map((c) => [c, px(theme.container[c])])),
+    font: {
+      family: null,
+      fontSize: null,
+      letterSpacing: null,
+      lineHeight: null,
+      ascenderHeight: null,
+      descenderHeight: null,
+      iconSize: null,
+      featureSettings: null,
+      fontWeight: null,
+      iconOffset: null,
+      code: {
+        family: theme.font.code.family,
+        featureSettings: theme.font.code.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme.font.code.weights.regular),
+          medium: String(theme.font.code.weights.medium),
+          semibold: String(theme.font.code.weights.semibold),
+          bold: String(theme.font.code.weights.bold)
+        },
+        sizes: _fromEntries(FONT_CODE_SIZE.map((s) => [s, {
+          fontSize: rem(theme.font.code.sizes[s].fontSize),
+          lineHeight: rem(theme.font.code.sizes[s].lineHeight),
+          letterSpacing: rem(theme.font.code.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme.font.code.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme.font.code.sizes[s].descenderHeight),
+          iconSize: rem(theme.font.code.sizes[s].iconSize)
+        }]))
+      },
+      heading: {
+        family: theme.font.heading.family,
+        featureSettings: theme.font.heading.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme.font.heading.weights.regular),
+          medium: String(theme.font.heading.weights.medium),
+          semibold: String(theme.font.heading.weights.semibold),
+          bold: String(theme.font.heading.weights.bold)
+        },
+        sizes: _fromEntries(FONT_HEADING_SIZE.map((s) => [s, {
+          fontSize: rem(theme.font.heading.sizes[s].fontSize),
+          lineHeight: rem(theme.font.heading.sizes[s].lineHeight),
+          letterSpacing: rem(theme.font.heading.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme.font.heading.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme.font.heading.sizes[s].descenderHeight),
+          iconSize: rem(theme.font.heading.sizes[s].iconSize)
+        }]))
+      },
+      label: {
+        family: theme.font.label.family,
+        featureSettings: theme.font.label.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme.font.label.weights.regular),
+          medium: String(theme.font.label.weights.medium),
+          semibold: String(theme.font.label.weights.semibold),
+          bold: String(theme.font.label.weights.bold)
+        },
+        sizes: _fromEntries(FONT_LABEL_SIZE.map((s) => [s, {
+          fontSize: rem(theme.font.label.sizes[s].fontSize),
+          lineHeight: rem(theme.font.label.sizes[s].lineHeight),
+          letterSpacing: rem(theme.font.label.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme.font.label.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme.font.label.sizes[s].descenderHeight),
+          iconSize: rem(theme.font.label.sizes[s].iconSize)
+        }]))
+      },
+      text: {
+        family: theme.font.text.family,
+        featureSettings: theme.font.text.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme.font.text.weights.regular),
+          medium: String(theme.font.text.weights.medium),
+          semibold: String(theme.font.text.weights.semibold),
+          bold: String(theme.font.text.weights.bold)
+        },
+        sizes: _fromEntries(FONT_TEXT_SIZE.map((s) => [s, {
+          fontSize: rem(theme.font.text.sizes[s].fontSize),
+          lineHeight: rem(theme.font.text.sizes[s].lineHeight),
+          letterSpacing: rem(theme.font.text.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme.font.text.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme.font.text.sizes[s].descenderHeight),
+          iconSize: rem(theme.font.text.sizes[s].iconSize)
+        }]))
+      },
+      skeleton: {
+        lineHeight: null,
+        ascenderHeight: null,
+        descenderHeight: null
+      },
       weight: {
-        regular: `var(${varNames.font.label.weights.regular})`,
-        medium: `var(${varNames.font.label.weights.medium})`,
-        semibold: `var(${varNames.font.label.weights.semibold})`,
-        bold: `var(${varNames.font.label.weights.bold})`
+        regular: null,
+        medium: null,
+        semibold: null,
+        bold: null
       }
     },
-    text: {
-      family: `var(${varNames.font.text.family})`,
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.text.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.text.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.text.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.text.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.text.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.text.sizes[size].iconSize})`
+    input: {
+      gap: null,
+      descenderHeight: null,
+      ascenderHeight: null,
+      fontSize: null,
+      lineHeight: null,
+      letterSpacing: null,
+      padding: null,
+      border: {
+        width: px(theme.input.border.width)
+      },
+      checkbox: {
+        size: px(theme.input.checkbox.size),
+        focusRing: {
+          offset: px(theme.input.checkbox.focusRing.offset),
+          width: px(theme.input.checkbox.focusRing.width)
         }
-      }), {}),
-      weight: {
-        regular: `var(${varNames.font.text.weights.regular})`,
-        medium: `var(${varNames.font.text.weights.medium})`,
-        semibold: `var(${varNames.font.text.weights.semibold})`,
-        bold: `var(${varNames.font.text.weights.bold})`
-      }
-    }
-  },
-  input: {
-    fontSize: "var(--input-font-size)",
-    lineHeight: "var(--input-line-height)",
-    letterSpacing: "var(--input-letter-spacing)",
-    ascenderHeight: "var(--input-ascender-height)",
-    descenderHeight: "var(--input-descender-height)",
-    // capHeight: `var(--input-cap-height)`,
-    gap: "var(--input-gap)",
-    padding: "var(--input-padding)",
-    text: {
-      focusRing: {
-        width: "var(--input-text-focus-ring-width)",
-        offset: "var(--input-text-focus-ring-offset)"
-      }
-    }
-  },
-  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
-    umbra: `var(${varNames.shadow[shadow2].umbra})`,
-    penumbra: `var(${varNames.shadow[shadow2].penumbra})`,
-    ambient: `var(${varNames.shadow[shadow2].ambient})`
-  }])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
-  // color
-  black: `var(${varNames.black})`,
-  white: `var(${varNames.white})`,
-  ...COLOR_HUES.reduce((acc, hue) => {
-    const tints = {};
-    for (const tint of COLOR_TINTS)
-      tints[tint] = `var(--${hue}-${tint})`;
-    return acc[hue] = tints, acc;
-  }, {})
-};
-function buildColorCardVars(props) {
-  const {
-    scheme,
-    tone
-  } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
-  return {
-    avatar: {
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
-        ...acc,
-        [color2]: {
-          bg: `var(${prefix.avatar[color2].bg})`,
-          fg: `var(${prefix.avatar[color2].fg})`
+      },
+      radio: {
+        focusRing: {
+          offset: px(theme.input.radio.focusRing.offset),
+          width: px(theme.input.radio.focusRing.width)
+        },
+        markSize: px(theme.input.radio.markSize),
+        size: px(theme.input.radio.size)
+      },
+      select: {
+        focusRing: {
+          offset: px(theme.input.select.focusRing.offset),
+          width: px(theme.input.select.focusRing.width)
         }
-      }), {})
-    },
-    backdrop: `var(${prefix.backdrop})`,
-    code: {
-      bg: `var(${prefix.code.bg})`,
-      fg: `var(${prefix.code.fg})`,
-      token: {
-        atrule: `var(${prefix.code.token.atrule})`,
-        attrName: `var(${prefix.code.token.attrName})`,
-        attrValue: `var(${prefix.code.token.attrValue})`,
-        attribute: `var(${prefix.code.token.attribute})`,
-        boolean: `var(${prefix.code.token.boolean})`,
-        builtin: `var(${prefix.code.token.builtin})`,
-        cdata: `var(${prefix.code.token.cdata})`,
-        char: `var(${prefix.code.token.char})`,
-        class: `var(${prefix.code.token.class})`,
-        className: `var(${prefix.code.token.className})`,
-        comment: `var(${prefix.code.token.comment})`,
-        constant: `var(${prefix.code.token.constant})`,
-        deleted: `var(${prefix.code.token.deleted})`,
-        doctype: `var(${prefix.code.token.doctype})`,
-        entity: `var(${prefix.code.token.entity})`,
-        function: `var(${prefix.code.token.function})`,
-        hexcode: `var(${prefix.code.token.hexcode})`,
-        id: `var(${prefix.code.token.id})`,
-        important: `var(${prefix.code.token.important})`,
-        inserted: `var(${prefix.code.token.inserted})`,
-        keyword: `var(${prefix.code.token.keyword})`,
-        number: `var(${prefix.code.token.number})`,
-        operator: `var(${prefix.code.token.operator})`,
-        prolog: `var(${prefix.code.token.prolog})`,
-        property: `var(${prefix.code.token.property})`,
-        pseudoClass: `var(${prefix.code.token.pseudoClass})`,
-        pseudoElement: `var(${prefix.code.token.pseudoElement})`,
-        punctuation: `var(${prefix.code.token.punctuation})`,
-        regex: `var(${prefix.code.token.regex})`,
-        selector: `var(${prefix.code.token.selector})`,
-        string: `var(${prefix.code.token.string})`,
-        symbol: `var(${prefix.code.token.symbol})`,
-        tag: `var(${prefix.code.token.tag})`,
-        unit: `var(${prefix.code.token.unit})`,
-        url: `var(${prefix.code.token.url})`,
-        variable: `var(${prefix.code.token.variable})`
+      },
+      text: {
+        focusRing: {
+          offset: px(theme.input.text.focusRing.offset),
+          width: px(theme.input.text.focusRing.width)
+        }
+      },
+      switch: {
+        width: px(theme.input.switch.width),
+        height: px(theme.input.switch.height),
+        focusRing: {
+          offset: px(theme.input.switch.focusRing.offset),
+          width: px(theme.input.switch.focusRing.width)
+        },
+        padding: px(theme.input.switch.padding),
+        thumb: {
+          offset: null,
+          size: null
+        },
+        transitionDurationMs: `${theme.input.switch.transitionDurationMs}ms`,
+        transitionTimingFunction: theme.input.switch.transitionTimingFunction
       }
     },
-    focusRing: `var(${prefix.focusRing})`,
-    link: {
-      fg: `var(${prefix.link.fg})`
-    },
-    muted: {
-      bg: `var(${prefix.muted.bg})`,
-      fg: `var(${prefix.muted.fg})`
-    },
-    shadow: {
-      outline: `var(${prefix.shadow.outline})`,
-      umbra: `var(${prefix.shadow.umbra})`,
-      penumbra: `var(${prefix.shadow.penumbra})`,
-      ambient: `var(${prefix.shadow.ambient})`
-    },
-    skeleton: {
-      from: `var(${prefix.skeleton.from})`,
-      to: `var(${prefix.skeleton.to})`
-    },
-    solid: buildColorVariantVars({
-      scheme,
-      tone,
-      variant: "solid"
+    radius: _fromEntries(RADIUS.map((r) => [r, px(theme.radius[r])])),
+    shadow: _fromEntries(SHADOW.map((s) => [s, {
+      umbra: toBoxShadow(theme.shadow[s]?.umbra),
+      penumbra: toBoxShadow(theme.shadow[s]?.penumbra),
+      ambient: toBoxShadow(theme.shadow[s]?.ambient)
+    }])),
+    space: _fromEntries(SPACE.map((s) => [s, px(theme.space[s])]))
+  }, {
+    layer: "theme",
+    prefix: "s"
+  });
+  return {
+    vars: Object.freeze({
+      ...paletteResult.vars,
+      ...themeResult.vars
     }),
-    tinted: buildColorVariantVars({
-      scheme,
-      tone,
-      variant: "tinted"
+    varNames: Object.freeze({
+      ...paletteResult.varNames,
+      ...themeResult.varNames
+    }),
+    properties: Object.freeze({
+      ...paletteResult.properties,
+      ...themeResult.properties
     })
   };
-}
-function buildColorVariantVars(options) {
-  const {
-    scheme,
-    tone,
-    variant
-  } = options, _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
-    bg: {
-      0: `var(${_prefix}-bg-0)`,
-      1: `var(${_prefix}-bg-1)`,
-      2: `var(${_prefix}-bg-2)`,
-      3: `var(${_prefix}-bg-3)`,
-      4: `var(${_prefix}-bg-4)`
-    },
-    border: {
-      0: `var(${_prefix}-border-0)`,
-      1: `var(${_prefix}-border-1)`,
-      2: `var(${_prefix}-border-2)`,
-      3: `var(${_prefix}-border-3)`,
-      4: `var(${_prefix}-border-4)`
-    },
-    fg: {
-      0: `var(${_prefix}-fg-0)`,
-      1: `var(${_prefix}-fg-1)`,
-      2: `var(${_prefix}-fg-2)`,
-      3: `var(${_prefix}-fg-3)`,
-      4: `var(${_prefix}-fg-4)`
-    }
-  };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
-    vars2[elementTone] = {
+  function renderColor(t, options2) {
+    const {
+      bgValue = "transparent"
+    } = options2, color = _parseColorToken(t, options2);
+    if (color.type === "inherit")
+      return bgValue;
+    let value = "#000";
+    return color.type === "color" && (value = paletteResult.vars.palette[color.name]), color.type === "tint" && (value = paletteResult.vars.palette[color.hue][color.tint]), color.opacity < 1 && (value = `color-mix(in srgb, transparent, ${value} ${color.opacity * 100}%)`), color.mix < 1 && (value = `color-mix(in srgb, ${bgValue}, ${value} ${color.mix * 100}%)`), value;
+  }
+  function buildCardContract(options2) {
+    const {
+      theme: theme2,
+      scheme,
+      tone
+    } = options2, card2 = theme2.color[tone], cardOptions = {
+      defaultHue: card2._hue
+    }, i = scheme === "dark" ? 1 : 0, defaultElement = buildElementContract({
+      card: card2,
+      variant: "tinted",
+      tone: "default",
+      scheme
+    });
+    return {
+      avatar: _fromEntries(AVATAR_COLORS.map((c) => [c, {
+        bg: renderColor(card2.avatar[c].bg[i], {
+          defaultHue: c
+        }),
+        fg: renderColor(card2.avatar[c].fg[i], {
+          defaultHue: c
+        })
+      }])),
+      backdrop: renderColor(card2.backdrop[i], cardOptions),
+      code: {
+        bg: renderColor(card2.code.bg[i], cardOptions),
+        fg: renderColor(card2.code.fg[i], cardOptions),
+        token: {
+          atrule: renderColor(card2.code.token.atrule[i], cardOptions),
+          attrName: renderColor(card2.code.token.attrName[i], cardOptions),
+          attrValue: renderColor(card2.code.token.attrValue[i], cardOptions),
+          attribute: renderColor(card2.code.token.attribute[i], cardOptions),
+          boolean: renderColor(card2.code.token.boolean[i], cardOptions),
+          builtin: renderColor(card2.code.token.builtin[i], cardOptions),
+          cdata: renderColor(card2.code.token.cdata[i], cardOptions),
+          char: renderColor(card2.code.token.char[i], cardOptions),
+          class: renderColor(card2.code.token.class[i], cardOptions),
+          className: renderColor(card2.code.token.className[i], cardOptions),
+          comment: renderColor(card2.code.token.comment[i], cardOptions),
+          constant: renderColor(card2.code.token.constant[i], cardOptions),
+          deleted: renderColor(card2.code.token.deleted[i], cardOptions),
+          doctype: renderColor(card2.code.token.doctype[i], cardOptions),
+          entity: renderColor(card2.code.token.entity[i], cardOptions),
+          function: renderColor(card2.code.token.function[i], cardOptions),
+          hexcode: renderColor(card2.code.token.hexcode[i], cardOptions),
+          id: renderColor(card2.code.token.id[i], cardOptions),
+          important: renderColor(card2.code.token.important[i], cardOptions),
+          inserted: renderColor(card2.code.token.inserted[i], cardOptions),
+          keyword: renderColor(card2.code.token.keyword[i], cardOptions),
+          number: renderColor(card2.code.token.number[i], cardOptions),
+          operator: renderColor(card2.code.token.operator[i], cardOptions),
+          prolog: renderColor(card2.code.token.prolog[i], cardOptions),
+          property: renderColor(card2.code.token.property[i], cardOptions),
+          pseudoClass: renderColor(card2.code.token.pseudoClass[i], cardOptions),
+          pseudoElement: renderColor(card2.code.token.pseudoElement[i], cardOptions),
+          punctuation: renderColor(card2.code.token.punctuation[i], cardOptions),
+          regex: renderColor(card2.code.token.regex[i], cardOptions),
+          selector: renderColor(card2.code.token.selector[i], cardOptions),
+          string: renderColor(card2.code.token.string[i], cardOptions),
+          symbol: renderColor(card2.code.token.symbol[i], cardOptions),
+          tag: renderColor(card2.code.token.tag[i], cardOptions),
+          unit: renderColor(card2.code.token.unit[i], cardOptions),
+          url: renderColor(card2.code.token.url[i], cardOptions),
+          variable: renderColor(card2.code.token.variable[i], cardOptions)
+        }
+      },
+      focusRing: renderColor(card2.focusRing[i], cardOptions),
+      link: {
+        fg: renderColor(card2.link.fg[i], cardOptions)
+      },
+      shadow: {
+        outline: renderColor(card2.shadow.outline[i], cardOptions),
+        umbra: renderColor(card2.shadow.umbra[i], cardOptions),
+        penumbra: renderColor(card2.shadow.penumbra[i], cardOptions),
+        ambient: renderColor(card2.shadow.ambient[i], cardOptions)
+      },
+      skeleton: {
+        from: renderColor(card2.skeleton.from[i], cardOptions),
+        to: renderColor(card2.skeleton.to[i], cardOptions)
+      },
+      ..._fromEntries(COLOR_VARIANTS.map((v) => [v, _fromEntries(THEME_COLOR_STATE_TONES.map((e) => [e, v === "tinted" && e === "default" ? defaultElement : buildElementContract({
+        card: card2,
+        variant: v,
+        tone: e,
+        scheme,
+        bgValue: defaultElement.bg[0]
+      })]))]))
+    };
+  }
+  function buildElementContract(options2) {
+    const {
+      bgValue,
+      card: card2,
+      variant: v,
+      tone: e,
+      scheme
+    } = options2, element = card2.variant[v][e], elementOptions = {
+      bgValue,
+      defaultHue: element._hue
+    }, i = scheme === "dark" ? 1 : 0, bg = {
+      0: renderColor(element.bg[0][i], elementOptions),
+      4: renderColor(element.bg[4][i], elementOptions)
+    }, border2 = {
+      0: renderColor(element.border[0][i], elementOptions),
+      4: renderColor(element.border[4][i], elementOptions)
+    }, fg = {
+      0: renderColor(element.fg[0][i], elementOptions),
+      4: renderColor(element.fg[4][i], elementOptions)
+    };
+    return {
       bg: {
-        0: `var(${prefix}-bg-0)`,
-        1: `var(${prefix}-bg-1)`,
-        2: `var(${prefix}-bg-2)`,
-        3: `var(${prefix}-bg-3)`,
-        4: `var(${prefix}-bg-4)`
+        0: bg[0],
+        1: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 25%)`,
+        2: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 50%)`,
+        3: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 75%)`,
+        4: bg[4]
       },
       border: {
-        0: `var(${prefix}-border-0)`,
-        1: `var(${prefix}-border-1)`,
-        2: `var(${prefix}-border-2)`,
-        3: `var(${prefix}-border-3)`,
-        4: `var(${prefix}-border-4)`
+        0: border2[0],
+        1: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 25%)`,
+        2: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 50%)`,
+        3: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 75%)`,
+        4: border2[4]
       },
       fg: {
-        0: `var(${prefix}-fg-0)`,
-        1: `var(${prefix}-fg-1)`,
-        2: `var(${prefix}-fg-2)`,
-        3: `var(${prefix}-fg-3)`,
-        4: `var(${prefix}-fg-4)`
+        0: fg[0],
+        1: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 25%)`,
+        2: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 50%)`,
+        3: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 75%)`,
+        4: fg[4]
       }
     };
   }
-  return vars2;
 }
-const util$u = {};
-_responsiveRule(util$u, "border", {
+function px(value) {
+  return `${value}px`;
+}
+function rem(value) {
+  return `${value / 16}rem`;
+}
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
+}
+const result = resolveTheme({
+  theme: buildTheme_v3()
+}), vars = result.vars, varNames = result.varNames, properties = result.properties, util$v = {};
+_responsiveRule(util$v, "border", {
   border: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$u, "border-t", {
+_responsiveRule(util$v, "border-t", {
   borderTop: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$u, "border-r", {
+_responsiveRule(util$v, "border-r", {
   borderRight: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$u, "border-b", {
+_responsiveRule(util$v, "border-b", {
   borderBottom: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$u, "border-l", {
+_responsiveRule(util$v, "border-l", {
   borderLeft: `1px solid ${vars.color.border}`
 });
 const borderStyle = {
+  layers: {
+    util: util$v
+  }
+}, util$u = {};
+_responsiveRule(util$u, "box-border", {
+  boxSizing: "border-box"
+});
+_responsiveRule(util$u, "box-content", {
+  boxSizing: "content-box"
+});
+const boxSizingStyle = {
   layers: {
     util: util$u
   }
 }, util$t = {};
 _responsiveRule(util$t, "block", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "block"
     }
   }
 });
 _responsiveRule(util$t, "flex", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "flex"
     }
   }
 });
 _responsiveRule(util$t, "grid", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "grid"
     }
   }
 });
 _responsiveRule(util$t, "inline-block", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "inline-block"
     }
   }
 });
 _responsiveRule(util$t, "inline-flex", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "inline-flex"
     }
   }
 });
 _responsiveRule(util$t, "inline-grid", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "inline-grid"
     }
   }
 });
 _responsiveRule(util$t, "none", {
-  "@nest": {
+  nest: {
     "&:not([hidden])": {
       display: "none"
     }
@@ -1285,23 +1035,25 @@ const flexStyle = {
   }
 }, primitive$q = {
   ".font": {
-    fontFamily: "var(--font-family)",
-    fontFeatureSettings: "var(--font-feature-settings)",
-    fontSize: "var(--font-size)",
-    lineHeight: "var(--font-line-height)",
-    letterSpacing: "var(--font-letter-spacing)",
-    fontWeight: "var(--font-weight)",
-    transform: "translateY(var(--font-descender-height))",
+    fontFamily: vars.font.family,
+    fontFeatureSettings: vars.font.featureSettings,
+    fontSize: vars.font.fontSize,
+    lineHeight: vars.font.lineHeight,
+    letterSpacing: vars.font.letterSpacing,
+    fontWeight: vars.font.fontWeight,
+    transform: `translateY(${vars.font.descenderHeight})`,
     padding: "1px 0",
     margin: "0",
-    "--font-icon-offset": "calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)",
-    "--font-weight": "var(--font-weight-regular)",
-    "@nest": {
+    vars: {
+      [varNames.font.iconOffset]: `calc(((${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - ${vars.font.iconSize}) / 2)`,
+      [varNames.font.fontWeight]: vars.font.weight.regular
+    },
+    nest: {
       "&:before": {
         content: '""',
         display: "block",
         height: 0,
-        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
+        marginTop: `calc((0px - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - 1px)`
       },
       "&:after": {
         content: '""',
@@ -1314,29 +1066,37 @@ const flexStyle = {
         // Make sure SVGs are rendered as inline elements
         display: "inline"
       },
-      // todo
+      // TODO
       // '& svg:not([data-sanity-icon])': {
       //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
       //   margin: 'var(--custom-icon-offset)',
       // },
       "& [data-sanity-icon]": {
-        fontSize: "var(--font-icon-size)",
-        margin: "var(--font-icon-offset)",
+        fontSize: vars.font.iconSize,
+        margin: vars.font.iconOffset,
         vectorEffect: "non-scaling-stroke"
       }
     }
   },
   ".font-regular": {
-    "--font-weight": "var(--font-weight-regular)"
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.regular
+    }
   },
   ".font-medium": {
-    "--font-weight": "var(--font-weight-medium)"
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.medium
+    }
   },
   ".font-semibold": {
-    "--font-weight": "var(--font-weight-semibold)"
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.semibold
+    }
   },
   ".font-bold": {
-    "--font-weight": "var(--font-weight-bold)"
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.bold
+    }
   }
 }, fontStyle = {
   layers: {
@@ -1799,21 +1559,21 @@ for (const space of SPACE)
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$9, `mt-${space}`, {
-    marginTop: vars.space[space]
+for (const i of SPACE)
+  _responsiveRule(util$9, `mt-${i}`, {
+    marginTop: vars.space[i]
   });
-for (const space of SPACE)
-  _responsiveRule(util$9, `mr-${space}`, {
-    marginRight: vars.space[space]
+for (const i of SPACE)
+  _responsiveRule(util$9, `mr-${i}`, {
+    marginRight: vars.space[i]
   });
-for (const space of SPACE)
-  _responsiveRule(util$9, `mb-${space}`, {
-    marginBottom: vars.space[space]
+for (const i of SPACE)
+  _responsiveRule(util$9, `mb-${i}`, {
+    marginBottom: vars.space[i]
   });
-for (const space of SPACE)
-  _responsiveRule(util$9, `ml-${space}`, {
-    marginLeft: vars.space[space]
+for (const i of SPACE)
+  _responsiveRule(util$9, `ml-${i}`, {
+    marginLeft: vars.space[i]
   });
 const marginStyle = {
   layers: {
@@ -1992,11 +1752,11 @@ const radiusStyle = {
     util: util$3
   }
 }, util$2 = {};
-for (const shadow2 of SHADOW)
-  shadow2 === 0 ? _responsiveRule(util$2, "shadow-0", {
+for (const index of SHADOW)
+  index === 0 ? _responsiveRule(util$2, "shadow-0", {
     boxShadow: "none"
-  }) : _responsiveRule(util$2, `shadow-${shadow2}`, {
-    boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[shadow2].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[shadow2].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[shadow2].ambient} ${vars.color.shadow.ambient}`].join(", ")
+  }) : _responsiveRule(util$2, `shadow-${index}`, {
+    boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[index].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[index].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[index].ambient} ${vars.color.shadow.ambient}`].join(", ")
   });
 const shadowStyle = {
   layers: {
@@ -2058,8 +1818,8 @@ const widthStyle = {
   layers: {
     component: component$5
   }
-}, keyframes$2 = {
-  "dialog-zoom-in": {
+}, KEYFRAMES_DIALOG_ZOOM_IN = "dialog-zoom-in", KEYFRAMES_DIALOG_FADE_IN = "dialog-fade-in", keyframes$2 = {
+  [KEYFRAMES_DIALOG_ZOOM_IN]: {
     from: {
       opacity: 0,
       transform: "scale(0.95)"
@@ -2069,7 +1829,7 @@ const widthStyle = {
       transform: "scale(1)"
     }
   },
-  "dialog-fade-in": {
+  [KEYFRAMES_DIALOG_FADE_IN]: {
     from: {
       opacity: 0
     },
@@ -2079,21 +1839,16 @@ const widthStyle = {
   }
 }, component$4 = {
   ".dialog": {
-    // 'top': 0,
-    // 'left': 0,
-    // 'right': 0,
-    // 'bottom': 0,
     alignItems: "center",
     justifyContent: "center",
     outline: "none",
     background: vars.color.backdrop,
-    "@nest": {
+    nest: {
       "&[data-animate]": {
-        animation: "dialog-fade-in 200ms ease-out"
+        animation: `${KEYFRAMES_DIALOG_FADE_IN} 200ms ease-out`
       },
-      // Animates the dialog card.
       '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: "dialog-zoom-in 200ms ease-out"
+        animation: `${KEYFRAMES_DIALOG_ZOOM_IN} 200ms ease-out`
       }
     }
   },
@@ -2158,7 +1913,7 @@ const widthStyle = {
     backgroundAttachment: "fixed",
     opacity: 0,
     transition: "opacity 200ms ease-in",
-    "@nest": {
+    nest: {
       "&[data-animated]": {
         backgroundImage: ["linear-gradient(to right", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
         animationName: KEYFRAMES_PULSE,
@@ -2177,32 +1932,40 @@ const widthStyle = {
     }
   },
   ".font-skeleton": {
-    height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
+    height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`
   }
 };
 for (const size of FONT_CODE_SIZE)
   _responsiveRule(component$2, `code-skeleton-${size}`, {
-    "--font-skeleton-line-height": vars.font.code.sizes[size].lineHeight,
-    "--font-skeleton-ascender-height": vars.font.code.sizes[size].ascenderHeight,
-    "--font-skeleton-descender-height": vars.font.code.sizes[size].descenderHeight
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.code.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.code.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.code.sizes[size].descenderHeight
+    }
   });
 for (const size of FONT_HEADING_SIZE)
   _responsiveRule(component$2, `heading-skeleton-${size}`, {
-    "--font-skeleton-line-height": vars.font.heading.sizes[size].lineHeight,
-    "--font-skeleton-ascender-height": vars.font.heading.sizes[size].ascenderHeight,
-    "--font-skeleton-descender-height": vars.font.heading.sizes[size].descenderHeight
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.heading.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.heading.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.heading.sizes[size].descenderHeight
+    }
   });
 for (const size of FONT_LABEL_SIZE)
   _responsiveRule(component$2, `label-skeleton-${size}`, {
-    "--font-skeleton-line-height": vars.font.label.sizes[size].lineHeight,
-    "--font-skeleton-ascender-height": vars.font.label.sizes[size].ascenderHeight,
-    "--font-skeleton-descender-height": vars.font.label.sizes[size].descenderHeight
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.label.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.label.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.label.sizes[size].descenderHeight
+    }
   });
 for (const size of FONT_TEXT_SIZE)
   _responsiveRule(component$2, `text-skeleton-${size}`, {
-    "--font-skeleton-line-height": vars.font.text.sizes[size].lineHeight,
-    "--font-skeleton-ascender-height": vars.font.text.sizes[size].ascenderHeight,
-    "--font-skeleton-descender-height": vars.font.text.sizes[size].descenderHeight
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.text.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.text.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.text.sizes[size].descenderHeight
+    }
   });
 const skeletonStyle = {
   keyframes: keyframes$1,
@@ -2229,14 +1992,13 @@ const skeletonStyle = {
   }
 }, component = {
   ".tree-item": {
-    "@nest": {
+    nest: {
       '&[role="none"] > [role="treeitem"]': {
         outline: "none",
         cursor: "default",
         borderRadius: "3px",
         backgroundColor: vars.color.bg,
-        // 'var(--card-bg-color)',
-        color: "var(--treeitem-fg-color)"
+        color: vars.color.fg
       },
       '&[role="none"] > [role="treeitem"]:focus': {
         position: "relative"
@@ -2248,24 +2010,11 @@ const skeletonStyle = {
         cursor: "default",
         borderRadius: "3px",
         backgroundColor: vars.color.bg,
-        // 'var(--card-bg-color)',
-        color: "var(--treeitem-fg-color)"
+        color: vars.color.fg
       },
       '&[role="treeitem"]:focus > div': {
         position: "relative"
       }
-      // &[role='treeitem'] {
-      //   outline: none;
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
     }
   }
 }, treeStyle = {
@@ -2275,41 +2024,40 @@ const skeletonStyle = {
 }, primitive$p = {
   ".arrow": {
     position: "absolute",
-    // todo: replace with vars?
-    width: "var(--arrow-size)",
-    height: "var(--arrow-size)",
-    "@nest": {
+    width: vars.arrow.size,
+    height: vars.arrow.size,
+    nest: {
       ":empty + &": {
         display: "none"
       },
       "& > svg": {
         display: "block",
-        transformOrigin: "calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)"
+        transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`
       },
       // top
       '[data-placement^="top"] > &': {
-        bottom: "calc(0px - var(--arrow-size))"
+        bottom: `calc(0px - ${vars.arrow.size})`
       },
       '[data-placement^="top"] > & svg': {
         transform: "rotate(0deg)"
       },
       // right
       '[data-placement^="right"] > &': {
-        left: "calc(0px - var(--arrow-size))"
+        left: `calc(0px - ${vars.arrow.size})`
       },
       '[data-placement^="right"] > & svg': {
         transform: "rotate(90deg)"
       },
       // left
       '[data-placement^="left"] > &': {
-        right: "calc(0px - var(--arrow-size))"
+        right: `calc(0px - ${vars.arrow.size})`
       },
       '[data-placement^="left"] > & svg': {
         transform: "rotate(-90deg)"
       },
       // bottom
       '[data-placement^="bottom"] > &': {
-        top: "calc(0px - var(--arrow-size))"
+        top: `calc(0px - ${vars.arrow.size})`
       },
       '[data-placement^="bottom"] > & svg': {
         transform: "rotate(180deg)"
@@ -2336,15 +2084,13 @@ const skeletonStyle = {
     position: "relative"
   },
   ".input-b": {
-    "@nest": {
+    nest: {
       "& .input-presentation": {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
       }
     }
   },
   ".input-element": {
-    "--color-input-fg": vars.color.tinted.default.fg[2],
-    "--color-input-placeholder": vars.color.tinted.default.border[4],
     WebkitFontSmoothing: "inherit",
     appearance: "none",
     border: 0,
@@ -2355,8 +2101,8 @@ const skeletonStyle = {
     lineHeight: vars.input.lineHeight,
     letterSpacing: vars.input.letterSpacing,
     backgroundColor: "transparent",
-    color: vars.color.input.fg,
-    padding: ["calc(var(--input-padding) - var(--input-ascender-height))", "var(--input-padding)", "calc(var(--input-padding) - var(--input-descender-height))", "var(--input-padding)"].join(" "),
+    color: vars.color.input.text.fg,
+    padding: [`calc(${vars.input.padding} - ${vars.input.ascenderHeight})`, vars.input.padding, `calc(${vars.input.padding} - ${vars.input.descenderHeight})`, vars.input.padding].join(" "),
     borderRadius: "inherit",
     position: "relative",
     zIndex: 1,
@@ -2365,31 +2111,56 @@ const skeletonStyle = {
     resize: "none",
     // @ts-expect-error - TODO: fix this
     width: ["-moz-available", "-webkit-fill-available", "stretch"],
-    "@nest": {
+    nest: {
       ".input[data-icon-left] &": {
-        paddingLeft: "calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))"
+        paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`
       },
       ".input[data-icon-right] &": {
-        paddingRight: "calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))"
+        paddingRight: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`
+      },
+      ".input:not([data-invalid]) &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[4]
+        }
       },
-      "&::placeholder": {
-        color: vars.color.input.placeholder
+      ".input:not([data-invalid]) &::placeholder": {
+        color: vars.color.input.text.placeholder
       },
-      "&:hover": {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0]
+      ".input:not([data-invalid]) &:hover": {
+        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
       },
-      "&:focus": {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0]
+      ".input:not([data-invalid]) &:focus": {
+        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+      },
+      ".input:not([data-invalid]) &:disabled": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[1]
+        }
+      },
+      ".input[data-invalid] &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[4]
+        }
       },
-      "&:disabled": {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[3]
+      ".input[data-invalid] &::placeholder": {
+        color: vars.color.input.text.placeholder
+      },
+      ".input[data-invalid] &:hover": {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+      },
+      ".input[data-invalid] &:focus": {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+      },
+      ".input[data-invalid] &:disabled": {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.border[3]
       }
     }
   },
   ".input-presentation": {
-    [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
-    [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.input.border]: vars.color.tinted.default.border[1],
+    backgroundColor: vars.color.input.text.bg,
     borderRadius: "inherit",
     position: "absolute",
     top: 0,
@@ -2399,7 +2170,7 @@ const skeletonStyle = {
     display: "block",
     pointerEvents: "none",
     zIndex: 0,
-    "@nest": {
+    nest: {
       ".input[data-prefix] &": {
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0
@@ -2408,27 +2179,87 @@ const skeletonStyle = {
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0
       },
-      ".input-element:placeholder-shown + &": {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[4]
-      },
-      ".input-element:hover + &": {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`
-      },
       ".input-element:focus + &": {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
         outlineWidth: vars.input.text.focusRing.width,
         outlineStyle: "solid",
         outlineColor: vars.color.focusRing,
         outlineOffset: vars.input.text.focusRing.offset
       },
       ".input-element:disabled + &": {
-        [varNames.color.input.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.input.border]: vars.color.tinted.default.border[0],
         opacity: 1
+      },
+      // valid
+      ".input:not([data-invalid]) &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[1]
+        }
+      },
+      ".input:not([data-invalid])[data-read-only] .input-element + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1]
+        }
+      },
+      ".input:not([data-invalid]) .input-element:placeholder-shown + &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4]
+        }
+      },
+      ".input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1]
+        },
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
+      },
+      ".input:not([data-invalid]) .input-element:focus + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1]
+        },
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
+      },
+      ".input:not([data-invalid]) .input-element:disabled + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
+          // icon
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
+        }
+      },
+      // invalid
+      ".input[data-invalid] &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[4],
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
+          [varNames.color.focusRing]: vars.color.solid.critical.bg[0]
+        }
+      },
+      ".input[data-invalid] .input-element:placeholder-shown + &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4]
+        }
+      },
+      ".input[data-invalid] .input-element:not(:disabled):hover + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
+      },
+      ".input[data-invalid] .input-element:focus + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
+      },
+      ".input[data-invalid] .input-element:disabled + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[0]
+        }
       }
     }
   }
@@ -2462,7 +2293,7 @@ const _inputStyle = {
     [varNames.color.bg]: vars.color.tinted.bg[0],
     [varNames.color.border]: vars.color.tinted.border[2],
     [varNames.color.fg]: vars.color.tinted.fg[2],
-    "@nest": {
+    nest: {
       "&:is(button)": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
@@ -2482,9 +2313,9 @@ const _inputStyle = {
     },
     "@media": {
       "(hover: hover)": {
-        "@nest": {
+        nest: {
           "&:not([data-disabled])": {
-            // cursor: 'pointer',
+            cursor: "pointer"
           },
           "&:not([data-disabled]):hover": {
             [varNames.color.bg]: vars.color.tinted.bg[1],
@@ -2574,7 +2405,7 @@ const primitive$m = {
     width: vars.avatar.size,
     height: vars.avatar.size,
     borderRadius: vars.avatar.size,
-    "@nest": {
+    nest: {
       "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
@@ -2586,8 +2417,8 @@ const primitive$m = {
         outline: "none"
       },
       "button&:focus": {
-        outline: "var(--avatar-focus-ring-width) solid var(--color-focus-ring)",
-        outlineOffset: "var(--avatar-focus-ring-offset)"
+        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.avatar.focusRing.offset
       },
       "button&:focus:not(:focus-visible)": {
         boxShadow: "none"
@@ -2596,11 +2427,11 @@ const primitive$m = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...AVATAR_COLORS.reduce((acc, color) => ({
         ...acc,
-        [`&.${color2}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
+        [`&.${color}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
         }
       }), {})
     }
@@ -2616,7 +2447,7 @@ const primitive$m = {
     right: 0,
     top: 0,
     bottom: 0,
-    "@nest": {
+    nest: {
       "& > svg": {
         display: "block",
         width: "11px",
@@ -2641,7 +2472,7 @@ const primitive$m = {
     }
   },
   ".avatar-image": {
-    "@nest": {
+    nest: {
       "& > img": {
         display: "block",
         position: "absolute",
@@ -2673,7 +2504,7 @@ const primitive$m = {
     userSelect: "none",
     borderRadius: vars.avatar.size,
     height: vars.avatar.size,
-    "@nest": {
+    nest: {
       "&&": {
         minWidth: vars.avatar.size
       },
@@ -2683,7 +2514,7 @@ const primitive$m = {
     }
   },
   ".avatar-stack": {
-    "@nest": {
+    nest: {
       "& > div + div": {
         marginLeft: vars.avatar.distance
       }
@@ -2717,9 +2548,9 @@ const badgeStyle = {
   }
 }, primitive$k = {
   ".box": {
-    // todo: move to aspects
+    // TODO: move to aspects
     minHeight: 0,
-    "@nest": {
+    nest: {
       "iframe&": {
         border: "none"
       },
@@ -2730,13 +2561,6 @@ const badgeStyle = {
         backgroundColor: vars.color.muted.bg
       }
     }
-  },
-  // sizing
-  ".box-content": {
-    boxSizing: "content-box"
-  },
-  ".box-border": {
-    boxSizing: "border-box"
   }
 }, boxStyle = {
   layers: {
@@ -2760,17 +2584,16 @@ const badgeStyle = {
     verticalAlign: "top",
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
-    boxShadow: "var(--button-box-shadow)",
+    boxShadow: vars.button.boxShadow,
     alignItems: "center",
-    // 'justifyContent': 'center',
-    "@nest": {
+    nest: {
       "&::-moz-focus-inner": {
         border: 0,
         padding: 0
       },
       "&:focus": {
-        outline: "var(--button-focus-ring-width) solid var(--color-focus-ring)",
-        outlineOffset: "var(--button-focus-ring-offset)"
+        outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.button.focusRing.offset
       },
       "&:focus:not(:focus-visible)": {
         outline: "none"
@@ -2792,166 +2615,193 @@ const badgeStyle = {
 for (const tone of THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
   primitive$j[`.button[data-mode="default"][data-tone="${tone}"]`] = {
-    [varNames.color.bg]: solid.bg[0],
-    [varNames.color.border]: solid.border[1],
-    [varNames.color.code.bg]: solid.bg[1],
-    [varNames.color.code.fg]: solid.fg[4],
-    [varNames.color.fg]: solid.fg[0],
-    [varNames.color.muted.bg]: solid.bg[1],
-    [varNames.color.muted.fg]: solid.fg[4],
-    "--button-box-shadow": "none",
-    "@nest": {
+    vars: {
+      [varNames.color.bg]: solid.bg[0],
+      [varNames.color.border]: solid.border[1],
+      [varNames.color.code.bg]: solid.bg[1],
+      [varNames.color.code.fg]: solid.fg[4],
+      [varNames.color.fg]: solid.fg[0],
+      [varNames.color.muted.bg]: solid.bg[1],
+      [varNames.color.muted.fg]: solid.fg[4],
+      [varNames.button.boxShadow]: "none"
+    },
+    nest: {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: solid.bg[1],
-        [varNames.color.border]: solid.border[2],
-        [varNames.color.code.bg]: solid.bg[2],
-        [varNames.color.code.fg]: solid.fg[4],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[2],
-        [varNames.color.muted.fg]: solid.fg[4]
+        vars: {
+          [varNames.color.bg]: solid.bg[1],
+          [varNames.color.border]: solid.border[2],
+          [varNames.color.code.bg]: solid.bg[2],
+          [varNames.color.code.fg]: solid.fg[4],
+          [varNames.color.fg]: solid.fg[0],
+          [varNames.color.muted.bg]: solid.bg[2],
+          [varNames.color.muted.fg]: solid.fg[4]
+        }
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: solid.bg[2],
-        [varNames.color.border]: solid.border[3],
-        [varNames.color.code.bg]: solid.bg[3],
-        [varNames.color.code.fg]: solid.fg[4],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
-        [varNames.color.muted.fg]: solid.fg[4]
+        vars: {
+          [varNames.color.bg]: solid.bg[2],
+          [varNames.color.border]: solid.border[3],
+          [varNames.color.code.bg]: solid.bg[3],
+          [varNames.color.code.fg]: solid.fg[4],
+          [varNames.color.fg]: solid.fg[0],
+          [varNames.color.muted.bg]: solid.bg[3],
+          [varNames.color.muted.fg]: solid.fg[4]
+        }
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: solid.bg[2],
-        [varNames.color.border]: solid.border[3],
-        [varNames.color.code.bg]: solid.bg[3],
-        [varNames.color.code.fg]: solid.fg[4],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
-        [varNames.color.muted.fg]: solid.fg[4]
+        vars: {
+          [varNames.color.bg]: solid.bg[2],
+          [varNames.color.border]: solid.border[3],
+          [varNames.color.code.bg]: solid.bg[3],
+          [varNames.color.code.fg]: solid.fg[4],
+          [varNames.color.fg]: solid.fg[0],
+          [varNames.color.muted.bg]: solid.bg[3],
+          [varNames.color.muted.fg]: solid.fg[4]
+        }
       },
       "&[data-disabled]": {
-        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.border]: vars.color.tinted.default.border[1],
-        [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.code.fg]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.border[4],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.border]: vars.color.tinted.default.border[1],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
+        }
       }
     }
   }, primitive$j[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
-    [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[1],
-    [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.code.bg]: tinted.bg[2],
-    [varNames.color.code.fg]: tinted.fg[4],
-    [varNames.color.muted.bg]: tinted.bg[2],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
-    "@nest": {
+    vars: {
+      [varNames.color.bg]: tinted.bg[1],
+      [varNames.color.border]: tinted.border[1],
+      [varNames.color.fg]: tinted.fg[2],
+      [varNames.color.code.bg]: tinted.bg[2],
+      [varNames.color.code.fg]: tinted.fg[4],
+      [varNames.color.muted.bg]: tinted.bg[2],
+      [varNames.color.muted.fg]: tinted.fg[4],
+      [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+    },
+    nest: {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[2],
-        [varNames.color.code.bg]: tinted.bg[3],
-        [varNames.color.code.fg]: tinted.fg[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[2],
+          [varNames.color.code.bg]: tinted.bg[3],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3]
+        }
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.code.bg]: tinted.bg[4],
-        [varNames.color.code.fg]: tinted.fg[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.code.bg]: tinted.bg[4],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[4],
+          [varNames.color.muted.fg]: tinted.fg[3],
+          [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+        }
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.code.bg]: tinted.bg[4],
-        [varNames.color.code.fg]: tinted.fg[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.code.bg]: tinted.bg[4],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[4],
+          [varNames.color.muted.fg]: tinted.fg[3],
+          [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+        }
       },
       "&[data-disabled]": {
-        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.bg]: vars.color.tinted.default.bg[0],
-        [varNames.color.border]: vars.color.tinted.default.border[0],
-        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.border[4],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        }
       }
     }
   }, primitive$j[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
     boxShadow: "none",
-    [varNames.color.bg]: tinted.bg[0],
-    [varNames.color.border]: tinted.border[1],
-    [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[1],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    "--button-box-shadow": "none",
-    "@nest": {
+    vars: {
+      [varNames.color.bg]: tinted.bg[0],
+      [varNames.color.border]: tinted.border[1],
+      [varNames.color.fg]: tinted.fg[2],
+      [varNames.color.muted.bg]: tinted.bg[1],
+      [varNames.color.muted.fg]: tinted.fg[4],
+      [varNames.button.boxShadow]: "none"
+    },
+    nest: {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[1],
-        [varNames.color.border]: tinted.border[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[2],
-        [varNames.color.muted.fg]: tinted.fg[3]
+        vars: {
+          [varNames.color.bg]: tinted.bg[1],
+          [varNames.color.border]: tinted.border[2],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[2],
+          [varNames.color.muted.fg]: tinted.fg[3]
+        }
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3]
+        }
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3]
+        }
       },
       "&[data-disabled]": {
-        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.bg]: vars.color.tinted.default.bg[0],
-        [varNames.color.border]: vars.color.tinted.default.border[0],
-        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.border[4],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        }
       }
     }
   };
@@ -2960,18 +2810,22 @@ const buttonStyle = {
   layers: {
     primitive: primitive$j
   }
-}, primitive$i = {
+};
+function _assign(target, source) {
+  return Object.assign(target, source);
+}
+const primitive$i = {
   ".card": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
-    [varNames.color.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.border]: vars.color.tinted.default.border[1],
-    [varNames.color.code.bg]: vars.color.code.bg,
-    [varNames.color.code.fg]: vars.color.code.fg,
-    [varNames.color.fg]: vars.color.tinted.default.fg[0],
-    [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-    [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-    "@nest": {
+    vars: {
+      [varNames.color.bg]: vars.color.tinted.default.bg[0],
+      [varNames.color.border]: vars.color.tinted.default.border[1],
+      [varNames.color.fg]: vars.color.tinted.default.fg[0],
+      [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+      [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+    },
+    nest: {
       "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
@@ -2997,64 +2851,91 @@ const buttonStyle = {
         backgroundImage: `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)`
       },
       "a&:not([data-disabled]):hover, button&:not([data-disabled]):hover": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.border]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.fg[1],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.border]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.fg[1],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        }
       },
       "a&:not([data-disabled]):active, button&:not([data-disabled]):active": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        }
       },
       // toggle button
       'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        }
       },
       "a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        }
       },
       "a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: vars.color.solid.primary.bg[0],
-        [varNames.color.border]: vars.color.solid.primary.border[1],
-        [varNames.color.fg]: vars.color.solid.primary.fg[0],
-        [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
-        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
+        vars: {
+          [varNames.color.bg]: vars.color.solid.primary.bg[0],
+          [varNames.color.border]: vars.color.solid.primary.border[1],
+          [varNames.color.fg]: vars.color.solid.primary.fg[0],
+          [varNames.color.code.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.code.fg]: vars.color.solid.primary.fg[3],
+          [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
+        }
       },
       "a&[data-disabled], button&[data-disabled]": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[0],
-        [varNames.color.border]: vars.color.tinted.default.border[1],
-        [varNames.color.fg]: vars.color.tinted.default.border[3],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.muted.fg]: vars.color.tinted.default.border[1]
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[1],
+          [varNames.color.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[2],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[2]
+        }
       }
     }
   }
 };
-for (const scheme of THEME_COLOR_SCHEMES$1) {
-  const schemeProps = {
-    colorScheme: scheme
+for (const scheme of THEME_COLOR_SCHEMES) {
+  const customProps = {}, props = {
+    colorScheme: scheme,
+    vars: customProps
   };
   for (const tone of THEME_COLOR_CARD_TONES) {
     const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
-    _assignToneProps(schemeProps, _varNames, _vars);
+    _assignToneProps(customProps, _varNames, _vars);
   }
-  primitive$i[`.card.${scheme}`] = schemeProps;
+  primitive$i[`.card.${scheme}`] = props;
 }
 for (const tone of THEME_COLOR_CARD_TONES) {
-  const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
-  _assignToneProps(toneProps, _varNames, _vars), Object.assign(toneProps, {
+  const _varNames = varNames.color, _vars = vars.color[tone], customProps = {}, props = {
+    vars: customProps
+  };
+  _assignToneProps(customProps, _varNames, _vars), _assign(customProps, {
     "--card-bg-color": vars.color.bg,
     "--card-bg2-color": vars.color.muted.bg,
     "--card-border-color": vars.color.border,
@@ -3075,21 +2956,20 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     "--card-shadow-outline-color": vars.color.shadow.outline,
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
-    "--card-shadow-ambient-color": vars.color.shadow.ambient
-    // todo
-    // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-  }), primitive$i[`.card.${tone}`] = toneProps;
+    "--card-shadow-ambient-color": vars.color.shadow.ambient,
+    "--card-skeleton-from-color": vars.color.skeleton.from,
+    "--card-skeleton-to-color": vars.color.skeleton.to
+  }), primitive$i[`.card.${tone}`] = props;
 }
 const cardStyle = {
   layers: {
     primitive: primitive$i
   }
 };
-function _assignToneProps(toneProps, _varNames, _vars) {
-  for (const hue of THEME_COLOR_AVATAR_COLORS)
-    toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
-  Object.assign(toneProps, {
+function _assignToneProps(props, _varNames, _vars) {
+  for (const hue of AVATAR_COLORS)
+    props[_varNames.avatar[hue].bg] = _vars.avatar[hue].bg, props[_varNames.avatar[hue].fg] = _vars.avatar[hue].fg;
+  _assign(props, {
     [_varNames.backdrop]: _vars.backdrop,
     [_varNames.code.fg]: _vars.code.fg,
     [_varNames.code.bg]: _vars.code.bg,
@@ -3136,10 +3016,10 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
     [_varNames.shadow.ambient]: _vars.shadow.ambient
   });
-  for (const variant of ["solid", "tinted"])
+  for (const variant of COLOR_VARIANTS)
     for (const elementTone of THEME_COLOR_STATE_TONES) {
       const __varNames = _varNames[variant][elementTone], __vars = _vars[variant][elementTone];
-      Object.assign(toneProps, {
+      _assign(props, {
         [__varNames.bg[0]]: __vars.bg[0],
         [__varNames.bg[1]]: __vars.bg[1],
         [__varNames.bg[2]]: __vars.bg[2],
@@ -3161,7 +3041,11 @@ function _assignToneProps(toneProps, _varNames, _vars) {
 const primitive$h = {
   ".checkbox": {
     position: "relative",
-    display: "inline-block"
+    nest: {
+      "&:not([hidden])": {
+        display: "block"
+      }
+    }
   },
   ".checkbox-input": {
     position: "absolute",
@@ -3174,28 +3058,23 @@ const primitive$h = {
     zIndex: 1,
     padding: 0,
     margin: 0,
-    "@nest": {
+    nest: {
       "& + span": {
         position: "relative",
         display: "block",
-        width: "var(--input-checkbox-size)",
-        height: "var(--input-checkbox-size)",
+        width: vars.input.checkbox.size,
+        height: vars.input.checkbox.size,
         boxSizing: "border-box",
-        borderRadius: "var(--radius-2)",
+        borderRadius: vars.radius[2],
         lineHeight: 1,
-        backgroundColor: "var(--color-checkbox-bg)",
-        boxShadow: "inset 0 0 0 1px var(--color-checkbox-border)",
-        color: "var(--color-checkbox-fg)",
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
-        "--color-checkbox-bg": "var(--color-tinted-default-bg-0)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-1)",
-        "--color-checkbox-fg": "var(--color-tinted-default-fg-0)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })},
+        backgroundColor: vars.color.input.checkbox.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.checkbox.border}`,
+        color: vars.color.input.checkbox.fg,
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
       },
       "& + span > svg": {
         display: "block",
@@ -3208,81 +3087,106 @@ const primitive$h = {
         vectorEffect: "non-scaling-stroke",
         strokeWidth: "1.5px !important"
       },
-      "&:hover + span": {
-        "--color-checkbox-bg": "var(--color-tinted-default-bg-1)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-fg": "var(--color-tinted-default-fg-0)"
-      },
-      "&:checked + span": {
-        "--color-checkbox-bg": "var(--color-solid-default-bg-0)",
-        "--color-checkbox-border": "var(--color-solid-default-bg-0)",
-        "--color-checkbox-fg": "var(--color-solid-default-fg-0)"
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.fg,
-        //   width: input.border.width,
-        // })},
-      },
+      // show checkmark when checked
       "&:checked + span > svg:first-child": {
         opacity: 1
       },
-      // focus
-      "&:not(:disabled):focus:focus-visible + span": {
-        // box-shadow: ${focusRingStyle({focusRing})},
-      },
-      // focus when checked - uses a different offset
-      "&:not(:disabled):focus:focus-visible&:checked + span": {
-        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
-      },
-      "&[data-error] + span": {
-        "--color-checkbox-bg": "var(--color-input-invalid-enabled-border)",
-        "--color-checkbox-border": "var(--color-input-invalid-enabled-bg)",
-        "--color-checkbox-fg": "var(--color-input-invalid-enabled-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.invalid.enabled.muted.bg,
-        // })},
-      },
-      "&[data-error]:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-invalid-enabled-muted-bg)",
-        "--color-checkbox-fg": "var(--color-input-invalid-enabled-bg)"
-      },
-      "&[data-error]:checked:not(:disabled):focus:focus-visible + span": {
-        "--color-checkbox-border": "var(--color-input-invalid-readOnly-muted-bg)"
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        //   focusRing: {width: 1, offset: 1},
-        // })},
-      },
-      "&:disabled + span": {
-        "--color-checkbox-bg": "var(--color-tinted-default-bg-1)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-0)",
-        "--color-checkbox-fg": "var(--color-tinted-default-border-2)"
+      // show minus when indeterminate
+      "&:indeterminate + span > svg:last-child": {
+        opacity: 1
       },
-      "&:checked:disabled + span": {
-        "--color-checkbox-bg": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-fg": "var(--color-tinted-default-bg-0)"
+      // checked, not disabled, not invalid
+      "&:checked:not(:disabled):not([data-invalid]) + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0]
+        }
       },
-      // '&:disabled:checked + span': {
-      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
-      // },
-      "&[data-read-only] + span": {
-        "--color-checkbox-bg": "var(--color-input-default-readOnly-bg)",
-        "--color-checkbox-border": "var(--color-input-default-readOnly-border)",
-        "--color-checkbox-fg": "var(--color-input-default-readOnly-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.readOnly.border,
-        // })},
-      },
-      "&[data-read-only]:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-default-readOnly-muted-bg)"
+      // not checked, not invalid, hovered
+      "&:not(:checked):not([data-invalid]):hover + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
       },
-      "&:indeterminate + span > svg:last-child": {
-        opacity: 1
+      // not checked, not disabled, invalid
+      "&:not(:checked):not(:disabled)[data-invalid] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[3],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[4]
+        }
+      },
+      // not checked, invalid, hovered
+      "&:not(:checked)[data-invalid]:hover + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[1]
+          // [varNames.color.input.checkbox.border]: vars.color.focusRing,
+        }
+      },
+      // checked, not disabled, invalid
+      "&:checked:not(:disabled)[data-invalid] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.critical.fg[0]
+        }
+      },
+      // not checked, not indeterminate, read only
+      "&:not(:checked):not(:indeterminate)[data-read-only] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      // checked, read only
+      "&:checked[data-read-only] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1]
+        }
+      },
+      // not checked, focused
+      "&:not(:checked):focus:focus-visible + span": {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing
+        }
+      },
+      // checked, focused
+      "&:checked:focus:focus-visible + span": {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing,
+          [varNames.color.input.checkbox.bg]: vars.color.focusRing,
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0]
+        }
+      },
+      // not checked, disabled
+      "&:not(:checked):disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2]
+        }
+      },
+      // checked, disabled
+      "&:checked:disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.bg[0]
+        }
+      },
+      // indeterminate, disabled
+      "&:indeterminate:disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2]
+        }
       }
     }
   }
@@ -3292,25 +3196,21 @@ const primitive$h = {
   }
 }, primitive$g = {
   ".code": {
-    "--font-weight-regular": "var(--font-code-weight-regular)",
-    "--font-weight-medium": "var(--font-code-weight-medium)",
-    "--font-weight-semibold": "var(--font-code-weight-semibold)",
-    "--font-weight-bold": "var(--font-code-weight-bold)",
-    "--font-family": "var(--font-code-family)",
-    "--font-feature-settings": "var(--font-code-feature-settings)",
-    color: "var(--color-code-fg)",
-    "@nest": {
+    vars: {
+      [varNames.font.weight.regular]: vars.font.code.weight.regular,
+      [varNames.font.weight.medium]: vars.font.code.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.code.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.code.weight.bold,
+      [varNames.font.family]: vars.font.code.family,
+      [varNames.font.featureSettings]: vars.font.code.featureSettings
+    },
+    color: vars.color.code.fg,
+    nest: {
       "& > code": {
         fontFamily: "inherit"
       },
-      // & code {
-      //   font-family: inherit;
-      //   &.refractor .token {
-      //     ${codeSyntaxHighlightingStyle}
-      //   }
-      // }
       "& a": {
-        color: "var(--color-link-fg)",
+        color: vars.color.link.fg,
         textDecoration: "none",
         borderRadius: "1px"
       },
@@ -3325,16 +3225,19 @@ const primitive$h = {
     }
   }
 };
-for (const size of FONT_CODE_SIZE)
+for (const size of FONT_CODE_SIZE) {
+  const v = vars.font.code.sizes[size];
   _responsiveRule(primitive$g, `code-${size}`, {
-    "--font-size": `var(--font-code-${size}-size)`,
-    "--font-line-height": `var(--font-code-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-code-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-code-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-code-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-code-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight
+    }
   });
+}
 const codeStyle = {
   layers: {
     primitive: primitive$g
@@ -3350,37 +3253,44 @@ const codeStyle = {
   }
 }, primitive$e = {
   ".heading": {
-    "--font-weight-regular": "var(--font-heading-weight-regular)",
-    "--font-weight-medium": "var(--font-heading-weight-medium)",
-    "--font-weight-semibold": "var(--font-heading-weight-semibold)",
-    "--font-weight-bold": "var(--font-heading-weight-bold)",
-    "--font-family": "var(--font-heading-family)",
-    "--font-feature-settings": "var(--font-heading-feature-settings)",
-    color: "var(--color-fg)",
-    "@nest": {
+    vars: {
+      [varNames.font.weight.regular]: vars.font.heading.weight.regular,
+      [varNames.font.weight.medium]: vars.font.heading.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.heading.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.heading.weight.bold,
+      [varNames.font.family]: vars.font.heading.family,
+      [varNames.font.featureSettings]: vars.font.heading.featureSettings
+    },
+    color: vars.color.fg,
+    nest: {
       "& a": {
-        color: "var(--color-link-fg)",
+        color: vars.color.link.fg,
         textDecoration: "none"
+      },
+      "& a:hover": {
+        color: "inherit"
       }
     }
   },
-  // '.heading-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
   ".heading-muted": {
-    "--color-fg": "var(--color-tinted-default-fg-4)"
+    vars: {
+      [varNames.color.fg]: vars.color.muted.fg
+    }
   }
 };
-for (const size of FONT_HEADING_SIZE)
+for (const size of FONT_HEADING_SIZE) {
+  const v = vars.font.heading.sizes[size];
   _responsiveRule(primitive$e, `heading-${size}`, {
-    "--font-size": `var(--font-heading-${size}-size)`,
-    "--font-line-height": `var(--font-heading-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-heading-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-heading-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-heading-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-heading-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight
+    }
   });
+}
 const headingStyle = {
   layers: {
     primitive: primitive$e
@@ -3391,7 +3301,7 @@ const headingStyle = {
     backgroundColor: vars.color.muted.bg,
     font: "inherit",
     verticalAlign: "top",
-    "@nest": {
+    nest: {
       "&:not([hidden])": {
         display: "inline-block"
       }
@@ -3403,38 +3313,40 @@ const headingStyle = {
   }
 }, primitive$c = {
   ".label": {
-    "--font-weight-regular": "var(--font-label-weight-regular)",
-    "--font-weight-medium": "var(--font-label-weight-medium)",
-    "--font-weight-semibold": "var(--font-label-weight-semibold)",
-    "--font-weight-bold": "var(--font-label-weight-bold)",
-    "--font-family": "var(--font-label-family)",
-    "--font-feature-settings": "var(--font-label-feature-settings)",
-    color: "var(--color-fg)",
+    vars: {
+      [varNames.font.weight.regular]: vars.font.label.weight.regular,
+      [varNames.font.weight.medium]: vars.font.label.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.label.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.label.weight.bold,
+      [varNames.font.family]: vars.font.label.family,
+      [varNames.font.featureSettings]: vars.font.label.featureSettings
+    },
+    color: vars.color.fg,
     textTransform: "uppercase",
-    "@nest": {
+    nest: {
       "& a": {
-        color: "var(--color-link-fg)",
+        color: vars.color.link.fg,
         textDecoration: "none"
       }
     }
   },
-  ".label-accent": {
-    "--color-fg": "var(--color-accent-fg)"
-  },
   ".label-muted": {
-    "--color-fg": "var(--color-muted-fg)"
+    [varNames.color.fg]: vars.color.muted.fg
   }
 };
-for (const size of FONT_LABEL_SIZE)
+for (const size of FONT_LABEL_SIZE) {
+  const k = varNames.font, v = vars.font.label.sizes[size];
   _responsiveRule(primitive$c, `label-${size}`, {
-    "--font-size": `var(--font-label-${size}-size)`,
-    "--font-line-height": `var(--font-label-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-label-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-label-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-label-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-label-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
+    vars: {
+      [k.fontSize]: v.fontSize,
+      [k.lineHeight]: v.lineHeight,
+      [k.letterSpacing]: v.letterSpacing,
+      [k.iconSize]: v.iconSize,
+      [k.ascenderHeight]: v.ascenderHeight,
+      [k.descenderHeight]: v.descenderHeight
+    }
   });
+}
 const labelStyle = {
   layers: {
     primitive: primitive$c
@@ -3446,7 +3358,7 @@ const labelStyle = {
 }, primitive$a = {
   ".radio": {
     position: "relative",
-    "@nest": {
+    nest: {
       "&:not([hidden])": {
         display: "inline-block"
       },
@@ -3465,86 +3377,48 @@ const labelStyle = {
         borderRadius: "9999px",
         border: "none"
       },
-      /* enabled */
+      // enabled
       "& > input + span": {
         display: "block",
         position: "relative",
-        width: "var(--input-radio-size)",
-        height: "var(--input-radio-size)",
+        width: vars.input.radio.size,
+        height: vars.input.radio.size,
         borderRadius: "9999px",
-        backgroundColor: "var(--color-input-bg)",
-        boxShadow: "inset 0 0 0 1px var(--color-input-border)",
-        // border-radius: ${rem(input.radio.size / 2)};
-        // background: ${color.input.default.enabled.bg};
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-        "--color-input-fg": "var(--color-tinted-default-fg-0)",
-        "--color-input-bg": "var(--color-tinted-default-bg-0)",
-        "--color-input-border": "var(--color-tinted-default-border-1)"
+        backgroundColor: vars.color.input.radio.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.radio.border}`,
+        vars: {
+          [varNames.color.input.radio.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[1]
+        }
       },
       "& > input + span::after": {
         content: '""',
         position: "absolute",
-        top: "calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)",
-        left: "calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)",
-        width: "var(--input-radio-mark-size)",
-        height: "var(--input-radio-mark-size)",
-        backgroundColor: "var(--color-input-fg)",
+        top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        width: vars.input.radio.markSize,
+        height: vars.input.radio.markSize,
+        backgroundColor: vars.color.input.radio.fg,
         borderRadius: "9999px",
         opacity: 0
       },
-      /* hovered */
+      // hovered
       "& > input:not(:disabled):hover + span": {
-        "--color-input-bg": "var(--color-tinted-default-bg-1)",
-        "--color-input-border": "var(--color-tinted-default-border-2)"
+        vars: {
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2]
+        }
       },
-      /* focused */
+      // focused
       "& > input:not(:disabled):focus + span": {
-        "--color-input-border": "var(--color-tinted-default-border-2)"
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.default.enabled.border},
-        //   focusRing: input.radio.focusRing,
-        // })};
-      },
-      "& > input:not(:disabled):focus:not(:focus-visible) + span": {
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
+        vars: {
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2]
+        }
       },
       "& > input:checked + span::after": {
         opacity: 1
       }
-      //   /* customValidity */
-      //   &[data-error] + span {
-      //     background-color: ${color.input.invalid.enabled.border};
-      //     box-shadow: ${focusRingBorderStyle({
-      //       width: input.border.width,
-      //       color: color.input.invalid.enabled.muted.bg,
-      //     })};
-      //     &::after {
-      //       background: ${color.input.invalid.enabled.muted.bg};
-      //     }
-      //   }
-      //   /* read only */
-      //   &[data-read-only] + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      //     background: ${color.input.default.readOnly.bg};
-      //     &::after {
-      //       background: ${color.input.default.readOnly.border};
-      //     }
-      //   }
-      //   /* disabled */
-      //   &:not([data-read-only]):disabled + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      //     background: ${color.input.default.disabled.bg};
-      //     &::after {
-      //       background: ${color.input.default.disabled.border};
-      //     }
-      //   }
-      // `
     }
   }
 }, radioStyle = {
@@ -3553,14 +3427,14 @@ const labelStyle = {
   }
 }, primitive$9 = {
   ".select": {
-    "@nest": {
+    nest: {
       "& > select:disabled": {
         opacity: 1
       }
     }
   },
   ".select-presentation": {
-    "@nest": {
+    nest: {
       "& > span": {
         // place icon to the right
         position: "absolute",
@@ -3618,60 +3492,69 @@ const labelStyle = {
     zIndex: 1
   },
   ".switch-presentation": {
-    "--switch-bg-color": "var(--color-tinted-default-border-2)",
-    "--switch-fg-color": "var(--color-tinted-default-bg-0)",
-    "--switch-thumb-offset": "0",
-    "--switch-thumb-size": "calc(var(--input-switch-height) - var(--input-switch-padding) * 2)",
+    vars: {
+      [varNames.color.input.switch.bg]: vars.color.tinted.default.border[2],
+      [varNames.color.input.switch.fg]: vars.color.tinted.default.bg[0],
+      [varNames.input.switch.thumb.offset]: "0",
+      [varNames.input.switch.thumb.size]: `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`
+    },
     display: "block",
     position: "relative",
-    width: "var(--input-switch-width)",
-    height: "var(--input-switch-height)",
-    borderRadius: "calc(var(--input-switch-height) / 2)",
-    outlineOffset: "var(--input-switch-focus-ring-offset)",
+    width: vars.input.switch.width,
+    height: vars.input.switch.height,
+    borderRadius: `calc(${vars.input.switch.height} / 2)`,
+    outlineOffset: vars.input.switch.focusRing.offset,
     // Make sure it’s not possible to interact with the presentation element
     pointerEvents: "none",
-    "@nest": {
-      ".switch-element:focus + &": {
-        outline: "var(--input-switch-focus-ring-width) solid var(--color-focus-ring)"
-      },
-      "input:focus:not(:focus-visible) + &": {
-        outline: "none"
+    nest: {
+      "input:not(:checked):hover + &": {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.tinted.default.border[4]
+        }
       },
       "input:checked + &": {
-        "--switch-bg-color": "var(--color-solid-default-bg-0)",
-        "--switch-fg-color": "var(--color-solid-default-fg-0)"
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.switch.fg]: vars.color.solid.default.fg[0],
+          [varNames.input.switch.thumb.offset]: `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`
+        }
       },
-      ".switch-element:checked + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))"
+      "[data-indeterminate] > input + &": {
+        vars: {
+          [varNames.input.switch.thumb.offset]: `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`
+        }
+      },
+      "input:focus + &": {
+        outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`
       },
-      "[data-indeterminate] > .switch-element + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))"
+      "input:focus:not(:focus-visible) + &": {
+        outline: "none"
       }
     }
   },
   ".switch-track": {
     display: "block",
-    backgroundColor: "var(--switch-bg-color)",
+    backgroundColor: vars.color.input.switch.bg,
     position: "absolute",
     left: 0,
     top: 0,
     right: 0,
     bottom: 0,
     borderRadius: "inherit",
-    transition: "box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
+    transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`
   },
   ".switch-thumb": {
     display: "block",
     position: "absolute",
-    left: "var(--input-switch-padding)",
-    top: "var(--input-switch-padding)",
-    width: "var(--switch-thumb-size)",
-    height: "var(--switch-thumb-size)",
-    backgroundColor: "var(--switch-fg-color)",
+    left: vars.input.switch.padding,
+    top: vars.input.switch.padding,
+    width: vars.input.switch.thumb.size,
+    height: vars.input.switch.thumb.size,
+    backgroundColor: vars.color.input.switch.fg,
     borderRadius: "9999px",
-    boxShadow: "0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)",
-    transform: "translate3d(var(--switch-thumb-offset), 0, 0)",
-    transition: "transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
+    boxShadow: `0 0 0 0.5px ${vars.color.shadow.umbra}, 0 0.5px 2px 0.5px ${vars.color.shadow.umbra}`,
+    transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
+    transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`
   }
 }, switchStyle = {
   layers: {
@@ -3679,46 +3562,51 @@ const labelStyle = {
   }
 }, primitive$5 = {
   ".text": {
-    "--font-weight-regular": "var(--font-text-weight-regular)",
-    "--font-weight-medium": "var(--font-text-weight-medium)",
-    "--font-weight-semibold": "var(--font-text-weight-semibold)",
-    "--font-weight-bold": "var(--font-text-weight-bold)",
-    "--font-family": "var(--font-text-family)",
-    "--font-feature-settings": "var(--font-text-feature-settings)",
-    color: "var(--color-fg)",
-    "@nest": {
+    vars: {
+      [varNames.font.family]: vars.font.text.family,
+      [varNames.font.featureSettings]: vars.font.text.featureSettings,
+      [varNames.font.weight.regular]: vars.font.text.weight.regular,
+      [varNames.font.weight.medium]: vars.font.text.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.text.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.text.weight.bold
+    },
+    color: vars.color.fg,
+    nest: {
       "& a": {
-        color: "var(--color-link-fg)",
+        color: vars.color.link.fg,
         textDecoration: "none"
       },
       "& a:hover": {
-        color: "var(--color-fg)"
+        color: vars.color.fg
       },
       "& code": {
         fontFamily: vars.font.code.family,
-        color: "var(--color-code-fg)",
-        backgroundColor: "var(--color-muted-bg)",
+        color: vars.color.code.fg,
+        backgroundColor: vars.color.code.bg,
         borderRadius: vars.radius[2]
       },
       "& svg": {
-        color: "var(--color-muted-fg)"
+        color: vars.color.muted.fg
       }
     }
   },
   ".text-muted": {
-    color: "var(--color-muted-fg)"
+    color: vars.color.muted.fg
   }
 };
-for (const size of FONT_TEXT_SIZE)
+for (const size of FONT_TEXT_SIZE) {
+  const v = vars.font.text.sizes[size];
   _responsiveRule(primitive$5, `text-${size}`, {
-    "--font-size": `var(--font-text-${size}-size)`,
-    "--font-line-height": `var(--font-text-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-text-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-text-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-text-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-text-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight
+    }
   });
+}
 const textStyle = {
   layers: {
     primitive: primitive$5
@@ -3733,20 +3621,22 @@ const textStyle = {
   }
 }, primitive$3 = {
   ".text-input": {
-    "--font-family": vars.font.text.family,
-    "@nest": {
+    vars: {
+      [varNames.font.family]: vars.font.text.family
+    },
+    nest: {
       "& > span": {
         borderRadius: "inherit"
       }
     }
   },
   ".text-input-prefix": {
-    borderTop: "1px solid var(--color-border)",
-    borderLeft: "1px solid var(--color-border)",
-    borderBottom: "1px solid var(--color-border)",
+    borderTop: `1px solid ${vars.color.border}`,
+    borderLeft: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
     borderTopRightRadius: "0 !important",
     borderBottomRightRadius: "0 !important",
-    "@nest": {
+    nest: {
       "& > span": {
         display: "block",
         margin: "-1px"
@@ -3754,12 +3644,12 @@ const textStyle = {
     }
   },
   ".text-input-suffix": {
-    borderTop: "1px solid var(--color-border)",
-    borderRight: "1px solid var(--color-border)",
-    borderBottom: "1px solid var(--color-border)",
+    borderTop: `1px solid ${vars.color.border}`,
+    borderRight: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
     borderTopLeftRadius: "0 !important",
     borderBottomLeftRadius: "0 !important",
-    "@nest": {
+    nest: {
       "& > span": {
         display: "block",
         margin: "-1px"
@@ -3774,7 +3664,7 @@ const textStyle = {
 }, primitive$2 = {
   ".token": {
     _prefix: !1,
-    "@nest": {
+    nest: {
       "&.atrule": {
         color: vars.color.code.token.atrule
       },
@@ -3898,10 +3788,11 @@ const textStyle = {
   },
   ".tooltip-card": {
     willChange: "transform",
-    "@nest": {
+    nest: {
       "&[data-animate] > *": {
+        // TODO
         // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        opacity: "var(--motion-content-opacity, 1)",
+        // opacity: `var(--motion-content-opacity, 1)`,
         willChange: "opacity"
       }
     }
@@ -3937,6 +3828,7 @@ const textStyle = {
   },
   // aspects
   borderStyle,
+  boxSizingStyle,
   displayStyle,
   flexStyle,
   flexAlignStyle,
@@ -4012,323 +3904,28 @@ const textStyle = {
 function _compileSystem() {
   return _compileStyle(_systemStyle);
 }
-const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
-function _compileTheme_v3(theme) {
+function _compileTheme() {
   return _compileStyle({
     layers: {
       theme: {
-        ":root": compileThemeProperties(theme)
+        ":root": properties
       }
     }
   });
 }
-function compileThemeProperties(theme) {
-  return {
-    ...buildAvatarThemeProperties(theme),
-    ...buildButtonThemeProperties(theme),
-    // card
-    [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
-    ...buildColorThemeProperties(theme),
-    ...buildContainerThemeProperties(theme),
-    ...buildFontCodeThemeProperties(theme),
-    ...buildFontHeadingThemeProperties(theme),
-    ...buildFontLabelThemeProperties(theme),
-    ...buildFontTextThemeProperties(theme),
-    ...buildInputThemeProperties(theme),
-    ...buildRadiusThemeProperties(theme),
-    ...buildShadowThemeProperties(theme),
-    ...buildSpaceThemeProperties(theme)
-  };
-}
-function buildAvatarThemeProperties(theme) {
-  return {
-    [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
-    [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
-    [varNames.avatar.sizes[0].distance]: rem(theme.avatar.sizes[0].distance),
-    [varNames.avatar.sizes[0].size]: rem(theme.avatar.sizes[0].size),
-    [varNames.avatar.sizes[1].distance]: rem(theme.avatar.sizes[1].distance),
-    [varNames.avatar.sizes[1].size]: rem(theme.avatar.sizes[1].size),
-    [varNames.avatar.sizes[2].distance]: rem(theme.avatar.sizes[2].distance),
-    [varNames.avatar.sizes[2].size]: rem(theme.avatar.sizes[2].size),
-    [varNames.avatar.sizes[3].distance]: rem(theme.avatar.sizes[3].distance),
-    [varNames.avatar.sizes[3].size]: rem(theme.avatar.sizes[3].size)
-  };
-}
-function buildButtonThemeProperties(theme) {
-  return {
-    [varNames.button.border.width]: px(theme.button.border.width),
-    [varNames.button.focusRing.offset]: px(theme.button.focusRing.offset),
-    [varNames.button.focusRing.width]: px(theme.button.focusRing.width)
-  };
-}
-function buildContainerThemeProperties(theme) {
-  return {
-    [varNames.container[0]]: rem(theme.container[0]),
-    [varNames.container[1]]: rem(theme.container[1]),
-    [varNames.container[2]]: rem(theme.container[2]),
-    [varNames.container[3]]: rem(theme.container[3]),
-    [varNames.container[4]]: rem(theme.container[4]),
-    [varNames.container[5]]: rem(theme.container[5])
-  };
-}
-function buildFontCodeThemeProperties(theme) {
-  const v = varNames.font.code, t = theme.font.code, props = {
-    [v.family]: t.family,
-    [v.featureSettings]: t.featureSettings || "normal",
-    [v.weights.regular]: t.weights.regular,
-    [v.weights.medium]: t.weights.medium,
-    [v.weights.semibold]: t.weights.semibold,
-    [v.weights.bold]: t.weights.bold
-  };
-  for (const size of FONT_CODE_SIZE) {
-    const _v = varNames.font.code.sizes[size], _t = theme.font.code.sizes[size];
-    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
-  }
-  return props;
-}
-function buildFontHeadingThemeProperties(theme) {
-  const v = varNames.font.heading, t = theme.font.heading, props = {
-    [v.family]: t.family,
-    [v.featureSettings]: t.featureSettings,
-    [v.weights.regular]: t.weights.regular,
-    [v.weights.medium]: t.weights.medium,
-    [v.weights.semibold]: t.weights.semibold,
-    [v.weights.bold]: t.weights.bold
-  };
-  for (const size of FONT_HEADING_SIZE) {
-    const _v = v.sizes[size], _t = t.sizes[size];
-    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
-  }
-  return props;
-}
-function buildFontLabelThemeProperties(theme) {
-  const v = varNames.font.label, t = theme.font.label, props = {
-    [v.family]: t.family,
-    [v.featureSettings]: t.featureSettings,
-    [v.weights.regular]: t.weights.regular,
-    [v.weights.medium]: t.weights.medium,
-    [v.weights.semibold]: t.weights.semibold,
-    [v.weights.bold]: t.weights.bold
-  };
-  for (const size of FONT_LABEL_SIZE) {
-    const _v = v.sizes[size], _t = t.sizes[size];
-    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
-  }
-  return props;
-}
-function buildFontTextThemeProperties(theme) {
-  const v = varNames.font.text, t = theme.font.text, props = {
-    [v.family]: t.family,
-    [v.featureSettings]: t.featureSettings,
-    [v.weights.regular]: t.weights.regular,
-    [v.weights.medium]: t.weights.medium,
-    [v.weights.semibold]: t.weights.semibold,
-    [v.weights.bold]: t.weights.bold
-  };
-  for (const size of FONT_TEXT_SIZE) {
-    const _v = v.sizes[size], _t = t.sizes[size];
-    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
-  }
-  return props;
-}
-function buildInputThemeProperties(theme) {
-  return {
-    [varNames.input.border.width]: px(theme.input.border.width),
-    [varNames.input.checkbox.focusRing.offset]: px(theme.input.checkbox.focusRing.offset),
-    [varNames.input.checkbox.focusRing.width]: px(theme.input.checkbox.focusRing.width),
-    [varNames.input.checkbox.size]: rem(theme.input.checkbox.size),
-    [varNames.input.radio.focusRing.offset]: px(theme.input.radio.focusRing.offset),
-    [varNames.input.radio.focusRing.width]: px(theme.input.radio.focusRing.width),
-    [varNames.input.radio.markSize]: rem(theme.input.radio.markSize),
-    [varNames.input.radio.size]: rem(theme.input.radio.size),
-    [varNames.input.select.focusRing.offset]: px(theme.input.select.focusRing.offset),
-    [varNames.input.select.focusRing.width]: px(theme.input.select.focusRing.width),
-    [varNames.input.switch.focusRing.offset]: px(theme.input.switch.focusRing.offset),
-    [varNames.input.switch.focusRing.width]: px(theme.input.switch.focusRing.width),
-    [varNames.input.switch.height]: rem(theme.input.switch.height),
-    [varNames.input.switch.padding]: rem(theme.input.switch.padding),
-    [varNames.input.switch.transitionDurationMs]: `${theme.input.switch.transitionDurationMs}ms`,
-    [varNames.input.switch.transitionTimingFunction]: theme.input.switch.transitionTimingFunction,
-    [varNames.input.switch.width]: rem(theme.input.switch.width),
-    [varNames.input.text.focusRing.offset]: px(theme.input.text.focusRing.offset),
-    [varNames.input.text.focusRing.width]: px(theme.input.text.focusRing.width)
-  };
-}
-function buildRadiusThemeProperties(theme) {
-  return {
-    [varNames.radius[0]]: px(theme.radius[0]),
-    [varNames.radius[1]]: px(theme.radius[1]),
-    [varNames.radius[2]]: px(theme.radius[2]),
-    [varNames.radius[3]]: px(theme.radius[3]),
-    [varNames.radius[4]]: px(theme.radius[4]),
-    [varNames.radius[5]]: px(theme.radius[5]),
-    [varNames.radius[6]]: px(theme.radius[6])
-  };
-}
-function buildShadowThemeProperties(theme) {
-  return {
-    [varNames.shadow[0].umbra]: toBoxShadow(theme.shadow[0]?.umbra),
-    [varNames.shadow[0].penumbra]: toBoxShadow(theme.shadow[0]?.penumbra),
-    [varNames.shadow[0].ambient]: toBoxShadow(theme.shadow[0]?.ambient),
-    [varNames.shadow[1].umbra]: toBoxShadow(theme.shadow[1]?.umbra),
-    [varNames.shadow[1].penumbra]: toBoxShadow(theme.shadow[1]?.penumbra),
-    [varNames.shadow[1].ambient]: toBoxShadow(theme.shadow[1]?.ambient),
-    [varNames.shadow[2].umbra]: toBoxShadow(theme.shadow[2]?.umbra),
-    [varNames.shadow[2].penumbra]: toBoxShadow(theme.shadow[2]?.penumbra),
-    [varNames.shadow[2].ambient]: toBoxShadow(theme.shadow[2]?.ambient),
-    [varNames.shadow[3].umbra]: toBoxShadow(theme.shadow[3]?.umbra),
-    [varNames.shadow[3].penumbra]: toBoxShadow(theme.shadow[3]?.penumbra),
-    [varNames.shadow[3].ambient]: toBoxShadow(theme.shadow[3]?.ambient),
-    [varNames.shadow[4].umbra]: toBoxShadow(theme.shadow[4]?.umbra),
-    [varNames.shadow[4].penumbra]: toBoxShadow(theme.shadow[4]?.penumbra),
-    [varNames.shadow[4].ambient]: toBoxShadow(theme.shadow[4]?.ambient),
-    [varNames.shadow[5].umbra]: toBoxShadow(theme.shadow[5]?.umbra),
-    [varNames.shadow[5].penumbra]: toBoxShadow(theme.shadow[5]?.penumbra),
-    [varNames.shadow[5].ambient]: toBoxShadow(theme.shadow[5]?.ambient)
-  };
-}
-function buildSpaceThemeProperties(theme) {
-  return {
-    [varNames.space[0]]: px(theme.space[0]),
-    [varNames.space[0.5]]: px(theme.space[1] / 2),
-    [varNames.space[1]]: px(theme.space[1]),
-    [varNames.space[2]]: px(theme.space[2]),
-    [varNames.space[3]]: px(theme.space[3]),
-    [varNames.space[4]]: px(theme.space[4]),
-    [varNames.space[5]]: px(theme.space[5]),
-    [varNames.space[6]]: px(theme.space[6]),
-    [varNames.space[7]]: px(theme.space[7]),
-    [varNames.space[8]]: px(theme.space[8]),
-    [varNames.space[9]]: px(theme.space[9])
-  };
-}
-function buildColorThemeProperties(theme) {
-  const props = {};
-  for (const scheme of THEME_COLOR_SCHEMES)
-    for (const cardTone of THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme, {
-        scheme,
-        cardTone
-      })), Object.assign(props, buildColorCardThemeProperties(theme, {
-        scheme,
-        cardTone
-      }));
-      for (const colorVariant of THEME_COLOR_VARIANTS)
-        for (const elementTone of THEME_COLOR_STATE_TONES) {
-          const v = varNames.color[scheme][cardTone][colorVariant][elementTone], t = theme._tokens.color[cardTone].variant[colorVariant][elementTone], context = {
-            bgValue: "transparent",
-            bgVar: v.bg[0],
-            hue: t._hue,
-            scheme
-          };
-          Object.assign(props, {
-            [v.bg[0]]: renderColor(t.bg[0], context),
-            [v.bg[1]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 25%)`,
-            [v.bg[2]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 50%)`,
-            [v.bg[3]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 75%)`,
-            [v.bg[4]]: renderColor(t.bg[4], context),
-            [v.border[0]]: renderColor(t.border[0], context),
-            [v.border[1]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 25%)`,
-            [v.border[2]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 50%)`,
-            [v.border[3]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 75%)`,
-            [v.border[4]]: renderColor(t.border[4], context),
-            [v.fg[0]]: renderColor(t.fg[0], context),
-            [v.fg[1]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 25%)`,
-            [v.fg[2]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 50%)`,
-            [v.fg[3]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 75%)`,
-            [v.fg[4]]: renderColor(t.fg[4], context)
-          });
-        }
-    }
-  return props;
+function _getClassNames(...classNames) {
+  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ").filter(Boolean);
 }
-function buildColorAvatarThemeProperties(theme, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], props = {};
-  for (const hue of HUES) {
-    const context = {
-      bgValue: "transparent",
-      bgVar: varNames.color.bg,
-      hue: t.avatar[hue]._hue ?? hue,
-      scheme
-    };
-    Object.assign(props, {
-      [v.avatar[hue].bg]: renderColor(t.avatar[hue].bg, context),
-      [v.avatar[hue].fg]: renderColor(t.avatar[hue].fg, context)
-    });
-  }
-  return props;
+function _composeClassNames(...classNames) {
+  return unique(_getClassNames(...classNames)).join(" ") || void 0;
 }
-function buildColorCardThemeProperties(theme, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], context = {
-    bgValue: "transparent",
-    bgVar: varNames.color.bg,
-    hue: t._hue,
-    scheme
-  };
-  return {
-    // backdrop
-    [v.backdrop]: renderColor(t.backdrop, context),
-    // code
-    [v.code.bg]: renderColor(t.code.bg, context),
-    [v.code.fg]: renderColor(t.code.fg, context),
-    // code / token
-    [v.code.token.atrule]: renderColor(t.code.token.atrule, context),
-    [v.code.token.attrName]: renderColor(t.code.token.attrName, context),
-    [v.code.token.attrValue]: renderColor(t.code.token.attrValue, context),
-    [v.code.token.attribute]: renderColor(t.code.token.attribute, context),
-    [v.code.token.boolean]: renderColor(t.code.token.boolean, context),
-    [v.code.token.builtin]: renderColor(t.code.token.builtin, context),
-    [v.code.token.cdata]: renderColor(t.code.token.cdata, context),
-    [v.code.token.char]: renderColor(t.code.token.char, context),
-    [v.code.token.className]: renderColor(t.code.token.className, context),
-    [v.code.token.class]: renderColor(t.code.token.class, context),
-    [v.code.token.comment]: renderColor(t.code.token.comment, context),
-    [v.code.token.constant]: renderColor(t.code.token.constant, context),
-    [v.code.token.deleted]: renderColor(t.code.token.deleted, context),
-    [v.code.token.doctype]: renderColor(t.code.token.doctype, context),
-    [v.code.token.entity]: renderColor(t.code.token.entity, context),
-    [v.code.token.function]: renderColor(t.code.token.function, context),
-    [v.code.token.hexcode]: renderColor(t.code.token.hexcode, context),
-    [v.code.token.id]: renderColor(t.code.token.id, context),
-    [v.code.token.important]: renderColor(t.code.token.important, context),
-    [v.code.token.inserted]: renderColor(t.code.token.inserted, context),
-    [v.code.token.keyword]: renderColor(t.code.token.keyword, context),
-    [v.code.token.number]: renderColor(t.code.token.number, context),
-    [v.code.token.operator]: renderColor(t.code.token.operator, context),
-    [v.code.token.prolog]: renderColor(t.code.token.prolog, context),
-    [v.code.token.property]: renderColor(t.code.token.property, context),
-    [v.code.token.pseudoClass]: renderColor(t.code.token.pseudoClass, context),
-    [v.code.token.pseudoElement]: renderColor(t.code.token.pseudoElement, context),
-    [v.code.token.punctuation]: renderColor(t.code.token.punctuation, context),
-    [v.code.token.regex]: renderColor(t.code.token.regex, context),
-    [v.code.token.selector]: renderColor(t.code.token.selector, context),
-    [v.code.token.string]: renderColor(t.code.token.string, context),
-    [v.code.token.symbol]: renderColor(t.code.token.symbol, context),
-    [v.code.token.tag]: renderColor(t.code.token.tag, context),
-    [v.code.token.unit]: renderColor(t.code.token.unit, context),
-    [v.code.token.url]: renderColor(t.code.token.url, context),
-    [v.code.token.variable]: renderColor(t.code.token.variable, context),
-    // focus ring
-    [v.focusRing]: renderColor(t.focusRing, context),
-    // link
-    [v.link.fg]: renderColor(t.link.fg, context),
-    // shadow
-    [v.shadow.outline]: renderColor(t.shadow.outline, context),
-    [v.shadow.umbra]: renderColor(t.shadow.umbra, context),
-    [v.shadow.penumbra]: renderColor(t.shadow.penumbra, context),
-    [v.shadow.ambient]: renderColor(t.shadow.ambient, context)
-  };
+function unique(array) {
+  return Array.from(new Set(array));
 }
-function _compileTheme(theme) {
-  return theme.v3 ? _compileTheme_v3(theme.v3) : theme.v2 ? `/* v2 - not supported */
-` : `/* v0 - not supported */
-`;
+const p = PREFIX === "__PREFIX__" ? "s-" : PREFIX;
+function _scopeClassName(className) {
+  if (className !== void 0)
+    return `${p}${className.trim()}`;
 }
 function _resp(prefix, prop) {
   if (!(prop === void 0 || prop === !1))
@@ -4338,335 +3935,310 @@ function _resp(prefix, prop) {
       return index === 0 ? className : `${index}:${className}`;
     }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
 }
-function _getClassNames(...classNames) {
-  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
-}
-function composeClassNames(...classNames) {
-  return unique(_getClassNames(...classNames)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
+function _scopeClassNames(...classNames) {
+  return _getClassNames(...classNames).map(_scopeClassName).join(" ") || void 0;
 }
 function border(props) {
-  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
+  return _scopeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
+}
+function boxSizing(props) {
+  return _scopeClassNames(_resp("box", props.boxSizing));
 }
 function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
+  return _scopeClassNames(_resp(void 0, props.display));
 }
 function flex(props) {
-  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
+  return _scopeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
 }
 function flexItem(props) {
-  return composeClassNames(_resp("f", props.flex));
+  return _scopeClassNames(_resp("f", props.flex));
 }
 function font(props) {
-  return composeClassNames("font", props.weight && `font-${props.weight}`);
+  return _scopeClassNames("font", props.weight && `font-${props.weight}`);
 }
 function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
+  return _scopeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
 }
 function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
+  return _scopeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
 }
 function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
+  return _scopeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
 }
 function height(props) {
-  return composeClassNames(_resp("h", props.height));
+  return _scopeClassNames(_resp("h", props.height));
 }
 function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
+  return _scopeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
 }
 function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
+  return _scopeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
 }
 function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
+  return _scopeClassNames(_resp("max-w", props.maxWidth) ?? "");
 }
 function minWidth(props) {
-  return _resp("min-w", props.minWidth) ?? "";
+  return _scopeClassNames(_resp("min-w", props.minWidth) ?? "");
 }
 function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+  return _scopeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
 }
 function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
+  return _scopeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
 }
 function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
+  return _scopeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
 }
 function position(props) {
-  return composeClassNames(_resp("position", props.position));
+  return _scopeClassNames(_resp("position", props.position));
 }
 function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
+  return _scopeClassNames(_resp("r", props.radius));
 }
 function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
+  return _scopeClassNames(_resp("shadow", props.shadow));
 }
 function textAlign(props) {
-  return composeClassNames(_resp("text-align", props.textAlign));
-}
-function scopeClassName(className) {
-  if (className !== void 0)
-    return `${PREFIX}${className.trim()}`;
-}
-function _comp(...classNames) {
-  return _getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
+  return _scopeClassNames(_resp("text-align", props.textAlign));
 }
 function textOverflow(props) {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
+  return _scopeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
 }
 function width(props) {
-  return _resp("w", props.width) ?? "";
+  return _scopeClassNames(_resp("w", props.width) ?? "");
 }
 function breadcrumbs() {
-  return _comp("breadcrumbs");
+  return _scopeClassNames("breadcrumbs");
 }
 function dialog() {
-  return _comp("dialog", inset({
+  return _composeClassNames(_scopeClassNames("dialog"), inset({
     inset: 0
   }));
 }
 function dialogContainer() {
-  return _comp("dialog-container");
+  return _scopeClassNames("dialog-container");
 }
 function dialogCardRoot() {
-  return _comp("dialog-card-root");
+  return _scopeClassNames("dialog-card-root");
 }
 function dialogLayout() {
-  return _comp("dialog-layout");
+  return _scopeClassNames("dialog-layout");
 }
 function dialogHeader() {
-  return _comp("dialog-header");
+  return _scopeClassNames("dialog-header");
 }
 function dialogContent() {
-  return _comp("dialog-content");
+  return _scopeClassNames("dialog-content");
 }
 function dialogFooter() {
-  return _comp("dialog-footer");
+  return _scopeClassNames("dialog-footer");
 }
 function menu() {
-  return _comp("menu");
+  return _scopeClassNames("menu");
 }
 function menuDivider() {
-  return _comp("menu-divider");
+  return _scopeClassNames("menu-divider");
 }
 function skeleton(props) {
-  return _comp("skeleton", radius(props));
+  return _composeClassNames(_scopeClassNames("skeleton"), radius(props));
 }
 function codeSkeleton(props) {
-  return _comp("font-skeleton", _resp("code-skeleton", props.size));
+  return _scopeClassNames("font-skeleton", _resp("code-skeleton", props.size));
 }
 function headingSkeleton(props) {
-  return _comp("font-skeleton", _resp("heading-skeleton", props.size));
+  return _scopeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
 }
 function labelSkeleton(props) {
-  return _comp("font-skeleton", _resp("label-skeleton", props.size));
+  return _scopeClassNames("font-skeleton", _resp("label-skeleton", props.size));
 }
 function textSkeleton(props) {
-  return _comp("font-skeleton", _resp("text-skeleton", props.size));
+  return _scopeClassNames("font-skeleton", _resp("text-skeleton", props.size));
 }
 function toastLayer() {
-  return _comp("toast-layer");
+  return _scopeClassNames("toast-layer");
 }
 function toast() {
-  return _comp("toast");
+  return _scopeClassNames("toast");
 }
 function toastLoadingBar() {
-  return _comp("toast-loading-bar");
+  return _scopeClassNames("toast-loading-bar");
 }
 function toastLoadingBarProgress() {
-  return _comp("toast-loading-bar-progress");
+  return _scopeClassNames("toast-loading-bar-progress");
 }
 function toastLoadingBarMask() {
-  return _comp("toast-loading-bar-mask");
+  return _scopeClassNames("toast-loading-bar-mask");
 }
 function treeItem() {
-  return _comp("tree-item");
+  return _scopeClassNames("tree-item");
 }
+const BREAKPOINTS = {
+  0: 0,
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400
+};
 function _arrow() {
-  return _comp("arrow");
+  return _scopeClassNames("arrow");
 }
 function _arrowStroke() {
-  return _comp("arrow-stroke");
+  return _scopeClassNames("arrow-stroke");
 }
 function _arrowStrokeMask() {
-  return _comp("arrow-stroke-mask");
+  return _scopeClassNames("arrow-stroke-mask");
 }
 function _arrowShape() {
-  return _comp("arrow-shape");
+  return _scopeClassNames("arrow-shape");
 }
 function _input(props) {
-  return _comp("input", props.border ? "input-b" : void 0, _resp("input", props.fontSize), _resp("input-p", props.padding), _resp("input-g", props.gap), radius(props), width(props));
+  return _composeClassNames(_scopeClassNames("input", props.border ? "input-b" : void 0, _resp("input", props.fontSize), _resp("input-p", props.padding), _resp("input-g", props.gap)), radius(props), width(props));
 }
 function _inputElement() {
-  return _comp("input-element");
+  return _scopeClassNames("input-element");
 }
 function _inputPresentation() {
-  return _comp("input-presentation");
+  return _scopeClassNames("input-presentation");
 }
 function _selectable(props) {
-  return _comp("selectable", props.tone ?? "default", radius(props));
+  return _composeClassNames(_scopeClassNames("selectable", props.tone ?? "default"), radius(props));
 }
 function avatar(props) {
-  return _comp("avatar", props.color || "gray", _resp("avatar", props.size));
+  return _scopeClassNames("avatar", props.color || "gray", _resp("avatar", props.size));
 }
 function avatarArrow() {
-  return _comp("avatar-arrow");
+  return _scopeClassNames("avatar-arrow");
 }
 function avatarInitials() {
-  return _comp("avatar-initials");
+  return _scopeClassNames("avatar-initials");
 }
 function avatarImage() {
-  return _comp("avatar-image");
+  return _scopeClassNames("avatar-image");
 }
 function avatarCounter(props) {
-  return _comp("avatar-counter", _resp("avatar", props.size));
+  return _scopeClassNames("avatar-counter", _resp("avatar", props.size));
 }
 function avatarStack(props) {
-  return _comp("avatar-stack", _resp("avatar", props.size));
+  return _scopeClassNames("avatar-stack", _resp("avatar", props.size));
 }
 function badge(props) {
-  return _comp("badge", props.tone && `badge-${props.tone}`, radius(props));
+  return _composeClassNames(_scopeClassNames("badge", props.tone && `badge-${props.tone}`), radius(props));
 }
 function box(props) {
-  return _comp(
-    "box",
-    props.muted && "muted",
-    // todo: consider this naming
-    _resp("box", props.sizing),
-    border(props),
-    display(props),
-    height(props),
-    flex(props),
-    flexItem(props),
-    grid(props),
-    gridItem(props),
-    gap(props),
-    inset(props),
-    margin(props),
-    maxWidth(props),
-    minWidth(props),
-    props.outline && `outline-${props.outline}`,
-    overflow(props),
-    padding(props),
-    pointerEvents(props),
-    position(props),
-    radius(props),
-    textAlign(props),
-    width(props)
-  );
+  return _composeClassNames(_scopeClassNames("box", props.muted && "muted", props.outline && `outline-${props.outline}`), border(props), boxSizing({
+    boxSizing: props.sizing
+  }), display(props), height(props), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), minWidth(props), overflow(props), padding(props), pointerEvents(props), position(props), radius(props), textAlign(props), width(props));
 }
 function button(props) {
-  return _comp("button", display(props), flexItem(props), radius(props), width(props));
+  return _composeClassNames(_scopeClassNames("button"), display(props), flexItem(props), radius(props), width(props));
 }
 function buttonLoadingBox() {
-  return "button-loading-box";
+  return _scopeClassNames("button-loading-box");
 }
 function card(props) {
-  return _comp(props.scheme, props.tone ?? "default", "card", props.checkered && "card-checkered", shadow(props));
+  return _composeClassNames(_scopeClassNames(props.scheme, props.tone, "card", props.checkered && "card-checkered"), shadow(props));
 }
 function checkbox() {
-  return _comp("checkbox");
+  return _scopeClassNames("checkbox");
 }
 function checkboxInput() {
-  return _comp("checkbox-input");
+  return _scopeClassNames("checkbox-input");
 }
 function code(props) {
-  return _comp("code", "block", font(props), _resp("code", props.size));
+  return _composeClassNames(_scopeClassNames("code", "block", _resp("code", props.size)), font(props));
 }
 function container(props) {
-  return _comp("container", maxWidth({
+  return _composeClassNames(_scopeClassNames("container"), maxWidth({
     maxWidth: props.width
   }));
 }
 function heading(props) {
-  return _comp("block", "heading", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size), flexItem(props), textAlign({
+  return _composeClassNames(_scopeClassNames("block", "heading", props.muted && "heading-muted", _resp("heading", props.size)), font(props), flexItem(props), textAlign({
     textAlign: props.align
   }));
 }
 function kbd(props) {
-  return _comp("kbd", radius(props));
+  return _composeClassNames(_scopeClassNames("kbd"), radius(props));
 }
 function label(props) {
-  return _comp("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size), textAlign({
+  return _composeClassNames(_scopeClassNames("label", "block", props.muted && "label-muted", _resp("label", props.size)), font(props), textAlign({
     textAlign: props.align
   }));
 }
 function popover() {
-  return _comp("popover");
+  return _scopeClassNames("popover");
 }
 function popoverCard() {
-  return _comp("popover-card");
+  return _scopeClassNames("popover-card");
 }
 function radio() {
-  return _comp("radio");
+  return _scopeClassNames("radio");
 }
 function select(props) {
-  return composeClassNames(_comp("select"), _input(props));
+  return _composeClassNames(_scopeClassNames("select"), _input(props));
 }
 function selectPresentation() {
-  return composeClassNames(_comp("select-presentation"), _inputPresentation());
+  return _composeClassNames(_scopeClassNames("select-presentation"), _inputPresentation());
 }
 function spinner() {
-  return _comp("spinner");
+  return _scopeClassNames("spinner");
 }
 function animatedSpinnerIcon() {
-  return _comp("animated-spinner-icon");
+  return _scopeClassNames("animated-spinner-icon");
 }
 function stack() {
-  return _comp("stack");
+  return _scopeClassNames("stack");
 }
 function _switch() {
-  return _comp("switch");
+  return _scopeClassNames("switch");
 }
 function _switchElement() {
-  return _comp("switch-element");
+  return _scopeClassNames("switch-element");
 }
 function _switchPresentation() {
-  return _comp("switch-presentation");
+  return _scopeClassNames("switch-presentation");
 }
 function _switchThumb() {
-  return _comp("switch-thumb");
+  return _scopeClassNames("switch-thumb");
 }
 function _switchTrack() {
-  return _comp("switch-track");
+  return _scopeClassNames("switch-track");
 }
 function text(props) {
-  return _comp("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size), textAlign({
+  return _composeClassNames(_scopeClassNames("text", "block", props.muted && "text-muted", _resp("text", props.size)), flexItem(props), font(props), textAlign({
     textAlign: props.align
   }));
 }
 function textArea(props) {
-  return composeClassNames(_comp("text-area"), _input(props));
+  return _composeClassNames(_scopeClassNames("text-area"), _input(props));
 }
 function textInput(props) {
-  return composeClassNames(_input(props), _comp("text-input"));
+  return _composeClassNames(_scopeClassNames("text-input"), _input(props));
 }
 function tooltip() {
-  return _comp("tooltip");
+  return _scopeClassNames("tooltip");
 }
 function tooltipCard() {
-  return _comp("tooltip-card");
+  return _scopeClassNames("tooltip-card");
 }
 function srOnly() {
-  return _comp(composeClassNames("sr-only"));
+  return _scopeClassNames(_composeClassNames("sr-only"));
 }
 export {
   BREAKPOINTS,
-  PREFIX,
   _arrow,
   _arrowShape,
   _arrowStroke,
   _arrowStrokeMask,
-  _compilePalette,
   _compileSystem,
   _compileTheme,
-  _getClassNames,
+  _composeClassNames,
   _input,
   _inputElement,
   _inputPresentation,
+  _scopeClassName,
   _selectable,
   _switch,
   _switchElement,
@@ -4683,6 +4255,7 @@ export {
   badge,
   border,
   box,
+  boxSizing,
   breadcrumbs,
   button,
   buttonLoadingBox,
@@ -4691,7 +4264,6 @@ export {
   checkboxInput,
   code,
   codeSkeleton,
-  composeClassNames,
   container,
   dialog,
   dialogCardRoot,
@@ -4727,11 +4299,11 @@ export {
   popover,
   popoverCard,
   position,
-  px,
+  properties,
+  px$1 as px,
   radio,
   radius,
-  rem,
-  scopeClassName,
+  rem$1 as rem,
   select,
   selectPresentation,
   shadow,
@@ -4745,7 +4317,7 @@ export {
   textInput,
   textOverflow,
   textSkeleton,
-  toBoxShadow,
+  toBoxShadow$1 as toBoxShadow,
   toast,
   toastLayer,
   toastLoadingBar,