@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/theme/getScopedTheme.ts

@@ -1,6 +1,11 @@
 import {defaultThemeConfig} from './defaults/config'
-import {RootTheme, RootTheme_v2, Theme, ThemeColorCardToneKey, ThemeColorSchemeKey} from './system'
-import {is_v2, v0_v2, v2_v0} from './versioning'
+import {RootTheme, Theme} from './types'
+import {ThemeColor} from './v0'
+import {RootTheme_v2, ThemeColorCardToneKey, ThemeColorSchemeKey} from './v2'
+import {is_v2} from './versioning/is_v2'
+import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
+import {v0_v2} from './versioning/v0_v2'
+import {v2_v0} from './versioning/v2_v0'
 
 // cache[scheme][tone][rootTheme] = theme
 const cache = new Map<
@@ -22,11 +27,12 @@ export function getScopedTheme(
   const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
 
   const colorScheme_v0 = v0.color[scheme] || v0.color.light
-  const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default
+  const color_v0 = (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
   const layer_v0 = v0.layer || defaultThemeConfig.layer
 
   const colorScheme_v2 = v2.color[scheme] || v2.color.light
   const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
+  const color_v2_9 = themeColor_v0_v2_9(color_v2)
   const layer_v2 = v2.layer || defaultThemeConfig.layer
 
   const theme: Theme = {
@@ -37,7 +43,7 @@ export function getScopedTheme(
       v2: {
         ...v2,
         _resolved: true,
-        color: color_v2,
+        color: color_v2_9,
         layer: layer_v2,
       },
     },

package/src/theme/index.ts

@@ -1,5 +1,11 @@
+export * from './_constants'
+export * from './_types'
 export * from './build'
 export * from './config'
 export * from './getScopedTheme'
-export * from './system'
+export * from './palette'
+export * from './types'
+export * from './v0'
+export * from './v2'
+export * from './v3'
 export * from './versioning'

package/src/theme/palette/constants.ts

@@ -0,0 +1,13 @@
+export const HUES = [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const
+
+export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/src/theme/palette/index.ts

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './types'

package/src/theme/palette/types.ts

@@ -0,0 +1,4 @@
+import {type HUES, type TINTS} from './constants'
+
+export type Hue = (typeof HUES)[number]
+export type Tint = (typeof TINTS)[number]

package/src/theme/types.ts

@@ -0,0 +1,32 @@
+import {ThemeColor} from './v0'
+import {RootTheme_v0} from './v0/theme'
+import {RootTheme_v2, Theme_v2} from './v2/theme'
+import {Theme_v3} from './v3'
+
+/**
+ * @public
+ */
+export interface RootTheme extends RootTheme_v0 {
+  v2?: RootTheme_v2
+  v3?: Theme_v3
+}
+
+/**
+ * @public
+ */
+export type BaseTheme = RootTheme
+
+/**
+ * Used for the `theme` prop in `styled-components`’s `ThemeProvider`.
+ *
+ * @public
+ */
+export interface Theme {
+  sanity: Omit<RootTheme, 'color' | 'v2'> & {
+    /**
+     * @deprecated Use `v2.color` instead
+     */
+    color: ThemeColor
+    v2?: Theme_v2
+  }
+}

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

@@ -0,0 +1,35 @@
+import {ThemeColorBlendModeKey} from '../../v2/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/v0/color/_system.ts

@@ -0,0 +1,17 @@
+/**
+ * @public
+ * @deprecated Use `ThemeColorCardToneKey` instead.
+ */
+export type ThemeColorName =
+  | 'transparent'
+  | 'default'
+  | 'primary'
+  | 'positive'
+  | 'caution'
+  | 'critical'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorCardToneKey` instead.
+ */
+export type ThemeColorToneKey = ThemeColorName

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

@@ -0,0 +1,40 @@
+import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../v2/color'
+import {ThemeColorGenericState} from './_generic'
+import {ThemeColorName} from './_system'
+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
+  input: ThemeColorInput
+  muted: ThemeColorMuted
+  selectable?: ThemeColorSelectable
+  solid: ThemeColorSolid
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorScheme_v2` instead.
+ */
+export type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemes_v2` instead.
+ */
+export type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>

package/src/theme/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 './color'
+export * from './input'
+export * from './muted'
+export * from './selectable'
+export * from './solid'
+export * from './spot'

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

@@ -0,0 +1,34 @@
+import {ThemeColorBlendModeKey} from '../../v2/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/v0/color/spot.ts

@@ -0,0 +1,13 @@
+import {ThemeColorAvatarColorKey} from '../../v2/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/v0/css.ts

@@ -0,0 +1,8 @@
+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
+ */
+export type CSSObject = StyledObject<any>

package/src/theme/v0/font.ts

@@ -0,0 +1,53 @@
+/**
+ * @public
+ */
+export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+
+/**
+ * @public
+ */
+export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/**
+ * @public
+ */
+export interface ThemeFontSize {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFontWeight {
+  regular: number
+  medium: number
+  semibold: number
+  bold: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFont {
+  family: string
+  featureSettings?: string
+  weights: ThemeFontWeight
+  sizes: ThemeFontSize[]
+  /** @deprecated No longer supported. */
+  horizontalOffset?: number
+}
+
+/**
+ * @public
+ */
+export interface ThemeFonts {
+  code: ThemeFont
+  heading: ThemeFont
+  label: ThemeFont
+  text: ThemeFont
+}

package/src/theme/v0/index.ts

@@ -0,0 +1,10 @@
+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/v0/theme.ts

@@ -0,0 +1,72 @@
+import {ThemeAvatar} from './avatar'
+import {ThemeColorSchemes} from './color'
+import {ThemeFonts, ThemeFontWeightKey} from './font'
+import {ThemeInput} from './input'
+import {ThemeLayer} from './layer'
+import {ThemeShadow} from './shadow'
+import {ThemeStyles} from './styles'
+
+/** @public */
+export interface RootTheme_v0 {
+  _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
+}

package/src/theme/v2/avatar.ts

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

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

@@ -0,0 +1,45 @@
+import {COLOR_HUES} from '@sanity/color'
+
+/** @public */
+export const THEME_COLOR_SCHEMES = ['light', 'dark'] as const
+
+/** @public */
+export const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const
+
+/** @public */
+export const THEME_COLOR_CARD_TONES = [
+  'transparent',
+  'default',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATE_TONES = [
+  'default',
+  'neutral',
+  'primary', // deprecated
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
+
+/** @public */
+export const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
+
+/** @public */
+export const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const
+
+/** @public */
+export const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const
+
+/** @public */
+export const THEME_COLOR_AVATAR_COLORS = COLOR_HUES

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

@@ -0,0 +1,24 @@
+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/v2/color/_system.ts

@@ -0,0 +1,40 @@
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_SCHEMES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+} from './_constants'
+
+/**
+ * @public
+ */
+export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
+
+/** @public */
+export type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
+
+/** @public */
+export type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
+
+/** @public */
+export type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
+
+/** @public */
+export type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
+
+/** @public */
+export type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
+
+/** @public */
+export type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
+
+/** @public */
+export type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
+
+/** @public */
+export type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]

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

@@ -0,0 +1,16 @@
+import {ThemeColorStateToneKey} from './_system'
+
+/**
+ * @public
+ */
+export interface ThemeColorBadgeTone_v2 {
+  bg: string
+  fg: string
+  dot: string
+  icon: string
+}
+
+/**
+ * @public
+ */
+export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

package/src/theme/v2/color/color.ts

@@ -0,0 +1,34 @@
+import {ThemeColorBlendModeKey, ThemeColorCardToneKey, 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/v2/index.ts

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

package/src/theme/v2/input.ts

@@ -0,0 +1,33 @@
+import {ThemeFocusRing} from '../v0/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/v2/theme.ts

@@ -0,0 +1,49 @@
+import {ThemeFocusRing} from '../v0/focusRing'
+import {ThemeFonts, ThemeFontWeightKey} from '../v0/font'
+import {ThemeLayer} from '../v0/layer'
+import {ThemeShadow} from '../v0/shadow'
+import {ThemeStyles} from '../v0/styles'
+import {ThemeAvatar_v2} from './avatar'
+import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
+import {ThemeInput_v2} from './input'
+
+/**
+ * @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 type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
+  color: ThemeColorCard_v2
+  /**
+   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
+   * with sanity V2 components accessing a v1 <ThemeProvider>.
+   * See https://github.com/sanity-io/ui/pull/1203 for more info.
+   */
+  _resolved: boolean
+}