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

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

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

package/src/theme/v2/config/tokens/color/index.ts

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

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

@@ -1,137 +0,0 @@
-import type {Hue} from '@sanity/ui/theme'
-
-import type {
-  ThemeColorButtonModeKey,
-  ThemeColorStateToneKey,
-  ThemeColorSyntax,
-} from '../../../color'
-import type {
-  ColorBlendModeTokenValue,
-  ColorConfigCardTone,
-  ColorConfigInputMode,
-  ColorConfigInputState,
-  ColorConfigState,
-  ColorConfigStateTone,
-  ThemeColorTokenValue,
-} from '../../system'
-
-/** @public */
-export interface ThemeColorAvatarHueTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: Hue
-  bg?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-}
-
-/** @public */
-export interface ThemeColorAvatarTokens {
-  '*'?: ThemeColorAvatarHueTokens
-  'gray'?: ThemeColorAvatarHueTokens
-  'blue'?: ThemeColorAvatarHueTokens
-  'purple'?: ThemeColorAvatarHueTokens
-  'magenta'?: ThemeColorAvatarHueTokens
-  'red'?: ThemeColorAvatarHueTokens
-  'orange'?: ThemeColorAvatarHueTokens
-  'yellow'?: ThemeColorAvatarHueTokens
-  'green'?: ThemeColorAvatarHueTokens
-  'cyan'?: ThemeColorAvatarHueTokens
-}
-
-/** @public */
-export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
-  focusRing?: ThemeColorTokenValue
-  backdrop?: ThemeColorTokenValue
-  shadow?: {
-    outline?: ThemeColorTokenValue
-    umbra?: ThemeColorTokenValue
-    penumbra?: ThemeColorTokenValue
-    ambient?: ThemeColorTokenValue
-  }
-}
-
-/** @public */
-export interface ThemeColorBadgeToneTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: Hue
-  bg?: ThemeColorTokenValue
-  dot?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-}
-
-/** @public */
-export type ThemeColorBadgeTokens = Partial<
-  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
->
-
-/** @public */
-export interface ThemeColorStateTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: Hue
-  accent?: {
-    fg?: ThemeColorTokenValue
-  }
-  avatar?: ThemeColorAvatarTokens
-  badge?: ThemeColorBadgeTokens
-  bg?: ThemeColorTokenValue
-  border?: ThemeColorTokenValue
-  code?: {
-    bg?: ThemeColorTokenValue
-    fg?: ThemeColorTokenValue
-  }
-  fg?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-  kbd?: {
-    bg?: ThemeColorTokenValue
-    fg?: ThemeColorTokenValue
-    border?: ThemeColorTokenValue
-  }
-  link?: {
-    fg?: ThemeColorTokenValue
-  }
-  muted?: {
-    bg?: ThemeColorTokenValue
-    fg?: ThemeColorTokenValue
-  }
-  skeleton?: {
-    from?: ThemeColorTokenValue
-    to?: ThemeColorTokenValue
-  }
-}
-
-/** @public */
-export type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>
-
-/** @public */
-export interface ThemeColorButtonTokens
-  extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
-  _hue?: Hue
-}
-
-/** @public */
-export interface ThemeColorInputStateTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: Hue
-  bg?: ThemeColorTokenValue
-  border?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  muted?: {
-    bg?: ThemeColorTokenValue
-  }
-  placeholder?: ThemeColorTokenValue
-}
-
-/** @public */
-export interface ThemeColorInputTokens
-  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
-  _hue?: Hue
-}
-
-/** @public */
-export interface ThemeColorTokens {
-  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
-  button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
-  input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
-  selectable?: Partial<Record<ColorConfigStateTone, {_hue?: Hue} & ThemeColorStatesTokens>>
-  syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
-}

package/src/theme/v2/config/tokens/index.ts

@@ -1,3 +0,0 @@
-export * from './color'
-export * from './parseTokenValue'
-export * from './types'

package/src/theme/v2/config/tokens/parseTokenValue.test.ts

@@ -1,44 +0,0 @@
-import {expect, test} from 'vitest'
-
-import {parseTokenValue} from './parseTokenValue'
-
-test('parse color value', () => {
-  expect(parseTokenValue('cyan')).toEqual({
-    type: 'hue',
-    value: 'cyan',
-  })
-
-  expect(parseTokenValue('50')).toEqual({
-    type: 'color',
-    tint: '50',
-  })
-
-  expect(parseTokenValue('50 50%')).toEqual({
-    type: 'color',
-    tint: '50',
-    mix: 0.5,
-  })
-
-  expect(parseTokenValue('cyan/500')).toEqual({
-    type: 'color',
-    hue: 'cyan',
-    tint: '500',
-  })
-
-  expect(parseTokenValue('cyan/500 50%')).toEqual({
-    type: 'color',
-    hue: 'cyan',
-    mix: 0.5,
-    tint: '500',
-  })
-
-  expect(parseTokenValue('screen')).toEqual({
-    type: 'blendMode',
-    value: 'screen',
-  })
-
-  expect(parseTokenValue('multiply')).toEqual({
-    type: 'blendMode',
-    value: 'multiply',
-  })
-})

package/src/theme/v2/config/tokens/parseTokenValue.ts

