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

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

package/src/theme/v3/defaults.ts

@@ -5,6 +5,47 @@ export const defaultTokens: PartialTokens<Tokens> = {
     '*': {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
+      code: {
+        bg: ['950', '50'],
+        fg: ['300', '700'],
+        token: {
+          atrule: ['purple/300', 'purple/600'],
+          attrName: ['green/300', 'green/600'],
+          attrValue: ['yellow/300', 'yellow/600'],
+          attribute: ['yellow/300', 'yellow/600'],
+          boolean: ['purple/300', 'purple/600'],
+          builtin: ['purple/300', 'purple/600'],
+          cdata: ['yellow/300', 'yellow/600'],
+          char: ['yellow/300', 'yellow/600'],
+          class: ['orange/300', 'orange/600'],
+          className: ['cyan/300', 'cyan/600'],
+          comment: ['gray/600', 'gray/300'],
+          constant: ['purple/300', 'purple/600'],
+          deleted: ['red/300', 'red/600'],
+          entity: ['red/300', 'red/600'],
+          function: ['green/300', 'green/600'],
+          hexcode: ['blue/300', 'blue/600'],
+          id: ['purple/300', 'purple/600'],
+          important: ['purple/300', 'purple/600'],
+          inserted: ['green/300', 'green/600'],
+          keyword: ['magenta/300', 'magenta/600'],
+          number: ['purple/300', 'purple/600'],
+          operator: ['magenta/300', 'magenta/600'],
+          prolog: ['gray/300', 'gray/600'],
+          property: ['blue/300', 'blue/600'],
+          pseudoClass: ['yellow/300', 'yellow/600'],
+          pseudoElement: ['yellow/300', 'yellow/600'],
+          punctuation: ['gray/300', 'gray/600'],
+          regex: ['blue/300', 'blue/600'],
+          selector: ['red/300', 'red/600'],
+          string: ['yellow/300', 'yellow/600'],
+          symbol: ['purple/300', 'purple/600'],
+          tag: ['red/300', 'red/600'],
+          unit: ['orange/300', 'orange/600'],
+          url: ['red/300', 'red/600'],
+          variable: ['red/300', 'red/600'],
+        },
+      },
       focusRing: ['blue/500', 'blue/500'],
       link: {
         fg: ['blue/400', 'blue/600'],
@@ -15,53 +56,16 @@ export const defaultTokens: PartialTokens<Tokens> = {
         penumbra: ['black/0.14', '500/0.07'],
         ambient: ['black/0.12', '500/0.06'],
       },
-      token: {
-        atrule: ['purple/300', 'purple/600'],
-        attrName: ['green/300', 'green/600'],
-        attrValue: ['yellow/300', 'yellow/600'],
-        attribute: ['yellow/300', 'yellow/600'],
-        boolean: ['purple/300', 'purple/600'],
-        builtin: ['purple/300', 'purple/600'],
-        cdata: ['yellow/300', 'yellow/600'],
-        char: ['yellow/300', 'yellow/600'],
-        class: ['orange/300', 'orange/600'],
-        className: ['cyan/300', 'cyan/600'],
-        comment: ['gray/600', 'gray/300'],
-        constant: ['purple/300', 'purple/600'],
-        deleted: ['red/300', 'red/600'],
-        entity: ['red/300', 'red/600'],
-        function: ['green/300', 'green/600'],
-        hexcode: ['blue/300', 'blue/600'],
-        id: ['purple/300', 'purple/600'],
-        important: ['purple/300', 'purple/600'],
-        inserted: ['green/300', 'green/600'],
-        keyword: ['magenta/300', 'magenta/600'],
-        number: ['purple/300', 'purple/600'],
-        operator: ['magenta/300', 'magenta/600'],
-        prolog: ['gray/300', 'gray/600'],
-        property: ['blue/300', 'blue/600'],
-        pseudoClass: ['yellow/300', 'yellow/600'],
-        pseudoElement: ['yellow/300', 'yellow/600'],
-        punctuation: ['gray/300', 'gray/600'],
-        regex: ['blue/300', 'blue/600'],
-        selector: ['red/300', 'red/600'],
-        string: ['yellow/300', 'yellow/600'],
-        symbol: ['purple/300', 'purple/600'],
-        tag: ['red/300', 'red/600'],
-        unit: ['orange/300', 'orange/600'],
-        url: ['red/300', 'red/600'],
-        variable: ['red/300', 'red/600'],
-      },
       variant: {
         tinted: {
           '*': {
             bg: {
               0: ['950', '50'],
-              4: ['800', '100'],
+              4: ['800', '200'],
             },
             border: {
-              0: ['800', '100'],
-              4: ['600', '300'],
+              0: ['700', '100'],
+              4: ['500', '300'],
             },
             fg: {
               0: ['100', '900'],
@@ -87,8 +91,8 @@ export const defaultTokens: PartialTokens<Tokens> = {
         solid: {
           '*': {
             bg: {
-              0: ['300', '500'],
-              4: ['200', '600'],
+              0: ['400', '500'],
+              4: ['300', '600'],
             },
             border: {
               0: ['200', '400'],
@@ -136,12 +140,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
               4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '300 40%'],
-              4: ['700', '300'],
+              0: ['800', '300 40%'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['100', 'black'],
-              4: ['500', '600'],
+              4: ['400', '700'],
             },
           },
         },
@@ -152,7 +156,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['gray/950', 'white'],
+              0: ['950', 'white'],
               4: ['800', '200'],
             },
             border: {
@@ -167,6 +171,18 @@ export const defaultTokens: PartialTokens<Tokens> = {
         },
       },
     },
+    'neutral': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['900', '50'],
+              4: ['700', '200'],
+            },
+          },
+        },
+      },
+    },
     'primary': {
       _hue: 'blue',
     },