@sanity/ui 3.0.0-static.33 → 3.0.0-static.34

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

@@ -1,268 +0,0 @@
-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/_constants.ts

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

@@ -1,24 +0,0 @@
-import {COLOR_HUES, COLOR_TINTS, type ColorHueKey, type ColorTintKey} from '@sanity/color'
-
-import {THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES} from './_constants'
-import type {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

@@ -1,38 +0,0 @@
-import type {
-  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/avatar.ts

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

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

@@ -1,12 +0,0 @@
-import type {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/button.ts

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

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

@@ -1,28 +0,0 @@
-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 */
-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/color/index.ts

@@ -1,13 +0,0 @@
-export * from './_constants'
-export * from './_helpers'
-export * from './_system'
-export * from './avatar'
-export * from './badge'
-export * from './button'
-export * from './color'
-export * from './input'
-export * from './kbd'
-export * from './selectable'
-export * from './shadow'
-export * from './state'
-export * from './syntax'

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

@@ -1,23 +0,0 @@
-import type {
-  ThemeColorBlendModeKey,
-  ThemeColorInputModeKey,
-  ThemeColorInputStateKey,
-} from './_system'
-
-/** @public */
-export interface ThemeColorInputState_v2 {
-  _blend?: ThemeColorBlendModeKey
-  bg: string
-  border: string
-  fg: string
-  muted: {
-    bg: string
-  }
-  placeholder: string
-}
-
-/** @public */
-export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
-
-/** @public */
-export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

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

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

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

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

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

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

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

@@ -1,41 +0,0 @@
-import type {ThemeColorBlendModeKey} from './_system'
-import type {ThemeColorAvatar_v2} from './avatar'
-import type {ThemeColorBadge_v2} from './badge'
-import type {ThemeColorKBD} from './kbd'
-
-/** @public */
-export interface ThemeColorState_v2 {
-  /** @internal */
-  _blend?: ThemeColorBlendModeKey
-  accent: {
-    fg: string
-  }
-  /**
-   * @internal  This may be removed in a future release
-   * */
-  avatar: ThemeColorAvatar_v2
-  /**
-   * @internal  This may be removed in a future release
-   * */
-  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/v2/color/syntax.ts

@@ -1,39 +0,0 @@
-/** @public */
-export interface ThemeColorSyntax {
-  atrule: string
-  attrName: string
-  attrValue: string
-  attribute: string
-  boolean: string
-  builtin: string
-  cdata: string
-  char: string
-  class: string
-  className: string
-  comment: string
-  constant: string
-  deleted: string
-  doctype: string
-  entity: string
-  function: string
-  hexcode: string
-  id: string
-  important: string
-  inserted: string
-  keyword: string
-  number: string
-  operator: string
-  prolog: string
-  property: string
-  pseudoClass: string
-  pseudoElement: string
-  punctuation: string
-  regex: string
-  selector: string
-  string: string
-  symbol: string
-  tag: string
-  unit: string
-  url: string
-  variable: string
-}

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

@@ -1,48 +0,0 @@
-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/index.ts

@@ -1,4 +0,0 @@
-export * from './helpers'
-export * from './system'
-export * from './tokens'
-export * from './types'