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

package/dist/theme.d.cts

@@ -814,7 +814,7 @@ export declare interface Theme_v3 {
   }
   color: ThemeColor_v3
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
@@ -1676,13 +1676,20 @@ export declare interface ThemeFocusRing {
 /** @public */
 export declare interface ThemeFont {
   family: string
-  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
   horizontalOffset?: number
 }
 
+/** @public */
+export declare interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  sizes: ThemeFontSize_v3[]
+}
+
 /** @public */
 export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
 
@@ -1694,6 +1701,14 @@ export declare interface ThemeFonts {
   text: ThemeFont
 }
 
+/** @public */
+export declare interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
 /** @public */
 export declare interface ThemeFontSize {
   ascenderHeight: number
@@ -1704,6 +1719,17 @@ export declare interface ThemeFontSize {
   lineHeight: number
 }
 
+/** @public */
+export declare interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
 /** @public */
 export declare interface ThemeFontWeight {
   regular: number

package/dist/theme.d.ts

@@ -814,7 +814,7 @@ export declare interface Theme_v3 {
   }
   color: ThemeColor_v3
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
@@ -1676,13 +1676,20 @@ export declare interface ThemeFocusRing {
 /** @public */
 export declare interface ThemeFont {
   family: string
-  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
   horizontalOffset?: number
 }
 
+/** @public */
+export declare interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  sizes: ThemeFontSize_v3[]
+}
+
 /** @public */
 export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
 
@@ -1694,6 +1701,14 @@ export declare interface ThemeFonts {
   text: ThemeFont
 }
 
+/** @public */
+export declare interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
 /** @public */
 export declare interface ThemeFontSize {
   ascenderHeight: number
@@ -1704,6 +1719,17 @@ export declare interface ThemeFontSize {
   lineHeight: number
 }
 
+/** @public */
+export declare interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
 /** @public */
 export declare interface ThemeFontWeight {
   regular: number

package/dist/theme.js

@@ -1770,8 +1770,6 @@ function _parseColorToken(str, options) {
       return cursor += 2, v;
   }
   function parseMix() {
-    if (_peek() !== " ")
-      return;
     ignoreWhitespace();
     const match = RE_PERCENTAGE.exec(str.slice(cursor));
     if (match)
@@ -1794,7 +1792,7 @@ function _parseColorToken(str, options) {
 const defaultThemeFonts = {
   code: {
     family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-    weights: {
+    weight: {
       regular: 400,
       medium: 500,
       semibold: 600,
@@ -1806,41 +1804,46 @@ const defaultThemeFonts = {
       fontSize: 10,
       iconSize: 17,
       lineHeight: 15,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 12
     }, {
       ascenderHeight: 5,
       descenderHeight: 5,
       fontSize: 13,
       iconSize: 21,
       lineHeight: 19,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 16
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 16,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 20
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 19,
       iconSize: 29,
       lineHeight: 27,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 24
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 22,
       iconSize: 33,
       lineHeight: 31,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 28
     }]
   },
   heading: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     featureSettings: "'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1",
-    weights: {
+    weight: {
       regular: 600,
       medium: 700,
       semibold: 800,
@@ -1852,47 +1855,53 @@ const defaultThemeFonts = {
       fontSize: 13,
       iconSize: 17,
       lineHeight: 19,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 12
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 16,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 20
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 21,
       iconSize: 33,
       lineHeight: 29,
-      letterSpacing: -0.25
+      letterSpacing: -0.25,
+      customIconSize: 28
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 27,
       iconSize: 41,
       lineHeight: 35,
-      letterSpacing: -0.5
+      letterSpacing: -0.5,
+      customIconSize: 36
     }, {
       ascenderHeight: 9.5,
       descenderHeight: 8.5,
       fontSize: 33,
       iconSize: 49,
       lineHeight: 41,
-      letterSpacing: -1
+      letterSpacing: -1,
+      customIconSize: 44
     }, {
       ascenderHeight: 10.5,
       descenderHeight: 9.5,
       fontSize: 38,
       iconSize: 53,
       lineHeight: 47,
-      letterSpacing: -1
+      letterSpacing: -1,
+      customIconSize: 48
     }]
   },
   label: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
+    weight: {
       regular: 500,
       medium: 600,
       semibold: 700,
@@ -1904,47 +1913,53 @@ const defaultThemeFonts = {
       fontSize: 8.1,
       iconSize: 13,
       lineHeight: 10,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 8
     }, {
       ascenderHeight: 1.5,
       descenderHeight: 2.5,
       fontSize: 9.5,
       iconSize: 15,
       lineHeight: 11,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 10
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 10.8,
       iconSize: 17,
       lineHeight: 12,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 12
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 12.25,
       iconSize: 19,
       lineHeight: 13,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 14
     }, {
       ascenderHeight: 1.5,
       descenderHeight: 2.5,
       fontSize: 13.6,
       iconSize: 21,
       lineHeight: 14,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 16
     }, {
       ascenderHeight: 2,
       descenderHeight: 2,
       fontSize: 15,
       iconSize: 23,
       lineHeight: 15,
-      letterSpacing: 0.5
+      letterSpacing: 0.5,
+      customIconSize: 18
     }]
   },
   text: {
     family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
+    weight: {
       regular: 400,
       medium: 500,
       semibold: 600,
@@ -1956,35 +1971,40 @@ const defaultThemeFonts = {
       fontSize: 10,
       iconSize: 17,
       lineHeight: 15,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 12
     }, {
       ascenderHeight: 5,
       descenderHeight: 5,
       fontSize: 13,
       iconSize: 21,
       lineHeight: 19,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 16
     }, {
       ascenderHeight: 6,
       descenderHeight: 6,
       fontSize: 15,
       iconSize: 25,
       lineHeight: 23,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 20
     }, {
       ascenderHeight: 7,
       descenderHeight: 7,
       fontSize: 18,
       iconSize: 29,
       lineHeight: 27,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 24
     }, {
       ascenderHeight: 8,
       descenderHeight: 8,
       fontSize: 21,
       iconSize: 33,
       lineHeight: 31,
-      letterSpacing: 0
+      letterSpacing: 0,
+      customIconSize: 28
     }]
   }
 }, defaultTokens = {
@@ -1995,41 +2015,41 @@ const defaultThemeFonts = {
         bg: ["50", "950"],
         fg: ["700", "300"],
         token: {
-          atrule: ["purple-600", "purple-300"],
-          attrName: ["green-600", "green-300"],
-          attrValue: ["yellow-600", "yellow-300"],
-          attribute: ["yellow-600", "yellow-300"],
-          boolean: ["purple-600", "purple-300"],
-          builtin: ["purple-600", "purple-300"],
-          cdata: ["yellow-600", "yellow-300"],
-          char: ["yellow-600", "yellow-300"],
-          class: ["orange-600", "orange-300"],
-          className: ["cyan-600", "cyan-300"],
-          comment: ["gray-300", "gray-600"],
-          constant: ["purple-600", "purple-300"],
-          deleted: ["red-600", "red-300"],
-          entity: ["red-600", "red-300"],
-          function: ["green-600", "green-300"],
-          hexcode: ["blue-600", "blue-300"],
-          id: ["purple-600", "purple-300"],
-          important: ["purple-600", "purple-300"],
-          inserted: ["green-600", "green-300"],
-          keyword: ["magenta-600", "magenta-300"],
-          number: ["purple-600", "purple-300"],
-          operator: ["magenta-600", "magenta-300"],
-          prolog: ["gray-600", "gray-300"],
-          property: ["blue-600", "blue-300"],
-          pseudoClass: ["yellow-600", "yellow-300"],
-          pseudoElement: ["yellow-600", "yellow-300"],
-          punctuation: ["gray-600", "gray-300"],
-          regex: ["blue-600", "blue-300"],
-          selector: ["red-600", "red-300"],
-          string: ["yellow-600", "yellow-300"],
-          symbol: ["purple-600", "purple-300"],
-          tag: ["red-600", "red-300"],
-          unit: ["orange-600", "orange-300"],
-          url: ["red-600", "red-300"],
-          variable: ["red-600", "red-300"]
+          atrule: ["purple-600", "purple-400"],
+          attrName: ["green-600", "green-400"],
+          attrValue: ["yellow-600", "yellow-400"],
+          attribute: ["yellow-600", "yellow-400"],
+          boolean: ["purple-600", "purple-400"],
+          builtin: ["purple-600", "purple-400"],
+          cdata: ["yellow-600", "yellow-400"],
+          char: ["yellow-600", "yellow-400"],
+          class: ["orange-600", "orange-400"],
+          className: ["cyan-600", "cyan-400"],
+          comment: ["gray-400", "gray-600"],
+          constant: ["purple-600", "purple-400"],
+          deleted: ["red-600", "red-400"],
+          entity: ["red-600", "red-400"],
+          function: ["green-600", "green-400"],
+          hexcode: ["blue-600", "blue-400"],
+          id: ["purple-600", "purple-400"],
+          important: ["purple-600", "purple-400"],
+          inserted: ["green-600", "green-400"],
+          keyword: ["magenta-600", "magenta-400"],
+          number: ["purple-600", "purple-400"],
+          operator: ["magenta-600", "magenta-400"],
+          prolog: ["gray-600", "gray-400"],
+          property: ["blue-600", "blue-400"],
+          pseudoClass: ["yellow-600", "yellow-400"],
+          pseudoElement: ["yellow-600", "yellow-400"],
+          punctuation: ["gray-600", "gray-400"],
+          regex: ["blue-600", "blue-400"],
+          selector: ["red-600", "red-400"],
+          string: ["yellow-600", "yellow-400"],
+          symbol: ["purple-600", "purple-400"],
+          tag: ["red-600", "red-400"],
+          unit: ["orange-600", "orange-400"],
+          url: ["red-600", "red-400"],
+          variable: ["red-600", "red-400"]
         }
       },
       focusRing: ["blue-500", "blue-500"],
@@ -2042,6 +2062,10 @@ const defaultThemeFonts = {
         penumbra: ["600/0.07", "black/0.14"],
         ambient: ["600/0.06", "black/0.12"]
       },
+      skeleton: {
+        from: ["200 70%", "800 35%"],
+        to: ["200 40%", "800 50%"]
+      },
       variant: {
         tinted: {
           "*": {
@@ -2375,7 +2399,7 @@ function buildTheme_v3(options) {
     card: v2?.card ?? defaultThemeConfig.card,
     color: tokens.color,
     container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
+    font: defaultThemeFonts,
     input: v2?.input ?? defaultThemeConfig.input,
     layer: v2?.layer ?? defaultThemeConfig.layer,
     media: v2?.media ?? defaultThemeConfig.media,
@@ -2792,6 +2816,7 @@ function v3_v2(theme_v3) {
       }
     },
     container: theme_v3.container,
+    // @ts-expect-error TODO: fix this
     font: theme_v3.font,
     input: theme_v3.input,
     layer: theme_v3.layer,