@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/theme/build/resolveColorTokens.ts

@@ -0,0 +1,331 @@
+import {ColorHueKey} from '@sanity/color'
+import {
+  ColorConfigCardTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigStateTone,
+  ThemeColorBaseTokens,
+  ThemeColorButtonTokens,
+  ThemeColorInputStateTokens,
+  ThemeColorInputTokens,
+  ThemeColorStateTokens,
+  ThemeColorStatesTokens,
+  ThemeColorTokens,
+} from '../config'
+import {defaultColorTokens} from '../defaults/colorTokens'
+import {
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorCardToneKey,
+  ThemeColorButtonModeKey,
+  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: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
+  }
+}
+
+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: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
+  }
+}
+
+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: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
+  }
+}

package/src/theme/build/theme.test.ts

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

@@ -0,0 +1,55 @@
+import {
+  COLOR_CONFIG_CARD_KEYS,
+  COLOR_CONFIG_CARD_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  ColorConfigCardKey,
+  ColorConfigCardTone,
+  ColorConfigBlendKey,
+  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

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

package/src/theme/config/system.ts

@@ -0,0 +1,112 @@
+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_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorBlendModeKey,
+} from '../system'
+
+/** @internal */
+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]
+
+/** @internal */
+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]
+
+/** @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`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueKey}`
+  | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${ColorTintKey}`
+  | `${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]
+
+/** @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/index.ts

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

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

@@ -0,0 +1,135 @@
+import {ColorHueKey} from '@sanity/color'
+import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
+import {
+  ColorBlendModeTokenValue,
+  ColorConfigCardTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigState,
+  ColorConfigStateTone,
+  ThemeColorTokenValue,
+} from '../../system'
+
+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
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+}
+
+export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
+  focusRing?: ThemeColorTokenValue
+  backdrop?: ThemeColorTokenValue
+  shadow?: {
+    outline?: ThemeColorTokenValue
+    umbra?: ThemeColorTokenValue
+    penumbra?: ThemeColorTokenValue
+    ambient?: ThemeColorTokenValue
+  }
+}
+
+export interface ThemeColorBadgeToneTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: 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
+  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
+  }
+}
+
+export type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>
+
+export interface ThemeColorButtonTokens
+  extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
+  _hue?: ColorHueKey
+}
+
+export interface ThemeColorInputStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  muted?: {
+    bg?: ThemeColorTokenValue
+  }
+  placeholder?: ThemeColorTokenValue
+}
+
+export interface ThemeColorInputTokens
+  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
+  _hue?: ColorHueKey
+}
+
+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

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