@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/theme/v2/build/resolveColorTokens.ts

@@ -0,0 +1,268 @@
+import {COLOR_HUES, type ColorHueKey} from '@sanity/color'
+
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  type ThemeColorButtonModeKey,
+  type ThemeColorCardToneKey,
+  type ThemeColorStateKey,
+  type ThemeColorStateToneKey,
+} from '../color'
+import type {
+  ColorConfigCardTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigStateTone,
+  ThemeColorAvatarTokens,
+  ThemeColorBadgeTokens,
+  ThemeColorBaseTokens,
+  ThemeColorButtonTokens,
+  ThemeColorInputStateTokens,
+  ThemeColorInputTokens,
+  ThemeColorStatesTokens,
+  ThemeColorStateTokens,
+  ThemeColorTokens,
+} from '../config'
+import {defaultColorTokens} from '../defaults/colorTokens'
+import {merge} from './merge'
+
+/**
+ * Convert a tree of color tokens from a sparse format to a dense format.
+ */
+export function resolveColorTokens(inputTokens?: ThemeColorTokens): ThemeColorTokens {
+  const tokens = merge(defaultColorTokens, inputTokens)
+
+  return {
+    base: resolveBaseColorTokens(tokens),
+    button: resolveButtonColorTokens(tokens),
+    input: resolveInputColorTokens(tokens),
+    selectable: resolveSelectableColorTokens(tokens),
+    syntax: tokens.syntax,
+  }
+}
+
+function resolveBaseColorTokens(sparseTokens: ThemeColorTokens) {
+  const tokens: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>> = {}
+
+  // base tones
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    tokens[tone] = resolveBaseColorTones(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveBaseColorTones(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorCardToneKey,
+): ThemeColorBaseTokens {
+  const spec = merge(inputTokens?.base?.['*'], inputTokens?.base?.[tone])
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue || 'gray'
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}
+
+function resolveButtonColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> {
+  const tokens: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> = {}
+
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveButtonToneColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTokens {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone)
+  }
+
+  return tokens
+}
+
+function resolveButtonModeColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+  tone: ThemeColorStateToneKey,
+): ThemeColorStatesTokens {
+  const tokens: ThemeColorStatesTokens = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state)
+  }
+
+  return tokens
+}
+
+function resolveButtonStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+  mode: ThemeColorButtonModeKey,
+  state: ThemeColorStateKey,
+): ThemeColorStateTokens {
+  const spec = merge(
+    inputTokens?.button?.[mode]?.['*']?.['*'],
+    inputTokens?.button?.[mode]?.[tone]?.['*'],
+    inputTokens?.button?.[mode]?.['*']?.[state],
+    inputTokens?.button?.[mode]?.[tone]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}
+
+function resolveInputColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> {
+  const tokens: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> = {}
+
+  for (const mode of THEME_COLOR_INPUT_MODES) {
+    tokens[mode] = resolveInputModeColorTokens(inputTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveInputModeColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+): ThemeColorInputTokens {
+  const states: ThemeColorInputTokens = {}
+
+  for (const state of THEME_COLOR_INPUT_STATES) {
+    states[state] = resolveInputStateColorTokens(inputTokens, mode, state)
+  }
+
+  return states
+}
+
+function resolveInputStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+  state: ColorConfigInputState,
+): ThemeColorInputStateTokens {
+  const spec = merge(
+    inputTokens?.input?.['*']?.['*'],
+    inputTokens?.input?.[mode]?.['*'],
+    inputTokens?.input?.['*']?.[state],
+    inputTokens?.input?.[mode]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.input?.[mode]?._hue
+
+  return {...spec, _hue: hue}
+}
+
+function resolveSelectableColorTokens(
+  inputTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>> {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveSelectableToneColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+): {_hue?: ColorHueKey} & ThemeColorStatesTokens {
+  const states: {_hue?: ColorHueKey} & ThemeColorStatesTokens = {
+    _hue: inputTokens?.selectable?.[tone]?._hue || inputTokens?.base?.[tone]?._hue,
+  }
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state)
+  }
+
+  return states
+}
+
+function resolveSelectableStateColorTokens(
+  inputTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+  state: ThemeColorStateKey,
+) {
+  const spec = merge(
+    inputTokens?.selectable?.['*']?.['*'],
+    inputTokens?.selectable?.[tone]?.['*'],
+    inputTokens?.selectable?.['*']?.[state],
+    inputTokens?.selectable?.[tone]?.[state],
+  )
+
+  const hue = spec._hue || inputTokens?.base?.[tone]?._hue
+
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: COLOR_HUES.reduce((acc, hue) => {
+      return {
+        ...acc,
+        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
+      }
+    }, {} as ThemeColorAvatarTokens),
+    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+      return {
+        ...acc,
+        [tone]: {
+          _hue: inputTokens?.base?.[tone]?._hue || hue,
+          ...spec.badge?.['*'],
+          ...spec.badge?.[tone],
+        },
+      }
+    }, {} as ThemeColorBadgeTokens),
+  }
+}

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

@@ -1,7 +1,7 @@
-import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
+import {COLOR_HUES, COLOR_TINTS, type ColorHueKey, type ColorTintKey} from '@sanity/color'
 
 import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
