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

package/src/theme/v3/resolveTokens.ts

@@ -0,0 +1,199 @@
+import {
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorCardToneKey,
+  ThemeColorStateToneKey,
+} from '../v2'
+import {CardColorTokens} from './color/card'
+import {ElementColorTokens} from './color/element'
+import {merge} from './merge'
+import {PartialTokens, Tokens} from './tokens'
+
+const defaultElementTokens: ElementColorTokens = {
+  _hue: 'gray',
+  bg: {
+    0: ['950', '50'],
+    4: ['700', '300'],
+  },
+  border: {
+    0: ['700', '300'],
+    4: ['400', '600'],
+  },
+  fg: {
+    0: ['100', '900'],
+    4: ['400', '600'],
+  },
+}
+
+/** @internal */
+export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
+  return {
+    color: {
+      '*': resolveCardColorTokens(tokens.color?.['*']),
+
+      ...THEME_COLOR_CARD_TONES.reduce(
+        (acc, tone) => {
+          return {
+            ...acc,
+            [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
+          }
+        },
+        {} as Record<ThemeColorCardToneKey, CardColorTokens>,
+      ),
+    },
+  }
+}
+
+function resolveCardColorTokens(
+  tokens: PartialTokens<CardColorTokens> | undefined,
+): CardColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    avatar: {
+      gray: {
+        _hue: tokens?.avatar?.gray?._hue ?? 'gray',
+        bg: tokens?.avatar?.gray?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
+      },
+      blue: {
+        _hue: tokens?.avatar?.blue?._hue ?? 'blue',
+        bg: tokens?.avatar?.blue?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
+      },
+      purple: {
+        _hue: tokens?.avatar?.purple?._hue ?? 'purple',
+        bg: tokens?.avatar?.purple?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
+      },
+      magenta: {
+        _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
+        bg: tokens?.avatar?.magenta?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
+      },
+      red: {
+        _hue: tokens?.avatar?.red?._hue ?? 'red',
+        bg: tokens?.avatar?.red?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
+      },
+      orange: {
+        _hue: tokens?.avatar?.orange?._hue ?? 'orange',
+        bg: tokens?.avatar?.orange?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
+      },
+      yellow: {
+        _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
+        bg: tokens?.avatar?.yellow?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
+      },
+      green: {
+        _hue: tokens?.avatar?.green?._hue ?? 'green',
+        bg: tokens?.avatar?.green?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
+      },
+      cyan: {
+        _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
+        bg: tokens?.avatar?.cyan?.bg ?? ['400', '400'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
+      },
+    },
+    backdrop: tokens?.backdrop ?? ['900', '100'],
+    focusRing: tokens?.focusRing ?? ['500', '500'],
+    link: {
+      fg: tokens?.link?.fg ?? ['400', '600'],
+    },
+    shadow: {
+      outline: tokens?.shadow?.outline ?? ['500', '500'],
+      umbra: tokens?.shadow?.umbra ?? ['500', '500'],
+      penumbra: tokens?.shadow?.penumbra ?? ['500', '500'],
+      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'],
+    },
+    variant: {
+      solid: {
+        '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
+        ...THEME_COLOR_STATE_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+        ),
+      },
+      tinted: {
+        '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
+        ...THEME_COLOR_STATE_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+        ),
+      },
+    },
+  }
+}
+
+function resolveElementTokens(tokens?: PartialTokens<ElementColorTokens>): ElementColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    bg: {
+      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
+      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4],
+    },
+    border: {
+      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
+      4: tokens?.border?.[4] ?? defaultElementTokens.border[4],
+    },
+    fg: {
+      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
+      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4],
+    },
+  }
+}

package/src/theme/v3/tokens.ts

