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

package/dist/theme.d.ts

@@ -8,42 +8,64 @@ import type {StyledObject} from 'styled-components'
  */
 export declare 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
 }
@@ -370,7 +392,7 @@ export declare type RootTheme = BaseTheme
  */
 export declare interface RootTheme_v2 {
   _version: 2
-  avatar: ThemeAvatar
+  avatar: ThemeAvatar_v2
   button: {
     border: {
       width: number
@@ -390,7 +412,7 @@ export declare interface RootTheme_v2 {
   color: ThemeColorSchemes_v2
   container: number[]
   font: ThemeFonts
-  input: ThemeInput
+  input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
   radius: number[]
@@ -418,6 +440,9 @@ export declare type Styles = ThemeStyles
  */
 export declare interface Theme {
   sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
     color: ThemeColor
     v2?: Theme_v2
   }
@@ -480,8 +505,19 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
 
 /**
  * @public
+ * @deprecated Use `ThemeAvatar_v2` instead
  */
 export declare interface ThemeAvatar {
+  sizes: {
+    distance: number
+    size: number
+  }[]
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeAvatar_v2 {
   sizes: {
     /** Spacing between avatars in an <AvatarStack> component (px) */
     distance: number
@@ -1254,7 +1290,7 @@ export declare type ThemeColorToneKey = ThemeColorCardToneKey
 
 /** @public */
 export declare interface ThemeConfig {
-  avatar?: ThemeAvatar
+  avatar?: ThemeAvatar_v2
   button?: {
     border: {
       width: number
@@ -1273,8 +1309,8 @@ export declare interface ThemeConfig {
   }
   color?: ThemeColorTokens
   container?: number[]
-  fonts?: ThemeFonts
-  input?: ThemeInput
+  font?: ThemeFonts
+  input?: ThemeInput_v2
   layer?: ThemeLayer
   media?: number[]
   palette?: ThemeColorPalette
@@ -1348,8 +1384,32 @@ export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bo
 
 /**
  * @public
+ * @deprecated Use `ThemeInput_v2` instead
  */
 export declare interface ThemeInput {
+  checkbox: {
+    size: number
+  }
+  radio: {
+    size: number
+    markSize: number
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+  }
+  border: {
+    width: number
+  }
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeInput_v2 {
   checkbox: {
     size: number
     focusRing: ThemeFocusRing

package/dist/theme.esm.js

@@ -1679,13 +1679,34 @@ function getTheme_v2(theme) {
   if (cached_v2) return cached_v2;
   const 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: (_a = theme.sanity.layer) != null ? _a : defaultThemeConfig.layer,
     media: theme.sanity.media,
     radius: theme.sanity.radius,
@@ -1710,7 +1731,6 @@ function v0_v2(v0) {
   const {
     avatar,
     button,
-    card,
     color,
     container,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -1726,9 +1746,15 @@ function v0_v2(v0) {
   } = v0;
   const 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),
@@ -1749,7 +1775,22 @@ function v0_v2(v0) {
     },
     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 != null ? layer : defaultThemeConfig.layer,
     media,
     radius,
@@ -1767,7 +1808,6 @@ function v2_v0(v2) {
   const {
     avatar,
     button,
-    card,
     color,
     container,
     font: fonts,
@@ -1782,7 +1822,6 @@ function v2_v0(v2) {
     _version: 0,
     avatar,
     button,
-    card,
     container,
     color: {
       light: {
@@ -4237,9 +4276,14 @@ function buildTheme(config) {
     avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : defaultThemeConfig.avatar,
     button: (_b = config == null ? void 0 : config.button) != null ? _b : defaultThemeConfig.button,
     card: (_c = config == null ? void 0 : config.card) != null ? _c : 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: (_d = config == null ? void 0 : config.container) != null ? _d : defaultThemeConfig.container,
-    font: (_e = config == null ? void 0 : config.fonts) != null ? _e : defaultThemeFonts,
+    font: (_e = config == null ? void 0 : config.font) != null ? _e : defaultThemeFonts,
     input: (_f = config == null ? void 0 : config.input) != null ? _f : defaultThemeConfig.input,
     layer: (_g = config == null ? void 0 : config.layer) != null ? _g : defaultThemeConfig.layer,
     media: (_h = config == null ? void 0 : config.media) != null ? _h : defaultThemeConfig.media,