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

package/src/theme/build/renderColorTheme.ts

@@ -0,0 +1,536 @@
+import {ThemeColorPalette, ThemeConfig} from '../config'
+import {defaultColorPalette} from '../defaults/colorPalette'
+import {
+  ThemeColorAvatar_v2,
+  ThemeColorBadgeTone_v2,
+  ThemeColorBadge_v2,
+  ThemeColorBlendModeKey,
+  ThemeColorButtonStates_v2,
+  ThemeColorButtonTones_v2,
+  ThemeColorButton_v2,
+  ThemeColorCardToneKey,
+  ThemeColorCard_v2,
+  ThemeColorInputState_v2,
+  ThemeColorInputStates_v2,
+  ThemeColorInput_v2,
+  ThemeColorKBD,
+  ThemeColorScheme_v2,
+  ThemeColorSchemes_v2,
+  ThemeColorSelectableStates_v2,
+  ThemeColorSelectable_v2,
+  ThemeColorShadow,
+  ThemeColorState_v2,
+  ThemeColorSyntax,
+} from '../system'
+import {RenderColorValueOptions, renderColorValue} from './renderColorValue'
+
+export function renderThemeColorSchemes(
+  value: ThemeColorSchemes_v2,
+  config?: ThemeConfig,
+): ThemeColorSchemes_v2 {
+  const colorPalette = config?.palette ?? defaultColorPalette
+
+  return {
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark),
+  }
+}
+
+function renderThemeColorScheme(
+  colorPalette: ThemeColorPalette,
+  value: ThemeColorScheme_v2,
+): ThemeColorScheme_v2 {
+  const toneEntries = Object.entries(value) as [ThemeColorCardToneKey, ThemeColorCard_v2][]
+
+  const [, transparentTone] = toneEntries.find(([k]) => k === 'transparent')!
+  const [, defaultTone] = toneEntries.find(([k]) => k === 'default')!
+
+  // The `transparent` and `default` tones are special cases, so we render them first
+  // (rendered without a `bg` option).
+  // But the rest of the tones are rendered on top of the `default` tone's `bg`.
+  const renderedTransparentTone = renderThemeColor(transparentTone, {colorPalette})
+  const renderedDefaultTone = renderThemeColor(defaultTone, {colorPalette})
+
+  // Get the `default` tone's `bg` property
+  const bg = renderedDefaultTone.bg
+
+  if (bg === 'white') {
+    throw new Error('Cannot blend with white background')
+  }
+
+  return Object.fromEntries([
+    ['transparent', renderedTransparentTone],
+    ['default', renderedDefaultTone],
+    ...toneEntries
+      .filter(([k]) => k !== 'default' && k !== 'transparent')
+      .map(([k, v]) => [k, renderThemeColor(v, {bg, colorPalette})]),
+  ]) as ThemeColorScheme_v2
+}
+
+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 {
+  return {
+    gray: renderThemeColorAvatarColor(value.gray, options),
+    blue: renderThemeColorAvatarColor(value.blue, options),
+    purple: renderThemeColorAvatarColor(value.purple, options),
+    magenta: renderThemeColorAvatarColor(value.magenta, options),
+    red: renderThemeColorAvatarColor(value.red, options),
+    orange: renderThemeColorAvatarColor(value.orange, options),
+    yellow: renderThemeColorAvatarColor(value.yellow, options),
+    green: renderThemeColorAvatarColor(value.green, options),
+    cyan: renderThemeColorAvatarColor(value.cyan, options),
+  }
+}
+
+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 {
+  return {
+    default: renderThemeColorBadgeColor(value.default, options),
+    primary: renderThemeColorBadgeColor(value.primary, options),
+    positive: renderThemeColorBadgeColor(value.positive, options),
+    caution: renderThemeColorBadgeColor(value.caution, options),
+    critical: renderThemeColorBadgeColor(value.critical, options),
+  }
+}
+
+function renderThemeColorBadgeColor(
+  value: ThemeColorBadgeTone_v2,
+  options: {
+    baseBg: string
+    blendMode: ThemeColorBlendModeKey
+    colorPalette: ThemeColorPalette
+  },
+): ThemeColorBadgeTone_v2 {
+  const {baseBg, blendMode: rootBlendMode, colorPalette} = options
+
+  // const blendMode = value._blend || 'multiply'
+
+  const blendMode = rootBlendMode
+
+  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),
+    dot: renderColorValue(value.dot, 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: ThemeColorButtonTones_v2,
+  options: {
+    baseBg: string
+    blendMode: ThemeColorBlendModeKey
+    colorPalette: ThemeColorPalette
+  },
+): ThemeColorButtonTones_v2 {
+  return {
+    default: renderThemeColorButtonStates(value.default, options),
+    primary: renderThemeColorButtonStates(value.primary, options),
+    positive: renderThemeColorButtonStates(value.positive, options),
+    caution: renderThemeColorButtonStates(value.caution, options),
+    critical: renderThemeColorButtonStates(value.critical, options),
+  }
+}
+
+function renderThemeColorButtonStates(
+  value: ThemeColorButtonStates_v2,
+  options: {
+    baseBg: string
+    blendMode: ThemeColorBlendModeKey
+    colorPalette: ThemeColorPalette
+  },
+): ThemeColorButtonStates_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, colorPalette, blendMode}),
+    badge: renderThemeColorBadge(value.badge, {baseBg, 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: ThemeColorInputStates_v2,
+  options: {
+    baseBg: string
+    blendMode: ThemeColorBlendModeKey
+    colorPalette: ThemeColorPalette
+  },
+): ThemeColorInputStates_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 {
+  return {
+    default: renderThemeColorSelectableStates(value.default, options),
+    primary: renderThemeColorSelectableStates(value.primary, options),
+    positive: renderThemeColorSelectableStates(value.positive, options),
+    caution: renderThemeColorSelectableStates(value.caution, options),
+    critical: renderThemeColorSelectableStates(value.critical, options),
+  }
+}
+
+function renderThemeColorSelectableStates(
+  value: ThemeColorSelectableStates_v2,
+  options: {
+    baseBg: string
+    blendMode: ThemeColorBlendModeKey
+    colorPalette: ThemeColorPalette
+  },
+): ThemeColorSelectableStates_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

@@ -0,0 +1,77 @@
+import {ColorTint as ColorPaletteValue} from '@sanity/color'
+import {ThemeColorPalette, parseTokenValue} from '../config'
+import {ThemeColorBlendModeKey} from '../system'
+import {rgba} 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)
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log('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
+}