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

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultTokens} from './defaults'
+import {defaultPalette, defaultTokens} from './defaults'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
@@ -12,6 +12,7 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   return {
     _version: 3,
+    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,

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

@@ -72,48 +72,6 @@ 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),
@@ -125,7 +83,44 @@ 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,48 +15,6 @@ 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]
@@ -71,7 +29,44 @@ 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,48 +34,6 @@ 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
@@ -83,6 +41,44 @@ 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

@@ -1,52 +1,28 @@
+import {PaletteConfig} from '../palette'
 import {PartialTokens, Tokens} from './tokens'
 
+export const defaultPalette: PaletteConfig = {
+  chroma: {min: 0.005, max: 0.2325},
+  luminosity: {min: 0.1875, max: 1},
+  hues: {
+    gray: {h: 277, c: 0.04},
+    blue: {h: 273, c: 0.185},
+    purple: {h: 295, c: 0.4},
+    magenta: {h: 12, c: 0.4},
+    red: {h: 30, c: 0.4},
+    orange: {h: 68, c: 0.4},
+    yellow: {h: 90, c: 0.4},
+    green: {h: 171, c: 0.4},
+    cyan: {h: 194, c: 0.4},
+  },
+}
+
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
       // 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'],
+      focusRing: ['blue/500', 'blue/300'],
       link: {
         fg: ['blue/400', 'blue/600'],
       },
@@ -56,16 +32,53 @@ 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', '200'],
+              0: ['900', '50'],
+              4: ['800', '150'],
             },
             border: {
-              0: ['700', '100'],
-              4: ['500', '300'],
+              0: ['800', '150'],
+              4: ['600', '350'],
             },
             fg: {
               0: ['100', '900'],
@@ -91,8 +104,8 @@ export const defaultTokens: PartialTokens<Tokens> = {
         solid: {
           '*': {
             bg: {
-              0: ['400', '500'],
-              4: ['300', '600'],
+              0: ['300', '500'],
+              4: ['200', '600'],
             },
             border: {
               0: ['200', '400'],
@@ -137,15 +150,15 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['black', 'gray/50'],
-              4: ['800', '300 50%'],
+              4: ['900', '150'],
             },
             border: {
-              0: ['800', '300 40%'],
-              4: ['600', '300'],
+              0: ['900', '150'],
+              4: ['700', '350'],
             },
             fg: {
-              0: ['100', 'black'],
-              4: ['400', '700'],
+              0: ['150', 'black'],
+              4: ['550', '600'],
             },
           },
         },
@@ -156,12 +169,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['950', 'white'],
-              4: ['800', '200'],
+              0: ['gray/950', 'white'],
+              4: ['850', '100'],
             },
             border: {
-              0: ['800', '100'],
-              4: ['600', '300'],
+              0: ['850', '100'],
+              4: ['650', '300'],
             },
             fg: {
               0: ['white', 'black'],
@@ -171,18 +184,6 @@ export const defaultTokens: PartialTokens<Tokens> = {
         },
       },
     },
-    'neutral': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['700', '200'],
-            },
-          },
-        },
-      },
-    },
     'primary': {
       _hue: 'blue',
     },
@@ -200,3 +201,5 @@ export const defaultTokens: PartialTokens<Tokens> = {
     },
   },
 }
+
+// export const defaultTheme = buildTheme_v3()

package/src/theme/v3/resolveTokens.ts

@@ -97,48 +97,6 @@ function resolveCardColorTokens(
       },
     },
     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'],
@@ -153,7 +111,44 @@ function resolveCardColorTokens(
       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?.['*']),

package/src/theme/v3/types.ts

@@ -1,4 +1,5 @@
 import {ThemeConfig} from '../config'
+import {PaletteConfig} from '../palette'
 import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
 import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
 import {ThemeColor_v3} from './color'
@@ -10,6 +11,7 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
+  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -20,6 +22,7 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
+  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -84,7 +84,7 @@ export function themeColor_v3_v2(options: {
       return tones
     }, {} as ThemeColorSelectable_v2),
     shadow: color.shadow,
-    syntax: color.code.token,
+    syntax: color.token,
   }
 }
 

package/src/css/_comp.test.ts

@@ -1,7 +0,0 @@
-import {_comp} from './_comp'
-
-it('should compose class names', () => {
-  const result = _comp('foo', 'bar baz', undefined, false)
-
-  expect(result).toBe('s-foo s-bar s-baz')
-})

package/src/css/_comp.ts

@@ -1,11 +0,0 @@
-import {getClassNames} from './composeClassNames'
-import {scopeClassName} from './scopeClassName'
-
-export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
-  return (
-    getClassNames(...classNames)
-      .filter(Boolean)
-      .map(scopeClassName)
-      .join(' ') || undefined
-  )
-}

package/src/css/_mergeStyles.ts

@@ -1,31 +0,0 @@
-// import type {Style, StyleKeyframes, StyleLayers, StyleRules} from '@sanity/css'
-
-import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
-
-/** @internal */
-export function _mergeStyles(styles: Style[]): Style {
-  const keyframes: StyleKeyframes = {}
-  const layers: StyleLayers = {}
-  const rules: StyleRules = {}
-
-  for (const s of styles) {
-    if (!s) {
-      // TODO: should not happen
-      continue
-    }
-
-    Object.assign(keyframes, s.keyframes)
-
-    for (const layerName in s.layers) {
-      if (!layers[layerName]) {
-        layers[layerName] = {}
-      }
-
-      Object.assign(layers[layerName], s.layers[layerName])
-    }
-
-    Object.assign(rules, s.rules)
-  }
-
-  return {keyframes, layers, rules}
-}