@sanity/ui 3.0.0-static.7 → 3.0.0-static.8

package/dist/css.mjs

@@ -244,6 +244,48 @@ const varNames = {
     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: {
@@ -269,44 +311,6 @@ const varNames = {
       from: "--color-skeleton-from",
       to: "--color-skeleton-to"
     },
-    token: {
-      atrule: "--color-token-atrule",
-      attrName: "--color-token-attr-name",
-      attrValue: "--color-token-attr-value",
-      attribute: "--color-token-attribute",
-      boolean: "--color-token-boolean",
-      builtin: "--color-token-builtin",
-      cdata: "--color-token-cdata",
-      char: "--color-token-char",
-      class: "--color-token-class",
-      className: "--color-token-class-name",
-      comment: "--color-token-comment",
-      constant: "--color-token-constant",
-      deleted: "--color-token-deleted",
-      doctype: "--color-token-doctype",
-      entity: "--color-token-entity",
-      function: "--color-token-function",
-      hexcode: "--color-token-hexcode",
-      id: "--color-token-id",
-      important: "--color-token-important",
-      inserted: "--color-token-inserted",
-      keyword: "--color-token-keyword",
-      number: "--color-token-number",
-      operator: "--color-token-operator",
-      prolog: "--color-token-prolog",
-      property: "--color-token-property",
-      pseudoClass: "--color-token-pseudo-class",
-      pseudoElement: "--color-token-pseudo-element",
-      punctuation: "--color-token-punctuation",
-      regex: "--color-token-regex",
-      selector: "--color-token-selector",
-      string: "--color-token-string",
-      symbol: "--color-token-symbol",
-      tag: "--color-token-tag",
-      unit: "--color-token-unit",
-      url: "--color-token-url",
-      variable: "--color-token-variable"
-    },
     solid: buildColorVariantVarNames({
       variant: "solid"
     }),
@@ -535,6 +539,48 @@ function buildColorCardVarNames(props) {
       }
     },
     backdrop: `${sourcePrefix}-backdrop`,
+    code: {
+      bg: `${sourcePrefix}-code-bg`,
+      fg: `${sourcePrefix}-code-fg`,
+      token: {
+        atrule: `${sourcePrefix}-code-token-atrule`,
+        attrName: `${sourcePrefix}-code-token-attr-name`,
+        attrValue: `${sourcePrefix}-code-token-attr-value`,
+        attribute: `${sourcePrefix}-code-token-attribute`,
+        boolean: `${sourcePrefix}-code-token-boolean`,
+        builtin: `${sourcePrefix}-code-token-builtin`,
+        cdata: `${sourcePrefix}-code-token-cdata`,
+        char: `${sourcePrefix}-code-token-char`,
+        class: `${sourcePrefix}-code-token-class`,
+        className: `${sourcePrefix}-code-token-class-name`,
+        comment: `${sourcePrefix}-code-token-comment`,
+        constant: `${sourcePrefix}-code-token-constant`,
+        deleted: `${sourcePrefix}-code-token-deleted`,
+        doctype: `${sourcePrefix}-code-token-doctype`,
+        entity: `${sourcePrefix}-code-token-entity`,
+        function: `${sourcePrefix}-code-token-function`,
+        hexcode: `${sourcePrefix}-code-token-hexcode`,
+        id: `${sourcePrefix}-code-token-id`,
+        important: `${sourcePrefix}-code-token-important`,
+        inserted: `${sourcePrefix}-code-token-inserted`,
+        keyword: `${sourcePrefix}-code-token-keyword`,
+        number: `${sourcePrefix}-code-token-number`,
+        operator: `${sourcePrefix}-code-token-operator`,
+        prolog: `${sourcePrefix}-code-token-prolog`,
+        property: `${sourcePrefix}-code-token-property`,
+        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
+        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
+        punctuation: `${sourcePrefix}-code-token-punctuation`,
+        regex: `${sourcePrefix}-code-token-regex`,
+        selector: `${sourcePrefix}-code-token-selector`,
+        string: `${sourcePrefix}-code-token-string`,
+        symbol: `${sourcePrefix}-code-token-symbol`,
+        tag: `${sourcePrefix}-code-token-tag`,
+        unit: `${sourcePrefix}-code-token-unit`,
+        url: `${sourcePrefix}-code-token-url`,
+        variable: `${sourcePrefix}-code-token-variable`
+      }
+    },
     focusRing: `${sourcePrefix}-focus-ring`,
     link: {
       fg: `${sourcePrefix}-link-fg`
@@ -553,44 +599,6 @@ function buildColorCardVarNames(props) {
       from: `${sourcePrefix}-skeleton-from`,
       to: `${sourcePrefix}-skeleton-to`
     },
-    token: {
-      atrule: `${sourcePrefix}-token-atrule`,
-      attrName: `${sourcePrefix}-token-attr-name`,
-      attrValue: `${sourcePrefix}-token-attr-value`,
-      attribute: `${sourcePrefix}-token-attribute`,
-      boolean: `${sourcePrefix}-token-boolean`,
-      builtin: `${sourcePrefix}-token-builtin`,
-      cdata: `${sourcePrefix}-token-cdata`,
-      char: `${sourcePrefix}-token-char`,
-      class: `${sourcePrefix}-token-class`,
-      className: `${sourcePrefix}-token-class-name`,
-      comment: `${sourcePrefix}-token-comment`,
-      constant: `${sourcePrefix}-token-constant`,
-      deleted: `${sourcePrefix}-token-deleted`,
-      doctype: `${sourcePrefix}-token-doctype`,
-      entity: `${sourcePrefix}-token-entity`,
-      function: `${sourcePrefix}-token-function`,
-      hexcode: `${sourcePrefix}-token-hexcode`,
-      id: `${sourcePrefix}-token-id`,
-      important: `${sourcePrefix}-token-important`,
-      inserted: `${sourcePrefix}-token-inserted`,
-      keyword: `${sourcePrefix}-token-keyword`,
-      number: `${sourcePrefix}-token-number`,
-      operator: `${sourcePrefix}-token-operator`,
-      prolog: `${sourcePrefix}-token-prolog`,
-      property: `${sourcePrefix}-token-property`,
-      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
-      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
-      punctuation: `${sourcePrefix}-token-punctuation`,
-      regex: `${sourcePrefix}-token-regex`,
-      selector: `${sourcePrefix}-token-selector`,
-      string: `${sourcePrefix}-token-string`,
-      symbol: `${sourcePrefix}-token-symbol`,
-      tag: `${sourcePrefix}-token-tag`,
-      unit: `${sourcePrefix}-token-unit`,
-      url: `${sourcePrefix}-token-url`,
-      variable: `${sourcePrefix}-token-variable`
-    },
     solid: buildColorVariantVarNames({
       scheme,
       tone,
@@ -718,6 +726,48 @@ const colorVars = {
   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: {
@@ -743,44 +793,6 @@ const colorVars = {
     from: `var(${varNames.color.skeleton.from})`,
     to: `var(${varNames.color.skeleton.to})`
   },
-  token: {
-    atrule: `var(${varNames.color.token.atrule})`,
-    attrName: `var(${varNames.color.token.attrName})`,
-    attrValue: `var(${varNames.color.token.attrValue})`,
-    attribute: `var(${varNames.color.token.attribute})`,
-    boolean: `var(${varNames.color.token.boolean})`,
-    builtin: `var(${varNames.color.token.builtin})`,
-    cdata: `var(${varNames.color.token.cdata})`,
-    char: `var(${varNames.color.token.char})`,
-    class: `var(${varNames.color.token.class})`,
-    className: `var(${varNames.color.token.className})`,
-    comment: `var(${varNames.color.token.comment})`,
-    constant: `var(${varNames.color.token.constant})`,
-    deleted: `var(${varNames.color.token.deleted})`,
-    doctype: `var(${varNames.color.token.doctype})`,
-    entity: `var(${varNames.color.token.entity})`,
-    function: `var(${varNames.color.token.function})`,
-    hexcode: `var(${varNames.color.token.hexcode})`,
-    id: `var(${varNames.color.token.id})`,
-    important: `var(${varNames.color.token.important})`,
-    inserted: `var(${varNames.color.token.inserted})`,
-    keyword: `var(${varNames.color.token.keyword})`,
-    number: `var(${varNames.color.token.number})`,
-    operator: `var(${varNames.color.token.operator})`,
-    prolog: `var(${varNames.color.token.prolog})`,
-    property: `var(${varNames.color.token.property})`,
-    pseudoClass: `var(${varNames.color.token.pseudoClass})`,
-    pseudoElement: `var(${varNames.color.token.pseudoElement})`,
-    punctuation: `var(${varNames.color.token.punctuation})`,
-    regex: `var(${varNames.color.token.regex})`,
-    selector: `var(${varNames.color.token.selector})`,
-    string: `var(${varNames.color.token.string})`,
-    symbol: `var(${varNames.color.token.symbol})`,
-    tag: `var(${varNames.color.token.tag})`,
-    unit: `var(${varNames.color.token.unit})`,
-    url: `var(${varNames.color.token.url})`,
-    variable: `var(${varNames.color.token.variable})`
-  },
   solid: buildColorVariantVars({
     variant: "solid"
   }),
@@ -912,6 +924,48 @@ function buildColorCardVars(props) {
       }), {})
     },
     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})`
+      }
+    },
     focusRing: `var(${prefix.focusRing})`,
     link: {
       fg: `var(${prefix.link.fg})`
@@ -930,44 +984,6 @@ function buildColorCardVars(props) {
       from: `var(${prefix.skeleton.from})`,
       to: `var(${prefix.skeleton.to})`
     },
-    token: {
-      atrule: `var(${prefix.token.atrule})`,
-      attrName: `var(${prefix.token.attrName})`,
-      attrValue: `var(${prefix.token.attrValue})`,
-      attribute: `var(${prefix.token.attribute})`,
-      boolean: `var(${prefix.token.boolean})`,
-      builtin: `var(${prefix.token.builtin})`,
-      cdata: `var(${prefix.token.cdata})`,
-      char: `var(${prefix.token.char})`,
-      class: `var(${prefix.token.class})`,
-      className: `var(${prefix.token.className})`,
-      comment: `var(${prefix.token.comment})`,
-      constant: `var(${prefix.token.constant})`,
-      deleted: `var(${prefix.token.deleted})`,
-      doctype: `var(${prefix.token.doctype})`,
-      entity: `var(${prefix.token.entity})`,
-      function: `var(${prefix.token.function})`,
-      hexcode: `var(${prefix.token.hexcode})`,
-      id: `var(${prefix.token.id})`,
-      important: `var(${prefix.token.important})`,
-      inserted: `var(${prefix.token.inserted})`,
-      keyword: `var(${prefix.token.keyword})`,
-      number: `var(${prefix.token.number})`,
-      operator: `var(${prefix.token.operator})`,
-      prolog: `var(${prefix.token.prolog})`,
-      property: `var(${prefix.token.property})`,
-      pseudoClass: `var(${prefix.token.pseudoClass})`,
-      pseudoElement: `var(${prefix.token.pseudoElement})`,
-      punctuation: `var(${prefix.token.punctuation})`,
-      regex: `var(${prefix.token.regex})`,
-      selector: `var(${prefix.token.selector})`,
-      string: `var(${prefix.token.string})`,
-      symbol: `var(${prefix.token.symbol})`,
-      tag: `var(${prefix.token.tag})`,
-      unit: `var(${prefix.token.unit})`,
-      url: `var(${prefix.token.url})`,
-      variable: `var(${prefix.token.variable})`
-    },
     solid: buildColorVariantVars({
       scheme,
       tone,
@@ -2669,7 +2685,7 @@ const avatarStyle = {
 for (const tone of THEME_COLOR_STATE_TONES)
   primitive$l[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[1]
+    [varNames.color.fg]: vars.color.tinted[tone].fg[3]
   };
 const badgeStyle = {
   layers: {
@@ -2764,6 +2780,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [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": {
@@ -2771,24 +2788,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
         [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.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.fg]: solid.fg[0],
+        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
@@ -2796,30 +2817,40 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
+    [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": {
       "&:not([data-disabled]):hover": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[1],
-        [varNames.color.fg]: tinted.fg[1]
+        [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[3],
+        [varNames.color.muted.fg]: tinted.fg[3]
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[2],
         [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)"
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[2],
         [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)"
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2]
+        [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
+        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
   }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
@@ -2827,6 +2858,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [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": {
@@ -2834,24 +2866,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [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]
       },
       "&: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]
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[0],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
@@ -2877,6 +2913,8 @@ const buttonStyle = {
     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],
@@ -2892,6 +2930,7 @@ const buttonStyle = {
         width: ["-moz-available", "-webkit-fill-available", "fill-available"]
       },
       "a&": {
+        // border: 'none',
         outline: "none",
         textDecoration: "none"
       },
@@ -2975,10 +3014,12 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     "--card-bg-color": vars.color.bg,
     "--card-bg2-color": vars.color.muted.bg,
     "--card-border-color": vars.color.border,
-    "--card-code-bg-color": vars.color.muted.bg,
-    "--card-code-fg-color": vars.color.tinted.default.fg[4],
+    "--card-code-bg-color": vars.color.code.bg,
+    "--card-code-fg-color": vars.color.code.fg,
     "--card-fg-color": vars.color.fg,
     "--card-focus-ring-color": vars.color.focusRing,
+    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
+    "--card-hairline-hard-color": vars.color.tinted.default.border[2],
     "--card-icon-color": vars.color.fg,
     "--card-kbd-bg-color": vars.color.muted.bg,
     "--card-kbd-border-color": vars.color.tinted.default.border[1],
@@ -2990,11 +3031,9 @@ 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,
+    "--card-shadow-ambient-color": vars.color.shadow.ambient
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
-    "--card-hairline-hard-color": vars.color.tinted.default.border[2]
   }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
 }
 const cardStyle = {
@@ -3010,48 +3049,50 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
     [_varNames.backdrop]: _vars.backdrop,
+    [_varNames.code.fg]: _vars.code.fg,
+    [_varNames.code.bg]: _vars.code.bg,
+    [_varNames.code.token.atrule]: _vars.code.token.atrule,
+    [_varNames.code.token.attrName]: _vars.code.token.attrName,
+    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
+    [_varNames.code.token.attribute]: _vars.code.token.attribute,
+    [_varNames.code.token.boolean]: _vars.code.token.boolean,
+    [_varNames.code.token.builtin]: _vars.code.token.builtin,
+    [_varNames.code.token.cdata]: _vars.code.token.cdata,
+    [_varNames.code.token.char]: _vars.code.token.char,
+    [_varNames.code.token.class]: _vars.code.token.class,
+    [_varNames.code.token.className]: _vars.code.token.className,
+    [_varNames.code.token.comment]: _vars.code.token.comment,
+    [_varNames.code.token.constant]: _vars.code.token.constant,
+    [_varNames.code.token.deleted]: _vars.code.token.deleted,
+    [_varNames.code.token.doctype]: _vars.code.token.doctype,
+    [_varNames.code.token.entity]: _vars.code.token.entity,
+    [_varNames.code.token.function]: _vars.code.token.function,
+    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
+    [_varNames.code.token.id]: _vars.code.token.id,
+    [_varNames.code.token.important]: _vars.code.token.important,
+    [_varNames.code.token.inserted]: _vars.code.token.inserted,
+    [_varNames.code.token.keyword]: _vars.code.token.keyword,
+    [_varNames.code.token.number]: _vars.code.token.number,
+    [_varNames.code.token.operator]: _vars.code.token.operator,
+    [_varNames.code.token.prolog]: _vars.code.token.prolog,
+    [_varNames.code.token.property]: _vars.code.token.property,
+    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
+    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
+    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
+    [_varNames.code.token.regex]: _vars.code.token.regex,
+    [_varNames.code.token.selector]: _vars.code.token.selector,
+    [_varNames.code.token.string]: _vars.code.token.string,
+    [_varNames.code.token.symbol]: _vars.code.token.symbol,
+    [_varNames.code.token.tag]: _vars.code.token.tag,
+    [_varNames.code.token.unit]: _vars.code.token.unit,
+    [_varNames.code.token.url]: _vars.code.token.url,
+    [_varNames.code.token.variable]: _vars.code.token.variable,
     [_varNames.focusRing]: _vars.focusRing,
     [_varNames.link.fg]: _vars.link.fg,
     [_varNames.shadow.outline]: _vars.shadow.outline,
     [_varNames.shadow.umbra]: _vars.shadow.umbra,
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
-    [_varNames.shadow.ambient]: _vars.shadow.ambient,
-    [_varNames.token.atrule]: _vars.token.atrule,
-    [_varNames.token.attrName]: _vars.token.attrName,
-    [_varNames.token.attrValue]: _vars.token.attrValue,
-    [_varNames.token.attribute]: _vars.token.attribute,
-    [_varNames.token.boolean]: _vars.token.boolean,
-    [_varNames.token.builtin]: _vars.token.builtin,
-    [_varNames.token.cdata]: _vars.token.cdata,
-    [_varNames.token.char]: _vars.token.char,
-    [_varNames.token.class]: _vars.token.class,
-    [_varNames.token.className]: _vars.token.className,
-    [_varNames.token.comment]: _vars.token.comment,
-    [_varNames.token.constant]: _vars.token.constant,
-    [_varNames.token.deleted]: _vars.token.deleted,
-    [_varNames.token.doctype]: _vars.token.doctype,
-    [_varNames.token.entity]: _vars.token.entity,
-    [_varNames.token.function]: _vars.token.function,
-    [_varNames.token.hexcode]: _vars.token.hexcode,
-    [_varNames.token.id]: _vars.token.id,
-    [_varNames.token.important]: _vars.token.important,
-    [_varNames.token.inserted]: _vars.token.inserted,
-    [_varNames.token.keyword]: _vars.token.keyword,
-    [_varNames.token.number]: _vars.token.number,
-    [_varNames.token.operator]: _vars.token.operator,
-    [_varNames.token.prolog]: _vars.token.prolog,
-    [_varNames.token.property]: _vars.token.property,
-    [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
-    [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
-    [_varNames.token.punctuation]: _vars.token.punctuation,
-    [_varNames.token.regex]: _vars.token.regex,
-    [_varNames.token.selector]: _vars.token.selector,
-    [_varNames.token.string]: _vars.token.string,
-    [_varNames.token.symbol]: _vars.token.symbol,
-    [_varNames.token.tag]: _vars.token.tag,
-    [_varNames.token.unit]: _vars.token.unit,
-    [_varNames.token.url]: _vars.token.url,
-    [_varNames.token.variable]: _vars.token.variable
+    [_varNames.shadow.ambient]: _vars.shadow.ambient
   });
   for (const variant of ["solid", "tinted"])
     for (const elementTone of THEME_COLOR_STATE_TONES) {
@@ -3307,7 +3348,7 @@ const headingStyle = {
     // '--color-bg': 'var(--color-tinted-default-bg-1)',
     // '--color-border': 'var(--color-tinted-default-border-2)',
     // '--color-fg': 'var(--color-tinted-default-fg-3)',
-    boxShadow: "inset 0 0 0 0.5px var(--color-border)",
+    boxShadow: "inset 0 0 0 0.5px var(--color-tinted-default-border-3)",
     background: "var(--color-muted-bg)",
     font: "inherit",
     verticalAlign: "top",
@@ -3613,10 +3654,16 @@ const labelStyle = {
       },
       "& a:hover": {
         color: "var(--color-fg)"
+      },
+      "& code": {
+        fontFamily: vars.font.code.family,
+        color: "var(--color-code-fg)",
+        backgroundColor: "var(--color-muted-bg)",
+        borderRadius: vars.radius[2]
+      },
+      "& svg": {
+        color: "var(--color-muted-fg)"
       }
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
     }
   },
   // 'text-accent': {
@@ -4395,49 +4442,57 @@ function buildColorCardThemeProperties(theme, options) {
     scheme
   };
   return {
+    // backdrop
     [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
+    // code
+    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
+    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
+    // code / token
+    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
+    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
+    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
+    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
+    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
+    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
+    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
+    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
+    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
+    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
+    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
+    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
+    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
+    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
+    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
+    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
+    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
+    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
+    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
+    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
+    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
+    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
+    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
+    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
+    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
+    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
+    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
+    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
+    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
+    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
+    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
+    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
+    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
+    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
+    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
+    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
+    // focus ring
     [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
+    // link
     [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
+    // shadow
     [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
     [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
     [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
-    [`${prefix}-token-atrule`]: renderColor(tokens.token.atrule, context),
-    [`${prefix}-token-attr-name`]: renderColor(tokens.token.attrName, context),
-    [`${prefix}-token-attr-value`]: renderColor(tokens.token.attrValue, context),
-    [`${prefix}-token-attribute`]: renderColor(tokens.token.attribute, context),
-    [`${prefix}-token-boolean`]: renderColor(tokens.token.boolean, context),
-    [`${prefix}-token-builtin`]: renderColor(tokens.token.builtin, context),
-    [`${prefix}-token-cdata`]: renderColor(tokens.token.cdata, context),
-    [`${prefix}-token-char`]: renderColor(tokens.token.char, context),
-    [`${prefix}-token-class-name`]: renderColor(tokens.token.className, context),
-    [`${prefix}-token-class`]: renderColor(tokens.token.class, context),
-    [`${prefix}-token-comment`]: renderColor(tokens.token.comment, context),
-    [`${prefix}-token-constant`]: renderColor(tokens.token.constant, context),
-    [`${prefix}-token-deleted`]: renderColor(tokens.token.deleted, context),
-    [`${prefix}-token-doctype`]: renderColor(tokens.token.doctype, context),
-    [`${prefix}-token-entity`]: renderColor(tokens.token.entity, context),
-    [`${prefix}-token-function`]: renderColor(tokens.token.function, context),
-    [`${prefix}-token-hexcode`]: renderColor(tokens.token.hexcode, context),
-    [`${prefix}-token-id`]: renderColor(tokens.token.id, context),
-    [`${prefix}-token-important`]: renderColor(tokens.token.important, context),
-    [`${prefix}-token-inserted`]: renderColor(tokens.token.inserted, context),
-    [`${prefix}-token-keyword`]: renderColor(tokens.token.keyword, context),
-    [`${prefix}-token-number`]: renderColor(tokens.token.number, context),
-    [`${prefix}-token-operator`]: renderColor(tokens.token.operator, context),
-    [`${prefix}-token-prolog`]: renderColor(tokens.token.prolog, context),
-    [`${prefix}-token-property`]: renderColor(tokens.token.property, context),
-    [`${prefix}-token-pseudo-class`]: renderColor(tokens.token.pseudoClass, context),
-    [`${prefix}-token-pseudo-eelement`]: renderColor(tokens.token.pseudoElement, context),
-    [`${prefix}-token-punctuation`]: renderColor(tokens.token.punctuation, context),
-    [`${prefix}-token-regex`]: renderColor(tokens.token.regex, context),
-    [`${prefix}-token-selector`]: renderColor(tokens.token.selector, context),
-    [`${prefix}-token-string`]: renderColor(tokens.token.string, context),
-    [`${prefix}-token-symbol`]: renderColor(tokens.token.symbol, context),
-    [`${prefix}-token-tag`]: renderColor(tokens.token.tag, context),
-    [`${prefix}-token-unit`]: renderColor(tokens.token.unit, context),
-    [`${prefix}-token-url`]: renderColor(tokens.token.url, context),
-    [`${prefix}-token-variable`]: renderColor(tokens.token.variable, context)
+    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context)
   };
 }
 function compileTheme(theme) {