@@ -0,0 +1,16 @@
+import {ColorToken} from './color/token'
+import {ColorTokens} from './color/tokens'
+
+/** @public */
+export interface Tokens {
+  color: ColorTokens
+}
+
+/** @public */
+export type PartialTokens<T> = T extends [ColorToken, ColorToken]
+  ? T
+  : T extends {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+    ? {
+        [P in keyof T]?: PartialTokens<T[P]>
+      }
+    : T

package/src/theme/v3/types.ts

@@ -0,0 +1,48 @@
+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'
+import {PartialTokens, Tokens} from './tokens'
+
+/** @public */
+export type ThemeEntry = [`--${string}`, string]
+
+/** @public */
+export interface ThemeOptions {
+  v2?: ThemeConfig
+  palette?: PaletteConfig
+  tokens?: PartialTokens<Tokens>
+}
+
+/**
+ * Supersedes `RootTheme` and `RootTheme_v2`.
+ *
+ * @public
+ */
+export interface Theme_v3 {
+  _version: 3
+  _palette: PaletteConfig
+  _tokens: Tokens
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color: ThemeColor_v3
+  // color: ThemeColorSchemes_v2
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+}

package/src/theme/versioning/getTheme_v2.ts

@@ -1,5 +1,6 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {Theme, Theme_v2} from '../system'
+import {Theme} from '../types'
+import {Theme_v2} from '../v2'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()

package/src/theme/versioning/index.ts

@@ -1,5 +1 @@
 export * from './getTheme_v2'
-export * from './is_v0'
-export * from './is_v2'
-export * from './v0_v2'
-export * from './v2_v0'

package/src/theme/versioning/is_v0.ts

@@ -1,4 +1,5 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {

package/src/theme/versioning/is_v2.ts

@@ -1,4 +1,5 @@
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -1,15 +1,17 @@
 import {
   ThemeColor,
   ThemeColorGenericState,
+  ThemeColorInputState,
+  ThemeColorInputStates,
   ThemeColorMuted,
-  ThemeColorSelectable_v2,
-  ThemeColorState_v2,
+} from '../v0'
+import {
   ThemeColorCard_v2,
-  ThemeColorInputStates,
   ThemeColorInputMode_v2,
-  ThemeColorInputState,
   ThemeColorInputState_v2,
-} from '../system'
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+} from '../v2'
 
 const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
 
@@ -75,6 +77,13 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.default.selected),
       disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
     },
+    neutral: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
     primary: {
       enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
       hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
@@ -82,6 +91,13 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.primary.selected),
       disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
     },
+    suggest: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
+    },
     positive: {
       enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
       hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
@@ -154,12 +170,24 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
         dot: v0.muted.default.enabled.muted.fg,
         icon: v0.muted.default.enabled.muted.fg,
       },
+      neutral: {
+        bg: v0.muted.transparent.enabled.bg,
+        fg: v0.muted.transparent.enabled.fg,
+        dot: v0.muted.transparent.enabled.muted.fg,
+        icon: v0.muted.transparent.enabled.muted.fg,
+      },
       primary: {
         bg: v0.muted.primary.enabled.bg,
         fg: v0.muted.primary.enabled.fg,
         dot: v0.muted.primary.enabled.muted.fg,
         icon: v0.muted.primary.enabled.muted.fg,
       },
