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

package/src/css/varNames.ts

@@ -96,6 +96,49 @@ export const varNames: 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: {
@@ -121,44 +164,6 @@ export const varNames: 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'}),
     tinted: buildColorVariantVarNames({variant: 'tinted'}),
@@ -350,6 +355,48 @@ function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): Color
       },
     },
     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`,
@@ -368,44 +415,7 @@ function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): Color
       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, variant: 'solid'}),
     tinted: buildColorVariantVarNames({scheme, tone, variant: 'tinted'}),
   }

package/src/css/vars.ts

@@ -90,6 +90,49 @@ const colorVars: Vars['color'] = {
   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: {
@@ -115,44 +158,6 @@ const colorVars: Vars['color'] = {
     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'}),
   tinted: buildColorVariantVars({variant: 'tinted'}),
@@ -319,6 +324,48 @@ function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCard
       }, {} as ColorAvatarVars),
     },
     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})`,
@@ -337,44 +384,6 @@ function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCard
       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, variant: 'solid'}),
     tinted: buildColorVariantVars({scheme, tone, variant: 'tinted'}),

package/src/theme/v3/color/buildColor_v3.ts

@@ -72,6 +72,48 @@ function buildColorCard_v3(
       return acc
     }, {} as ThemeColorAvatar_v2),
     backdrop: renderColor(tokens.backdrop, context),
