@sanity/ui 2.0.0-alpha.35 → 2.0.0-alpha.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.35",
+  "version": "2.0.0-alpha.37",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/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,

package/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

package/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

package/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'

package/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

package/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[]
@@ -41,36 +41,64 @@ export interface RootTheme_v2 {
  */
 export interface BaseTheme {
   _version?: 0
+  /**
+   * @deprecated Use `v2.avatar` instead
+   */
   avatar: ThemeAvatar
+  /**
+   * @deprecated Use `v2.button` instead
+   */
   button: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
     textWeight: ThemeFontWeightKey
   }
-  card: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    shadow: {outline: number}
-  }
+  /**
+   * @deprecated Use `v2.color` instead
+   */
   color: ThemeColorSchemes
+  /**
+   * @deprecated Use `v2.container` instead
+   */
   container: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
+  /**
+   * @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
+   */
   focusRing: {
     offset: number
     width: number
   }
+  /**
+   * @deprecated Use `v2.font` instead
+   */
   fonts: ThemeFonts
+  /**
+   * @deprecated Use `v2.input` instead
+   */
   input: ThemeInput
   /**
    * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
    * @beta
+   * @deprecated Use `v2.layer` instead
    */
   layer?: ThemeLayer
+  /**
+   * @deprecated Use `v2.media` instead
+   */
   media: number[]
+  /**
+   * @deprecated Use `v2.radius` instead
+   */
   radius: number[]
+  /**
+   * @deprecated Use `v2.shadow` instead
+   */
   shadows: Array<ThemeShadow | null>
+  /**
+   * @deprecated Use `v2.space` instead
+   */
   space: number[]
-  /** @internal */
+  /**
+   * @deprecated Use `v2.style` instead
+   */
   styles?: ThemeStyles
 
   v2?: RootTheme_v2
@@ -91,6 +119,9 @@ export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {color: ThemeColorCard_v2}
  */
 export interface Theme {
   sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
     color: ThemeColor
     v2?: Theme_v2
   }

package/src/theme/system/v0/avatar.ts

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

package/src/theme/system/v0/index.ts

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

package/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
+  }
+}

package/src/theme/versioning/getTheme_v2.ts

@@ -14,13 +14,34 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
 
   const v2: Theme_v2 = {
     _version: 2,
-    avatar: theme.sanity.avatar,
-    button: theme.sanity.button,
-    card: theme.sanity.card,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...theme.sanity.button,
+    },
+    card: defaultThemeConfig.card,
     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,

package/src/theme/versioning/v0_v2.ts

@@ -15,7 +15,6 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
   const {
     avatar,
     button,
-    card,
     color,
     container,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -32,9 +31,15 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
 
   const v2: RootTheme_v2 = {
     _version: 2,
-    avatar,
-    button,
-    card,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar,
+    },
+    button: {
+      ...defaultThemeConfig.button,
+      ...button,
+    },
+    card: defaultThemeConfig.card,
     color: {
       light: {
         transparent: themeColor_v0_v2(color.light.transparent),
@@ -55,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,

package/src/theme/versioning/v2_v0.ts

@@ -20,7 +20,6 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
   const {
     avatar,
     button,
-    card,
     color,
     container,
     font: fonts,
@@ -36,7 +35,6 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
     _version: 0,
     avatar,
     button,
-    card,
     container,
     color: {
       light: {