@sanity/ui 3.1.12 → 3.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "keywords": [
     "sanity",
     "ui",

package/src/theme/build/buildColorTheme.ts

@@ -27,6 +27,7 @@ import {
   ThemeColorSyntax,
 } from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
+import {defineLazyProperty} from './lib/lazy'
 import {resolveColorTokens} from './resolveColorTokens'
 
 export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
@@ -35,10 +36,13 @@ export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
     color: resolveColorTokens(config?.color),
   }
 
-  return {
-    light: buildColorScheme({scheme: 'light'}, resolvedConfig),
-    dark: buildColorScheme({scheme: 'dark'}, resolvedConfig),
-  }
+  // Lazy schemes — each scheme's token tree is only built when first accessed
+  const schemes = {} as ThemeColorSchemes_v2
+
+  defineLazyProperty(schemes, 'light', () => buildColorScheme({scheme: 'light'}, resolvedConfig))
+  defineLazyProperty(schemes, 'dark', () => buildColorScheme({scheme: 'dark'}, resolvedConfig))
+
+  return schemes
 }
 
 function buildColorScheme(
@@ -47,10 +51,11 @@ function buildColorScheme(
 ): ThemeColorScheme_v2 {
   const {scheme} = options
 
+  // Lazy tones — each tone's token tree is only built when first accessed
   const colorScheme = {} as ThemeColorScheme_v2
 
   for (const tone of THEME_COLOR_CARD_TONES) {
-    colorScheme[tone] = buildCardColorTheme({scheme, tone}, config)
+    defineLazyProperty(colorScheme, tone, () => buildCardColorTheme({scheme, tone}, config))
   }
 
   return colorScheme

package/src/theme/build/lib/lazy.ts

@@ -0,0 +1,30 @@
+/**
+ * Defines a lazy, self-replacing property on `obj`.
+ *
+ * On first access the `factory` is called and the getter is replaced with the
+ * computed plain value — subsequent reads have zero overhead.
+ *
+ * The property is enumerable (visible in `Object.keys` / spread) in both states.
+ *
+ * @internal
+ */
+export function defineLazyProperty<T extends object, K extends keyof T>(
+  obj: T,
+  key: K,
+  factory: () => T[K],
+): void {
+  Object.defineProperty(obj, key, {
+    get() {
+      const value = factory()
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        writable: false,
+        configurable: false,
+      })
+      return value
+    },
+    enumerable: true,
+    configurable: true,
+  })
+}

package/src/theme/build/renderColorTheme.ts

