@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -1,21 +0,0 @@
-import {mixThemeColor} from './mixThemeColor'
-
-test('mix 1', () => {
-  const result = mixThemeColor('#222222', {
-    black: '#222222',
-    white: '#ffffff',
-    blendMode: 'multiply',
-  })
-
-  expect(result).toBe('#222222')
-})
-
-test('mix 2', () => {
-  const result = mixThemeColor('#ffffff', {
-    black: '#222222',
-    white: '#ffffff',
-    blendMode: 'multiply',
-  })
-
-  expect(result).toBe('#ffffff')
-})

package/src/theme/build/mixThemeColor.ts

@@ -1,53 +0,0 @@
-import {multiply, parseColor, RGB, rgbToHex, screen} from './lib/color-fns'
-import {clamp, range} from './lib/utils'
-
-const RGB_RANGE: [number, number] = [0, 255]
-
-export function mixThemeColor(
-  value: string,
-  options: {
-    bg?: string
-    blendMode: 'multiply' | 'screen'
-    black: string
-    white: string
-  },
-): string {
-  const {blendMode} = options
-
-  const color = parseColor(value)
-  const black = parseColor(options.black)
-  const white = parseColor(options.white)
-
-  const bg = options.bg ? parseColor(options.bg) : blendMode === 'multiply' ? white : black
-
-  const paletteRange: {r: [number, number]; g: [number, number]; b: [number, number]} = {
-    r: [black.r, white.r],
-    g: [black.g, white.g],
-    b: [black.b, white.b],
-  }
-
-  const convertedBgColor: RGB = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE),
-  }
-
-  const convertedColor: RGB = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE),
-  }
-
-  const resultColor =
-    blendMode === 'multiply'
-      ? multiply(convertedBgColor, convertedColor)
-      : screen(convertedBgColor, convertedColor)
-
-  const v: RGB = {
-    r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
-    g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
-    b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b),
-  }
-
-  return rgbToHex(v)
-}

package/src/theme/build/renderColorTheme.ts

