@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

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

@@ -0,0 +1,185 @@
+import {expect, test} from 'vitest'
+
+import type {ThemeColorTokens} from '../config'
+import {buildColorTheme} from './buildColorTheme'
+
+test('buildColorTheme: base', () => {
+  const {light, dark} = buildColorTheme({
+    color: {
+      base: {
+        '*': {
+          bg: ['50', '900'],
+          fg: ['800', '200'],
+        },
+        'transparent': {
+          bg: ['50', 'black'],
+        },
+        'default': {
+          bg: ['white', '950'],
+          fg: ['black', '200'],
+        },
+        'primary': {
+          _hue: 'purple',
+        },
+        'positive': {
+          _hue: 'cyan',
+        },
+        'caution': {
+          _hue: 'yellow',
+        },
+        'critical': {
+          _hue: 'red',
+        },
+      },
+    },
+  })
+
+  expect({
+    light: {
+      transparent: {
+        bg: light.transparent.bg,
+        fg: light.transparent.fg,
+      },
+      default: {
+        bg: light.default.bg,
+        fg: light.default.fg,
+      },
+      primary: {
+        bg: light.primary.bg,
+        fg: light.primary.fg,
+      },
+    },
+    dark: {
+      transparent: {
+        bg: dark.transparent.bg,
+        fg: dark.transparent.fg,
+      },
+      default: {
+        bg: dark.default.bg,
+        fg: dark.default.fg,
+      },
+      primary: {
+        bg: dark.primary.bg,
+        fg: dark.primary.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      transparent: {
+        bg: 'gray/50',
+        fg: 'gray/800',
+      },
+      default: {
+        bg: 'white',
+        fg: 'black',
+      },
+      primary: {
+        bg: 'purple/50',
+        fg: 'purple/800',
+      },
+    },
+    dark: {
+      transparent: {
+        bg: 'black',
+        fg: 'gray/200',
+      },
+      default: {
+        bg: 'gray/950',
+        fg: 'gray/200',
+      },
+      primary: {
+        bg: 'purple/900',
+        fg: 'purple/200',
+      },
+    },
+  })
+})
+
+test('buildColorTheme: button', () => {
+  const tokens: ThemeColorTokens = {
+    base: {
+      '*': {
+        bg: ['50', '900'],
+        fg: ['800', '200'],
+      },
+      'transparent': {
+        bg: ['50', 'black'],
+      },
+      'default': {
+        bg: ['white', '950'],
+        fg: ['black', '200'],
+      },
+      'primary': {
+        _hue: 'purple',
+      },
+      'positive': {
+        _hue: 'cyan',
+      },
+      'caution': {
+        _hue: 'yellow',
+      },
+      'critical': {
+        _hue: 'red',
+      },
+    },
+    button: {
+      default: {
+        '*': {
+          '*': {
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+          'hovered': {
+            bg: ['600', '300'],
+          },
+        },
+      },
+    },
+  }
+
+  const {dark, light} = buildColorTheme({color: tokens})
+
+  expect({
+    light: {
+      enabled: {
+        bg: light.default.button.default.primary.enabled.bg,
+        fg: light.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: light.default.button.default.primary.hovered.bg,
+        fg: light.default.button.default.primary.hovered.fg,
+      },
+    },
+    dark: {
+      enabled: {
+        bg: dark.default.button.default.primary.enabled.bg,
+        fg: dark.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: dark.default.button.default.primary.hovered.bg,
+        fg: dark.default.button.default.primary.hovered.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      enabled: {
+        bg: 'purple/500',
+        fg: 'white',
+      },
+      hovered: {
+        bg: 'purple/600',
+        fg: 'white',
+      },
+    },
+    dark: {
+      enabled: {
+        bg: 'purple/400',
+        fg: 'black',
+      },
+      hovered: {
+        bg: 'purple/300',
+        fg: 'black',
+      },
+    },
+  })
+})

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

@@ -0,0 +1,494 @@
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  type ThemeColorAvatar_v2,
+  type ThemeColorAvatarColorKey,
+  type ThemeColorAvatarHue_v2,
+  type ThemeColorBadge_v2,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorCardToneKey,
+  type ThemeColorInput_v2,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputState_v2,
+  type ThemeColorScheme_v2,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes_v2,
+  type ThemeColorShadow,
+  type ThemeColorState_v2,
+  type ThemeColorStateKey,
+  type ThemeColorStateToneKey,
+  type ThemeColorSyntax,
+} from '../color'
+import type {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
+import {type ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
+import {resolveColorTokens} from './resolveColorTokens'
+
+export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
+  const resolvedConfig: ThemeConfig = {
+    ...config,
+    color: resolveColorTokens(config?.color),
+  }
+
+  return {
+    light: buildColorScheme({scheme: 'light'}, resolvedConfig),
+    dark: buildColorScheme({scheme: 'dark'}, resolvedConfig),
+  }
+}
+
+function buildColorScheme(
+  options: {scheme: ThemeColorSchemeKey},
+  config: ThemeConfig,
+): ThemeColorScheme_v2 {
+  const {scheme} = options
+
+  const colorScheme = {} as ThemeColorScheme_v2
+
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    colorScheme[tone] = buildCardColorTheme({scheme, tone}, config)
+  }
+
+  return colorScheme
+}
+
+function buildCardColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorCard_v2 {
+  const {scheme, tone} = options
+  const tokens = config?.color?.base?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+  const blendMode = tokens?._blend || ['multiply', 'screen']
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    _dark: scheme === 'dark',
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    backdrop: _color(context, tokens?.backdrop),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    button: buildButtonColorTheme({scheme, tone}, config),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    focusRing: _color(context, tokens?.focusRing),
+    icon: _color(context, tokens?.icon),
+    input: buildInputColorTheme({scheme, tone}, config),
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    selectable: buildSelectableColorTheme({scheme, tone}, config),
+    shadow: buildShadowColorTheme({scheme, tone}, config),
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+    syntax: buildSyntaxColorTheme({scheme}, config),
+  }
+}
+
+function buildShadowColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorShadow {
+  const {scheme, tone} = options
+  const tokens = config?.color?.base?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    outline: _color(context, tokens?.shadow?.outline),
+    umbra: _color(context, tokens?.shadow?.umbra),
+    penumbra: _color(context, tokens?.shadow?.penumbra),
+    ambient: _color(context, tokens?.shadow?.ambient),
+  }
+}
+
+function buildAvatarColorTheme(
+  options: {scheme: ThemeColorSchemeKey},
+  stateTokens?: ThemeColorStateTokens,
+): ThemeColorAvatar_v2 {
+  const {scheme} = options
+
+  return {
+    gray: _buildAvatarColorTheme({color: 'gray', scheme}, stateTokens),
+    blue: _buildAvatarColorTheme({color: 'blue', scheme}, stateTokens),
+    purple: _buildAvatarColorTheme({color: 'purple', scheme}, stateTokens),
+    magenta: _buildAvatarColorTheme({color: 'magenta', scheme}, stateTokens),
+    red: _buildAvatarColorTheme({color: 'red', scheme}, stateTokens),
+    orange: _buildAvatarColorTheme({color: 'orange', scheme}, stateTokens),
+    yellow: _buildAvatarColorTheme({color: 'yellow', scheme}, stateTokens),
+    green: _buildAvatarColorTheme({color: 'green', scheme}, stateTokens),
+    cyan: _buildAvatarColorTheme({color: 'cyan', scheme}, stateTokens),
+  }
+}
+
+function _buildAvatarColorTheme(
+  options: {color: ThemeColorAvatarColorKey; scheme: ThemeColorSchemeKey},
+  stateTokens?: ThemeColorStateTokens,
+): ThemeColorAvatarHue_v2 {
+  const {color, scheme} = options
+  const tokens = stateTokens?.avatar?.[color]
+  const context: ColorTokenContext = {hue: tokens?._hue || 'gray', scheme}
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    bg: _color(context, tokens?.bg),
+    fg: _color(context, tokens?.fg),
+  }
+}
+
+function buildBadgeColorTheme(
+  tokens: ThemeColorBadgeTokens | undefined,
+  options: {scheme: ThemeColorSchemeKey},
+  config?: ThemeConfig,
+): ThemeColorBadge_v2 {
+  const {scheme} = options
+
+  const colorBadge = {} as ThemeColorBadge_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
+  }
+
+  return colorBadge
+}
+
+function _buildBadgeColorTheme(
+  parentTokens: ThemeColorBadgeTokens | undefined,
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorStateToneKey},
+  config?: ThemeConfig,
+): ThemeColorBadge_v2['default'] {
+  const {scheme, tone} = options
+  const tokens = parentTokens?.[tone]
+  const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    bg: _color(context, tokens?.bg),
+    fg: _color(context, tokens?.fg),
+    dot: _color(context, tokens?.dot),
+    icon: _color(context, tokens?.icon),
+  }
+}
+
+function buildButtonColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorButton_v2 {
+  const {scheme, tone: cardTone} = options
+
+  const modes: Partial<ThemeColorButton_v2> = {}
+
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    modes[mode] = buildButtonTonesColorTheme({cardTone, scheme, mode}, config)
+  }
+
+  return modes as ThemeColorButton_v2
+}
+
+function buildButtonTonesColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    scheme: ThemeColorSchemeKey
+    mode: ThemeColorButtonModeKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonMode_v2 {
+  const {cardTone, mode, scheme} = options
+
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildButtonStatesColorTheme({cardTone, mode, scheme, tone}, config)
+  }
+
+  return tones as ThemeColorButtonMode_v2
+}
+
+function buildButtonStatesColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    mode: ThemeColorButtonModeKey
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonTone_v2 {
+  const {cardTone, mode, scheme, tone} = options
+
+  const states: Partial<ThemeColorButtonTone_v2> = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildButtonStateColorTheme({cardTone, mode, tone, scheme, state}, config)
+  }
+
+  return states as ThemeColorButtonTone_v2
+}
+
+function buildButtonStateColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    mode: ThemeColorButtonModeKey
+    tone: ThemeColorStateToneKey
+    scheme: ThemeColorSchemeKey
+    state: ThemeColorStateKey
+  },
+  config?: ThemeConfig,
+): ThemeColorState_v2 {
+  const {cardTone, mode, tone, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
+  const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    icon: _color(context, tokens?.icon),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+  }
+}
+
+function buildInputColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorInput_v2 {
+  const {scheme, tone} = options
+
+  return {
+    default: buildInputStatesColorTheme({mode: 'default', scheme, tone}, config),
+    invalid: buildInputStatesColorTheme({mode: 'invalid', scheme, tone}, config),
+  }
+}
+
+function buildInputStatesColorTheme(
+  options: {
+    mode: 'default' | 'invalid'
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorCardToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorInputMode_v2 {
+  const {mode, scheme, tone} = options
+
+  return {
+    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', cardTone: tone}, config),
+    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', cardTone: tone}, config),
+    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', cardTone: tone}, config),
+    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', cardTone: tone}, config),
+  }
+}
+
+function buildInputStateColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    mode: 'default' | 'invalid'
+    scheme: ThemeColorSchemeKey
+    state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
+  },
+  config?: ThemeConfig,
+): ThemeColorInputState_v2 {
+  const {cardTone, mode, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
+  const tokens = config?.color?.input?.[mode]?.[state]
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    fg: _color(context, tokens?.fg),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+    },
+    placeholder: _color(context, tokens?.placeholder),
+  }
+}
+
+function buildSelectableColorTheme(
+  options: {
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorCardToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonMode_v2 {
+  const {scheme, tone: cardTone} = options
+
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildSelectableStatesColorTheme({cardTone, scheme, tone}, config)
+  }
+
+  return tones as ThemeColorButtonMode_v2
+}
+
+function buildSelectableStatesColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonTone_v2 {
+  const {cardTone, scheme, tone} = options
+
+  const states: Partial<ThemeColorButtonTone_v2> = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildSelectableStateColorTheme({cardTone, tone, scheme, state}, config)
+  }
+
+  return states as ThemeColorButtonTone_v2
+}
+
+function buildSelectableStateColorTheme(
+  options: {
+    cardTone: ThemeColorCardToneKey
+    scheme: ThemeColorSchemeKey
+    state: ThemeColorStateKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorState_v2 {
+  const {cardTone, scheme, state, tone} = options
+  const cardTokens = config?.color?.base?.[cardTone]
+  const tokens = config?.color?.selectable?.[tone]?.[state]
+
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    icon: _color(context, tokens?.icon),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+  }
+}
+
+function buildSyntaxColorTheme(
+  options: {scheme: ThemeColorSchemeKey},
+  config?: ThemeConfig,
+): ThemeColorSyntax {
+  const {scheme} = options
+  const tokens = config?.color?.syntax
+  const context: ColorTokenContext = {hue: 'gray', scheme}
+
+  return {
+    atrule: _color(context, tokens?.atrule),
+    attrName: _color(context, tokens?.attrName),
+    attrValue: _color(context, tokens?.attrValue),
+    attribute: _color(context, tokens?.attribute),
+    boolean: _color(context, tokens?.boolean),
+    builtin: _color(context, tokens?.builtin),
+    cdata: _color(context, tokens?.cdata),
+    char: _color(context, tokens?.char),
+    class: _color(context, tokens?.class),
+    className: _color(context, tokens?.className),
+    comment: _color(context, tokens?.comment),
+    constant: _color(context, tokens?.constant),
+    deleted: _color(context, tokens?.deleted),
+    doctype: _color(context, tokens?.doctype),
+    entity: _color(context, tokens?.entity),
+    function: _color(context, tokens?.function),
+    hexcode: _color(context, tokens?.hexcode),
+    id: _color(context, tokens?.id),
+    important: _color(context, tokens?.important),
+    inserted: _color(context, tokens?.inserted),
+    keyword: _color(context, tokens?.keyword),
+    number: _color(context, tokens?.number),
+    operator: _color(context, tokens?.operator),
+    prolog: _color(context, tokens?.prolog),
+    property: _color(context, tokens?.property),
+    pseudoClass: _color(context, tokens?.pseudoClass),
+    pseudoElement: _color(context, tokens?.pseudoElement),
+    punctuation: _color(context, tokens?.punctuation),
+    regex: _color(context, tokens?.regex),
+    selector: _color(context, tokens?.selector),
+    string: _color(context, tokens?.string),
+    symbol: _color(context, tokens?.symbol),
+    tag: _color(context, tokens?.tag),
+    unit: _color(context, tokens?.unit),
+    url: _color(context, tokens?.url),
+    variable: _color(context, tokens?.variable),
+  }
+}