@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.27

package/src/theme/_internal/build/colorTheme/renderColorTheme.ts

@@ -1,242 +0,0 @@
-import {ColorTint as ColorPaletteValue} from '@sanity/color'
-import {rgba} from '../../../lib/color-fns'
-import {ColorBlendModeValue, parseTokenValue, ThemeConfig, TMP_ColorPalette} from '../../config'
-import {
-  TMP_BaseColorTheme,
-  TMP_ButtonColorTheme,
-  TMP_ButtonModesColorTheme,
-  TMP_ButtonStatesColorTheme,
-  TMP_ColorTheme,
-  TMP_StateColorTheme,
-  TMP_Theme,
-} from '../../types'
-import {defaultColorPalette} from '../defaults/colorPalette'
-import {multiply, screen} from '../helpers'
-
-export function renderColorTheme(
-  value: TMP_Theme['color'],
-  config?: ThemeConfig,
-): TMP_Theme['color'] {
-  const colorPalette = config?.color?.palette ?? defaultColorPalette
-
-  return {
-    light: renderColorScheme(colorPalette, value.light),
-    dark: renderColorScheme(colorPalette, value.dark),
-  }
-}
-
-function renderColorScheme(colorPalette: TMP_ColorPalette, value: TMP_ColorTheme): TMP_ColorTheme {
-  const toneEntries = Object.entries(value)
-  const [, transparentTone] = toneEntries.find(([k]) => k === 'transparent')!
-  const [, defaultTone] = toneEntries.find(([k]) => k === 'default')!
-
-  const renderedTransparentTone = renderColorBase(
-    colorPalette,
-    transparentTone,
-    transparentTone._blend === 'multiply' ? '#ffffff' : '#000000',
-  )
-
-  const renderedDefaultTone = renderColorBase(
-    colorPalette,
-    defaultTone,
-    defaultTone._blend === 'multiply' ? '#ffffff' : '#000000',
-  )
-
-  return Object.fromEntries([
-    ['transparent', renderedTransparentTone],
-    ['default', renderedDefaultTone],
-    ...toneEntries
-      .filter(([k]) => k !== 'default' && k !== 'transparent')
-      .map(([k, v]) => [k, renderColorBase(colorPalette, v, renderedDefaultTone.base.bg)]),
-  ]) as TMP_ColorTheme
-}
-
-function renderColorBase(
-  colorPalette: TMP_ColorPalette,
-  value: TMP_BaseColorTheme,
-  bg: string,
-): TMP_BaseColorTheme {
-  const nestedBg = renderColorValue(colorPalette, bg, value._blend, value.base.bg)
-
-  return {
-    _blend: value._blend,
-    dark: value.dark,
-    base: {
-      bg: nestedBg,
-      fg: renderColorValue(colorPalette, nestedBg, value._blend, value.base.fg),
-      border: renderColorValue(colorPalette, nestedBg, value._blend, value.base.border),
-      focusRing: renderColorValue(colorPalette, nestedBg, value._blend, value.base.focusRing),
-      shadow: {
-        outline: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.outline),
-        umbra: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.umbra),
-        penumbra: renderColorValue(
-          colorPalette,
-          nestedBg,
-          value._blend,
-          value.base.shadow.penumbra,
-        ),
-        ambient: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.ambient),
-      },
-      skeleton: {
-        from: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.from),
-        to: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.to),
-      },
-    },
-    button: renderButtonColorTheme(colorPalette, nestedBg, value._blend, value.button),
-  }
-}
-
-function renderButtonColorTheme(
-  colorPalette: TMP_ColorPalette,
-  bg: string,
-  baseBlendMode: ColorBlendModeValue,
-  value: TMP_ButtonColorTheme,
-): TMP_ButtonColorTheme {
-  return {
-    default: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.default),
-    primary: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.primary),
-    positive: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.positive),
-    caution: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.caution),
-    critical: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.critical),
-  }
-}
-
-function renderButtonStateColorTheme(
-  colorPalette: TMP_ColorPalette,
-  bg: string,
-  baseBlendMode: ColorBlendModeValue,
-  value: TMP_ButtonModesColorTheme,
-): TMP_ButtonModesColorTheme {
-  return {
-    default: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.default),
-    ghost: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.ghost),
-    bleed: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.bleed),
-  }
-}
-
-function renderStatesColorTheme(
-  colorPalette: TMP_ColorPalette,
-  bg: string,
-  baseBlendMode: ColorBlendModeValue,
-  value: TMP_ButtonStatesColorTheme,
-) {
-  return {
-    enabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.enabled),
-    hovered: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.hovered),
-    pressed: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.pressed),
-    selected: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.selected),
-    disabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.disabled),
-  }
-}
-
-function renderStateColorTheme(
-  colorPalette: TMP_ColorPalette,
-  baseBg: string,
-  rootBlendMode: ColorBlendModeValue,
-  value: TMP_StateColorTheme,
-): TMP_StateColorTheme {
-  const blendMode = value._blend
-
-  const bg =
-    rootBlendMode === 'multiply' && value.bg === 'white'
-      ? '#ffffff'
-      : rootBlendMode === 'screen' && value.bg === 'black'
-      ? '#000000'
-      : renderColorValue(
-          colorPalette,
-          rootBlendMode === 'multiply' ? '#ffffff' : '#000000',
-          rootBlendMode,
-          value.bg,
-        )
-
-  const blend = rootBlendMode === 'multiply' ? multiply : screen
-
-  const unmixed = {
-    bg2: renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg),
-    fg: renderColorValue(colorPalette, bg, blendMode, value.fg),
-    border: renderColorValue(colorPalette, bg, blendMode, value.border),
-    muted: {
-      fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg),
-    },
-    accent: {
-      fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg),
-    },
-    link: {
-      fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg),
-    },
-    code: {
-      bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
-      fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg),
-    },
-  }
-
-  return {
-    _blend: blendMode,
-    bg: blend(baseBg, bg),
-    bg2: blend(baseBg, unmixed.bg2),
-    fg: blend(baseBg, unmixed.fg),
-    border: blend(baseBg, unmixed.border),
-    muted: {
-      fg: blend(baseBg, unmixed.muted.fg),
-    },
-    accent: {
-      fg: blend(baseBg, unmixed.accent.fg),
-    },
-    link: {
-      fg: blend(baseBg, unmixed.link.fg),
-    },
-    code: {
-      bg: blend(baseBg, unmixed.code.bg),
-      fg: blend(baseBg, unmixed.code.fg),
-    },
-  }
-}
-
-function renderColorValue(
-  colorPalette: TMP_ColorPalette,
-  bg: string,
-  blendMode: ColorBlendModeValue,
-  str: string,
-): string {
-  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}`)
-  }
-
-  // apply blend mode
-  try {
-    hex = blendMode === 'multiply' ? multiply(bg, hex) : screen(bg, hex)
-  } catch (err) {
-    // eslint-disable-next-line no-console
-    console.log('could not blend', hex)
-  }
-
-  if (node.opacity !== undefined) {
-    hex = rgba(hex, node.opacity)
-  }
-
-  return hex
-}
-
-function renderColorHex(color: string | ColorPaletteValue) {
-  return typeof color === 'string' ? color : color.hex
-}

package/src/theme/_internal/build/colorTheme/resolveColorTokens.ts

@@ -1,121 +0,0 @@
-import {
-  BaseColorTokens,
-  ButtonColorTokens,
-  ButtonModeColorTokens,
-  ColorConfigStateTone,
-  ColorTokens,
-  StateColorTokens,
-} from '../../config'
-import {
-  COLOR_BASE_TONES,
-  COLOR_BUTTON_MODES,
-  COLOR_STATES,
-  COLOR_STATE_TONES,
-} from '../../constants'
-import {ColorBaseTone, ColorButtonMode, ColorState, ColorStateTone} from '../../types'
-
-/**
- * Convert a tree of color tokens from a sparse format to a dense format.
- */
-export function resolveColorTokens(sparseTokens: ColorTokens): ColorTokens {
-  const denseTokens: ColorTokens = {...sparseTokens}
-
-  // base tones
-  for (const tone of COLOR_BASE_TONES) {
-    denseTokens[tone] = resolveBaseColorTones(sparseTokens, tone)
-  }
-
-  // button
-  denseTokens.button = resolveButtonColorTokens(sparseTokens)
-
-  return denseTokens
-}
-
-function resolveBaseColorTones(sparseTokens: ColorTokens, tone: ColorBaseTone): BaseColorTokens {
-  const spec0 = sparseTokens?.[tone]
-  const spec1 = sparseTokens?.['*']
-
-  return {
-    ...spec1,
-    ...spec0,
-    shadow: {...spec1?.shadow, ...spec0?.shadow},
-    skeleton: {...spec1?.skeleton, ...spec0?.skeleton},
-  }
-}
-
-function resolveButtonColorTokens(
-  sparseTokens: ColorTokens,
-): Partial<Record<ColorConfigStateTone, ButtonColorTokens>> {
-  const tokens: Partial<Record<ColorConfigStateTone, ButtonColorTokens>> = {}
-
-  for (const tone of COLOR_STATE_TONES) {
-    tokens[tone] = resolveButtonToneColorTokens(sparseTokens, tone)
-  }
-
-  return tokens
-}
-
-function resolveButtonToneColorTokens(
-  sparseTokens: ColorTokens,
-  tone: ColorStateTone,
-): ButtonColorTokens {
-  const tokens: ButtonColorTokens = {
-    ...sparseTokens.button?.[tone],
-    ...sparseTokens.button?.['*'],
-  }
-
-  for (const mode of COLOR_BUTTON_MODES) {
-    tokens[mode] = resolveButtonModeColorTokens(sparseTokens, tone, mode)
-  }
-
-  return tokens
-}
-
-function resolveButtonModeColorTokens(
-  sparseTokens: ColorTokens,
-  tone: ColorStateTone,
-  mode: ColorButtonMode,
-): ButtonModeColorTokens {
-  const spec0 = sparseTokens.button?.[tone]?.[mode]
-  const spec1 = sparseTokens.button?.['*']?.[mode]
-  const tokens = {...spec1, ...spec0}
-
-  for (const state of COLOR_STATES) {
-    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state)
-  }
-
-  return tokens
-}
-
-function resolveButtonStateColorTokens(
-  tokens: ColorTokens,
-  tone: ColorStateTone,
-  mode: ColorButtonMode,
-  state: ColorState,
-): StateColorTokens {
-  const spec0 = tokens?.button?.[tone]?.[mode]?.[state]
-  const spec1 = tokens?.button?.[tone]?.[mode]?.['*']
-  const spec2 = tokens?.button?.['*']?.[mode]?.[state]
-  const spec3 = tokens?.button?.['*']?.[mode]?.['*']
-
-  const hue =
-    spec0?._hue ||
-    spec1?._hue ||
-    spec2?._hue ||
-    spec3?._hue ||
-    tokens?.button?.[tone]?._hue ||
-    tokens?.[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},
-  }
-}

package/src/theme/_internal/build/defaults/colorPalette.ts

@@ -1,8 +0,0 @@
-import {color} from '@sanity/color'
-
-import {TMP_ColorPalette} from '../../config'
-
-export const defaultColorPalette: TMP_ColorPalette = {
-  ...color,
-  black: '#000000',
-}

package/src/theme/_internal/build/defaults/colorTokens.ts

@@ -1,147 +0,0 @@
-import {ColorTokens} from '../../config'
-
-export const defaultColorTokens: ColorTokens = {
-  '*': {
-    _blend: ['multiply', 'screen'],
-    bg: ['50', '950'],
-    fg: ['800', '200'],
-    border: ['200', '800'],
-    focusRing: ['cyan/500', 'cyan/500'],
-    shadow: {
-      outline: ['500/0.25', '400/0.3'],
-      umbra: ['500/0.1', 'black/0.4'],
-      penumbra: ['500/0.07', 'black/0.28'],
-      ambient: ['500/0.06', 'black/0.24'],
-    },
-    skeleton: {
-      from: ['100', '900'],
-      to: ['100/0.5', '900/0.5'],
-    },
-  },
-  transparent: {
-    bg: ['50', 'black'],
-    fg: ['600', '400'],
-  },
-  default: {
-    bg: ['white', '950'],
-    fg: ['black', '200'],
-  },
-  primary: {
-    _hue: 'cyan',
-  },
-  positive: {
-    _hue: 'cyan',
-  },
-  caution: {
-    _hue: 'yellow',
-  },
-  critical: {
-    _hue: 'red',
-  },
-  button: {
-    '*': {
-      default: {
-        '*': {
-          _blend: ['screen', 'multiply'],
-          bg: ['500', '400'],
-          bg2: ['950', '50'],
-          border: ['500/0', '400/0'],
-          muted: {
-            fg: ['200', '700'],
-          },
-        },
-        hovered: {
-          bg: ['600', '300'],
-          border: ['600/0', '300/0'],
-        },
-        pressed: {
-          bg: ['700', '200'],
-        },
-        selected: {
-          bg: ['700', '200'],
-        },
-        disabled: {
-          _hue: 'gray',
-          bg: ['200', '900'],
-        },
-      },
-      ghost: {
-        '*': {
-          _blend: ['multiply', 'screen'],
-          bg: ['white', 'black'],
-          bg2: ['50', '950'],
-          fg: ['600', '400'],
-          border: ['200', '800'],
-          muted: {
-            fg: ['600/0.6', '400/0.6'],
-          },
-        },
-        hovered: {
-          bg: ['50', '950'],
-          fg: ['700', '300'],
-        },
-        pressed: {
-          bg: ['100', '900'],
-          fg: ['800', '200'],
-        },
-        selected: {
-          bg: ['100', '900'],
-          fg: ['800', '200'],
-        },
-        disabled: {
-          _hue: 'gray',
-          fg: ['200', '900'],
-          border: ['100', '950'],
-        },
-      },
-      bleed: {
-        '*': {
-          _blend: ['multiply', 'screen'],
-          bg: ['white', 'black'],
-          bg2: ['50', '950'],
-          fg: ['600', '400'],
-          border: ['white/0', 'black/0'],
-          muted: {
-            fg: ['600/0.6', '400/0.6'],
-          },
-        },
-        hovered: {
-          bg: ['50', '950'],
-          fg: ['700', '300'],
-        },
-        pressed: {
-          bg: ['100', '900'],
-          fg: ['800', '200'],
-        },
-        selected: {
-          bg: ['100', '900'],
-          fg: ['800', '200'],
-        },
-        disabled: {
-          _hue: 'gray',
-          fg: ['200', '900'],
-        },
-      },
-    },
-    default: {
-      default: {
-        '*': {
-          bg: ['900', '200'],
-        },
-        hovered: {
-          bg: ['black', '100'],
-        },
-        pressed: {
-          bg: ['900', '200'],
-        },
-        selected: {
-          bg: ['black', '200'],
-        },
-        disabled: {
-          _hue: 'gray',
-          bg: ['200', '900'],
-        },
-      },
-    },
-  },
-}

package/src/theme/_internal/build/helpers.ts

@@ -1,65 +0,0 @@
-import {
-  parseColor,
-  rgbToHex,
-  screen as _screen,
-  multiply as _multiply,
-  rgba,
-} from '../../lib/color-fns'
-import {ColorTokenValue, parseTokenValue, TokenColorValueNode} from '../config'
-import {ColorHueValue} from '../types'
-
-export interface ColorTokenContext {
-  hue: ColorHueValue
-  scheme: 'light' | 'dark'
-}
-
-export function resolveColorTokenValue(context: ColorTokenContext, value: ColorTokenValue): string {
-  const {hue, scheme} = context
-  const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
-
-  if (!node || node.type !== 'color') {
-    throw new Error(`Invalid color token: ${value[0]}`)
-  }
-
-  return compileColorTokenValue({...node, hue: node.hue || hue})
-}
-
-export function compileColorTokenValue(node: TokenColorValueNode): string {
-  let key = ''
-
-  if (node.key === 'black' || node.key === 'white') {
-    key = node.key
-  } else {
-    key = `${node.hue}/${node.tint}`
-  }
-
-  if (node.opacity !== undefined) {
-    key += `/${node.opacity}`
-  }
-
-  return key
-}
-
-export function multiply(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_multiply(b, s))
-
-  if (s.a !== undefined) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}
-
-export function screen(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_screen(b, s))
-
-  if (s.a !== undefined) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}

package/src/theme/_internal/build/index.ts

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