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

package/src/theme/system/avatar.ts

@@ -1,4 +1,4 @@
-import {ThemeFocusRing} from './_system'
+import {ThemeFocusRing} from './focusRing'
 
 /**
  * @public

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

@@ -1,38 +1,38 @@
 import {COLOR_HUES} from '@sanity/color'
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
 
-/** @internal */
-export const THEME_COLOR_BASE_TONES = [
+/** @public */
+export const THEME_COLOR_CARD_TONES = [
   'transparent',
   'default',
-  'primary', // todo: rename to `accent`
+  'primary', // todo: rename to `accent` in the next breaking major version
   'positive',
   'caution',
   'critical',
 ] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_STATE_TONES = [
   'default',
-  'primary', // todo: rename to `accent`
+  'primary', // todo: rename to `accent` in the next breaking major version
   'positive',
   'caution',
   'critical',
 ] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const
 
-/** @internal */
+/** @public */
 export const THEME_COLOR_AVATAR_COLORS = COLOR_HUES

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

@@ -1,100 +1,39 @@
 import {
   THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_BASE_TONES,
   THEME_COLOR_BLEND_MODES,
   THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
   THEME_COLOR_STATES,
   THEME_COLOR_STATE_TONES,
 } from './_constants'
-import {ThemeColorMuted} from './_deprecated/muted'
-import {ThemeColorSolid} from './_deprecated/solid'
-import {ThemeColorSpot} from './_deprecated/spot'
-import {ThemeColorAvatar} from './avatar'
-import {ThemeColorBadge} from './badge'
-import {ThemeColorBase} from './base'
-import {ThemeColorButton} from './button'
-import {ThemeColorCard} from './card'
-import {ThemeColorInput} from './input'
-import {ThemeColorKBD} from './kbd'
-import {ThemeColorSelectable} from './selectable'
-import {ThemeColorSyntax} from './syntax'
 
 /**
  * @public
  */
 export type ThemeColorSchemeKey = 'dark' | 'light'
 
-/** @internal */
+/** @public */
 export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
 
-/** @internal */
-export type ThemeColorBaseToneKey = (typeof THEME_COLOR_BASE_TONES)[number]
+/** @public */
+export type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
 
-/** @internal */
+/** @public */
 export type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
-
-/**
- * @public
- * @deprecated Use `ThemeColorBaseToneKey` instead.
- */
-export type ThemeColorName = ThemeColorBaseToneKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorBaseToneKey` instead.
- */
-export type ThemeColorToneKey = ThemeColorBaseToneKey
-
-/**
- * @public
- */
-export interface ThemeColor {
-  /** @internal */
-  _blend?: ThemeColorBlendModeKey
-  _dark?: boolean
-  avatar?: ThemeColorAvatar
-  badge?: ThemeColorBadge
-  base: ThemeColorBase
-  button: ThemeColorButton
-  card: ThemeColorCard
-  input: ThemeColorInput
-  kbd?: ThemeColorKBD
-  selectable?: ThemeColorSelectable
-  syntax: ThemeColorSyntax
-
-  /** @deprecated Use `_dark` instead */
-  dark: boolean
-  /** @deprecated */
-  muted: ThemeColorMuted
-  /** @deprecated */
-  spot: ThemeColorSpot
-  /** @deprecated */
-  solid: ThemeColorSolid
-}
-
-/**
- * @public
- */
-export type ThemeColorScheme = Record<ThemeColorBaseToneKey, ThemeColor>
-
-/**
- * @public
- */
-export type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>

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

@@ -1,13 +1,25 @@
 import {ThemeColorBlendModeKey} from './_system'
 
-export interface ThemeColorAvatar {
-  gray: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  blue: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  purple: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  magenta: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  red: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  orange: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  yellow: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  green: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  cyan: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+/**
+ * @public
+ */
+export interface ThemeColorAvatarHue_v2 {
+  _blend?: ThemeColorBlendModeKey
+  bg: string
+  fg: string
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorAvatar_v2 {
+  gray: ThemeColorAvatarHue_v2
+  blue: ThemeColorAvatarHue_v2
+  purple: ThemeColorAvatarHue_v2
+  magenta: ThemeColorAvatarHue_v2
+  red: ThemeColorAvatarHue_v2
+  orange: ThemeColorAvatarHue_v2
+  yellow: ThemeColorAvatarHue_v2
+  green: ThemeColorAvatarHue_v2
+  cyan: ThemeColorAvatarHue_v2
 }

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

@@ -1,9 +1,20 @@
-import {ThemeColorBlendModeKey} from './_system'
+/**
+ * @public
+ */
+export interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
 
-export interface ThemeColorBadge {
-  default: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  primary: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  positive: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  caution: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
-  critical: {_blend?: ThemeColorBlendModeKey; bg: string; fg: string}
+/**
+ * @public
+ */
+export interface ThemeColorBadge_v2 {
+  default: ThemeColorBadgeTone_v2
+  primary: ThemeColorBadgeTone_v2
+  positive: ThemeColorBadgeTone_v2
+  caution: ThemeColorBadgeTone_v2
+  critical: ThemeColorBadgeTone_v2
 }

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

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

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

@@ -0,0 +1,34 @@
+import {ThemeColorCardToneKey, ThemeColorBlendModeKey, ThemeColorSchemeKey} from './_system'
+import {ThemeColorButton_v2} from './button'
+import {ThemeColorInput_v2} from './input'
+import {ThemeColorSelectable_v2} from './selectable'
+import {ThemeColorShadow} from './shadow'
+import {ThemeColorState_v2} from './state'
+import {ThemeColorSyntax} from './syntax'
+
+/**
+ * @public
+ */
+export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
+  /** @internal */
+  _blend: ThemeColorBlendModeKey
+  _dark: boolean
+
+  backdrop: string
+  button: ThemeColorButton_v2
+  focusRing: string
+  input: ThemeColorInput_v2
+  selectable: ThemeColorSelectable_v2
+  shadow: ThemeColorShadow
+  syntax: ThemeColorSyntax
+}
+
+/**
+ * @public
+ */
+export type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
+
+/**
+ * @public
+ */
+export type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>

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

@@ -1,20 +1,13 @@
 export * from './_constants'
 export * from './_helpers'
 export * from './_system'
-
-//
-export * from './_generic'
 export * from './avatar'
 export * from './badge'
-export * from './base'
 export * from './button'
-export * from './card'
+export * from './color'
 export * from './input'
 export * from './kbd'
 export * from './selectable'
+export * from './shadow'
+export * from './state'
 export * from './syntax'
-
-// deprecated
-export * from './_deprecated/muted'
-export * from './_deprecated/solid'
-export * from './_deprecated/spot'

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

@@ -3,29 +3,31 @@ import {ThemeColorBlendModeKey} from './_system'
 /**
  * @public
  */
-export interface ThemeColorInputState {
+export interface ThemeColorInputState_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
-  bg2: string
-  fg: string
   border: string
+  fg: string
+  muted: {
+    bg: string
+  }
   placeholder: string
 }
 
 /**
  * @public
  */
-export interface ThemeColorInputStates {
-  enabled: ThemeColorInputState
-  disabled: ThemeColorInputState
-  hovered: ThemeColorInputState
-  readOnly: ThemeColorInputState
+export interface ThemeColorInputStates_v2 {
+  enabled: ThemeColorInputState_v2
+  disabled: ThemeColorInputState_v2
+  hovered: ThemeColorInputState_v2
+  readOnly: ThemeColorInputState_v2
 }
 
 /**
  * @public
  */
-export interface ThemeColorInput {
-  default: ThemeColorInputStates
-  invalid: ThemeColorInputStates
+export interface ThemeColorInput_v2 {
+  default: ThemeColorInputStates_v2
+  invalid: ThemeColorInputStates_v2
 }

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

@@ -1,7 +1,7 @@
-import {ThemeColorBlendModeKey} from './_system'
-
+/**
+ * @public
+ */
 export interface ThemeColorKBD {
-  _blend?: ThemeColorBlendModeKey
   bg: string
   fg: string
   border: string

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

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

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

@@ -0,0 +1,7 @@
+/** @public */
+export interface ThemeColorShadow {
+  outline: string
+  umbra: string
+  penumbra: string
+  ambient: string
+}

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

@@ -0,0 +1,37 @@
+import {ThemeColorBlendModeKey} from './_system'
+import {ThemeColorAvatar_v2} from './avatar'
+import {ThemeColorBadge_v2} from './badge'
+import {ThemeColorKBD} from './kbd'
+
+/**
+ * @public
+ */
+export interface ThemeColorState_v2 {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
+  accent: {
+    fg: string
+  }
+  avatar: ThemeColorAvatar_v2
+  badge: ThemeColorBadge_v2
+  bg: string
+  border: string
+  code: {
+    bg: string
+    fg: string
+  }
+  fg: string
+  icon: string
+  kbd: ThemeColorKBD
+  link: {
+    fg: string
+  }
+  muted: {
+    bg: string
+    fg: string
+  }
+  skeleton: {
+    from: string
+    to: 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/system/index.ts

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

package/src/theme/system/input.ts

@@ -1,4 +1,4 @@
-import {ThemeFocusRing} from './_system'
+import {ThemeFocusRing} from './focusRing'
 
 /**
  * @public

package/src/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

@@ -10,6 +10,7 @@ export type ThemeBoxShadow = [
 ]
 
 /**
+ * @public
  * @deprecated Use `ThemeBoxShadow` instead
  */
 export type BoxShadow = 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,97 @@
+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
+  avatar: ThemeAvatar
+  button: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color: ThemeColorSchemes
+  container: number[]
+  /** @deprecated Use component-specific `focusRing` values instead */
+  focusRing: {
+    offset: number
+    width: number
+  }
+  fonts: ThemeFonts
+  input: ThemeInput
+  /**
+   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
+   * @beta
+   */
+  layer?: ThemeLayer
+  media: number[]
+  radius: number[]
+  shadows: Array<ThemeShadow | null>
+  space: number[]
+  /** @internal */
+  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'> & {
+    color: ThemeColor
+    v2?: Theme_v2
+  }
+}