@@ -1,133 +0,0 @@
-import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../color'
-import {isColorOpacityValue, isColorValue} from '../helpers'
-import type {TokenValueNode} from './types'
-
-function isColorMixPercentValue(str: string): str is `${number}%` {
-  return /^\d+%$/.test(str)
-}
-
-/** @internal */
-export function parseTokenValue(str: string): TokenValueNode | undefined {
-  const segments = str.split('/')
-
-  let nextSegment = segments.shift() || ''
-
-  const [segment0, segment0mix] = nextSegment.split(' ')
-
-  if (isColorTintKey(segment0)) {
-    const tint = segment0
-    const segment1 = segments.shift() || ''
-
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix = Number(segment0mix.slice(0, -1)) / 100
-
-      return {
-        type: 'color',
-        tint,
-        mix,
-      }
-    }
-
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1)
-
-      return {
-        type: 'color',
-        tint,
-        opacity,
-      }
-    }
-
-    return {
-      type: 'color',
-      tint,
-    }
-  }
-
-  if (isColorValue(segment0)) {
-    const key = segment0 as 'black' | 'white'
-    const segment1 = segments.shift() || ''
-
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix = Number(segment0mix.slice(0, -1)) / 100
-
-      return {
-        type: 'color',
-        key,
-        mix,
-      }
-    }
-
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1)
-
-      return {
-        type: 'color',
-        key,
-        opacity,
-      }
-    }
-
-    return {
-      type: 'color',
-      key,
-    }
-  }
-
-  if (isColorHueKey(segment0)) {
-    const hue = segment0
-
-    nextSegment = segments.shift() || ''
-
-    const [segment1, segment1mix] = nextSegment.split(' ')
-
-    if (isColorTintKey(segment1)) {
-      const tint = segment1
-      const segment2 = segments.shift() || ''
-
-      if (isColorMixPercentValue(segment1mix)) {
-        const mix = Number(segment1mix.slice(0, -1)) / 100
-
-        return {
-          type: 'color',
-          hue,
-          tint,
-          mix,
-        }
-      }
-
-      if (isColorOpacityValue(segment2)) {
-        const opacity = Number(segment2)
-
-        return {
-          type: 'color',
-          hue,
-          tint,
-          opacity,
-        }
-      }
-
-      return {
-        type: 'color',
-        hue,
-        tint,
-      }
-    }
-
-    return {
-      type: 'hue',
-      value: hue,
-    }
-  }
-
-  if (isColorBlendModeValue(segment0)) {
-    const value = segment0
-
-    return {
-      type: 'blendMode',
-      value,
-    }
-  }
-
-  return undefined
-}

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

@@ -1,53 +0,0 @@
-import type {ColorHueKey, ColorTintKey} from '@sanity/color'
-
-import type {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../color'
-import type {
-  ColorConfigBlendKey,
-  ColorConfigCardKey,
-  ColorConfigCardTone,
-  ColorConfigStateKey,
-  ColorConfigStateTone,
-} from '../system'
-
-/** @internal */
-export interface TokenBaseKeyNode {
-  type: 'base'
-  tone: ColorConfigCardTone
-  key: ColorConfigCardKey | ColorConfigBlendKey
-}
-
-/** @internal */
-export interface TokenButtonKeyNode {
-  type: 'button'
-  tone: ColorConfigStateTone
-  mode: ThemeColorButtonModeKey
-  key: ColorConfigStateKey | ColorConfigBlendKey
-}
-
-/** @internal */
-export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
-
-/** @internal */
-export interface TokenColorValueNode {
-  type: 'color'
-  key?: 'black' | 'white'
-  hue?: ColorHueKey
-  mix?: number
-  opacity?: number
-  tint?: ColorTintKey
-}
-
-/** @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/v2/config/types.ts

@@ -1,47 +0,0 @@
-import type {ColorTint as ColorPaletteValue} from '@sanity/color'
-
-import type {
-  ThemeFocusRing,
-  ThemeFonts,
-  ThemeFontWeightKey,
-  ThemeLayer,
-  ThemeShadow,
-  ThemeStyles,
-} from '../../v0'
-import type {Hue, Tint} from '../../v3'
-import type {ThemeAvatar_v2} from '../avatar'
-import type {ThemeInput_v2} from '../input'
-import type {ThemeColorTokens} from './tokens'
-
-/** @public */
-export type ThemeColorPalette = {
-  black: string | ColorPaletteValue
-  white: string | ColorPaletteValue
-} & Record<Hue, Record<Tint, string | ColorPaletteValue>>
-
-/** @public */
-export interface ThemeConfig {
-  avatar?: ThemeAvatar_v2
-  button?: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    textWeight: ThemeFontWeightKey
-  }
-  card?: {
-    border: {width: number}
-    focusRing: ThemeFocusRing
-    shadow: {outline: number}
-  }
-  color?: ThemeColorTokens
-  container?: number[]
-  font?: ThemeFonts
-  input?: ThemeInput_v2
-  layer?: ThemeLayer
-  media?: number[]
-  palette?: ThemeColorPalette
-  radius?: number[]
-  shadow?: Array<ThemeShadow | null>
-  space?: number[]
-  /** @internal */
-  style?: ThemeStyles
-}

package/src/theme/v2/defaults/colorPalette.ts

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