@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/theme/system/focusRing.ts

@@ -0,0 +1,7 @@
+/**
+ * @public
+ */
+export interface ThemeFocusRing {
+  offset: number
+  width: number
+}

package/src/theme/system/index.ts

@@ -0,0 +1,12 @@
+export * from './v0'
+
+export * from './avatar'
+export * from './color'
+export * from './css'
+export * from './focusRing'
+export * from './font'
+export * from './input'
+export * from './layer'
+export * from './shadow'
+export * from './styles'
+export * from './theme'

package/src/theme/system/input.ts

@@ -0,0 +1,33 @@
+import {ThemeFocusRing} from './focusRing'
+
+/**
+ * @public
+ */
+export interface ThemeInput_v2 {
+  checkbox: {
+    size: number
+    focusRing: ThemeFocusRing
+  }
+  radio: {
+    size: number
+    markSize: number
+    focusRing: ThemeFocusRing
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+    focusRing: ThemeFocusRing
+  }
+  border: {
+    width: number
+  }
+  select: {
+    focusRing: ThemeFocusRing
+  }
+  text: {
+    focusRing: ThemeFocusRing
+  }
+}

package/src/theme/system/layer.ts

@@ -0,0 +1,8 @@
+/**
+ * @public
+ */
+export interface ThemeLayer {
+  dialog: {zOffset: number}
+  popover: {zOffset: number}
+  tooltip: {zOffset: number}
+}

package/src/theme/system/shadow.ts

@@ -0,0 +1,19 @@
+/**
+ * @public
+ */
+export type ThemeBoxShadow = [
+  // offsetX, offsetY, blurRadius, spreadRadius
+  number,
+  number,
+  number,
+  number,
+]
+
+/**
+ * @public
+ */
+export interface ThemeShadow {
+  umbra: ThemeBoxShadow
+  penumbra: ThemeBoxShadow
+  ambient: ThemeBoxShadow
+}

package/src/theme/system/styles.ts

@@ -0,0 +1,13 @@
+import {CSSObject} from './css'
+
+/**
+ * @internal
+ */
+export interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}

package/src/theme/system/theme.ts