+    code: {
+      bg: renderColor(tokens.code.bg, context),
+      fg: renderColor(tokens.code.fg, context),
+      token: {
+        atrule: renderColor(tokens.code.token.atrule, context),
+        attrName: renderColor(tokens.code.token.attrName, context),
+        attrValue: renderColor(tokens.code.token.attrValue, context),
+        attribute: renderColor(tokens.code.token.attribute, context),
+        boolean: renderColor(tokens.code.token.boolean, context),
+        builtin: renderColor(tokens.code.token.builtin, context),
+        cdata: renderColor(tokens.code.token.cdata, context),
+        char: renderColor(tokens.code.token.char, context),
+        class: renderColor(tokens.code.token.class, context),
+        className: renderColor(tokens.code.token.className, context),
+        comment: renderColor(tokens.code.token.comment, context),
+        constant: renderColor(tokens.code.token.constant, context),
+        deleted: renderColor(tokens.code.token.deleted, context),
+        doctype: renderColor(tokens.code.token.doctype, context),
+        entity: renderColor(tokens.code.token.entity, context),
+        function: renderColor(tokens.code.token.function, context),
+        hexcode: renderColor(tokens.code.token.hexcode, context),
+        id: renderColor(tokens.code.token.id, context),
+        important: renderColor(tokens.code.token.important, context),
+        inserted: renderColor(tokens.code.token.inserted, context),
+        keyword: renderColor(tokens.code.token.keyword, context),
+        number: renderColor(tokens.code.token.number, context),
+        operator: renderColor(tokens.code.token.operator, context),
+        prolog: renderColor(tokens.code.token.prolog, context),
+        property: renderColor(tokens.code.token.property, context),
+        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
+        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
+        punctuation: renderColor(tokens.code.token.punctuation, context),
+        regex: renderColor(tokens.code.token.regex, context),
+        selector: renderColor(tokens.code.token.selector, context),
+        string: renderColor(tokens.code.token.string, context),
+        symbol: renderColor(tokens.code.token.symbol, context),
+        tag: renderColor(tokens.code.token.tag, context),
+        unit: renderColor(tokens.code.token.unit, context),
+        url: renderColor(tokens.code.token.url, context),
+        variable: renderColor(tokens.code.token.variable, context),
+      },
+    },
     focusRing: renderColor(tokens.focusRing, context),
     shadow: {
       outline: renderColor(tokens.shadow.outline, context),
@@ -83,44 +125,7 @@ function buildColorCard_v3(
       from: renderColor(tokens.skeleton.from, context),
       to: renderColor(tokens.skeleton.to, context),
     },
-    token: {
-      atrule: renderColor(tokens.token.atrule, context),
-      attrName: renderColor(tokens.token.attrName, context),
-      attrValue: renderColor(tokens.token.attrValue, context),
-      attribute: renderColor(tokens.token.attribute, context),
-      boolean: renderColor(tokens.token.boolean, context),
-      builtin: renderColor(tokens.token.builtin, context),
-      cdata: renderColor(tokens.token.cdata, context),
-      char: renderColor(tokens.token.char, context),
-      class: renderColor(tokens.token.class, context),
-      className: renderColor(tokens.token.className, context),
-      comment: renderColor(tokens.token.comment, context),
-      constant: renderColor(tokens.token.constant, context),
-      deleted: renderColor(tokens.token.deleted, context),
-      doctype: renderColor(tokens.token.doctype, context),
-      entity: renderColor(tokens.token.entity, context),
-      function: renderColor(tokens.token.function, context),
-      hexcode: renderColor(tokens.token.hexcode, context),
-      id: renderColor(tokens.token.id, context),
-      important: renderColor(tokens.token.important, context),
-      inserted: renderColor(tokens.token.inserted, context),
-      keyword: renderColor(tokens.token.keyword, context),
-      number: renderColor(tokens.token.number, context),
-      operator: renderColor(tokens.token.operator, context),
-      prolog: renderColor(tokens.token.prolog, context),
-      property: renderColor(tokens.token.property, context),
-      pseudoClass: renderColor(tokens.token.pseudoClass, context),
-      pseudoElement: renderColor(tokens.token.pseudoElement, context),
-      punctuation: renderColor(tokens.token.punctuation, context),
-      regex: renderColor(tokens.token.regex, context),
-      selector: renderColor(tokens.token.selector, context),
-      string: renderColor(tokens.token.string, context),
-      symbol: renderColor(tokens.token.symbol, context),
-      tag: renderColor(tokens.token.tag, context),
-      unit: renderColor(tokens.token.unit, context),
-      url: renderColor(tokens.token.url, context),
-      variable: renderColor(tokens.token.variable, context),
-    },
+
     variant: {
       solid: {
         ...THEME_COLOR_STATE_TONES.reduce(

package/src/theme/v3/color/card.ts

@@ -15,6 +15,48 @@ export interface CardColorTokens {
     }
   >
   backdrop: [ColorToken, ColorToken]
+  code: {
+    bg: [ColorToken, ColorToken]
+    fg: [ColorToken, ColorToken]
+    token: {
+      atrule: [ColorToken, ColorToken]
+      attrName: [ColorToken, ColorToken]
+      attrValue: [ColorToken, ColorToken]
+      attribute: [ColorToken, ColorToken]
+      boolean: [ColorToken, ColorToken]
+      builtin: [ColorToken, ColorToken]
+      cdata: [ColorToken, ColorToken]
+      char: [ColorToken, ColorToken]
+      class: [ColorToken, ColorToken]
+      className: [ColorToken, ColorToken]
+      comment: [ColorToken, ColorToken]
+      constant: [ColorToken, ColorToken]
+      deleted: [ColorToken, ColorToken]
+      doctype: [ColorToken, ColorToken]
+      entity: [ColorToken, ColorToken]
+      function: [ColorToken, ColorToken]
+      hexcode: [ColorToken, ColorToken]
+      id: [ColorToken, ColorToken]
+      important: [ColorToken, ColorToken]
+      inserted: [ColorToken, ColorToken]
+      keyword: [ColorToken, ColorToken]
+      number: [ColorToken, ColorToken]
+      operator: [ColorToken, ColorToken]
+      prolog: [ColorToken, ColorToken]
+      property: [ColorToken, ColorToken]
+      pseudoClass: [ColorToken, ColorToken]
+      pseudoElement: [ColorToken, ColorToken]
+      punctuation: [ColorToken, ColorToken]
+      regex: [ColorToken, ColorToken]
+      selector: [ColorToken, ColorToken]
+      string: [ColorToken, ColorToken]
+      symbol: [ColorToken, ColorToken]
+      tag: [ColorToken, ColorToken]
+      unit: [ColorToken, ColorToken]
+      url: [ColorToken, ColorToken]
+      variable: [ColorToken, ColorToken]
+    }
+  }
   focusRing: [ColorToken, ColorToken]
   link: {
     fg: [ColorToken, ColorToken]
@@ -29,44 +71,7 @@ export interface CardColorTokens {
     from: [ColorToken, ColorToken]
     to: [ColorToken, ColorToken]
   }
-  token: {
-    atrule: [ColorToken, ColorToken]
-    attrName: [ColorToken, ColorToken]
-    attrValue: [ColorToken, ColorToken]
-    attribute: [ColorToken, ColorToken]
-    boolean: [ColorToken, ColorToken]
-    builtin: [ColorToken, ColorToken]
-    cdata: [ColorToken, ColorToken]
-    char: [ColorToken, ColorToken]
-    class: [ColorToken, ColorToken]
-    className: [ColorToken, ColorToken]
-    comment: [ColorToken, ColorToken]
-    constant: [ColorToken, ColorToken]
-    deleted: [ColorToken, ColorToken]
-    doctype: [ColorToken, ColorToken]
-    entity: [ColorToken, ColorToken]
-    function: [ColorToken, ColorToken]
-    hexcode: [ColorToken, ColorToken]
-    id: [ColorToken, ColorToken]
-    important: [ColorToken, ColorToken]
-    inserted: [ColorToken, ColorToken]
-    keyword: [ColorToken, ColorToken]
-    number: [ColorToken, ColorToken]
-    operator: [ColorToken, ColorToken]
-    prolog: [ColorToken, ColorToken]
-    property: [ColorToken, ColorToken]
-    pseudoClass: [ColorToken, ColorToken]
-    pseudoElement: [ColorToken, ColorToken]
-    punctuation: [ColorToken, ColorToken]
-    regex: [ColorToken, ColorToken]
-    selector: [ColorToken, ColorToken]
-    string: [ColorToken, ColorToken]
-    symbol: [ColorToken, ColorToken]
-    tag: [ColorToken, ColorToken]
-    unit: [ColorToken, ColorToken]
-    url: [ColorToken, ColorToken]
-    variable: [ColorToken, ColorToken]
-  }
+
   variant: {
     solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
     tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>

package/src/theme/v3/color/color.ts

@@ -34,6 +34,48 @@ export interface ThemeColorCard_v3 {
   _hue: Hue
   avatar: ThemeColorAvatar_v2
   backdrop: string
+  code: {
+    bg: string
+    fg: string
+    token: {
+      atrule: string
+      attrName: string
+      attrValue: string
+      attribute: string
+      boolean: string
+      builtin: string
+      cdata: string
+      char: string
+      class: string
+      className: string
+      comment: string
+      constant: string
+      deleted: string
+      doctype: string
+      entity: string
+      function: string
+      hexcode: string
+      id: string
+      important: string
+      inserted: string
+      keyword: string
+      number: string
+      operator: string
+      prolog: string
+      property: string
+      pseudoClass: string
+      pseudoElement: string
+      punctuation: string
+      regex: string
+      selector: string
+      string: string
+      symbol: string
+      tag: string
+      unit: string
+      url: string
+      variable: string
+    }
+  }
   focusRing: string
   shadow: {
     outline: string
@@ -41,44 +83,6 @@ export interface ThemeColorCard_v3 {
     penumbra: string
     ambient: string
   }
-  token: {
-    atrule: string
-    attrName: string
-    attrValue: string
-    attribute: string
-    boolean: string
-    builtin: string
-    cdata: string
-    char: string
-    class: string
-    className: string
-    comment: string
-    constant: string
-    deleted: string
-    doctype: string
-    entity: string
-    function: string
-    hexcode: string
-    id: string
-    important: string
-    inserted: string
-    keyword: string
-    number: string
-    operator: string
-    prolog: string
-    property: string
-    pseudoClass: string
-    pseudoElement: string
-    punctuation: string
-    regex: string
-    selector: string
-    string: string
-    symbol: string
-    tag: string
-    unit: string
-    url: string
-    variable: string
-  }
   skeleton: {
     from: string
     to: string