fix(theme): improve backwards compatibility

src/theme/build/buildTheme.ts

@@ -15,9 +15,14 @@ export function buildTheme(config?: ThemeConfig): RootTheme {
     avatar: config?.avatar ?? defaultThemeConfig.avatar,
     button: config?.button ?? defaultThemeConfig.button,
     card: config?.card ?? defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
     color: renderThemeColorSchemes(colorTheme, config),
     container: config?.container ?? defaultThemeConfig.container,
-    font: config?.fonts ?? defaultThemeFonts,
+    font: config?.font ?? defaultThemeFonts,
     input: config?.input ?? defaultThemeConfig.input,
     layer: config?.layer ?? defaultThemeConfig.layer,
     media: config?.media ?? defaultThemeConfig.media,

src/theme/config/types.ts

@@ -1,10 +1,10 @@
 import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
 import {
-  ThemeAvatar,
+  ThemeAvatar_v2,
   ThemeFocusRing,
   ThemeFontWeightKey,
   ThemeFonts,
-  ThemeInput,
+  ThemeInput_v2,
   ThemeLayer,
   ThemeShadow,
   ThemeStyles,
@@ -19,7 +19,7 @@ export type ThemeColorPalette = {
 
 /** @public */
 export interface ThemeConfig {
-  avatar?: ThemeAvatar
+  avatar?: ThemeAvatar_v2
   button?: {
     border: {width: number}
     focusRing: ThemeFocusRing
@@ -32,8 +32,8 @@ export interface ThemeConfig {
   }
   color?: ThemeColorTokens
   container?: number[]
-  fonts?: ThemeFonts
-  input?: ThemeInput
+  font?: ThemeFonts
+  input?: ThemeInput_v2
   layer?: ThemeLayer
   media?: number[]
   palette?: ThemeColorPalette

src/theme/system/avatar.ts

@@ -3,7 +3,7 @@ import {ThemeFocusRing} from './focusRing'
 /**
  * @public
  */
-export interface ThemeAvatar {
+export interface ThemeAvatar_v2 {
   sizes: {
     /** Spacing between avatars in an <AvatarStack> component (px) */
     distance: number

src/theme/system/index.ts

@@ -4,7 +4,7 @@ export * from './avatar'
 export * from './color'
 export * from './css'
 export * from './focusRing'
-export * from './fonts'
+export * from './font'
 export * from './input'
 export * from './layer'
 export * from './shadow'

src/theme/system/input.ts

@@ -3,7 +3,7 @@ import {ThemeFocusRing} from './focusRing'
 /**
  * @public
  */
-export interface ThemeInput {
+export interface ThemeInput_v2 {
   checkbox: {
     size: number
     focusRing: ThemeFocusRing

src/theme/system/theme.ts

@@ -1,19 +1,19 @@
-import {ThemeAvatar} from './avatar'
+import {ThemeAvatar_v2} from './avatar'
 import {ThemeColorSchemes_v2, ThemeColorCard_v2} from './color'
 import {ThemeFocusRing} from './focusRing'
-import {ThemeFontWeightKey, ThemeFonts} from './fonts'
-import {ThemeInput} from './input'
+import {ThemeFontWeightKey, ThemeFonts} from './font'
+import {ThemeInput_v2} from './input'
 import {ThemeLayer} from './layer'
 import {ThemeShadow} from './shadow'
 import {ThemeStyles} from './styles'
-import {ThemeColor, ThemeColorSchemes} from './v0'
+import {ThemeAvatar, ThemeColor, ThemeColorSchemes, ThemeInput} from './v0'
 
 /**
  * @public
  */
 export interface RootTheme_v2 {
   _version: 2
-  avatar: ThemeAvatar
+  avatar: ThemeAvatar_v2
   button: {
     border: {width: number}
     focusRing: ThemeFocusRing
@@ -27,7 +27,7 @@ export interface RootTheme_v2 {
   color: ThemeColorSchemes_v2
   container: number[]
   font: ThemeFonts
-  input: ThemeInput
+  input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
   radius: number[]

src/theme/system/v0/avatar.ts

@@ -0,0 +1,10 @@
+/**
+ * @public
+ * @deprecated Use `ThemeAvatar_v2` instead
+ */
+export interface ThemeAvatar {
+  sizes: {
+    distance: number
+    size: number
+  }[]
+}

src/theme/system/v0/index.ts

@@ -1 +1,3 @@
 export * from './color'
+export * from './avatar'
+export * from './input'

src/theme/system/v0/input.ts

@@ -0,0 +1,23 @@
+/**
+ * @public
+ * @deprecated Use `ThemeInput_v2` instead
+ */
+export interface ThemeInput {
+  checkbox: {
+    size: number
+  }
+  radio: {
+    size: number
+    markSize: number
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+  }
+  border: {
+    width: number
+  }
+}

src/theme/versioning/getTheme_v2.ts

@@ -14,7 +14,10 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
 
   const v2: Theme_v2 = {
     _version: 2,
-    avatar: theme.sanity.avatar,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar,
+    },
     button: {
       ...defaultThemeConfig.button,
       ...theme.sanity.button,
@@ -23,7 +26,22 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
     color: themeColor_v0_v2(theme.sanity.color),
     container: theme.sanity.container,
     font: theme.sanity.fonts,
-    input: theme.sanity.input,
+    input: {
+      ...defaultThemeConfig.input,
+      ...theme.sanity.input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...theme.sanity.input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...theme.sanity.input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...theme.sanity.input.switch,
+      },
+    },
     layer: theme.sanity.layer ?? defaultThemeConfig.layer,
     media: theme.sanity.media,
     radius: theme.sanity.radius,

src/theme/versioning/v0_v2.ts

@@ -31,7 +31,10 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
 
   const v2: RootTheme_v2 = {
     _version: 2,
-    avatar,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar,
+    },
     button: {
       ...defaultThemeConfig.button,
       ...button,
@@ -57,7 +60,22 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
     },
     container,
     font,
-    input,
+    input: {
+      ...defaultThemeConfig.input,
+      ...input,
+      checkbox: {
+        ...defaultThemeConfig.input.checkbox,
+        ...input.checkbox,
+      },
+      radio: {
+        ...defaultThemeConfig.input.radio,
+        ...input.radio,
+      },
+      switch: {
+        ...defaultThemeConfig.input.switch,
+        ...input.switch,
+      },
+    },
     layer: layer ?? defaultThemeConfig.layer,
     media,
     radius,