@@ -0,0 +1,130 @@
+import {ThemeAvatar_v2} from './avatar'
+import {ThemeColorSchemes_v2, ThemeColorCard_v2} from './color'
+import {ThemeFocusRing} from './focusRing'
+import {ThemeFontWeightKey, ThemeFonts} from './font'
+import {ThemeInput_v2} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+import {ThemeStyles} from './styles'
+import {ThemeAvatar, ThemeColor, ThemeColorSchemes, ThemeInput} from './v0'
+
+/**
+ * @public
+ */
+export interface RootTheme_v2 {
+  _version: 2
+  avatar: ThemeAvatar_v2
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color: ThemeColorSchemes_v2
+  container: number[]
+  font: ThemeFonts
+  input: ThemeInput_v2
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+  /** @internal */
+  style?: ThemeStyles
+}
+
+/**
+ * @public
+ */
+export interface BaseTheme {
+  _version?: 0
+  /**
+   * @deprecated Use `v2.avatar` instead
+   */
+  avatar: ThemeAvatar
+  /**
+   * @deprecated Use `v2.button` instead
+   */
+  button: {
+    textWeight: ThemeFontWeightKey
+  }
+  /**
+   * @deprecated Use `v2.color` instead
+   */
+  color: ThemeColorSchemes
+  /**
+   * @deprecated Use `v2.container` instead
+   */
+  container: number[]
+  /**
+   * @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
+}
+
+/**
+ * @public
+ */
+export type RootTheme = BaseTheme
+
+/**
+ * @public
+ */
+export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {color: ThemeColorCard_v2}
+
+/**
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
+    color: ThemeColor
+    v2?: Theme_v2
+  }
+}

package/src/theme/system/v0/avatar.ts

@@ -0,0 +1,10 @@
+/**
+ * @public
+ * @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
+ */
+export interface ThemeAvatar {
+  sizes: {
+    distance: number
+    size: number
+  }[]
+}

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

@@ -0,0 +1,35 @@
+import {ThemeColorBlendModeKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
+export interface ThemeColorGenericState {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  /**
+   * @beta
+   */
+  bg2?: string
+  border: string
+  fg: string
+  icon: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}

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

@@ -0,0 +1,13 @@
+import {ThemeColorCardToneKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export type ThemeColorName = ThemeColorCardToneKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorBaseToneKey` instead.
+ */
+export type ThemeColorToneKey = ThemeColorCardToneKey

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

@@ -0,0 +1,21 @@
+/**
+ * @public
+ * @deprecated Use `ThemeColorCard_v2` instead.
+ */
+export interface ThemeColorBase {
+  bg: string
+  fg: string
+  border: string
+  focusRing: string
+  backdrop?: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}

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

@@ -0,0 +1,42 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
+export type ThemeColorButtonState = ThemeColorGenericState
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonStates_v2` instead.
+ */
+export interface ThemeColorButtonStates {
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+}
+
+/**
+ * TODO: Rename to `ThemeColorButtonMode`.
+ * @public
+ * @deprecated Use `ThemeColorButtonTones_v2` instead.
+ */
+export interface ThemeColorButtonTones {
+  default: ThemeColorButtonStates
+  primary: ThemeColorButtonStates
+  positive: ThemeColorButtonStates
+  caution: ThemeColorButtonStates
+  critical: ThemeColorButtonStates
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButton_v2` instead.
+ */
+export interface ThemeColorButton {
+  default: ThemeColorButtonTones
+  ghost: ThemeColorButtonTones
+  bleed: ThemeColorButtonTones
+}

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

@@ -0,0 +1,19 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
+export type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
+export interface ThemeColorCard {
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+}

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

@@ -0,0 +1,40 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
+import {ThemeColorGenericState} from './_generic'
+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'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColor_v2` instead.
+ */
+export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'>> {
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  dark: boolean
+  focusRing?: string
+  input: ThemeColorInput
+  muted: ThemeColorMuted
+  selectable?: ThemeColorSelectable
+  solid: ThemeColorSolid
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorScheme_v2` instead.
+ */
+export type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemes_v2` instead.
+ */
+export type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>

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

@@ -0,0 +1,11 @@
+export * from './_generic'
+export * from './_system'
+export * from './base'
+export * from './button'
+export * from './card'
+export * from './input'
+export * from './muted'
+export * from './selectable'
+export * from './solid'
+export * from './spot'
+export * from './color'

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

@@ -0,0 +1,34 @@
+import {ThemeColorBlendModeKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInputState_v2` instead.
+ */
+export interface ThemeColorInputState {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  bg2: string
+  border: string
+  fg: string
+  placeholder: string
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
+ */
+export interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorInput_v2` instead.
+ */
+export interface ThemeColorInput {
+  default: ThemeColorInputStates
+  invalid: ThemeColorInputStates
+}

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

@@ -0,0 +1,26 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
+ */
+export interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
+export interface ThemeColorMuted {
+  default: ThemeColorMutedTone
+  transparent: ThemeColorMutedTone
+  primary: ThemeColorMutedTone
+  positive: ThemeColorMutedTone
+  caution: ThemeColorMutedTone
+  critical: ThemeColorMutedTone
+}

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

@@ -0,0 +1,31 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
+ */
+export type ThemeColorSelectableState = ThemeColorGenericState
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectableStates_v2` instead.
+ */
+export interface ThemeColorSelectableStates {
+  enabled: ThemeColorSelectableState
+  hovered: ThemeColorSelectableState
+  pressed: ThemeColorSelectableState
+  selected: ThemeColorSelectableState
+  disabled: ThemeColorSelectableState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
+export interface ThemeColorSelectable {
+  default: ThemeColorSelectableStates
+  primary: ThemeColorSelectableStates
+  positive: ThemeColorSelectableStates
+  caution: ThemeColorSelectableStates
+  critical: ThemeColorSelectableStates
+}

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

@@ -0,0 +1,26 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
+ */
+export interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
+ */
+export interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}

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

@@ -0,0 +1,13 @@
+import {ThemeColorAvatarColorKey} from '../../color/_system'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatarColorKey` instead
+ */
+export type ThemeColorSpotKey = ThemeColorAvatarColorKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorAvatar_v2` instead
+ */
+export type ThemeColorSpot = Record<ThemeColorSpotKey, string>

package/src/theme/system/v0/index.ts

@@ -0,0 +1,3 @@
+export * from './color'
+export * from './avatar'
+export * from './input'

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

@@ -0,0 +1,23 @@
+/**
+ * @public
+ * @deprecated Use `ThemeInput_v2` instead
+ */
+export interface ThemeInput {
+  checkbox: {
+    size: number
+  }
+  radio: {
+    size: number
+    markSize: number
+  }
+  switch: {
+    width: number
+    height: number
+    padding: number
+    transitionDurationMs: number
+    transitionTimingFunction: string
+  }
+  border: {
+    width: number
+  }
+}

package/src/theme/versioning/getTheme_v2.ts

@@ -0,0 +1,56 @@
+import {defaultThemeConfig} from '../defaults/config'
+import {Theme, Theme_v2} from '../system'
+import {themeColor_v0_v2} from './themeColor_v0_v2'
+
+const cache = new WeakMap<Theme, Theme_v2>()
+
+/** @public */
+export function getTheme_v2(theme: Theme): Theme_v2 {
+  if (theme.sanity.v2) return theme.sanity.v2
+
+  const cached_v2 = cache.get(theme)
+
+  if (cached_v2) return cached_v2
+
+  const v2: Theme_v2 = {
+    _version: 2,
+    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: {
+      ...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: theme.sanity.layer ?? defaultThemeConfig.layer,
+    media: theme.sanity.media,
+    radius: theme.sanity.radius,
+    shadow: theme.sanity.shadows,
+    space: theme.sanity.space,
+    style: theme.sanity.styles,
+  }
+
+  cache.set(theme, v2)
+
+  return v2
+}

package/src/theme/versioning/index.ts

@@ -0,0 +1,5 @@
+export * from './getTheme_v2'
+export * from './is_v0'
+export * from './is_v2'
+export * from './v0_v2'
+export * from './v2_v0'

package/src/theme/versioning/is_v0.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {
+  return themeProp._version === 0
+}

package/src/theme/versioning/is_v2.ts

@@ -0,0 +1,6 @@
+import {RootTheme, RootTheme_v2} from '../system'
+
+/** @internal */
+export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {
+  return themeProp._version === 2
+}