-import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
+import type {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from './_system'
 
 /** @internal */
 export function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey {

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

@@ -1,4 +1,4 @@
-import {
+import type {
   THEME_COLOR_AVATAR_COLORS,
   THEME_COLOR_BLEND_MODES,
   THEME_COLOR_BUTTON_MODES,
@@ -10,9 +10,7 @@ import {
   THEME_COLOR_STATES,
 } from './_constants'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /** @public */

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

@@ -1,15 +1,11 @@
-import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
+import type {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorAvatarHue_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
   fg: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

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

@@ -1,8 +1,6 @@
-import {ThemeColorStateToneKey} from './_system'
+import type {ThemeColorStateToneKey} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorBadgeTone_v2 {
   bg: string
   fg: string
@@ -10,7 +8,5 @@ export interface ThemeColorBadgeTone_v2 {
   icon: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

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

@@ -1,17 +1,11 @@
-import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
-import {ThemeColorState_v2} from './state'
+import type {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
+import type {ThemeColorState_v2} from './state'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

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

@@ -1,14 +1,12 @@
-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'
+import type {ThemeColorBlendModeKey, ThemeColorCardToneKey, ThemeColorSchemeKey} from './_system'
+import type {ThemeColorButton_v2} from './button'
+import type {ThemeColorInput_v2} from './input'
+import type {ThemeColorSelectable_v2} from './selectable'
+import type {ThemeColorShadow} from './shadow'
+import type {ThemeColorState_v2} from './state'
+import type {ThemeColorSyntax} from './syntax'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   /** @internal */
   _blend: ThemeColorBlendModeKey
@@ -23,12 +21,8 @@ export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   syntax: ThemeColorSyntax
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>

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

@@ -1,8 +1,10 @@
-import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
+import type {
+  ThemeColorBlendModeKey,
+  ThemeColorInputModeKey,
+  ThemeColorInputStateKey,
+} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorInputState_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
@@ -14,12 +16,8 @@ export interface ThemeColorInputState_v2 {
   placeholder: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorKBD {
   bg: string
   fg: string

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

@@ -1,12 +1,8 @@
-import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
-import {ThemeColorState_v2} from './state'
+import type {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
+import type {ThemeColorState_v2} from './state'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

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

@@ -1,11 +1,9 @@
-import {ThemeColorBlendModeKey} from './_system'
-import {ThemeColorAvatar_v2} from './avatar'
-import {ThemeColorBadge_v2} from './badge'
-import {ThemeColorKBD} from './kbd'
+import type {ThemeColorBlendModeKey} from './_system'
+import type {ThemeColorAvatar_v2} from './avatar'
+import type {ThemeColorBadge_v2} from './badge'
+import type {ThemeColorKBD} from './kbd'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorState_v2 {
   /** @internal */
   _blend?: ThemeColorBlendModeKey

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorSyntax {
   atrule: string
   attrName: string

package/src/theme/v2/config/helpers.ts

@@ -0,0 +1,48 @@
+import {
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_CARD_KEYS,
+  COLOR_CONFIG_CARD_TONES,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  type ColorConfigBlendKey,
+  type ColorConfigCardKey,
+  type ColorConfigCardTone,
+  type ColorConfigOpacityValue,
+  type ColorConfigStateKey,
+  type ColorConfigStateTone,
+} from './system'
+
+/** @internal */
+export function isColorConfigBaseTone(str: string): str is ColorConfigCardTone {
+  return COLOR_CONFIG_CARD_TONES.includes(str as ColorConfigCardTone)
+}
+
+/** @internal */
+export function isColorConfigBaseKey(str: string): str is ColorConfigCardKey {
+  return COLOR_CONFIG_CARD_KEYS.includes(str as ColorConfigCardKey)
+}
+
+/** @internal */
+export function isColorConfigStateKey(str: string): str is ColorConfigStateKey {
+  return COLOR_CONFIG_STATE_KEYS.includes(str as ColorConfigStateKey)
+}
+
+/** @internal */
+export function isColorConfigStateTone(str: string): str is ColorConfigStateTone {
+  return COLOR_CONFIG_STATE_TONES.includes(str as ColorConfigStateTone)
+}
+
+/** @internal */
+export function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str as ColorConfigBlendKey)
+}
+
+/** @internal */
+export function isColorValue(str: string): str is 'black' | 'white' {
+  return str === 'black' || str === 'white'
+}
+
+/** @internal */
+export function isColorOpacityValue(str: string): str is ColorConfigOpacityValue {
+  return str === '0' || /^0\.[0-9]+$/.test(str) || str === '1'
+}

package/src/theme/v2/config/system.ts

@@ -0,0 +1,114 @@
+import type {Hue, Tint} from '../../v3'
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  type ThemeColorBlendModeKey,
+} from '../color'
+
+/** @public */
+export const COLOR_CONFIG_STATE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'accent/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+  'status/dot',
+  'status/icon',
+] as const
+
+/** @public */
+export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+/** @public */
+export const COLOR_CONFIG_CARD_KEYS = [
+  ...COLOR_CONFIG_STATE_KEYS,
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+] as const
+
+/** @public */
+export type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
+
+/** @public */
+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`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${Hue}`
+  | `${Hue} ${number}%`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Hue}/${Tint}/${ColorConfigOpacityValue}`
+  | `${Tint}`
+  | `${Tint} ${number}%`
+  | `${Tint}/${ColorConfigOpacityValue}`
+
+/** @public */
+export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
+/** @public */
+export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
+
+/** @public */
+export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
+
+/** @public */
+export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
+
+/** @public */
+export const COLOR_CONFIG_CARD_TONES = ['*', ...THEME_COLOR_CARD_TONES] as const
+
+/** @public */
+export type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
+
+/** @public */
+export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
+
+/** @public */
+export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+/** @public */
+export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
+
+/** @public */
+export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
+
+/** @public */
+export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
+
+/** @public */
+export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
+
+/** @public */
+export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
+
+/** @public */
+export type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]