@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/theme/build/resolveColorTokens.ts

@@ -1,268 +0,0 @@
-import {COLOR_HUES, ColorHueKey} from '@sanity/color'
-
-import {
-  ColorConfigCardTone,
-  ColorConfigInputMode,
-  ColorConfigInputState,
-  ColorConfigStateTone,
-  ThemeColorAvatarTokens,
-  ThemeColorBadgeTokens,
-  ThemeColorBaseTokens,
-  ThemeColorButtonTokens,
-  ThemeColorInputStateTokens,
-  ThemeColorInputTokens,
-  ThemeColorStatesTokens,
-  ThemeColorStateTokens,
-  ThemeColorTokens,
-} from '../config'
-import {defaultColorTokens} from '../defaults/colorTokens'
-import {
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATE_TONES,
-  THEME_COLOR_STATES,
-  ThemeColorButtonModeKey,
-  ThemeColorCardToneKey,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
-} from '../system'
-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/build/theme.test.ts

@@ -1,27 +0,0 @@
-import {buildTheme} from './buildTheme'
-import {getContrastRatio} from './lib/color-fns'
-
-const AA_MIN = 4.5
-
-it('should have sufficient contrast', () => {
-  const base = buildTheme().v2!.color.light.default
-  const selectable = base.selectable.default
-
-  const contrasts = {
-    base: {
-      fg: getContrastRatio(base.bg, base.fg),
-    },
-    selectable: {
-      enabled: {
-        fg: getContrastRatio(selectable.enabled.bg, selectable.enabled.fg),
-        muted: {
-          fg: getContrastRatio(selectable.enabled.bg, selectable.enabled.muted.fg),
-        },
-      },
-    },
-  }
-
-  expect(contrasts.base.fg).toBeGreaterThan(AA_MIN)
-  expect(contrasts.selectable.enabled.fg).toBeGreaterThan(AA_MIN)
-  expect(contrasts.selectable.enabled.muted.fg).toBeGreaterThan(AA_MIN)
-})

package/src/theme/config/helpers.ts

@@ -1,55 +0,0 @@
-import {
-  COLOR_CONFIG_BLEND_KEYS,
-  COLOR_CONFIG_CARD_KEYS,
-  COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_STATE_KEYS,
-  COLOR_CONFIG_STATE_TONES,
-  ColorConfigBlendKey,
-  ColorConfigCardKey,
-  ColorConfigCardTone,
-  ColorConfigOpacityValue,
-  ColorConfigStateKey,
-  ColorConfigStateTone,
-  ColorConfigValue,
-} from './system'
-import {parseTokenValue} from './tokens'
-
-/** @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 isColorTokenValue(str: string): str is ColorConfigValue {
-  return parseTokenValue(str)?.type === 'color' || parseTokenValue(str)?.type === 'hue'
-}
-
-/** @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/config/index.ts

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

package/src/theme/config/system.ts

@@ -1,115 +0,0 @@
-import {ColorHueKey, ColorTintKey} from '@sanity/color'
-
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_STATE_TONES,
-  THEME_COLOR_STATES,
-  ThemeColorBlendModeKey,
-} from '../system'
-
-/** @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}`
-  | `${ColorHueKey}`
-  | `${ColorHueKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}`
-  | `${ColorHueKey}/${ColorTintKey} ${number}%`
-  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
-  | `${ColorTintKey}`
-  | `${ColorTintKey} ${number}%`
-  | `${ColorTintKey}/${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/config/tokens/color/index.ts

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

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

@@ -1,133 +0,0 @@
-import {ColorHueKey} from '@sanity/color'
-
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey, ThemeColorSyntax} from '../../../system'
-import {
-  ColorBlendModeTokenValue,
-  ColorConfigCardTone,
-  ColorConfigInputMode,
-  ColorConfigInputState,
-  ColorConfigState,
-  ColorConfigStateTone,
-  ThemeColorTokenValue,
-} from '../../system'
-
-/** @public */
-export interface ThemeColorAvatarHueTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
-  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?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  dot?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  icon?: ThemeColorTokenValue
-}
-
-/** @public */
-export type ThemeColorBadgeTokens = Partial<
-  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
->
-
-/** @public */
-export interface ThemeColorStateTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
-  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?: ColorHueKey
-}
-
-/** @public */
-export interface ThemeColorInputStateTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueKey
-  bg?: ThemeColorTokenValue
-  border?: ThemeColorTokenValue
-  fg?: ThemeColorTokenValue
-  muted?: {
-    bg?: ThemeColorTokenValue
-  }
-  placeholder?: ThemeColorTokenValue
-}
-
-/** @public */
-export interface ThemeColorInputTokens
-  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
-  _hue?: ColorHueKey
-}
-
-/** @public */
-export interface ThemeColorTokens {
-  base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>
-  button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
-  input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
-  selectable?: Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>>
-  syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
-}

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

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

package/src/theme/config/tokens/parseTokenKey.test.ts

@@ -1,64 +0,0 @@
-import {parseTokenKey} from './parseTokenKey'
-
-test('parse token key', () => {
-  expect(parseTokenKey('*/_blend')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: '_blend',
-  })
-
-  expect(parseTokenKey('*/_hue')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: '_hue',
-  })
-
-  expect(parseTokenKey('primary/_hue')).toEqual({
-    type: 'base',
-    tone: 'primary',
-    key: '_hue',
-  })
-
-  expect(parseTokenKey('*/bg')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: 'bg',
-  })
-
-  expect(parseTokenKey('*/focusRing')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: 'focusRing',
-  })
-
-  expect(parseTokenKey('*/muted/fg')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: 'muted/fg',
-  })
-
-  expect(parseTokenKey('*/link/fg')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: 'link/fg',
-  })
-
-  expect(parseTokenKey('*/code/fg')).toEqual({
-    type: 'base',
-    tone: '*',
-    key: 'code/fg',
-  })
-
-  expect(parseTokenKey('default/_blend')).toEqual({
-    type: 'base',
-    tone: 'default',
-    key: '_blend',
-  })
-
-  expect(parseTokenKey('button/*/default/_blend')).toEqual({
-    type: 'button',
-    tone: '*',
-    mode: 'default',
-    key: '_blend',
-  })
-})