@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/src/theme/build/resolveColorTokens.ts

@@ -0,0 +1,352 @@
+import {ColorHueKey} from '@sanity/color'
+import {
+  ColorConfigAvatarColor,
+  ColorConfigBaseTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigState,
+  ColorConfigStateTone,
+  ThemeColorAvatarTokens,
+  ThemeColorBadgeTokens,
+  ThemeColorBaseTokens,
+  ThemeColorButtonTokens,
+  ThemeColorInputStateTokens,
+  ThemeColorInputTokens,
+  ThemeColorStateTokens,
+  ThemeColorStatesTokens,
+  ThemeColorTokenValue,
+  ThemeColorTokens,
+} from '../config'
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorAvatarColorKey,
+  ThemeColorBaseToneKey,
+  ThemeColorButtonModeKey,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+  ThemeColorSyntax,
+} from '../system'
+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 sparseTokens = merge(
+    defaultColorTokens as unknown as Record<string, unknown>,
+    (inputTokens ?? {}) as unknown as Record<string, unknown>,
+  )
+
+  return {
+    avatar: resolveAvatarColorTokens(sparseTokens),
+    badge: resolveBadgeColorTokens(sparseTokens),
+    base: resolveBaseColorTokens(sparseTokens),
+    button: resolveButtonColorTokens(sparseTokens),
+    card: resolveCardColorTokens(sparseTokens),
+    input: resolveInputColorTokens(sparseTokens),
+    kbd: resolveKBDColorTokens(sparseTokens),
+    selectable: resolveSelectableColorTokens(sparseTokens),
+    spot: resolveSpotColorTokens(sparseTokens),
+    syntax: resolveSyntaxColorTokens(sparseTokens),
+  }
+}
+
+function resolveKBDColorTokens(sparseTokens: ThemeColorTokens) {
+  return sparseTokens?.kbd
+}
+
+function resolveAvatarColorTokens(sparseTokens: ThemeColorTokens) {
+  const tokens: Partial<Record<ColorConfigAvatarColor, ThemeColorAvatarTokens>> = {}
+
+  for (const color of THEME_COLOR_AVATAR_COLORS) {
+    tokens[color] = _resolveAvatarColorTokens(sparseTokens, color)
+  }
+
+  return tokens
+}
+
+function _resolveAvatarColorTokens(
+  sparseTokens: ThemeColorTokens,
+  color: ThemeColorAvatarColorKey,
+): ThemeColorAvatarTokens {
+  const spec0 = sparseTokens?.avatar?.[color]
+  const spec1 = sparseTokens?.avatar?.['*']
+
+  return {
+    ...spec1,
+    ...spec0,
+  }
+}
+
+function resolveBadgeColorTokens(sparseTokens: ThemeColorTokens) {
+  const tokens: Partial<Record<ColorConfigStateTone, ThemeColorAvatarTokens>> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = _resolveBadgeColorTokens(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function _resolveBadgeColorTokens(
+  sparseTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+): ThemeColorBadgeTokens {
+  const spec0 = sparseTokens?.badge?.[tone]
+  const spec1 = sparseTokens?.badge?.['*']
+
+  return {
+    ...spec1,
+    ...spec0,
+  }
+}
+
+function resolveBaseColorTokens(sparseTokens: ThemeColorTokens) {
+  const tokens: Partial<Record<ColorConfigBaseTone, ThemeColorBaseTokens>> = {}
+
+  // base tones
+  for (const tone of THEME_COLOR_BASE_TONES) {
+    tokens[tone] = resolveBaseColorTones(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveBaseColorTones(
+  sparseTokens: ThemeColorTokens,
+  tone: ThemeColorBaseToneKey,
+): ThemeColorBaseTokens {
+  const spec0 = sparseTokens?.base?.[tone]
+  const spec1 = sparseTokens?.base?.['*']
+
+  return {
+    ...spec1,
+    ...spec0,
+    shadow: {...spec1?.shadow, ...spec0?.shadow},
+    skeleton: {...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}
+
+function resolveButtonColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> {
+  const tokens: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>> = {}
+
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonToneColorTokens(sparseTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveButtonToneColorTokens(
+  sparseTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTokens {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonModeColorTokens(sparseTokens, mode, tone)
+  }
+
+  return tokens
+}
+
+function resolveButtonModeColorTokens(
+  sparseTokens: ThemeColorTokens,
+  mode: ThemeColorButtonModeKey,
+  tone: ThemeColorStateToneKey,
+): ThemeColorStatesTokens {
+  const spec0 = sparseTokens.button?.[mode]?.[tone]
+  const spec1 = sparseTokens.button?.[mode]?.['*']
+  const tokens = {...spec1, ...spec0}
+
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state)
+  }
+
+  return tokens
+}
+
+function resolveButtonStateColorTokens(
+  tokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+  mode: ThemeColorButtonModeKey,
+  state: ThemeColorStateKey,
+): ThemeColorStateTokens {
+  const spec0 = tokens?.button?.[mode]?.[tone]?.[state]
+  const spec1 = tokens?.button?.[mode]?.['*']?.[state]
+  const spec2 = tokens?.button?.[mode]?.[tone]?.['*']
+  const spec3 = tokens?.button?.[mode]?.['*']?.['*']
+
+  const hue = spec0?._hue || spec1?._hue || spec2?._hue || spec3?._hue || tokens?.base?.[tone]?._hue
+
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {...spec3?.muted, ...spec2?.muted, ...spec1?.muted, ...spec0?.muted},
+    accent: {...spec3?.accent, ...spec2?.accent, ...spec1?.accent, ...spec0?.accent},
+    link: {...spec3?.link, ...spec2?.link, ...spec1?.link, ...spec0?.link},
+    code: {...spec3?.code, ...spec2?.code, ...spec1?.code, ...spec0?.code},
+    skeleton: {...spec3?.skeleton, ...spec2?.skeleton, ...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}
+
+function resolveCardColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigState, ThemeColorStateTokens>> {
+  const tokens: Partial<Record<ColorConfigState, ThemeColorStateTokens>> = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    tokens[state] = resolveCardStateColorTokens(sparseTokens, state)
+  }
+
+  return tokens
+}
+
+function resolveCardStateColorTokens(
+  tokens: ThemeColorTokens,
+  state: ThemeColorStateKey,
+): ThemeColorStateTokens {
+  const spec0 = tokens?.card?.[state]
+  const spec1 = tokens?.card?.['*']
+
+  const hue = spec0?._hue || spec1?._hue
+
+  return {
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {...spec1?.muted, ...spec0?.muted},
+    accent: {...spec1?.accent, ...spec0?.accent},
+    link: {...spec1?.link, ...spec0?.link},
+    code: {...spec1?.code, ...spec0?.code},
+    skeleton: {...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}
+
+function resolveInputColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> {
+  const tokens: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>> = {}
+
+  for (const mode of THEME_COLOR_INPUT_MODES) {
+    tokens[mode] = resolveInputModeColorTokens(sparseTokens, mode)
+  }
+
+  return tokens
+}
+
+function resolveInputModeColorTokens(
+  sparseTokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+): ThemeColorInputTokens {
+  const states: ThemeColorInputTokens = {}
+
+  for (const state of THEME_COLOR_INPUT_STATES) {
+    states[state] = resolveInputStateColorTokens(sparseTokens, mode, state)
+  }
+
+  return states
+}
+
+function resolveInputStateColorTokens(
+  tokens: ThemeColorTokens,
+  mode: ColorConfigInputMode,
+  state: ColorConfigInputState,
+): ThemeColorInputStateTokens {
+  const spec0 = tokens?.input?.[mode]?.[state]
+  const spec1 = tokens?.input?.['*']?.[state]
+  const spec2 = tokens?.input?.[mode]?.['*']
+  const spec3 = tokens?.input?.['*']?.['*']
+
+  const hue =
+    spec0?._hue || spec1?._hue || spec2?._hue || spec3?._hue || tokens?.input?.[mode]?._hue
+
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+  }
+}
+
+function resolveSelectableColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>> {
+  const tokens: ThemeColorButtonTokens = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tokens[tone] = resolveSelectableToneColorTokens(sparseTokens, tone)
+  }
+
+  return tokens
+}
+
+function resolveSelectableToneColorTokens(
+  sparseTokens: ThemeColorTokens,
+  tone: ThemeColorStateToneKey,
+): {_hue?: ColorHueKey} & ThemeColorStatesTokens {
+  const states: {_hue?: ColorHueKey} & ThemeColorStatesTokens = {
+    _hue: sparseTokens?.selectable?.[tone]?._hue || sparseTokens?.base?.[tone]?._hue,
+  }
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = resolveSelectableStateColorTokens(sparseTokens, state, tone)
+  }
+
+  return states
+}
+
+function resolveSelectableStateColorTokens(
+  tokens: ThemeColorTokens,
+  state: ThemeColorStateKey,
+  tone: ThemeColorStateToneKey,
+) {
+  const spec0 = tokens?.selectable?.[tone]?.[state]
+  const spec1 = tokens?.selectable?.['*']?.[state]
+  const spec2 = tokens?.selectable?.[tone]?.['*']
+  const spec3 = tokens?.selectable?.['*']?.['*']
+
+  const hue = spec0?._hue || spec1?._hue || spec2?._hue || spec3?._hue || tokens?.base?.[tone]?._hue
+
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {...spec3?.muted, ...spec2?.muted, ...spec1?.muted, ...spec0?.muted},
+    accent: {...spec3?.accent, ...spec2?.accent, ...spec1?.accent, ...spec0?.accent},
+    link: {...spec3?.link, ...spec2?.link, ...spec1?.link, ...spec0?.link},
+    code: {...spec3?.code, ...spec2?.code, ...spec1?.code, ...spec0?.code},
+    skeleton: {...spec3?.skeleton, ...spec2?.skeleton, ...spec1?.skeleton, ...spec0?.skeleton},
+  }
+}
+
+function resolveSpotColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<ColorHueKey, ThemeColorTokenValue>> {
+  return {
+    ...sparseTokens.spot,
+  }
+}
+
+function resolveSyntaxColorTokens(
+  sparseTokens: ThemeColorTokens,
+): Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>> {
+  return {
+    ...sparseTokens.syntax,
+  }
+}

package/src/theme/config/helpers.ts

@@ -0,0 +1,47 @@
+import {
+  COLOR_CONFIG_BASE_KEYS,
+  COLOR_CONFIG_BASE_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  ColorConfigBaseKey,
+  ColorConfigBaseTone,
+  ColorConfigBlendKey,
+  ColorConfigOpacityValue,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+  ColorConfigValue,
+} from './system'
+import {parseTokenValue} from './tokens'
+
+export function isColorConfigBaseTone(str: string): str is ColorConfigBaseTone {
+  return COLOR_CONFIG_BASE_TONES.includes(str as ColorConfigBaseTone)
+}
+
+export function isColorConfigBaseKey(str: string): str is ColorConfigBaseKey {
+  return COLOR_CONFIG_BASE_KEYS.includes(str as ColorConfigBaseKey)
+}
+
+export function isColorConfigStateKey(str: string): str is ColorConfigStateKey {
+  return COLOR_CONFIG_STATE_KEYS.includes(str as ColorConfigStateKey)
+}
+
+export function isColorConfigStateTone(str: string): str is ColorConfigStateTone {
+  return COLOR_CONFIG_STATE_TONES.includes(str as ColorConfigStateTone)
+}
+
+export function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str as ColorConfigBlendKey)
+}
+
+export function isColorTokenValue(str: string): str is ColorConfigValue {
+  return parseTokenValue(str)?.type === 'color' || parseTokenValue(str)?.type === 'hue'
+}
+
+export function isColorValue(str: string): str is 'black' | 'white' {
+  return str === 'black' || str === 'white'
+}
+
+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,83 @@
+import {ColorHueKey, ColorTintKey} from '@sanity/color'
+import {
+  THEME_COLOR_AVATAR_COLORS,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_INPUT_STATES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorBlendModeKey,
+} from '../system'
+
+export const COLOR_CONFIG_BASE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+  'skeleton/from',
+  'skeleton/to',
+] as const
+export type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
+
+export const COLOR_CONFIG_STATE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+] as const
+export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
+export type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+
+export type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
+
+export type ColorConfigValue =
+  | `black`
+  | `white`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueKey}`
+  | `${ColorHueKey}/${ColorTintKey}`
+  | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
+  | `${ColorTintKey}`
+  | `${ColorTintKey}/${ColorConfigOpacityValue}`
+  | ThemeColorBlendModeKey
+
+export type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
+export type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
+
+export const COLOR_CONFIG_AVATAR_COLORS = ['*', ...THEME_COLOR_AVATAR_COLORS] as const
+export type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
+
+export const COLOR_CONFIG_BASE_TONES = ['*', ...THEME_COLOR_BASE_TONES] as const
+export type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+
+export const COLOR_CONFIG_STATE_TONES = ['*', ...THEME_COLOR_STATE_TONES] as const
+export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+export const COLOR_CONFIG_STATES = ['*', ...THEME_COLOR_STATES] as const
+export type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
+
+export const COLOR_CONFIG_INPUT_MODES = ['*', ...THEME_COLOR_INPUT_MODES] as const
+export type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
+
+export const COLOR_CONFIG_INPUT_STATES = ['*', ...THEME_COLOR_INPUT_STATES] as const
+export type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]

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

@@ -0,0 +1,112 @@
+import {ColorHueKey} from '@sanity/color'
+import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
+import {
+  ColorBlendModeTokenValue,
+  ColorConfigAvatarColor,
+  ColorConfigBaseTone,
+  ColorConfigInputMode,
+  ColorConfigInputState,
+  ColorConfigState,
+  ColorConfigStateTone,
+  ThemeColorTokenValue,
+} from '../../system'
+
+export interface ThemeColorAvatarTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+}
+
+export interface ThemeColorBadgeTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+}
+
+export interface ThemeColorBaseTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  focusRing?: ThemeColorTokenValue
+  shadow?: {
+    outline?: ThemeColorTokenValue
+    umbra?: ThemeColorTokenValue
+    penumbra?: ThemeColorTokenValue
+    ambient?: ThemeColorTokenValue
+  }
+  skeleton?: {
+    from?: ThemeColorTokenValue
+    to?: ThemeColorTokenValue
+  }
+}
+
+export interface ThemeColorStateTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  bg2?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  muted?: {
+    fg?: ThemeColorTokenValue
+  }
+  accent?: {
+    fg?: ThemeColorTokenValue
+  }
+  link?: {
+    fg?: ThemeColorTokenValue
+  }
+  code?: {
+    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
+  bg2?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  border?: ThemeColorTokenValue
+  placeholder?: ThemeColorTokenValue
+}
+
+export interface ThemeColorInputTokens
+  extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
+  _hue?: ColorHueKey
+}
+
+export interface ThemeColorTokens {
+  avatar?: Partial<Record<ColorConfigAvatarColor, ThemeColorAvatarTokens>>
+  badge?: Partial<Record<ColorConfigStateTone, ThemeColorBadgeTokens>>
+  base?: Partial<Record<ColorConfigBaseTone, ThemeColorBaseTokens>>
+  button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>
+  card?: Partial<Record<ColorConfigState, ThemeColorStateTokens>>
+  input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>
+  kbd?: {
+    _blend?: ColorBlendModeTokenValue
+    bg?: ThemeColorTokenValue
+    fg?: ThemeColorTokenValue
+    border?: ThemeColorTokenValue
+  }
+  selectable?: Partial<Record<ColorConfigStateTone, {_hue?: ColorHueKey} & ThemeColorStatesTokens>>
+  spot?: Partial<Record<ColorHueKey, ThemeColorTokenValue>>
+  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'

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

@@ -0,0 +1,64 @@
+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',
+  })
+})