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

package/src/theme/config/system.ts

@@ -1,7 +1,7 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
 import {
   THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_INPUT_STATES,
   THEME_COLOR_STATES,
@@ -9,45 +9,54 @@ import {
   ThemeColorBlendModeKey,
 } from '../system'
 
-export const COLOR_CONFIG_BASE_KEYS = [
+/** @internal */
+export const COLOR_CONFIG_STATE_KEYS = [
   '_hue',
   'bg',
   'fg',
   'border',
   'focusRing',
   'muted/fg',
+  'accent/fg',
   'link/fg',
   'code/bg',
   'code/fg',
-  'shadow/outline',
-  'shadow/umbra',
-  'shadow/penumbra',
-  'shadow/ambient',
   'skeleton/from',
   'skeleton/to',
+  'status/dot',
+  'status/icon',
 ] as const
-export type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
 
-export const COLOR_CONFIG_STATE_KEYS = [
+/** @public */
+export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+/** @internal */
+export const COLOR_CONFIG_CARD_KEYS = [
+  ...COLOR_CONFIG_STATE_KEYS,
   '_hue',
   'bg',
   'fg',
   'border',
   'focusRing',
-  'muted/fg',
-  'link/fg',
-  'code/bg',
-  'code/fg',
-  'skeleton/from',
-  'skeleton/to',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
 ] as const
-export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
 
+/** @public */
+export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
+
+/** @internal */
 export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
+
+/** @public */
 export type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
 
+/** @public */
 export type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
 
+/** @public */
 export type ColorConfigValue =
   | `black`
   | `white`
@@ -60,24 +69,44 @@ export type ColorConfigValue =
   | `${ColorTintKey}/${ColorConfigOpacityValue}`
   | ThemeColorBlendModeKey
 
+/** @public */
 export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
 
+/** @public */
 export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
 
+/** @internal */
 export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
+
+/** @public */
 export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
 
-export const COLOR_CONFIG_BASE_TONES = ['*', ...THEME_COLOR_BASE_TONES] as const
-export type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+/** @internal */
+export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
+
+/** @public */
+export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
 
+/** @internal */
 export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
+
+/** @public */
 export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
 
+/** @internal */
 export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
+
+/** @public */
 export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
 
+/** @internal */
 export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
+
+/** @public */
 export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
 
+/** @internal */
 export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
+
+/** @public */
 export type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]

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

@@ -2,8 +2,7 @@ import {ColorHueKey} from '@sanity/color'
 import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
 import {
   ColorBlendModeTokenValue,
-  ColorConfigAvatarColor,
-  ColorConfigBaseTone,
+  ColorConfigCardTone,
   ColorConfigInputMode,
   ColorConfigInputState,
   ColorConfigState,
@@ -11,57 +10,89 @@ import {
   ThemeColorTokenValue,
 } from '../../system'
 
-export interface ThemeColorAvatarTokens {
+export interface ThemeColorAvatarHueTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
 }
 
+export interface ThemeColorAvatarTokens {
+  '*'?: ThemeColorAvatarHueTokens
+  gray?: ThemeColorAvatarHueTokens
+  blue?: ThemeColorAvatarHueTokens
+  purple?: ThemeColorAvatarHueTokens
+  magenta?: ThemeColorAvatarHueTokens
+  red?: ThemeColorAvatarHueTokens
+  orange?: ThemeColorAvatarHueTokens
+  yellow?: ThemeColorAvatarHueTokens
+  green?: ThemeColorAvatarHueTokens
+  cyan?: ThemeColorAvatarHueTokens
+}
+
 export interface ThemeColorBadgeTokens {
-  _blend?: ColorBlendModeTokenValue
+  // _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
 }
 
-export interface ThemeColorBaseTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  border?: ThemeColorTokenValue
+export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
+  backdrop?: ThemeColorTokenValue
   shadow?: {
     outline?: ThemeColorTokenValue
     umbra?: ThemeColorTokenValue
     penumbra?: ThemeColorTokenValue
     ambient?: ThemeColorTokenValue
   }
-  skeleton?: {
-    from?: ThemeColorTokenValue
-    to?: ThemeColorTokenValue
-  }
 }
 
-export interface ThemeColorStateTokens {
+export interface ThemeColorBadgeToneTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
-  bg2?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
   fg?: ThemeColorTokenValue
   icon?: ThemeColorTokenValue
+}
+
+export interface ThemeColorBadgeTokens {
+  '*'?: ThemeColorBadgeToneTokens
+  default?: ThemeColorBadgeToneTokens
+  primary?: ThemeColorBadgeToneTokens
+  positive?: ThemeColorBadgeToneTokens
+  caution?: ThemeColorBadgeToneTokens
+  critical?: ThemeColorBadgeToneTokens
+}
+
+export interface ThemeColorStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  accent?: {
+    fg?: ThemeColorTokenValue
+  }
+  avatar?: ThemeColorAvatarTokens
+  badge?: ThemeColorBadgeTokens
+  bg?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
-  muted?: {
+  code?: {
+    bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
   }
-  accent?: {
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+  kbd?: {
+    bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
+    border?: ThemeColorTokenValue
   }
   link?: {
     fg?: ThemeColorTokenValue
   }
-  code?: {
+  muted?: {
     bg?: ThemeColorTokenValue
     fg?: ThemeColorTokenValue
   }
@@ -82,9 +113,11 @@ export interface ThemeColorInputStateTokens {
   _blend?: ColorBlendModeTokenValue
   _hue?: ColorHueKey
   bg?: ThemeColorTokenValue
-  bg2?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
   border?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  muted?: {
+    bg?: ThemeColorTokenValue
+  }
   placeholder?: ThemeColorTokenValue
 }
 
@@ -94,19 +127,9 @@ export interface ThemeColorInputTokens
 }
 
 export interface ThemeColorTokens {
-  avatar?: Partial<Record<ColorConfigAvatarColor, ThemeColorAvatarTokens>>
-  badge?: Partial<Record<ColorConfigStateTone, ThemeColorBadgeTokens>>
-  base?: Partial<Record<ColorConfigBaseTone, ThemeColorBaseTokens>>
+  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
   button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
-  card?: Partial<Record<ColorConfigState, ThemeColorStateTokens>>
   input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
-  kbd?: {
-    _blend?: ColorBlendModeTokenValue
-    bg?: ThemeColorTokenValue
-    fg?: ThemeColorTokenValue
-    border?: ThemeColorTokenValue
-  }
   selectable?: Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>>
-  spot?: Partial<Record<ColorHueKey, ThemeColorTokenValue>>
   syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
 }

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

@@ -1,19 +1,21 @@
 import {ColorHueKey, ColorTintKey} from '@sanity/color'
 import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
 import {
-  ColorConfigBaseKey,
-  ColorConfigBaseTone,
+  ColorConfigCardKey,
+  ColorConfigCardTone,
   ColorConfigBlendKey,
   ColorConfigStateKey,
   ColorConfigStateTone,
 } from '../system'
 
+/** @internal */
 export interface TokenBaseKeyNode {
   type: 'base'
-  tone: ColorConfigBaseTone
-  key: ColorConfigBaseKey | ColorConfigBlendKey
+  tone: ColorConfigCardTone
+  key: ColorConfigCardKey | ColorConfigBlendKey
 }
 
+/** @internal */
 export interface TokenButtonKeyNode {
   type: 'button'
   tone: ColorConfigStateTone
@@ -21,8 +23,10 @@ export interface TokenButtonKeyNode {
   key: ColorConfigStateKey | ColorConfigBlendKey
 }
 
+/** @internal */
 export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
 
+/** @internal */
 export interface TokenColorValueNode {
   type: 'color'
   key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
@@ -31,14 +35,17 @@ export interface TokenColorValueNode {
   opacity?: number
 }
 
+/** @internal */
 export interface TokenHueValueNode {
   type: 'hue'
   value?: ColorHueKey
 }
 
+/** @internal */
 export interface TokenBlendModeValueNode {
   type: 'blendMode'
   value?: ThemeColorBlendModeKey
 }
 
+/** @internal */
 export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode

package/src/theme/config/types.ts

@@ -11,11 +11,13 @@ import {
 } from '../system'
 import {ThemeColorTokens} from './tokens'
 
+/** @public */
 export type ThemeColorPalette = {
   black: string | ColorPaletteValue
   white: string | ColorPaletteValue
 } & Record<ColorHueKey, Record<ColorTintKey, string | ColorPaletteValue>>
 
+/** @public */
 export interface ThemeConfig {
   avatar?: ThemeAvatar
   button?: {
@@ -30,22 +32,14 @@ export interface ThemeConfig {
   }
   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>
+  shadow?: Array<ThemeShadow | null>
   space?: number[]
-  styles?: ThemeStyles
+  /** @internal */
+  style?: ThemeStyles
 }

package/src/theme/{build/defaults → defaults}/colorPalette.ts

@@ -1,5 +1,5 @@
 import {color} from '@sanity/color'
 
-import {ThemeColorPalette} from '../../config'
+import {ThemeColorPalette} from '../config'
 
 export const defaultColorPalette: ThemeColorPalette = color