+      suggest: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg,
+      },
       positive: {
         bg: v0.muted.positive.enabled.bg,
         fg: v0.muted.positive.enabled.fg,

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -0,0 +1,49 @@
+import {ThemeColorCard_v2} from '../v2'
+
+/**
+ * Apply `neutral` and `suggest` if they're not already part of the color object,
+ * as this was introduced in v2.9, but is not compatible with v2.0.
+ *
+ * @param color - The color object to upgrade
+ * @returns The upgraded color object. Returns as-is if already upgraded.
+ * @internal
+ */
+export function themeColor_v0_v2_9(color: ThemeColorCard_v2): ThemeColorCard_v2 {
+  if ('neutral' in color.badge) {
+    return color // Already at >= v2.9
+  }
+
+  // TypeScript narrows to `never` because the above should always be true
+  const colors = color as ThemeColorCard_v2
+
+  return {
+    ...colors,
+    badge: {
+      ...colors.badge,
+      neutral: colors.badge.default,
+      suggest: colors.badge.primary,
+    },
+    button: {
+      bleed: {
+        ...colors.button.bleed,
+        neutral: colors.button.bleed.default,
+        suggest: colors.button.bleed.primary,
+      },
+      default: {
+        ...colors.button.default,
+        neutral: colors.button.default.default,
+        suggest: colors.button.default.primary,
+      },
+      ghost: {
+        ...colors.button.ghost,
+        neutral: colors.button.ghost.default,
+        suggest: colors.button.ghost.primary,
+      },
+    },
+    selectable: {
+      ...colors.selectable,
+      neutral: colors.selectable.default,
+      suggest: colors.selectable.primary,
+    },
+  }
+}

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -0,0 +1,206 @@
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  ThemeColorBadge_v2,
+  ThemeColorButton_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
+  ThemeColorCard_v2,
+  ThemeColorInput_v2,
+  ThemeColorInputMode_v2,
+  ThemeColorInputState_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorSelectableTone_v2,
+  ThemeColorState_v2,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+} from '../v2'
+import {ThemeColorCard_v3, ThemeColorElement, ThemeColorVariantKey} from '../v3'
+
+export function themeColor_v3_v2(options: {
+  color: ThemeColorCard_v3
+  dark: boolean
+}): ThemeColorCard_v2 {
+  const {color, dark} = options
+
+  return {
+    _blend: 'screen',
+    _dark: dark,
+    ...buildColorState({
+      cardColor: color,
+      state: 'enabled',
+      tone: 'default',
+      variant: 'tinted',
+    }),
+    backdrop: color.backdrop,
+    button: THEME_COLOR_BUTTON_MODES.reduce<ThemeColorButton_v2>((modes, mode) => {
+      modes[mode] = THEME_COLOR_STATE_TONES.reduce<ThemeColorButtonMode_v2>((tones, tone) => {
+        tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorButtonTone_v2>((states, state) => {
+          states[state] = buildColorState({
+            cardColor: color,
+            state,
+            tone,
+            variant: mode === 'default' ? 'solid' : 'tinted',
+          })
+
+          if (mode === 'bleed') {
+            states[state].border = 'transparent'
+          }
+
+          return states
+        }, {} as ThemeColorButtonTone_v2)
+
+        return tones
+      }, {} as ThemeColorButtonMode_v2)
+
+      return modes
+    }, {} as ThemeColorButton_v2),
+    focusRing: color.focusRing,
+    input: THEME_COLOR_INPUT_MODES.reduce<ThemeColorInput_v2>((modes, mode) => {
+      modes[mode] = THEME_COLOR_INPUT_STATES.reduce<ThemeColorInputMode_v2>((states, state) => {
+        states[state] = buildInputState(color.variant.tinted.default)
+
+        return states
+      }, {} as ThemeColorInputMode_v2)
+
+      return modes
+    }, {} as ThemeColorInput_v2),
+    selectable: THEME_COLOR_STATE_TONES.reduce<ThemeColorSelectable_v2>((tones, tone) => {
+      tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorSelectableTone_v2>((states, state) => {
+        states[state] = buildColorState({
+          cardColor: color,
+          // cardVars: vars,
+          state,
+          tone,
+          variant: 'tinted',
+        })
+
+        return states
+      }, {} as ThemeColorSelectableTone_v2)
+
+      return tones
+    }, {} as ThemeColorSelectable_v2),
+    shadow: color.shadow,
+    syntax: color.token,
+  }
+}
+
+type ElementTokenIndex = 0 | 1 | 2 | 3 | 4
+
+const stateShades: Record<
+  ThemeColorStateKey,
+  {
+    bg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+    border: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+    fg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]
+  }
+> = {
+  enabled: {
+    bg: [0, 1, 2],
+    border: [0, 1, 2],
+    fg: [0, 1, 2],
+  },
+  hovered: {
+    bg: [1, 2, 3],
+    border: [1, 2, 3],
+    fg: [1, 2, 3],
+  },
+  pressed: {
+    bg: [2, 3, 4],
+    border: [2, 3, 4],
+    fg: [2, 3, 4],
+  },
+  selected: {
+    bg: [3, 4, 4],
+    border: [3, 4, 4],
+    fg: [3, 4, 4],
+  },
+  disabled: {
+    bg: [4, 4, 4],
+    border: [4, 4, 4],
+    fg: [4, 4, 4],
+  },
+}
+
+function mix(
+  tokens: {
+    0: string
+    4: string
+  },
+  index: ElementTokenIndex,
+) {
+  if (index === 0) {
+    return tokens[0]
+  }
+
+  if (index === 4) {
+    return tokens[4]
+  }
+
+  return `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`
+}
+
+function buildColorState(options: {
+  cardColor: ThemeColorCard_v3
+  state: ThemeColorStateKey
+  tone: ThemeColorStateToneKey
+  variant: ThemeColorVariantKey
+}): ThemeColorState_v2 {
+  const {cardColor, state, tone, variant} = options
+  const color = cardColor.variant[variant][tone]
+
+  const shades = stateShades[state]
+
+  return {
+    accent: {
+      fg: color.fg[4],
+    },
+    avatar: cardColor.avatar,
+    badge: THEME_COLOR_STATE_TONES.reduce<ThemeColorBadge_v2>((tones, tone) => {
+      tones[tone] = {
+        bg: mix(color.bg, 1),
+        fg: mix(color.fg, 1),
+        dot: mix(color.fg, 3),
+        icon: mix(color.fg, 3),
+      }
+
+      return tones
+    }, {} as ThemeColorBadge_v2),
+    bg: mix(color.bg, shades.bg[0]),
+    border: mix(color.border, shades.border[0]),
+    fg: mix(color.fg, shades.fg[0]),
+    code: {
+      bg: mix(color.bg, shades.bg[1]),
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    icon: mix(color.fg, shades.fg[2]),
+    kbd: {
+      bg: mix(color.bg, 0),
+      fg: mix(color.fg, 0),
+      border: mix(color.bg, 0),
+    },
+    link: {
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    muted: {
+      bg: mix(color.bg, shades.bg[1]),
+      fg: mix(color.fg, shades.fg[2]),
+    },
+    skeleton: cardColor.skeleton,
+  }
+}
+
+function buildInputState(colorElement: ThemeColorElement): ThemeColorInputState_v2 {
+  return {
+    bg: colorElement.bg[0],
+    border: colorElement.bg[0],
+    fg: colorElement.fg[0],
+    muted: {
+      bg: colorElement.bg[0],
+    },
+    placeholder: colorElement.fg[0],
+  }
+}

package/src/theme/versioning/v0_v2.ts

@@ -1,5 +1,6 @@
 import {defaultThemeConfig} from '../defaults/config'
-import {RootTheme, RootTheme_v2} from '../system'
+import {RootTheme} from '../types'
+import {RootTheme_v2} from '../v2'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<RootTheme, RootTheme_v2>()
@@ -44,7 +45,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
       light: {
         transparent: themeColor_v0_v2(color.light.transparent),
         default: themeColor_v0_v2(color.light.default),
+        neutral: themeColor_v0_v2(color.light.transparent),
         primary: themeColor_v0_v2(color.light.primary),
+        suggest: themeColor_v0_v2(color.light.primary),
         positive: themeColor_v0_v2(color.light.positive),
         caution: themeColor_v0_v2(color.light.caution),
         critical: themeColor_v0_v2(color.light.critical),
@@ -52,7 +55,9 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
       dark: {
         transparent: themeColor_v0_v2(color.dark.transparent),
         default: themeColor_v0_v2(color.dark.default),
+        neutral: themeColor_v0_v2(color.dark.transparent),
         primary: themeColor_v0_v2(color.dark.primary),
+        suggest: themeColor_v0_v2(color.dark.primary),
         positive: themeColor_v0_v2(color.dark.positive),
         caution: themeColor_v0_v2(color.dark.caution),
         critical: themeColor_v0_v2(color.dark.critical),

package/src/theme/versioning/v2_v0.ts

@@ -1,18 +1,17 @@
+import {RootTheme} from '../types'
+import {ThemeColor, ThemeColorInputState, ThemeColorInputStates} from '../v0'
 import {
-  RootTheme,
   RootTheme_v2,
-  ThemeColor,
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
-  ThemeColorInputState,
   ThemeColorInputState_v2,
-  ThemeColorInputStates,
-} from '../system'
+} from '../v2'
+import {Theme_v3} from '../v3'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 
 /** @internal */
-export function v2_v0(v2: RootTheme_v2): RootTheme {
+export function v2_v0(v2: RootTheme_v2, v3?: Theme_v3): RootTheme {
   const cachedTheme = cache.get(v2)
 
   if (cachedTheme) return cachedTheme
@@ -64,6 +63,7 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
     styles,
 
     v2,
+    v3,
   }
 }