@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

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

@@ -1,5 +1,5 @@
-import {ThemeColorCardToneKey} from '../../v2'
-import {CardColorTokens} from './card'
+import type {ThemeColorCardToneKey} from '../../v2'
+import type {CardColorTokens} from './card'
 
 /** @public */
 export type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>

package/src/theme/v3/defaultFonts.ts

@@ -0,0 +1,250 @@
+import type {ThemeFonts_v3} from './types'
+
+export const defaultThemeFonts: ThemeFonts_v3 = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    scale: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        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`,
+    weight: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    scale: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: -0.25,
+        customIconSize: 28,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: -0.5,
+        customIconSize: 36,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: -1,
+        customIconSize: 44,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: -1,
+        customIconSize: 48,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weight: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
+    },
+    scale: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+        customIconSize: 8,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+        customIconSize: 10,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+        customIconSize: 14,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+        customIconSize: 18,
+      },
+    ],
+  },
+  text: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    scale: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+        customIconSize: 12,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+        customIconSize: 16,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+        customIconSize: 20,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+        customIconSize: 24,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+        customIconSize: 28,
+      },
+    ],
+  },
+}

package/src/theme/v3/defaultTokens.ts

@@ -0,0 +1,199 @@
+import type {PartialTokens, Tokens} from './tokens'
+
+/** @internal */
+export const defaultTokens: PartialTokens<Tokens> = {
+  color: {
+    '*': {
+      backdrop: ['gray-100/0.5', 'black/0.5'],
+      code: {
+        bg: ['50', '950'],
+        fg: ['700', '300'],
+        token: {
+          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'],
+      link: {
+        fg: ['blue-600', 'blue-400'],
+      },
+      shadow: {
+        outline: ['600/0.3', '500/0.4'],
+        umbra: ['600/0.1', 'black/0.2'],
+        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: {
+          '*': {
+            bg: {
+              0: ['100 75%', '900 75%'],
+              4: ['300', '700'],
+            },
+            border: {
+              0: ['200', '700 50%'],
+              4: ['300 75%', '500'],
+            },
+            fg: {
+              0: ['900', '100'],
+              4: ['700', '300'],
+            },
+          },
+          'primary': {
+            _hue: 'blue',
+            bg: {0: ['inherit', 'inherit']},
+          },
+          'suggest': {
+            _hue: 'purple',
+            bg: {0: ['inherit', 'inherit']},
+          },
+          'positive': {
+            _hue: 'green',
+            bg: {0: ['inherit', 'inherit']},
+          },
+          'caution': {
+            _hue: 'yellow',
+            bg: {0: ['inherit', 'inherit']},
+          },
+          'critical': {
+            _hue: 'red',
+            bg: {0: ['inherit', 'inherit']},
+          },
+        },
+        solid: {
+          '*': {
+            bg: {
+              0: ['500', '400'],
+              4: ['600', '300'],
+            },
+            border: {
+              0: ['400', '200'],
+              4: ['500', '100'],
+            },
+            fg: {
+              0: ['white', 'black'],
+              4: ['200', '700'],
+            },
+          },
+          'default': {
+            bg: {
+              0: ['800', '200'],
+              4: ['black', 'white'],
+            },
+            border: {
+              0: ['700', '300'],
+              4: ['800', '200'],
+            },
+          },
+          'primary': {
+            _hue: 'blue',
+          },
+          'suggest': {
+            _hue: 'purple',
+          },
+          'positive': {
+            _hue: 'green',
+          },
+          'caution': {
+            _hue: 'yellow',
+          },
+          'critical': {
+            _hue: 'red',
+          },
+        },
+      },
+    },
+    'transparent': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['gray-50', 'black'],
+              4: ['200', '800'],
+            },
+            border: {
+              0: ['200 50%', '800 50%'],
+              4: ['300', '600'],
+            },
+            fg: {
+              0: ['black', '100'],
+              4: ['700', '400'],
+            },
+          },
+        },
+      },
+    },
+    'default': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['white', '950'],
+              4: ['200', '800'],
+            },
+            border: {
+              0: ['200 50%', '800 50%'],
+              4: ['300 75%', '600'],
+            },
+            fg: {
+              0: ['black', 'white'],
+              4: ['600', '400'],
+            },
+          },
+        },
+      },
+    },
+    'primary': {
+      _hue: 'blue',
+    },
+    'suggest': {
+      _hue: 'purple',
+    },
+    'positive': {
+      _hue: 'green',
+    },
+    'caution': {
+      _hue: 'yellow',
+    },
+    'critical': {
+      _hue: 'red',
+    },
+  },
+}

package/src/theme/v3/index.ts

@@ -1,6 +1,9 @@
+export * from './_constants'
+export * from './_parseColorToken'
 export * from './buildTheme_v3'
 export * from './color'
-export * from './defaults'
+export * from './defaultTokens'
+export * from './palette'
 export * from './resolveTokens'
 export * from './tokens'
 export * from './types'

package/src/theme/{palette → v3/palette}/constants.ts

@@ -1,3 +1,4 @@
+/** @public */
 export const HUES = [
   'gray',
   'blue',
@@ -10,6 +11,5 @@ export const HUES = [
   'cyan',
 ] as const
 
-export const TINTS = [
-  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
-] as const
+/** @public */
+export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/src/theme/v3/palette/types.ts

@@ -0,0 +1,7 @@
+import {type HUES, type TINTS} from './constants'
+
+/** @public */
+export type Hue = (typeof HUES)[number]
+
+/** @public */
+export type Tint = (typeof TINTS)[number]

package/src/theme/v3/resolveTokens.ts

@@ -1,13 +1,13 @@
 import {
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
-  ThemeColorStateToneKey,
+  type ThemeColorCardToneKey,
+  type ThemeColorStateToneKey,
 } from '../v2'
-import {CardColorTokens} from './color/card'
-import {ElementColorTokens} from './color/element'
+import type {CardColorTokens} from './color/card'
+import type {ElementColorTokens} from './color/element'
 import {merge} from './merge'
-import {PartialTokens, Tokens} from './tokens'
+import type {PartialTokens, Tokens} from './tokens'
 
 const defaultElementTokens: ElementColorTokens = {
   _hue: 'gray',
@@ -52,54 +52,96 @@ function resolveCardColorTokens(
     avatar: {
       gray: {
         _hue: tokens?.avatar?.gray?._hue ?? 'gray',
-        bg: tokens?.avatar?.gray?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.gray?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.gray?.fg ?? ['white', '900'],
       },
       blue: {
         _hue: tokens?.avatar?.blue?._hue ?? 'blue',
-        bg: tokens?.avatar?.blue?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.blue?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.blue?.fg ?? ['white', '900'],
       },
       purple: {
         _hue: tokens?.avatar?.purple?._hue ?? 'purple',
-        bg: tokens?.avatar?.purple?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.purple?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.purple?.fg ?? ['white', '900'],
       },
       magenta: {
         _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
-        bg: tokens?.avatar?.magenta?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.magenta?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['white', '900'],
       },
       red: {
         _hue: tokens?.avatar?.red?._hue ?? 'red',
-        bg: tokens?.avatar?.red?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.red?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.red?.fg ?? ['white', '900'],
       },
       orange: {
         _hue: tokens?.avatar?.orange?._hue ?? 'orange',
-        bg: tokens?.avatar?.orange?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.orange?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.orange?.fg ?? ['white', '900'],
       },
       yellow: {
         _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
-        bg: tokens?.avatar?.yellow?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.yellow?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['white', '900'],
       },
       green: {
         _hue: tokens?.avatar?.green?._hue ?? 'green',
-        bg: tokens?.avatar?.green?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.green?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.green?.fg ?? ['white', '900'],
       },
       cyan: {
         _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
-        bg: tokens?.avatar?.cyan?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.cyan?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['white', '900'],
+      },
+    },
+    backdrop: tokens?.backdrop ?? ['100', '900'],
+    code: {
+      bg: tokens?.code?.bg ?? ['50', '950'],
+      fg: tokens?.code?.fg ?? ['600', '400'],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ['600', '400'],
+        attribute: tokens?.code?.token?.attribute ?? ['600', '400'],
+        attrName: tokens?.code?.token?.attrName ?? ['600', '400'],
+        attrValue: tokens?.code?.token?.attrValue ?? ['600', '400'],
+        boolean: tokens?.code?.token?.boolean ?? ['600', '400'],
+        builtin: tokens?.code?.token?.builtin ?? ['600', '400'],
+        cdata: tokens?.code?.token?.cdata ?? ['600', '400'],
+        char: tokens?.code?.token?.char ?? ['600', '400'],
+        class: tokens?.code?.token?.class ?? ['600', '400'],
+        className: tokens?.code?.token?.className ?? ['600', '400'],
+        comment: tokens?.code?.token?.comment ?? ['400', '600'],
+        constant: tokens?.code?.token?.constant ?? ['600', '400'],
+        deleted: tokens?.code?.token?.deleted ?? ['600', '400'],
+        doctype: tokens?.code?.token?.doctype ?? ['600', '400'],
+        entity: tokens?.code?.token?.entity ?? ['600', '400'],
+        function: tokens?.code?.token?.function ?? ['600', '400'],
+        hexcode: tokens?.code?.token?.hexcode ?? ['600', '400'],
+        id: tokens?.code?.token?.id ?? ['600', '400'],
+        important: tokens?.code?.token?.important ?? ['600', '400'],
+        inserted: tokens?.code?.token?.inserted ?? ['600', '400'],
+        keyword: tokens?.code?.token?.keyword ?? ['600', '400'],
+        number: tokens?.code?.token?.number ?? ['600', '400'],
+        operator: tokens?.code?.token?.operator ?? ['600', '400'],
+        prolog: tokens?.code?.token?.prolog ?? ['600', '400'],
+        property: tokens?.code?.token?.property ?? ['600', '400'],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['600', '400'],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['600', '400'],
+        punctuation: tokens?.code?.token?.punctuation ?? ['600', '400'],
+        regex: tokens?.code?.token?.regex ?? ['600', '400'],
+        selector: tokens?.code?.token?.selector ?? ['600', '400'],
+        string: tokens?.code?.token?.string ?? ['600', '400'],
+        symbol: tokens?.code?.token?.symbol ?? ['600', '400'],
+        tag: tokens?.code?.token?.tag ?? ['600', '400'],
+        unit: tokens?.code?.token?.unit ?? ['600', '400'],
+        url: tokens?.code?.token?.url ?? ['600', '400'],
+        variable: tokens?.code?.token?.variable ?? ['600', '400'],
       },
     },
-    backdrop: tokens?.backdrop ?? ['900', '100'],
     focusRing: tokens?.focusRing ?? ['500', '500'],
     link: {
-      fg: tokens?.link?.fg ?? ['400', '600'],
+      fg: tokens?.link?.fg ?? ['600', '400'],
     },
     shadow: {
       outline: tokens?.shadow?.outline ?? ['500', '500'],
@@ -108,47 +150,10 @@ function resolveCardColorTokens(
       ambient: tokens?.shadow?.ambient ?? ['500', '500'],
     },
     skeleton: {
-      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'],
+      from: tokens?.skeleton?.from ?? ['100', '900'],
+      to: tokens?.skeleton?.to ?? ['50', '950'],
     },
+
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),

package/src/theme/v3/tokens.ts

@@ -1,5 +1,5 @@
-import {ColorToken} from './color/token'
-import {ColorTokens} from './color/tokens'
+import type {ColorToken} from './color/token'
+import type {ColorTokens} from './color/tokens'
 
 /** @public */
 export interface Tokens {