@@ -3,6 +3,7 @@ import {COLOR_HUES} from '@sanity/color'
 import {ThemeColorPalette, ThemeConfig} from '../config'
 import {defaultColorPalette} from '../defaults/colorPalette'
 import {
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
   ThemeColorAvatar_v2,
   ThemeColorBadge_v2,
@@ -12,7 +13,6 @@ import {
   ThemeColorButtonMode_v2,
   ThemeColorButtonTone_v2,
   ThemeColorCard_v2,
-  ThemeColorCardToneKey,
   ThemeColorInput_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
@@ -25,6 +25,7 @@ import {
   ThemeColorState_v2,
   ThemeColorSyntax,
 } from '../system'
+import {defineLazyProperty} from './lib/lazy'
 import {renderColorValue, RenderColorValueOptions} from './renderColorValue'
 
 export function renderThemeColorSchemes(
@@ -33,41 +34,40 @@ export function renderThemeColorSchemes(
 ): ThemeColorSchemes_v2 {
   const colorPalette = config?.palette ?? defaultColorPalette
 
-  return {
-    light: renderThemeColorScheme(colorPalette, value.light),
-    dark: renderThemeColorScheme(colorPalette, value.dark),
-  }
+  // Lazy schemes — each scheme is only rendered when first accessed
+  const schemes = {} as ThemeColorSchemes_v2
+  defineLazyProperty(schemes, 'light', () => renderThemeColorScheme(colorPalette, value.light))
+  defineLazyProperty(schemes, 'dark', () => renderThemeColorScheme(colorPalette, value.dark))
+
+  return schemes
 }
 
 function renderThemeColorScheme(
   colorPalette: ThemeColorPalette,
   value: ThemeColorScheme_v2,
 ): ThemeColorScheme_v2 {
-  const toneEntries = Object.entries(value) as [ThemeColorCardToneKey, ThemeColorCard_v2][]
-
-  const [, transparentTone] = toneEntries.find(([k]) => k === 'transparent')!
-  const [, defaultTone] = toneEntries.find(([k]) => k === 'default')!
+  // The `default` tone must be rendered eagerly — other tones depend on its `bg`.
+  const renderedDefaultTone = renderThemeColor(value.default, {colorPalette})
 
-  // The `transparent` and `default` tones are special cases, so we render them first
-  // (rendered without a `bg` option).
-  // But the rest of the tones are rendered on top of the `default` tone's `bg`.
-  const renderedTransparentTone = renderThemeColor(transparentTone, {colorPalette})
-  const renderedDefaultTone = renderThemeColor(defaultTone, {colorPalette})
-
-  // Get the `default` tone's `bg` property
   const bg = renderedDefaultTone.bg
 
   if (bg === 'white') {
     throw new Error('Cannot blend with white background')
   }
 
-  return Object.fromEntries([
-    ['transparent', renderedTransparentTone],
-    ['default', renderedDefaultTone],
-    ...toneEntries
-      .filter(([k]) => k !== 'default' && k !== 'transparent')
-      .map(([k, v]) => [k, renderThemeColor(v, {bg, colorPalette})]),
-  ]) as ThemeColorScheme_v2
+  // All other tones are lazy. `transparent` and `default` are rendered without
+  // a `bg` option; the rest blend on top of `default`'s `bg`.
+  // We iterate THEME_COLOR_CARD_TONES (not Object.entries) to avoid
+  // force-evaluating lazy getters from the build phase.
+  const scheme = {default: renderedDefaultTone} as ThemeColorScheme_v2
+
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    if (tone === 'default') continue
+    const opts = tone === 'transparent' ? {colorPalette} : {bg, colorPalette}
+    defineLazyProperty(scheme, tone, () => renderThemeColor(value[tone], opts))
+  }
+
+  return scheme
 }
 
 function renderThemeColor(

package/src/theme/getScopedTheme.ts

@@ -1,3 +1,4 @@
+import {defineLazyProperty} from './build/lib/lazy'
 import {defaultThemeConfig} from './defaults/config'
 import {
   RootTheme,
@@ -29,8 +30,6 @@ export function getScopedTheme(
   const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
   const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
 
-  const colorScheme_v0 = v0.color[scheme] || v0.color.light
-  const color_v0 = (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
   const layer_v0 = v0.layer || defaultThemeConfig.layer
 
   const colorScheme_v2 = v2.color[scheme] || v2.color.light
@@ -38,19 +37,27 @@ export function getScopedTheme(
   const color_v2_9 = themeColor_v0_v2_9(color_v2)
   const layer_v2 = v2.layer || defaultThemeConfig.layer
 
-  const theme: Theme = {
-    sanity: {
-      ...v0,
-      color: color_v0,
-      layer: layer_v0,
-      v2: {
-        ...v2,
-        _resolved: true,
-        color: color_v2_9,
-        layer: layer_v2,
-      },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {color: _v0Color, ...v0Rest} = v0
+
+  const sanity = {
+    ...v0Rest,
+    layer: layer_v0,
+    v2: {
+      ...v2,
+      _resolved: true,
+      color: color_v2_9,
+      layer: layer_v2,
     },
-  }
+  } as Theme['sanity']
+
+  // Defer v0 color computation — only resolved if legacy code reads theme.sanity.color
+  defineLazyProperty(sanity, 'color', () => {
+    const colorScheme_v0 = v0.color[scheme] || v0.color.light
+    return (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
+  })
+
+  const theme: Theme = {sanity}
 
   _setCachedTheme(themeProp, scheme, tone, theme)
 

package/src/theme/versioning/v2_v0.ts

@@ -1,3 +1,4 @@
+import {defineLazyProperty} from '../build/lib/lazy'
 import {
   RootTheme,
   RootTheme_v2,
@@ -7,10 +8,23 @@ import {
   ThemeColorInputState,
   ThemeColorInputState_v2,
   ThemeColorInputStates,
+  ThemeColorScheme,
 } from '../system'
 
 const cache = new WeakMap<RootTheme_v2, RootTheme>()
 
+const V0_TONES = ['transparent', 'default', 'primary', 'positive', 'caution', 'critical'] as const
+
+function lazyV0Scheme(schemeKey: 'light' | 'dark', color: RootTheme_v2['color']): ThemeColorScheme {
+  const scheme = {} as ThemeColorScheme
+
+  for (const tone of V0_TONES) {
+    defineLazyProperty(scheme, tone, () => themeColor_v2_v0(color[schemeKey][tone]))
+  }
+
+  return scheme
+}
+
 /** @internal */
 export function v2_v0(v2: RootTheme_v2): RootTheme {
   const cachedTheme = cache.get(v2)
@@ -31,29 +45,19 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
     style: styles,
   } = v2
 
-  return {
+  // Lazy v0 color — two-level lazy structure so we don't force-evaluate
+  // the v2 lazy getters until a v0 tone is actually accessed.
+  const v0Color = {} as RootTheme['color']
+
+  defineLazyProperty(v0Color, 'light', () => lazyV0Scheme('light', color))
+  defineLazyProperty(v0Color, 'dark', () => lazyV0Scheme('dark', color))
+
+  const theme: RootTheme = {
     _version: 0,
     avatar,
     button,
     container,
-    color: {
-      light: {
-        transparent: themeColor_v2_v0(color.light.transparent),
-        default: themeColor_v2_v0(color.light.default),
-        primary: themeColor_v2_v0(color.light.primary),
-        positive: themeColor_v2_v0(color.light.positive),
-        caution: themeColor_v2_v0(color.light.caution),
-        critical: themeColor_v2_v0(color.light.critical),
-      },
-      dark: {
-        transparent: themeColor_v2_v0(color.dark.transparent),
-        default: themeColor_v2_v0(color.dark.default),
-        primary: themeColor_v2_v0(color.dark.primary),
-        positive: themeColor_v2_v0(color.dark.positive),
-        caution: themeColor_v2_v0(color.dark.caution),
-        critical: themeColor_v2_v0(color.dark.critical),
-      },
-    },
+    color: v0Color,
     focusRing: input.text.focusRing,
     fonts,
     input,
@@ -65,6 +69,10 @@ export function v2_v0(v2: RootTheme_v2): RootTheme {
 
     v2,
   }
+
+  cache.set(v2, theme)
+
+  return theme
 }
 
 function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {