@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/src/theme/config/tokens/types.ts

@@ -0,0 +1,44 @@
+import {ColorHueKey, ColorTintKey} from '@sanity/color'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+import {
+  ColorConfigBaseKey,
+  ColorConfigBaseTone,
+  ColorConfigBlendKey,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+} from '../system'
+
+export interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigBaseTone
+  key: ColorConfigBaseKey | ColorConfigBlendKey
+}
+
+export interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ThemeColorButtonModeKey
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+export interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  hue?: ColorHueKey
+  tint?: ColorTintKey
+  opacity?: number
+}
+
+export interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueKey
+}
+
+export interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ThemeColorBlendModeKey
+}
+
+export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode

package/src/theme/config/types.ts

@@ -0,0 +1,51 @@
+import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
+import {
+  ThemeAvatar,
+  ThemeFocusRing,
+  ThemeFontWeightKey,
+  ThemeFonts,
+  ThemeInput,
+  ThemeLayer,
+  ThemeShadow,
+  ThemeStyles,
+} from '../system'
+import {ThemeColorTokens} from './tokens'
+
+export type ThemeColorPalette = {
+  black: string | ColorPaletteValue
+  white: string | ColorPaletteValue
+} & Record<ColorHueKey, Record<ColorTintKey, string | ColorPaletteValue>>
+
+export interface ThemeConfig {
+  avatar?: ThemeAvatar
+  button?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color?: ThemeColorTokens
+  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[]
+  palette?: ThemeColorPalette
+  radius?: number[]
+  shadows?: Array<ThemeShadow | null>
+  space?: number[]
+  styles?: ThemeStyles
+}

package/src/theme/index.ts

@@ -1,9 +1,4 @@
-export * from './_internal'
-export * from './lib/color-fns'
-export * from './lib/theme'
-export * from './studioTheme'
-export * from './themeColorProvider'
-export * from './themeProvider'
-export * from './types'
-export * from './useRootTheme'
-export * from './useTheme'
+export * from './build'
+export * from './config'
+export * from './themes/studio'
+export * from './system'

package/src/theme/system/_system.ts

@@ -0,0 +1,95 @@
+import type {StyledObject} from 'styled-components'
+import {ThemeAvatar} from './avatar'
+import {ThemeColor} from './color'
+import {ThemeColorSchemes} from './color'
+import {ThemeFonts, ThemeFontWeightKey} from './fonts'
+import {ThemeInput} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+
+/**
+ * Workaround types that are missing in v6
+ * https://github.com/styled-components/styled-components/issues/4062
+ * @internal
+ * */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSObject = StyledObject<any>
+
+/**
+ * @public
+ */
+export interface ThemeStyles {
+  button?: {
+    root?: CSSObject
+  }
+  card?: {
+    root?: CSSObject
+  }
+}
+
+/**
+ * @deprecated Use `ThemeStyles` instead
+ * @public
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ */
+export interface ThemeFocusRing {
+  offset: number
+  width: number
+}
+
+/**
+ * @public
+ */
+export interface BaseTheme<
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  Styles extends {} = {},
+> {
+  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[]
+  styles?: Styles
+}
+
+/**
+ * @public
+ */
+export type RootTheme = BaseTheme<ThemeStyles>
+
+/**
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color'> & {
+    color: ThemeColor
+  }
+}

package/src/theme/system/avatar.ts

@@ -0,0 +1,14 @@
+import {ThemeFocusRing} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeAvatar {
+  sizes: {
+    /** Spacing between avatars in an <AvatarStack> component (px) */
+    distance: number
+    /** Diameter of the avatar (px) */
+    size: number
+  }[]
+  focusRing: ThemeFocusRing
+}

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

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

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

@@ -1,7 +1,8 @@
-import {ThemeColorGenericState} from '../_generic/types'
+import {ThemeColorGenericState} from '../_generic'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorMutedTone {
   enabled: ThemeColorGenericState
@@ -13,6 +14,7 @@ export interface ThemeColorMutedTone {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorMuted {
   default: ThemeColorMutedTone

package/src/theme/{lib/theme/color/solid/types.ts → system/color/_deprecated/solid.ts}

@@ -1,7 +1,8 @@
-import {ThemeColorGenericState} from '../_generic/types'
+import {ThemeColorGenericState} from '../_generic'
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorSolidTone {
   enabled: ThemeColorGenericState
@@ -13,6 +14,7 @@ export interface ThemeColorSolidTone {
 
 /**
  * @public
+ * @deprecated
  */
 export interface ThemeColorSolid {
   default: ThemeColorSolidTone

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

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

package/src/theme/{lib/theme/color/_generic/types.ts → system/color/_generic.ts}

@@ -1,7 +1,11 @@
+import {ThemeColorBlendModeKey} from './_system'
+
 /**
  * @public
  */
 export interface ThemeColorGenericState {
+  /** @internal */
+  _blend?: ThemeColorBlendModeKey
   bg: string
   /**
    * @beta
@@ -9,7 +13,7 @@ export interface ThemeColorGenericState {
   bg2?: string
   border: string
   fg: string
-  iconColor: string
+  icon: string
   muted: {
     fg: string
   }

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

@@ -0,0 +1,23 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
+import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
+
+/** @internal */
+export function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey {
+  return THEME_COLOR_BLEND_MODES.includes(str as ThemeColorBlendModeKey)
+}
+
+/** @internal */
+export function isColorHueKey(str: string): str is ColorHueKey {
+  return COLOR_HUES.includes(str as ColorHueKey)
+}
+
+/** @internal */
+export function isColorTintKey(str: string): str is ColorTintKey {
+  return COLOR_TINTS.includes(str as ColorTintKey)
+}
+
+/** @internal */
+export function isColorButtonMode(str: string): str is ThemeColorButtonModeKey {
+  return THEME_COLOR_BUTTON_MODES.includes(str as ThemeColorButtonModeKey)
+}

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

@@ -0,0 +1,100 @@
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  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 */
+export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/** @internal */
+export type ThemeColorBaseToneKey = (typeof THEME_COLOR_BASE_TONES)[number]
+
+/** @internal */
+export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/** @internal */
+export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+/** @internal */
+export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/** @internal */
+export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/** @internal */
+export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/** @internal */
+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

@@ -0,0 +1,13 @@
+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}
+}

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

@@ -0,0 +1,9 @@
+import {ThemeColorBlendModeKey} from './_system'
+
+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}
+}

package/src/theme/{lib/theme/color/button/types.ts → system/color/button.ts}

@@ -1,9 +1,4 @@
-import {ThemeColorGenericState} from '../_generic'
-
-/**
- * @public
- */
-export type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
+import {ThemeColorGenericState} from './_generic'
 
 /**
  * @deprecated Use `ThemeColorGenericState` instead.
@@ -15,11 +10,11 @@ export type ThemeColorButtonState = ThemeColorGenericState
  * @public
  */
 export interface ThemeColorButtonStates {
-  enabled: ThemeColorButtonState
-  hovered: ThemeColorButtonState
-  pressed: ThemeColorButtonState
-  selected: ThemeColorButtonState
-  disabled: ThemeColorButtonState
+  enabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+  disabled: ThemeColorGenericState
 }
 
 /**

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

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

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

@@ -0,0 +1,20 @@
+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 './input'
+export * from './kbd'
+export * from './selectable'
+export * from './syntax'
+
+// deprecated
+export * from './_deprecated/muted'
+export * from './_deprecated/solid'
+export * from './_deprecated/spot'

package/src/theme/{lib/theme/color/input/types.ts → system/color/input.ts}

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

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

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

package/src/theme/{lib/theme/color/selectable/types.ts → system/color/selectable.ts}

@@ -1,4 +1,4 @@
-import {ThemeColorGenericState} from '../_generic'
+import {ThemeColorGenericState} from './_generic'
 
 /**
  * @deprecated Use `ThemeColorGenericState` instead.

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

@@ -1,7 +1,8 @@
+export * from './_system'
+
 export * from './avatar'
 export * from './color'
 export * from './fonts'
 export * from './input'
 export * from './layer'
 export * from './shadow'
-export * from './theme'

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

@@ -1,4 +1,4 @@
-import {FocusRing} from '../../types'
+import {ThemeFocusRing} from './_system'
 
 /**
  * @public
@@ -6,12 +6,12 @@ import {FocusRing} from '../../types'
 export interface ThemeInput {
   checkbox: {
     size: number
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   radio: {
     size: number
     markSize: number
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   switch: {
     width: number
@@ -19,15 +19,15 @@ export interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   border: {
     width: number
   }
   select: {
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
   text: {
-    focusRing: FocusRing
+    focusRing: ThemeFocusRing
   }
 }

package/src/theme/system/shadow.ts

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