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

package/dist/theme.d.ts

@@ -392,7 +392,7 @@ export declare type RootTheme = BaseTheme
  */
 export declare interface RootTheme_v2 {
   _version: 2
-  avatar: ThemeAvatar
+  avatar: ThemeAvatar_v2
   button: {
     border: {
       width: number
@@ -412,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[]
@@ -505,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
@@ -1279,7 +1290,7 @@ export declare type ThemeColorToneKey = ThemeColorCardToneKey
 
 /** @public */
 export declare interface ThemeConfig {
-  avatar?: ThemeAvatar
+  avatar?: ThemeAvatar_v2
   button?: {
     border: {
       width: number
@@ -1298,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
@@ -1373,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,7 +1679,10 @@ function getTheme_v2(theme) {
   if (cached_v2) return cached_v2;
   const v2 = {
     _version: 2,
-    avatar: theme.sanity.avatar,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...theme.sanity.avatar
+    },
     button: {
       ...defaultThemeConfig.button,
       ...theme.sanity.button
@@ -1688,7 +1691,22 @@ function getTheme_v2(theme) {
     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,
@@ -1728,7 +1746,10 @@ function v0_v2(v0) {
   } = v0;
   const v2 = {
     _version: 2,
-    avatar,
+    avatar: {
+      ...defaultThemeConfig.avatar,
+      ...avatar
+    },
     button: {
       ...defaultThemeConfig.button,
       ...button
@@ -1754,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,
@@ -4240,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,