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

package/src/theme/system/theme.ts

@@ -0,0 +1,128 @@
+import {ThemeAvatar} from './avatar'
+import {ThemeColorSchemes_v2, ThemeColorCard_v2} from './color'
+import {ThemeFocusRing} from './focusRing'
+import {ThemeFontWeightKey, ThemeFonts} from './fonts'
+import {ThemeInput} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+import {ThemeStyles} from './styles'
+import {ThemeColor, ThemeColorSchemes} from './v0'
+
+/**
+ * @public
+ */
+export interface RootTheme_v2 {
+  _version: 2
+  avatar: ThemeAvatar
+  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
+  layer: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadow: Array<ThemeShadow | null>
+  space: number[]
+  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[]
+  /**
+   * @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/{color → v0/color}/_generic.ts

@@ -1,7 +1,8 @@
-import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorBlendModeKey} from '../../color/_system'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorState_v2` instead.
  */
 export interface ThemeColorGenericState {
   /** @internal */

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/{color → v0/color}/base.ts

@@ -1,11 +1,13 @@
 /**
  * @public
+ * @deprecated Use `ThemeColorCard_v2` instead.
  */
 export interface ThemeColorBase {
   bg: string
   fg: string
   border: string
   focusRing: string
+  backdrop?: string
   shadow: {
     outline: string
     umbra: string

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

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

package/src/theme/system/{color → v0/color}/card.ts

@@ -1,13 +1,14 @@
 import {ThemeColorGenericState} from './_generic'
 
 /**
- * @deprecated Use `ThemeColorGenericState` instead.
  * @public
+ * @deprecated Use `ThemeColorGenericState` instead.
  */
 export type ThemeColorCardState = ThemeColorGenericState
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorCard {
   enabled: 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
+ */
+export interface ThemeColorInputState {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  bg2: string
+  border: string
+  fg: string
+  placeholder: string
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ThemeColorInput {
+  default: ThemeColorInputStates
+  invalid: ThemeColorInputStates
+}

package/src/theme/system/{color/_deprecated → v0/color}/muted.ts

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

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/{color/_deprecated → v0/color}/solid.ts

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

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 @@
+export * from './color'

package/src/theme/versioning/getTheme_v2.ts

@@ -0,0 +1,38 @@
+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: 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: theme.sanity.input,
+    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
+}

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -0,0 +1,217 @@
+import {
+  ThemeColor,
+  ThemeColorGenericState,
+  ThemeColorMuted,
+  ThemeColorSelectable_v2,
+  ThemeColorState_v2,
+  ThemeColorCard_v2,
+  ThemeColorInputStates,
+  ThemeColorInputStates_v2,
+  ThemeColorInputState,
+  ThemeColorInputState_v2,
+} from '../system'
+
+const cache = new WeakMap<ThemeColor, ThemeColorCard_v2>()
+
+/** @internal */
+export function themeColor_v0_v2(color_v0: ThemeColor): ThemeColorCard_v2 {
+  const cached_v2 = cache.get(color_v0)
+
+  if (cached_v2) return cached_v2
+
+  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled)
+
+  const color_v2: ThemeColorCard_v2 = {
+    _blend: color_v0._blend || (color_v0.dark ? 'screen' : 'multiply'),
+    _dark: color_v0.dark,
+    accent: base.accent,
+    avatar: base.avatar,
+    backdrop: color_v0.base.shadow.ambient,
+    badge: base.badge,
+    bg: color_v0.base.bg,
+    border: color_v0.base.border,
+    button: {
+      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
+      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
+      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed),
+    },
+    code: base.code,
+    fg: color_v0.base.fg,
+    focusRing: color_v0.base.focusRing,
+    icon: base.muted.fg,
+    input: {
+      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
+      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid),
+    },
+    kbd: base.kbd,
+    link: base.link,
+    muted: {
+      ...base.muted,
+      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg,
+    },
+    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
+    shadow: color_v0.base.shadow,
+    skeleton: {
+      from: color_v0.skeleton?.from || color_v0.base.border,
+      to: color_v0.skeleton?.to || color_v0.base.border,
+    },
+    syntax: color_v0.syntax,
+  }
+
+  cache.set(color_v0, color_v2)
+
+  return color_v2
+}
+
+function stateTonesThemeColor_v0_v2(
+  v0: ThemeColor,
+  t: Omit<ThemeColorMuted, 'transparent'>,
+): ThemeColorSelectable_v2 {
+  return {
+    default: {
+      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.default.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
+    },
+    primary: {
+      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled),
+    },
+    positive: {
+      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled),
+    },
+    caution: {
+      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled),
+    },
+    critical: {
+      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
+      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
+      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
+      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
+      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),
+    },
+  }
+}
+
+function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): ThemeColorState_v2 {
+  return {
+    ...state,
+    avatar: {
+      gray: {
+        bg: v0.spot.gray,
+        fg: v0.base.bg,
+      },
+      blue: {
+        bg: v0.spot.blue,
+        fg: v0.base.bg,
+      },
+      purple: {
+        bg: v0.spot.purple,
+        fg: v0.base.bg,
+      },
+      magenta: {
+        bg: v0.spot.magenta,
+        fg: v0.base.bg,
+      },
+      red: {
+        bg: v0.spot.red,
+        fg: v0.base.bg,
+      },
+      orange: {
+        bg: v0.spot.orange,
+        fg: v0.base.bg,
+      },
+      yellow: {
+        bg: v0.spot.yellow,
+        fg: v0.base.bg,
+      },
+      green: {
+        bg: v0.spot.green,
+        fg: v0.base.bg,
+      },
+      cyan: {
+        bg: v0.spot.cyan,
+        fg: v0.base.bg,
+      },
+    },
+    badge: {
+      default: {
+        bg: v0.muted.default.enabled.bg,
+        fg: v0.muted.default.enabled.fg,
+        dot: v0.muted.default.enabled.muted.fg,
+        icon: v0.muted.default.enabled.muted.fg,
+      },
+      primary: {
+        bg: v0.muted.primary.enabled.bg,
+        fg: v0.muted.primary.enabled.fg,
+        dot: v0.muted.primary.enabled.muted.fg,
+        icon: v0.muted.primary.enabled.muted.fg,
+      },
+      positive: {
+        bg: v0.muted.positive.enabled.bg,
+        fg: v0.muted.positive.enabled.fg,
+        dot: v0.muted.positive.enabled.muted.fg,
+        icon: v0.muted.positive.enabled.muted.fg,
+      },
+      caution: {
+        bg: v0.muted.caution.enabled.bg,
+        fg: v0.muted.caution.enabled.fg,
+        dot: v0.muted.caution.enabled.muted.fg,
+        icon: v0.muted.caution.enabled.muted.fg,
+      },
+      critical: {
+        bg: v0.muted.critical.enabled.bg,
+        fg: v0.muted.critical.enabled.fg,
+        dot: v0.muted.critical.enabled.muted.fg,
+        icon: v0.muted.critical.enabled.muted.fg,
+      },
+    },
+    kbd: {
+      bg: v0.muted.default.enabled.bg,
+      fg: v0.muted.default.enabled.fg,
+      border: v0.muted.default.enabled.border,
+    },
+    muted: {
+      ...v0.muted.default.enabled.muted,
+      bg: state.bg2 || state.bg,
+    },
+    skeleton: {
+      from: state.skeleton?.from || state.border,
+      to: state.skeleton?.to || state.border,
+    },
+  }
+}
+
+function inputStatesThemeColor_v0_v2(states: ThemeColorInputStates): ThemeColorInputStates_v2 {
+  return {
+    enabled: inputStateThemeColor_v0_v2(states.enabled),
+    disabled: inputStateThemeColor_v0_v2(states.disabled),
+    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
+    hovered: inputStateThemeColor_v0_v2(states.hovered),
+  }
+}
+
+function inputStateThemeColor_v0_v2(state: ThemeColorInputState): ThemeColorInputState_v2 {
+  return {
+    bg: state.bg,
+    border: state.border,
+    fg: state.fg,
+    muted: {
+      bg: state.bg2,
+    },
+    placeholder: state.placeholder,
+  }
+}