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

package/src/theme/build/buildTheme.test.ts

@@ -1,8 +1,8 @@
+import {defaultColorPalette} from '../defaults/colorPalette'
 import {buildTheme} from './buildTheme'
-import {defaultColorPalette} from './defaults/colorPalette'
 
 test('build theme', () => {
-  const {color} = buildTheme({
+  const rootTheme = buildTheme({
     palette: {
       ...defaultColorPalette,
       black: '#000000',
@@ -27,10 +27,12 @@ test('build theme', () => {
     },
   })
 
+  const {color} = rootTheme.v2!
+
   expect({
     light: {
-      bg: color.light.default.base.bg,
-      fg: color.light.default.base.fg,
+      bg: color.light.default.bg,
+      fg: color.light.default.fg,
       default: {
         button: {
           ghost: {
@@ -42,8 +44,8 @@ test('build theme', () => {
       },
     },
     dark: {
-      bg: color.dark.default.base.bg,
-      fg: color.dark.default.base.fg,
+      bg: color.dark.default.bg,
+      fg: color.dark.default.fg,
       default: {
         button: {
           ghost: {
@@ -75,7 +77,7 @@ test('build theme', () => {
         button: {
           ghost: {
             enabled: {
-              border: 'rgba(19,19,27,0)',
+              border: 'rgba(19,20,27,0)',
             },
           },
         },

package/src/theme/build/buildTheme.ts

@@ -1,28 +1,31 @@
 import {ThemeConfig} from '../config'
-import {RootTheme} from '../system'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import {RootTheme, RootTheme_v2} from '../system'
+import {v2_v0} from '../versioning'
 import {buildColorTheme} from './buildColorTheme'
-import {defaultThemeConfig} from './defaults/config'
-import {defaultThemeFonts} from './defaults/fonts'
 import {renderThemeColorSchemes} from './renderColorTheme'
 
 /** @internal */
 export function buildTheme(config?: ThemeConfig): RootTheme {
   const colorTheme = buildColorTheme(config)
 
-  return {
+  const v2: RootTheme_v2 = {
+    _version: 2,
     avatar: config?.avatar ?? defaultThemeConfig.avatar,
     button: config?.button ?? defaultThemeConfig.button,
     card: config?.card ?? defaultThemeConfig.card,
     color: renderThemeColorSchemes(colorTheme, config),
     container: config?.container ?? defaultThemeConfig.container,
-    focusRing: config?.focusRing ?? defaultThemeConfig.focusRing,
-    fonts: config?.fonts ?? defaultThemeFonts,
+    font: config?.fonts ?? defaultThemeFonts,
     input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
     media: config?.media ?? defaultThemeConfig.media,
     radius: config?.radius ?? defaultThemeConfig.radius,
-    shadows: config?.shadows ?? defaultThemeConfig.shadows,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
     space: config?.space ?? defaultThemeConfig.space,
-
-    styles: config?.styles ?? defaultThemeConfig.styles,
+    style: config?.style ?? defaultThemeConfig.style,
   }
+
+  return v2_v0(v2)
 }

package/src/theme/build/colorToken.ts

@@ -6,9 +6,11 @@ export interface ColorTokenContext {
   scheme: 'light' | 'dark'
 }
 
+const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
+
 export function resolveColorTokenValue(
   context: ColorTokenContext,
-  value: ThemeColorTokenValue,
+  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
 ): string {
   const {hue, scheme} = context
   const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])

package/src/theme/build/lib/color-fns/contrastRatio.ts

@@ -1,6 +1,7 @@
 import {parseColor} from './parse'
 import {RGB, RGBA} from './types'
 
+/** @internal */
 export function getContrastRatio(bg: string, fg: string): number {
   const rgb1 = parseColor(bg) // bg: RGB | RGBA, fg: RGB | RGBA
   const rgb2 = parseColor(fg)

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

@@ -0,0 +1,3 @@
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+}

package/src/theme/build/merge.ts

@@ -1,23 +1,28 @@
-export function merge(
-  target: Record<string, unknown>,
-  source: Record<string, unknown>,
-): Record<string, unknown> {
-  const ret = {...target}
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
+import {isRecord} from './lib/isRecord'
+
+export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
+  const _records = records.filter(Boolean) as T[]
+
+  if (_records.length === 0) {
+    return {} as T
+  }
+
+  return _records.reduce(_merge, {} as T)
+}
+
+function _merge<T extends Record<string, any>>(acc: T, source: T): T {
   for (const key of Object.keys(source)) {
-    const prevValue = target[key]
+    const prevValue = acc[key]
     const nextValue = source[key]
 
     if (isRecord(prevValue) && isRecord(nextValue)) {
-      ret[key] = merge(prevValue, nextValue)
+      ;(acc as any)[key] = merge(prevValue, nextValue)
     } else {
-      ret[key] = nextValue
+      ;(acc as any)[key] = nextValue
     }
   }
 
-  return ret
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+  return acc
 }