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

package/dist/theme.js

@@ -1597,6 +1597,48 @@ function buildColorCard_v3(tokens, options) {
       }, acc;
     }, {}),
     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),
@@ -1608,44 +1650,6 @@ function buildColorCard_v3(tokens, options) {
       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((acc, tone) => ({
@@ -1695,7 +1699,48 @@ const defaultTokens = {
     "*": {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ["black/0.5", "gray/100/0.5"],
-      focusRing: ["blue/500", "blue/300"],
+      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"]
       },
@@ -1705,53 +1750,16 @@ const defaultTokens = {
         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"],
@@ -1777,8 +1785,8 @@ const defaultTokens = {
         solid: {
           "*": {
             bg: {
-              0: ["300", "500"],
-              4: ["200", "600"]
+              0: ["400", "500"],
+              4: ["300", "600"]
             },
             border: {
               0: ["200", "400"],
@@ -1826,12 +1834,12 @@ const defaultTokens = {
               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"]
             }
           }
         }
@@ -1842,7 +1850,7 @@ const defaultTokens = {
         tinted: {
           "*": {
             bg: {
-              0: ["gray/950", "white"],
+              0: ["950", "white"],
               4: ["800", "200"]
             },
             border: {
@@ -1857,6 +1865,18 @@ const defaultTokens = {
         }
       }
     },
+    neutral: {
+      variant: {
+        tinted: {
+          "*": {
+            bg: {
+              0: ["900", "50"],
+              4: ["700", "200"]
+            }
+          }
+        }
+      }
+    },
     primary: {
       _hue: "blue"
     },
@@ -1963,6 +1983,48 @@ function resolveCardColorTokens(tokens) {
       }
     },
     backdrop: tokens?.backdrop ?? ["900", "100"],
+    code: {
+      bg: tokens?.code?.bg ?? ["950", "50"],
+      fg: tokens?.code?.fg ?? ["400", "600"],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ["400", "600"],
+        attribute: tokens?.code?.token?.attribute ?? ["400", "600"],
+        attrName: tokens?.code?.token?.attrName ?? ["400", "600"],
+        attrValue: tokens?.code?.token?.attrValue ?? ["400", "600"],
+        boolean: tokens?.code?.token?.boolean ?? ["400", "600"],
+        builtin: tokens?.code?.token?.builtin ?? ["400", "600"],
+        cdata: tokens?.code?.token?.cdata ?? ["400", "600"],
+        char: tokens?.code?.token?.char ?? ["400", "600"],
+        class: tokens?.code?.token?.class ?? ["400", "600"],
+        className: tokens?.code?.token?.className ?? ["400", "600"],
+        comment: tokens?.code?.token?.comment ?? ["600", "400"],
+        constant: tokens?.code?.token?.constant ?? ["400", "600"],
+        deleted: tokens?.code?.token?.deleted ?? ["400", "600"],
+        doctype: tokens?.code?.token?.doctype ?? ["400", "600"],
+        entity: tokens?.code?.token?.entity ?? ["400", "600"],
+        function: tokens?.code?.token?.function ?? ["400", "600"],
+        hexcode: tokens?.code?.token?.hexcode ?? ["400", "600"],
+        id: tokens?.code?.token?.id ?? ["400", "600"],
+        important: tokens?.code?.token?.important ?? ["400", "600"],
+        inserted: tokens?.code?.token?.inserted ?? ["400", "600"],
+        keyword: tokens?.code?.token?.keyword ?? ["400", "600"],
+        number: tokens?.code?.token?.number ?? ["400", "600"],
+        operator: tokens?.code?.token?.operator ?? ["400", "600"],
+        prolog: tokens?.code?.token?.prolog ?? ["400", "600"],
+        property: tokens?.code?.token?.property ?? ["400", "600"],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ["400", "600"],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ["400", "600"],
+        punctuation: tokens?.code?.token?.punctuation ?? ["400", "600"],
+        regex: tokens?.code?.token?.regex ?? ["400", "600"],
+        selector: tokens?.code?.token?.selector ?? ["400", "600"],
+        string: tokens?.code?.token?.string ?? ["400", "600"],
+        symbol: tokens?.code?.token?.symbol ?? ["400", "600"],
+        tag: tokens?.code?.token?.tag ?? ["400", "600"],
+        unit: tokens?.code?.token?.unit ?? ["400", "600"],
+        url: tokens?.code?.token?.url ?? ["400", "600"],
+        variable: tokens?.code?.token?.variable ?? ["400", "600"]
+      }
+    },
     focusRing: tokens?.focusRing ?? ["500", "500"],
     link: {
       fg: tokens?.link?.fg ?? ["400", "600"]
@@ -1977,44 +2039,6 @@ function resolveCardColorTokens(tokens) {
       from: tokens?.skeleton?.from ?? ["900", "100"],
       to: tokens?.skeleton?.to ?? ["950", "50"]
     },
-    token: {
-      atrule: tokens?.token?.atrule ?? ["400", "600"],
-      attribute: tokens?.token?.attribute ?? ["400", "600"],
-      attrName: tokens?.token?.attrName ?? ["400", "600"],
-      attrValue: tokens?.token?.attrValue ?? ["400", "600"],
-      boolean: tokens?.token?.boolean ?? ["400", "600"],
-      builtin: tokens?.token?.builtin ?? ["400", "600"],
-      cdata: tokens?.token?.cdata ?? ["400", "600"],
-      char: tokens?.token?.char ?? ["400", "600"],
-      class: tokens?.token?.class ?? ["400", "600"],
-      className: tokens?.token?.className ?? ["400", "600"],
-      comment: tokens?.token?.comment ?? ["600", "400"],
-      constant: tokens?.token?.constant ?? ["400", "600"],
-      deleted: tokens?.token?.deleted ?? ["400", "600"],
-      doctype: tokens?.token?.doctype ?? ["400", "600"],
-      entity: tokens?.token?.entity ?? ["400", "600"],
-      function: tokens?.token?.function ?? ["400", "600"],
-      hexcode: tokens?.token?.hexcode ?? ["400", "600"],
-      id: tokens?.token?.id ?? ["400", "600"],
-      important: tokens?.token?.important ?? ["400", "600"],
-      inserted: tokens?.token?.inserted ?? ["400", "600"],
-      keyword: tokens?.token?.keyword ?? ["400", "600"],
-      number: tokens?.token?.number ?? ["400", "600"],
-      operator: tokens?.token?.operator ?? ["400", "600"],
-      prolog: tokens?.token?.prolog ?? ["400", "600"],
-      property: tokens?.token?.property ?? ["400", "600"],
-      pseudoClass: tokens?.token?.pseudoClass ?? ["400", "600"],
-      pseudoElement: tokens?.token?.pseudoElement ?? ["400", "600"],
-      punctuation: tokens?.token?.punctuation ?? ["400", "600"],
-      regex: tokens?.token?.regex ?? ["400", "600"],
-      selector: tokens?.token?.selector ?? ["400", "600"],
-      string: tokens?.token?.string ?? ["400", "600"],
-      symbol: tokens?.token?.symbol ?? ["400", "600"],
-      tag: tokens?.token?.tag ?? ["400", "600"],
-      unit: tokens?.token?.unit ?? ["400", "600"],
-      url: tokens?.token?.url ?? ["400", "600"],
-      variable: tokens?.token?.variable ?? ["400", "600"]
-    },
     variant: {
       solid: {
         "*": resolveElementTokens(tokens?.variant?.solid?.["*"]),
@@ -2204,7 +2228,7 @@ function themeColor_v3_v2(options) {
       variant: "tinted"
     }), states), {}), tones2), {}),
     shadow: color2.shadow,
-    syntax: color2.token
+    syntax: color2.code.token
   };
 }
 const stateShades = {