@@ -1,532 +0,0 @@
-import {COLOR_HUES} from '@sanity/color'
-
-import {ThemeColorPalette, ThemeConfig} from '../config'
-import {defaultColorPalette} from '../defaults/colorPalette'
-import {
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorBadge_v2,
-  ThemeColorBadgeTone_v2,
-  ThemeColorBlendModeKey,
-  ThemeColorButton_v2,
-  ThemeColorButtonMode_v2,
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorInput_v2,
-  ThemeColorInputMode_v2,
-  ThemeColorInputState_v2,
-  ThemeColorKBD,
-  ThemeColorScheme_v2,
-  ThemeColorSchemes_v2,
-  ThemeColorSelectable_v2,
-  ThemeColorSelectableTone_v2,
-  ThemeColorShadow,
-  ThemeColorState_v2,
-  ThemeColorSyntax,
-} from '../system'
-import {defineLazyProperty} from './lib/lazy'
-import {renderColorValue, RenderColorValueOptions} from './renderColorValue'
-
-export function renderThemeColorSchemes(
-  value: ThemeColorSchemes_v2,
-  config?: ThemeConfig,
-): ThemeColorSchemes_v2 {
-  const colorPalette = config?.palette ?? defaultColorPalette
-
-  // Lazy schemes — each scheme is only rendered when first accessed
-  const schemes = {} as ThemeColorSchemes_v2
-  defineLazyProperty(schemes, 'light', () => renderThemeColorScheme(colorPalette, value.light))
-  defineLazyProperty(schemes, 'dark', () => renderThemeColorScheme(colorPalette, value.dark))
-
-  return schemes
-}
-
-function renderThemeColorScheme(
-  colorPalette: ThemeColorPalette,
-  value: ThemeColorScheme_v2,
-): ThemeColorScheme_v2 {
-  // The `default` tone must be rendered eagerly — other tones depend on its `bg`.
-  const renderedDefaultTone = renderThemeColor(value.default, {colorPalette})
-
-  const bg = renderedDefaultTone.bg
-
-  if (bg === 'white') {
-    throw new Error('Cannot blend with white background')
-  }
-
-  // All other tones are lazy. `transparent` and `default` are rendered without
-  // a `bg` option; the rest blend on top of `default`'s `bg`.
-  // We iterate THEME_COLOR_CARD_TONES (not Object.entries) to avoid
-  // force-evaluating lazy getters from the build phase.
-  const scheme = {default: renderedDefaultTone} as ThemeColorScheme_v2
-
-  for (const tone of THEME_COLOR_CARD_TONES) {
-    if (tone === 'default') continue
-    const opts = tone === 'transparent' ? {colorPalette} : {bg, colorPalette}
-    defineLazyProperty(scheme, tone, () => renderThemeColor(value[tone], opts))
-  }
-
-  return scheme
-}
-
-function renderThemeColor(
-  value: ThemeColorCard_v2,
-  options: {
-    bg?: string
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorCard_v2 {
-  const {colorPalette, bg} = options
-  const blendMode = value._blend || 'multiply'
-  const baseBg = renderColorValue(value.bg, {colorPalette, bg, blendMode})
-  const colorOptions: RenderColorValueOptions = {colorPalette, bg: baseBg, blendMode}
-
-  const button = renderThemeColorButton(value.button, {
-    baseBg,
-    blendMode,
-    colorPalette,
-  })
-
-  const selectable = renderThemeColorSelectable(value.selectable, {
-    colorPalette,
-    baseBg,
-    blendMode,
-  })
-
-  const shadow: ThemeColorShadow = {
-    outline: renderColorValue(value.shadow.outline, colorOptions),
-    umbra: renderColorValue(value.shadow.umbra, {
-      ...colorOptions,
-      bg: undefined,
-      colorPalette: {...colorPalette, black: '#000000'},
-    }),
-    penumbra: renderColorValue(value.shadow.penumbra, {
-      ...colorOptions,
-      bg: undefined,
-      colorPalette: {...colorPalette, black: '#000000'},
-    }),
-    ambient: renderColorValue(value.shadow.ambient, {
-      ...colorOptions,
-      bg: undefined,
-      colorPalette: {...colorPalette, black: '#000000'},
-    }),
-  }
-
-  return {
-    _blend: blendMode,
-    _dark: value._dark,
-    accent: {
-      fg: renderColorValue(value.accent.fg, colorOptions),
-    },
-    avatar: renderThemeColorAvatar(value.avatar, {baseBg, colorPalette, blendMode}),
-    backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, {baseBg, colorPalette, blendMode}),
-    bg: baseBg,
-    border: renderColorValue(value.border, colorOptions),
-    button,
-    code: {
-      bg: renderColorValue(value.code.bg, colorOptions),
-      fg: renderColorValue(value.code.fg, colorOptions),
-    },
-    fg: renderColorValue(value.fg, colorOptions),
-    focusRing: renderColorValue(value.focusRing, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions),
-    input: renderThemeColorInput(value.input, {baseBg, colorPalette, blendMode}),
-    kbd: renderThemeColorKBD(value.kbd, {baseBg, colorPalette, blendMode}),
-    link: {
-      fg: renderColorValue(value.link.fg, colorOptions),
-    },
-    muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions),
-      fg: renderColorValue(value.muted.fg, colorOptions),
-    },
-    shadow,
-    skeleton: {
-      from: renderColorValue(value.skeleton.from, colorOptions),
-      to: renderColorValue(value.skeleton.to, colorOptions),
-    },
-    syntax: renderSyntaxColorTheme(value.syntax, {baseBg, colorPalette, blendMode}),
-    selectable,
-  }
-}
-
-function renderThemeColorKBD(
-  value: ThemeColorKBD,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorKBD {
-  const {baseBg, blendMode, colorPalette} = options
-
-  const rootOptions: RenderColorValueOptions = {
-    bg: baseBg,
-    blendMode,
-    colorPalette,
-  }
-
-  const bg = renderColorValue(value.bg, rootOptions)
-
-  const colorOptions: RenderColorValueOptions = {
-    bg,
-    blendMode,
-    colorPalette,
-  }
-
-  return {
-    bg,
-    fg: renderColorValue(value.fg, colorOptions),
-    border: renderColorValue(value.border, colorOptions),
-  }
-}
-
-function renderThemeColorAvatar(
-  value: ThemeColorAvatar_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorAvatar_v2 {
-  const colorAvatar = {} as ThemeColorAvatar_v2
-
-  for (const hue of COLOR_HUES) {
-    colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options)
-  }
-
-  return colorAvatar
-}
-
-function renderThemeColorAvatarColor(
-  value: ThemeColorAvatar_v2['gray'],
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorAvatar_v2['gray'] {
-  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
-  const blendMode = value._blend || 'multiply'
-
-  const rootOptions: RenderColorValueOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette,
-  }
-
-  const bg = renderColorValue(value.bg, rootOptions)
-
-  const colorOptions: RenderColorValueOptions = {
-    bg,
-    blendMode,
-    colorPalette,
-  }
-
-  return {
-    _blend: blendMode,
-    bg,
-    fg: renderColorValue(value.fg, colorOptions),
-  }
-}
-
-function renderThemeColorBadge(
-  value: ThemeColorBadge_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorBadge_v2 {
-  const colorBadge = {} as ThemeColorBadge_v2
-
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options)
-  }
-
-  return colorBadge
-}
-
-function renderThemeColorBadgeColor(
-  value: ThemeColorBadgeTone_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorBadgeTone_v2 {
-  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
-
-  const blendMode = rootBlendMode
-
-  const rootOptions: RenderColorValueOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette,
-  }
-
-  const bg = renderColorValue(value.bg, rootOptions)
-
-  const colorOptions: RenderColorValueOptions = {
-    bg,
-    blendMode,
-    colorPalette,
-  }
-
-  return {
-    bg,
-    dot: renderColorValue(value.dot, colorOptions),
-    fg: renderColorValue(value.fg, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions),
-  }
-}
-
-function renderThemeColorButton(
-  value: ThemeColorButton_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorButton_v2 {
-  return {
-    default: renderThemeColorButtonTones(value.default, options),
-    ghost: renderThemeColorButtonTones(value.ghost, options),
-    bleed: renderThemeColorButtonTones(value.bleed, options),
-  }
-}
-
-function renderThemeColorButtonTones(
-  value: ThemeColorButtonMode_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorButtonMode_v2 {
-  const colorButtonMode = {} as ThemeColorButtonMode_v2
-
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options)
-  }
-
-  return colorButtonMode
-}
-
-function renderThemeColorButtonStates(
-  value: ThemeColorButtonTone_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorButtonTone_v2 {
-  return {
-    enabled: renderThemeColorState(value.enabled, options),
-    hovered: renderThemeColorState(value.hovered, options),
-    pressed: renderThemeColorState(value.pressed, options),
-    selected: renderThemeColorState(value.selected, options),
-    disabled: renderThemeColorState(value.disabled, options),
-  }
-}
-
-function renderThemeColorState(
-  value: ThemeColorState_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorState_v2 {
-  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
-  const blendMode = value._blend || 'multiply'
-
-  const rootOptions: RenderColorValueOptions = {
-    bg: baseBg,
-    blendMode: rootBlendMode,
-    colorPalette,
-  }
-
-  const bg = renderColorValue(value.bg, rootOptions)
-
-  const colorOptions: RenderColorValueOptions = {
-    bg,
-    blendMode,
-    colorPalette,
-  }
-
-  return {
-    _blend: blendMode,
-    accent: {
-      fg: renderColorValue(value.accent.fg, colorOptions),
-    },
-    avatar: renderThemeColorAvatar(value.avatar, {baseBg: bg, colorPalette, blendMode}),
-    badge: renderThemeColorBadge(value.badge, {baseBg: bg, colorPalette, blendMode}),
-    bg,
-    border: renderColorValue(value.border, colorOptions),
-    code: {
-      bg: renderColorValue(value.code.bg, colorOptions),
-      fg: renderColorValue(value.code.fg, colorOptions),
-    },
-    fg: renderColorValue(value.fg, colorOptions),
-    icon: renderColorValue(value.icon, colorOptions),
-    link: {
-      fg: renderColorValue(value.link.fg, colorOptions),
-    },
-    muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions),
-      fg: renderColorValue(value.muted.fg, colorOptions),
-    },
-    kbd: {
-      bg: renderColorValue(value.kbd.bg, colorOptions),
-      fg: renderColorValue(value.kbd.fg, colorOptions),
-      border: renderColorValue(value.kbd.border, colorOptions),
-    },
-    skeleton: {
-      from: renderColorValue(value.skeleton?.from, colorOptions),
-      to: renderColorValue(value.skeleton?.to, colorOptions),
-    },
-  }
-}
-
-function renderThemeColorInput(
-  value: ThemeColorInput_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorInput_v2 {
-  return {
-    default: renderInputStatesColorTheme(value.default, options),
-    invalid: renderInputStatesColorTheme(value.invalid, options),
-  }
-}
-
-function renderInputStatesColorTheme(
-  value: ThemeColorInputMode_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorInputMode_v2 {
-  return {
-    enabled: renderInputStateColorTheme(value.enabled, options),
-    hovered: renderInputStateColorTheme(value.hovered, options),
-    readOnly: renderInputStateColorTheme(value.readOnly, options),
-    disabled: renderInputStateColorTheme(value.disabled, options),
-  }
-}
-
-function renderInputStateColorTheme(
-  value: ThemeColorInputState_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorInputState_v2 {
-  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
-  const blendMode = value._blend || 'multiply'
-  const rootOptions: RenderColorValueOptions = {colorPalette, bg: baseBg, blendMode: rootBlendMode}
-  const bg = renderColorValue(value.bg, rootOptions)
-  const colorOptions: RenderColorValueOptions = {colorPalette, bg, blendMode}
-
-  return {
-    _blend: blendMode,
-    bg,
-    border: renderColorValue(value.border, colorOptions),
-    fg: renderColorValue(value.fg, colorOptions),
-    muted: {
-      bg: renderColorValue(value.muted.bg, colorOptions),
-    },
-    placeholder: renderColorValue(value.placeholder, colorOptions),
-  }
-}
-
-function renderThemeColorSelectable(
-  value: ThemeColorSelectable_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorSelectable_v2 {
-  const colorSelectable = {} as ThemeColorSelectable_v2
-
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options)
-  }
-
-  return colorSelectable
-}
-
-function renderThemeColorSelectableStates(
-  value: ThemeColorSelectableTone_v2,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorSelectableTone_v2 {
-  return {
-    enabled: renderThemeColorState(value.enabled, options),
-    hovered: renderThemeColorState(value.hovered, options),
-    pressed: renderThemeColorState(value.pressed, options),
-    selected: renderThemeColorState(value.selected, options),
-    disabled: renderThemeColorState(value.disabled, options),
-  }
-}
-
-function renderSyntaxColorTheme(
-  value: ThemeColorSyntax,
-  options: {
-    baseBg: string
-    blendMode: ThemeColorBlendModeKey
-    colorPalette: ThemeColorPalette
-  },
-): ThemeColorSyntax {
-  const {colorPalette, baseBg, blendMode} = options
-  const colorOptions: RenderColorValueOptions = {colorPalette, bg: baseBg, blendMode}
-
-  return {
-    atrule: renderColorValue(value.atrule, colorOptions),
-    attrName: renderColorValue(value.attrName, colorOptions),
-    attrValue: renderColorValue(value.attrValue, colorOptions),
-    attribute: renderColorValue(value.attribute, colorOptions),
-    boolean: renderColorValue(value.boolean, colorOptions),
-    builtin: renderColorValue(value.builtin, colorOptions),
-    cdata: renderColorValue(value.cdata, colorOptions),
-    char: renderColorValue(value.char, colorOptions),
-    class: renderColorValue(value.class, colorOptions),
-    className: renderColorValue(value.className, colorOptions),
-    comment: renderColorValue(value.comment, colorOptions),
-    constant: renderColorValue(value.constant, colorOptions),
-    deleted: renderColorValue(value.deleted, colorOptions),
-    doctype: renderColorValue(value.doctype, colorOptions),
-    entity: renderColorValue(value.entity, colorOptions),
-    function: renderColorValue(value.function, colorOptions),
-    hexcode: renderColorValue(value.hexcode, colorOptions),
-    id: renderColorValue(value.id, colorOptions),
-    important: renderColorValue(value.important, colorOptions),
-    inserted: renderColorValue(value.inserted, colorOptions),
-    keyword: renderColorValue(value.keyword, colorOptions),
-    number: renderColorValue(value.number, colorOptions),
-    operator: renderColorValue(value.operator, colorOptions),
-    prolog: renderColorValue(value.prolog, colorOptions),
-    property: renderColorValue(value.property, colorOptions),
-    pseudoClass: renderColorValue(value.pseudoClass, colorOptions),
-    pseudoElement: renderColorValue(value.pseudoElement, colorOptions),
-    punctuation: renderColorValue(value.punctuation, colorOptions),
-    regex: renderColorValue(value.regex, colorOptions),
-    selector: renderColorValue(value.selector, colorOptions),
-    string: renderColorValue(value.string, colorOptions),
-    symbol: renderColorValue(value.symbol, colorOptions),
-    tag: renderColorValue(value.tag, colorOptions),
-    unit: renderColorValue(value.unit, colorOptions),
-    url: renderColorValue(value.url, colorOptions),
-    variable: renderColorValue(value.variable, colorOptions),
-  }
-}

package/src/theme/build/renderColorValue.ts

@@ -1,85 +0,0 @@
-import {ColorTint as ColorPaletteValue} from '@sanity/color'
-
-import {parseTokenValue, ThemeColorPalette} from '../config'
-import {ThemeColorBlendModeKey} from '../system'
-import {hexToRgb, mix, rgba, rgbToHex} from './lib/color-fns'
-import {mixThemeColor} from './mixThemeColor'
-
-export interface RenderColorValueOptions {
-  bg?: string
-  blendMode: ThemeColorBlendModeKey
-  colorPalette: ThemeColorPalette
-}
-
-export function renderColorValue(str: string, options: RenderColorValueOptions): string {
-  const {bg, blendMode, colorPalette} = options
-
-  if (bg === 'white') {
-    throw new Error('Cannot blend with white background')
-  }
-
-  const node = parseTokenValue(str)
-
-  if (!node || node.type !== 'color') {
-    throw new Error(`Invalid color token value: ${str}`)
-  }
-
-  let hex = ''
-
-  if (node.key === 'black') {
-    hex = renderColorHex(colorPalette.black)
-  }
-
-  if (node.key === 'white') {
-    hex = renderColorHex(colorPalette.white)
-  }
-
-  if (node.hue && node.tint) {
-    hex = renderColorHex(colorPalette[node.hue][node.tint])
-  }
-
-  if (!hex) {
-    throw new Error(`Invalid color token value: ${str}`)
-  }
-
-  const hexBeforeMix = hex
-
-  const mixOptions = {
-    blendMode,
-    bg,
-    black: renderColorHex(colorPalette.black),
-    // opacity: node.opacity,
-    white: renderColorHex(colorPalette.white),
-  }
-
-  try {
-    hex = mixThemeColor(hex, mixOptions)
-
-    if (bg && node.mix !== undefined) {
-      const from = hexToRgb(bg)
-      const to = hexToRgb(hex)
-
-      hex = rgbToHex(mix(from, to, node.mix))
-    }
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.warn('could not blend', hex, mixOptions)
-    throw err
-  }
-
-  if (hex === '#aN') {
-    // eslint-disable-next-line no-console
-    console.warn(`invalid color token value: ${str}`)
-    hex = hexBeforeMix
-  }
-
-  if (node.opacity !== undefined) {
-    hex = rgba(hex, node.opacity)
-  }
-
-  return hex
-}
-
-function renderColorHex(color: string | ColorPaletteValue) {
-  return typeof color === 'string' ? color : color.hex
-}