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

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

@@ -0,0 +1,41 @@
+/**
+ * @public
+ */
+export interface ThemeColorSyntax {
+  atrule: string
+  attrName: string
+  attrValue: string
+  attribute: string
+  boolean: string
+  builtin: string
+  cdata: string
+  char: string
+  class: string
+  className: string
+  comment: string
+  constant: string
+  deleted: string
+  doctype: string
+  entity: string
+  function: string
+  hexcode: string
+  id: string
+  important: string
+  inserted: string
+  keyword: string
+  number: string
+  operator: string
+  prolog: string
+  property: string
+  pseudoClass: string
+  pseudoElement: string
+  punctuation: string
+  regex: string
+  selector: string
+  string: string
+  symbol: string
+  tag: string
+  unit: string
+  url: string
+  variable: string
+}

package/src/theme/system/css.ts

@@ -0,0 +1,9 @@
+import type {StyledObject} from 'styled-components'
+
+/**
+ * Work around types that are missing in `styled-components@6`
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ * */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSObject = StyledObject<any>

package/src/theme/system/focusRing.ts

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

package/src/theme/{lib/theme → system}/index.ts

@@ -1,7 +1,12 @@
+export * from './v0'
+
 export * from './avatar'
 export * from './color'
-export * from './fonts'
+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/{lib/theme → system}/layer.ts

@@ -1,6 +1,5 @@
 /**
- * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
 export interface ThemeLayer {
   dialog: {zOffset: number}

package/src/theme/system/shadow.ts

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

package/src/theme/system/styles.ts

@@ -0,0 +1,19 @@
+import {CSSObject} from './css'
+
+/**
+ * @internal
+ */
+export interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
+/**
+ * @deprecated Use `ThemeStyles` instead
+ * @internal
+ */
+export type Styles = ThemeStyles

package/src/theme/system/theme.ts

@@ -0,0 +1,128 @@
+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[]
+  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/{lib/theme → system/v0}/avatar.ts

@@ -1,12 +1,10 @@
-import {FocusRing} from '../../types'
-
 /**
  * @public
+ * @deprecated Use `ThemeAvatar_v2` instead
  */
 export interface ThemeAvatar {
   sizes: {
     distance: number
     size: number
   }[]
-  focusRing: FocusRing
 }

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 `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/v0/color/card.ts

@@ -0,0 +1,19 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorGenericState` instead.
+ */
+export type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ * @deprecated
+ */
+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
+ */
+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/v0/color/muted.ts

@@ -0,0 +1,26 @@
+import {ThemeColorGenericState} from './_generic'
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+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
+ */
+export interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+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/{lib/theme → system/v0}/input.ts

@@ -1,17 +1,14 @@
-import {FocusRing} from '../../types'
-
 /**
  * @public
+ * @deprecated Use `ThemeInput_v2` instead
  */
 export interface ThemeInput {
   checkbox: {
     size: number
-    focusRing: FocusRing
   }
   radio: {
     size: number
     markSize: number
-    focusRing: FocusRing
   }
   switch: {
     width: number
@@ -19,15 +16,8 @@ export interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
-    focusRing: FocusRing
   }
   border: {
     width: number
   }
-  select: {
-    focusRing: FocusRing
-  }
-  text: {
-    focusRing: FocusRing
-  }
 }