@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/theme/v0/color/_generic.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from '../../v2/color/_system'
+import type {ThemeColorBlendModeKey} from '../../v2/color/_system'
 
 /**
  * @public

package/src/theme/v0/color/button.ts

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from './_generic'
+import type {ThemeColorGenericState} from './_generic'
 
 /**
  * @public

package/src/theme/v0/color/card.ts

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from './_generic'
+import type {ThemeColorGenericState} from './_generic'
 
 /**
  * @public

package/src/theme/v0/color/color.ts

@@ -1,14 +1,14 @@
-import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../v2/color'
-import {ThemeColorGenericState} from './_generic'
-import {ThemeColorName} from './_system'
-import {ThemeColorBase} from './base'
-import {ThemeColorButton} from './button'
-import {ThemeColorCard} from './card'
-import {ThemeColorInput} from './input'
-import {ThemeColorMuted} from './muted'
-import {ThemeColorSelectable} from './selectable'
-import {ThemeColorSolid} from './solid'
-import {ThemeColorSpot} from './spot'
+import type {ThemeColorSchemeKey, ThemeColorSyntax} from '../../v2/color'
+import type {ThemeColorGenericState} from './_generic'
+import type {ThemeColorName} from './_system'
+import type {ThemeColorBase} from './base'
+import type {ThemeColorButton} from './button'
+import type {ThemeColorCard} from './card'
+import type {ThemeColorInput} from './input'
+import type {ThemeColorMuted} from './muted'
+import type {ThemeColorSelectable} from './selectable'
+import type {ThemeColorSolid} from './solid'
+import type {ThemeColorSpot} from './spot'
 
 /**
  * @public

package/src/theme/v0/color/input.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBlendModeKey} from '../../v2/color/_system'
+import type {ThemeColorBlendModeKey} from '../../v2/color/_system'
 
 /**
  * @public

package/src/theme/v0/color/muted.ts

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from './_generic'
+import type {ThemeColorGenericState} from './_generic'
 
 /**
  * @public

package/src/theme/v0/color/selectable.ts

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from './_generic'
+import type {ThemeColorGenericState} from './_generic'
 
 /**
  * @public

package/src/theme/v0/color/solid.ts

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from './_generic'
+import type {ThemeColorGenericState} from './_generic'
 
 /**
  * @public

package/src/theme/v0/color/spot.ts

@@ -1,4 +1,4 @@
-import {ThemeColorAvatarColorKey} from '../../v2/color/_system'
+import type {ThemeColorAvatarColorKey} from '../../v2'
 
 /**
  * @public

package/src/theme/v0/focusRing.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeFocusRing {
   offset: number
   width: number

package/src/theme/v0/font.ts

@@ -1,16 +1,10 @@
-/**
- * @public
- */
+/** @public */
 export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFontSize {
   ascenderHeight: number
   descenderHeight: number
@@ -20,9 +14,7 @@ export interface ThemeFontSize {
   lineHeight: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFontWeight {
   regular: number
   medium: number
@@ -30,21 +22,16 @@ export interface ThemeFontWeight {
   bold: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFont {
   family: string
-  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */
   horizontalOffset?: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFonts {
   code: ThemeFont
   heading: ThemeFont

package/src/theme/v0/layer.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeLayer {
   dialog: {zOffset: number}
   popover: {zOffset: number}

package/src/theme/v0/shadow.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export type ThemeBoxShadow = [
   // offsetX, offsetY, blurRadius, spreadRadius
   number,
@@ -9,9 +7,7 @@ export type ThemeBoxShadow = [
   number,
 ]
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeShadow {
   umbra: ThemeBoxShadow
   penumbra: ThemeBoxShadow

package/src/theme/v0/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from './css'
+import type {CSSObject} from './css'
 
 /**
  * @internal

package/src/theme/v0/theme.ts

@@ -1,10 +1,10 @@
-import {ThemeAvatar} from './avatar'
-import {ThemeColorSchemes} from './color'
-import {ThemeFonts, ThemeFontWeightKey} from './font'
-import {ThemeInput} from './input'
-import {ThemeLayer} from './layer'
-import {ThemeShadow} from './shadow'
-import {ThemeStyles} from './styles'
+import type {ThemeAvatar} from './avatar'
+import type {ThemeColorSchemes} from './color'
+import type {ThemeFonts, ThemeFontWeightKey} from './font'
+import type {ThemeInput} from './input'
+import type {ThemeLayer} from './layer'
+import type {ThemeShadow} from './shadow'
+import type {ThemeStyles} from './styles'
 
 /** @public */
 export interface RootTheme_v0 {

package/src/theme/v2/avatar.ts

@@ -1,8 +1,6 @@
-import {ThemeFocusRing} from '../v0/focusRing'
+import type {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeAvatar_v2 {
   sizes: {
     /** Spacing between avatars in an <AvatarStack> component (px) */

package/src/theme/{build → v2/build}/_deprecated/color/_selectable/createSelectableTones.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   ThemeColorBase,
   ThemeColorMuted,
   ThemeColorSelectable,
   ThemeColorSelectableStates,
   ThemeColorSolid,
-} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createSelectableTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/_solid/createSolidTones.ts

@@ -1,5 +1,5 @@
-import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+import type {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createSolidTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/button/createButtonModes.ts

@@ -1,5 +1,10 @@
-import {ThemeColorBase, ThemeColorButton, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+import type {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 import {createButtonTones} from './createButtonTones'
 
 export function createButtonModes(

package/src/theme/{build → v2/build}/_deprecated/color/button/createButtonTones.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   ThemeColorBase,
   ThemeColorButtonTones,
   ThemeColorMuted,
   ThemeColorSolid,
-} from '../../../../v0'
-import {ThemeColorButtonModeKey} from '../../../../v2'
-import {ThemeColorBuilderOpts} from '../factory'
+} from '../../../../../v0'
+import type {ThemeColorButtonModeKey} from '../../../../color'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createButtonTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/card/createCardStates.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   ThemeColorBase,
   ThemeColorCard,
   ThemeColorMuted,
   ThemeColorName,
   ThemeColorSolid,
-} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createCardStates(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/color.test.ts

@@ -1,4 +1,4 @@
-/** @jest-environment jsdom */
+import {describe, expect, it} from 'vitest'
 
 import {createColorTheme} from './factory'
 

package/src/theme/{build → v2/build}/_deprecated/color/defaults.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBuilderOpts} from './factory'
+import type {ThemeColorBuilderOpts} from './factory'
 
 const black = 'hsl(0, 0%, 0%)'
 const white = 'hsl(0, 0%, 100%)'

package/src/theme/{build → v2/build}/_deprecated/color/factory.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ThemeColor,
   ThemeColorBase,
   ThemeColorButtonStates,
@@ -13,8 +13,8 @@ import {
   ThemeColorSolidTone,
   ThemeColorSpotKey,
   ThemeColorToneKey,
-} from '../../../v0'
-import {ThemeColorButtonModeKey, ThemeColorSyntax} from '../../../v2'
+} from '../../../../v0'
+import type {ThemeColorButtonModeKey, ThemeColorSyntax} from '../../../color'
 import {createSelectableTones} from './_selectable/createSelectableTones'
 import {createSolidTones} from './_solid/createSolidTones'
 import {createButtonModes} from './button/createButtonModes'

package/src/theme/{build → v2/build}/_deprecated/color/input/createInputModes.ts

@@ -1,5 +1,10 @@
-import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+import type {
+  ThemeColorBase,
+  ThemeColorInput,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createInputModes(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/muted/createMuted.ts

@@ -1,5 +1,5 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+import type {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/_deprecated/color/spot/createSpot.ts

@@ -1,5 +1,5 @@
-import {ThemeColorBase, ThemeColorSpot} from '../../../../v0'
-import {ThemeColorBuilderOpts} from '../factory'
+import type {ThemeColorBase, ThemeColorSpot} from '../../../../../v0'
+import type {ThemeColorBuilderOpts} from '../factory'
 
 export function createSpot(
   opts: ThemeColorBuilderOpts,

package/src/theme/{build → v2/build}/buildColorTheme.test.ts

@@ -1,4 +1,6 @@
-import {ThemeColorTokens} from '../config'
+import {expect, test} from 'vitest'
+
+import type {ThemeColorTokens} from '../config'
 import {buildColorTheme} from './buildColorTheme'
 
 test('buildColorTheme: base', () => {

package/src/theme/{build → v2/build}/buildColorTheme.ts

@@ -1,32 +1,32 @@
-import {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
 import {
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
   THEME_COLOR_STATES,
-  ThemeColorAvatar_v2,
-  ThemeColorAvatarColorKey,
-  ThemeColorAvatarHue_v2,
-  ThemeColorBadge_v2,
-  ThemeColorButton_v2,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonModeKey,
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorCardToneKey,
-  ThemeColorInput_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  ThemeColorScheme_v2,
-  ThemeColorSchemeKey,
-  ThemeColorSchemes_v2,
-  ThemeColorShadow,
-  ThemeColorState_v2,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
-  ThemeColorSyntax,
-} from '../v2'
-import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
+  type ThemeColorAvatar_v2,
+  type ThemeColorAvatarColorKey,
+  type ThemeColorAvatarHue_v2,
+  type ThemeColorBadge_v2,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorCardToneKey,
+  type ThemeColorInput_v2,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputState_v2,
+  type ThemeColorScheme_v2,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes_v2,
+  type ThemeColorShadow,
+  type ThemeColorState_v2,
+  type ThemeColorStateKey,
+  type ThemeColorStateToneKey,
+  type ThemeColorSyntax,
+} from '../color'
+import type {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
+import {type ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
 
 export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {

package/src/theme/{build → v2/build}/buildTheme.test.ts

@@ -1,3 +1,5 @@
+import {expect, test} from 'vitest'
+
 import {defaultColorPalette} from '../defaults/colorPalette'
 import {buildTheme} from './buildTheme'
 
@@ -57,31 +59,31 @@ test('build theme', () => {
       },
     },
   }).toEqual({
-    light: {
-      bg: 'rgba(255,255,255,0)',
-      fg: '#000000',
+    dark: {
+      bg: '#000000',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: 'rgba(246,246,248,0)',
+              border: '#252837',
             },
           },
         },
       },
-    },
-    dark: {
-      bg: 'rgba(0,0,0,0)',
       fg: '#ffffff',
+    },
+    light: {
+      bg: '#ffffff',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: 'rgba(19,20,27,0)',
+              border: '#e3e4e8',
             },
           },
         },
       },
+      fg: '#000000',
     },
   })
 })

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

@@ -0,0 +1,12 @@
+import {type RootTheme} from '../../types'
+import {buildTheme_v3} from '../../v3'
+import {v2_v0} from '../../versioning/v2_v0'
+import {v3_v2} from '../../versioning/v3_v2'
+import {type ThemeConfig} from '../config'
+
+/** @internal */
+export function buildTheme(_config?: ThemeConfig): RootTheme {
+  const v3 = buildTheme_v3({v2: _config})
+
+  return v2_v0(v3_v2(v3), v3)
+}

package/src/theme/{build → v2/build}/colorToken/colorToken.ts

@@ -1,6 +1,6 @@
-import {parseTokenValue, ThemeColorTokenValue} from '../../config'
+import {parseTokenValue, type ThemeColorTokenValue} from '../../config'
 import {compileColorTokenValue} from './compileColorToken'
-import {ColorTokenContext} from './types'
+import type {ColorTokenContext} from './types'
 
 const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
 

package/src/theme/{build → v2/build}/colorToken/compileColorToken.ts

@@ -1,4 +1,4 @@
-import {TokenColorValueNode} from '../../config'
+import type {TokenColorValueNode} from '../../config'
 
 export function compileColorTokenValue(node: TokenColorValueNode): string {
   let key = ''

package/src/theme/{build → v2/build}/colorToken/types.ts

@@ -1,6 +1,6 @@
-import {ColorHueKey} from '@sanity/color'
+import type {Hue} from '../../../v3'
 
 export interface ColorTokenContext {
-  hue: ColorHueKey
+  hue: Hue
   scheme: 'light' | 'dark'
 }

package/src/theme/{build → v2/build}/lib/color-fns/blend/mix.ts

@@ -1,4 +1,4 @@
-import {RGB, RGBA} from '../types'
+import type {RGB, RGBA} from '../types'
 
 function mixChannel(b: number, s: number, weight: number) {
   const diff = s - b

package/src/theme/{build → v2/build}/lib/color-fns/blend/multiply.ts

@@ -1,4 +1,4 @@
-import {RGB, RGBA} from '../types'
+import type {RGB, RGBA} from '../types'
 
 function multiplyChannel(b: number, s: number) {
   return b * s

package/src/theme/{build → v2/build}/lib/color-fns/blend/screen.ts

@@ -1,4 +1,4 @@
-import {RGB, RGBA} from '../types'
+import type {RGB, RGBA} from '../types'
 
 function screenChannel(b: number, s: number) {
   return b + s - b * s

package/src/theme/{build → v2/build}/lib/color-fns/color-fns.test.ts

@@ -1,4 +1,4 @@
-/** @jest-environment jsdom */
+import {describe, expect, it} from 'vitest'
 
 import {multiply, screen} from './blend'
 import {hexToRgb, rgbToHex} from './convert'

package/src/theme/{build → v2/build}/lib/color-fns/contrastRatio.ts

@@ -1,7 +1,10 @@
 import {parseColor} from './parse'
-import {RGB, RGBA} from './types'
+import type {RGB, RGBA} from './types'
 
-/** @internal */
+/**
+ * @internal
+ * @deprecated Will be removed in next major version
+ */
 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 → v2/build}/lib/color-fns/convert.ts

@@ -1,5 +1,5 @@
 import {clamp, round} from '../utils'
-import {HSL, RGB, RGBA} from './types'
+import type {HSL, RGB, RGBA} from './types'
 
 /**
  * @internal

package/src/theme/{build → v2/build}/lib/color-fns/parse.ts

@@ -1,5 +1,5 @@
 import {hexToRgb, hslToRgb, rgbaToRGBA} from './convert'
-import {HSL, RGB, RGBA} from './types'
+import type {HSL, RGB, RGBA} from './types'
 
 const HEX_CHARS = '0123456789ABCDEFabcdef'
 

package/src/theme/{build → v2/build}/mixThemeColor.test.ts

@@ -1,3 +1,5 @@
+import {expect, test} from 'vitest'
+
 import {mixThemeColor} from './mixThemeColor'
 
 test('mix 1', () => {

package/src/theme/{build → v2/build}/mixThemeColor.ts

@@ -1,4 +1,4 @@
-import {multiply, parseColor, RGB, rgbToHex, screen} from './lib/color-fns'
+import {multiply, parseColor, type RGB, rgbToHex, screen} from './lib/color-fns'
 import {clamp, range} from './lib/utils'
 
 const RGB_RANGE: [number, number] = [0, 255]

package/src/theme/{build → v2/build}/renderColorTheme.ts

@@ -1,31 +1,31 @@
-// import {COLOR_HUES} from '@sanity/color'
-import {ThemeColorPalette, ThemeConfig} from '../config'
-import {defaultColorPalette} from '../defaults/colorPalette'
-import {HUES} from '../palette'
+import {COLOR_HUES} from '@sanity/color'
+
 import {
   THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorBadge_v2,
-  ThemeColorBadgeTone_v2,
-  ThemeColorBlendModeKey,
-  ThemeColorButton_v2,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorCardToneKey,
-  ThemeColorInput_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  ThemeColorKBD,
-  ThemeColorScheme_v2,
-  ThemeColorSchemes_v2,
-  ThemeColorSelectable_v2,
-  ThemeColorSelectableTone_v2,
-  ThemeColorShadow,
-  ThemeColorState_v2,
-  ThemeColorSyntax,
-} from '../v2'
-import {renderColorValue, RenderColorValueOptions} from './renderColorValue'
+  type ThemeColorAvatar_v2,
+  type ThemeColorBadge_v2,
+  type ThemeColorBadgeTone_v2,
+  type ThemeColorBlendModeKey,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorCardToneKey,
+  type ThemeColorInput_v2,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputState_v2,
+  type ThemeColorKBD,
+  type ThemeColorScheme_v2,
+  type ThemeColorSchemes_v2,
+  type ThemeColorSelectable_v2,
+  type ThemeColorSelectableTone_v2,
+  type ThemeColorShadow,
+  type ThemeColorState_v2,
+  type ThemeColorSyntax,
+} from '../color'
+import type {ThemeColorPalette, ThemeConfig} from '../config'
+import {defaultColorPalette} from '../defaults/colorPalette'
+import {renderColorValue, type RenderColorValueOptions} from './renderColorValue'
 
 export function renderThemeColorSchemes(
   value: ThemeColorSchemes_v2,
@@ -192,7 +192,7 @@ function renderThemeColorAvatar(
 ): ThemeColorAvatar_v2 {
   const colorAvatar = {} as ThemeColorAvatar_v2
 
-  for (const hue of HUES) {
+  for (const hue of COLOR_HUES) {
     colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
   }