@sanity/ui 2.0.0-alpha.13 → 2.0.0-alpha.14

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

@@ -0,0 +1,222 @@
+import {ThemeConfig} from '../../config'
+import {COLOR_BUTTON_MODES, COLOR_STATE_TONES, COLOR_STATES} from '../../constants'
+import {
+  ColorBaseTone,
+  ColorButtonMode,
+  ColorState,
+  ColorStateTone,
+  TMP_BaseColorTheme,
+  TMP_ButtonColorTheme,
+  TMP_ButtonModesColorTheme,
+  TMP_ButtonStatesColorTheme,
+  TMP_ColorTheme,
+  TMP_StateColorTheme,
+} from '../../types'
+import {defaultColorTokens} from '../defaults/colorTokens'
+import {resolveColorTokenValue} from '../helpers'
+
+export function buildColorTheme(
+  options: {scheme: 'light' | 'dark'},
+  config?: ThemeConfig,
+): TMP_ColorTheme {
+  const {scheme} = options
+
+  return {
+    transparent: buildBaseColorTheme({scheme, tone: 'transparent'}, config),
+    default: buildBaseColorTheme({scheme, tone: 'default'}, config),
+    primary: buildBaseColorTheme({scheme, tone: 'primary'}, config),
+    positive: buildBaseColorTheme({scheme, tone: 'positive'}, config),
+    caution: buildBaseColorTheme({scheme, tone: 'caution'}, config),
+    critical: buildBaseColorTheme({scheme, tone: 'critical'}, config),
+  }
+}
+
+export function buildBaseColorTheme(
+  options: {scheme: 'light' | 'dark'; tone: ColorBaseTone},
+  config?: ThemeConfig,
+): TMP_BaseColorTheme {
+  const {scheme, tone} = options
+  const tokens = config?.color?.tokens ?? defaultColorTokens
+  const any = tokens?.['*']
+  const toneTokens = tokens?.[tone]
+  const hue = toneTokens?._hue || any?._hue || 'gray'
+
+  const bg = resolveColorTokenValue({
+    hue,
+    scheme,
+    value: toneTokens?.bg || any?.bg || ['gray/50', 'black'],
+  })
+
+  const _blend = toneTokens?._blend || any?._blend || ['screen', 'multiply']
+
+  return {
+    _blend: _blend[scheme === 'light' ? 0 : 1],
+    dark: scheme === 'dark',
+    base: {
+      bg,
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: toneTokens?.fg || any?.fg || ['black', 'white'],
+      }),
+      border: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: toneTokens?.border || any?.border || ['black', 'white'],
+      }),
+    },
+    button: buildButtonColorTheme({scheme}, config),
+  }
+}
+
+function buildButtonColorTheme(
+  options: {scheme: 'light' | 'dark'},
+  config?: ThemeConfig,
+): TMP_ButtonColorTheme {
+  const {scheme} = options
+
+  const tones = COLOR_STATE_TONES.map((tone): Partial<TMP_ButtonColorTheme> => {
+    return {
+      [tone]: buildButtonColorToneTheme({scheme, tone}, config),
+    }
+  })
+
+  return Object.assign({}, ...tones) as TMP_ButtonColorTheme
+}
+
+function buildButtonColorToneTheme(
+  options: {
+    scheme: 'light' | 'dark'
+    tone: ColorStateTone
+  },
+  config?: ThemeConfig,
+): TMP_ButtonModesColorTheme {
+  const {scheme, tone} = options
+
+  const modes = COLOR_BUTTON_MODES.map((mode): Partial<TMP_ButtonModesColorTheme> => {
+    return {
+      [mode]: buildButtonModeColorTheme({mode, scheme, tone}, config),
+    }
+  })
+
+  return Object.assign({}, ...modes) as TMP_ButtonModesColorTheme
+}
+
+function buildButtonModeColorTheme(
+  options: {
+    mode: ColorButtonMode
+    scheme: 'light' | 'dark'
+    tone: ColorStateTone
+  },
+  config?: ThemeConfig,
+): TMP_ButtonStatesColorTheme {
+  const {mode, scheme, tone} = options
+
+  const states = COLOR_STATES.map((state): Partial<TMP_ButtonStatesColorTheme> => {
+    return {
+      [state]: buildButtonStateColorTheme({mode, tone, scheme, state}, config),
+    }
+  })
+
+  return Object.assign({}, ...states) as TMP_ButtonStatesColorTheme
+}
+
+function buildButtonStateColorTheme(
+  options: {
+    mode: ColorButtonMode
+    tone: ColorStateTone
+    scheme: 'light' | 'dark'
+    state: ColorState
+  },
+  config?: ThemeConfig,
+): TMP_StateColorTheme {
+  const {mode, tone, scheme, state} = options
+  const tokens = config?.color?.tokens ?? defaultColorTokens
+  const hue =
+    tokens?.button?.[tone]?.[mode]?.[state]?._hue ||
+    tokens?.button?.['*']?.[mode]?.[state]?._hue ||
+    tokens?.button?.[tone]?._hue ||
+    tokens?.[tone]?._hue ||
+    'gray'
+  const spec3 = tokens?.button?.['*']?.[mode]?.['*']
+  const spec2 = tokens?.button?.['*']?.[mode]?.[state]
+  const spec1 = tokens?.button?.[tone]?.[mode]?.['*']
+  const spec0 = tokens?.button?.[tone]?.[mode]?.[state]
+
+  const _blend = spec0?._blend ||
+    spec1?._blend ||
+    spec2?._blend ||
+    spec3?._blend || ['screen', 'multiply']
+
+  return {
+    _blend: _blend[scheme === 'light' ? 0 : 1],
+    bg: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: spec0?.bg || spec1?.bg || spec2?.bg || spec3?.bg || ['500', '400'],
+    }),
+    bg2: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: spec0?.bg2 || spec1?.bg2 || spec2?.bg2 || spec3?.bg2 || ['500', '400'],
+    }),
+    fg: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: spec0?.fg || spec1?.fg || spec2?.fg || spec3?.fg || ['white', 'black'],
+    }),
+    border: resolveColorTokenValue({
+      hue,
+      scheme,
+      value: spec0?.border || spec1?.border || spec2?.border || spec3?.border || ['500', '400'],
+    }),
+    muted: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: spec0?.muted?.fg ||
+          spec1?.muted?.fg ||
+          spec2?.muted?.fg ||
+          spec3?.muted?.fg || ['500', '400'],
+      }),
+    },
+    accent: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: spec0?.accent?.fg ||
+          spec1?.accent?.fg ||
+          spec2?.accent?.fg ||
+          spec3?.accent?.fg || ['500', '400'],
+      }),
+    },
+    link: {
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: spec0?.link?.fg ||
+          spec1?.link?.fg ||
+          spec2?.link?.fg ||
+          spec3?.link?.fg || ['500', '400'],
+      }),
+    },
+    code: {
+      bg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: spec0?.code?.bg ||
+          spec1?.code?.bg ||
+          spec2?.code?.bg ||
+          spec3?.code?.bg || ['500', '400'],
+      }),
+      fg: resolveColorTokenValue({
+        hue,
+        scheme,
+        value: spec0?.code?.fg ||
+          spec1?.code?.fg ||
+          spec2?.code?.fg ||
+          spec3?.code?.fg || ['500', '400'],
+      }),
+    },
+  }
+}

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

@@ -0,0 +1,226 @@
+import {ColorTint as ColorPaletteValue} from '@sanity/color'
+import {rgba} from '../../../lib/color-fns'
+import {ColorBlendModeValue, parseTokenValue, TMP_ColorPalette} from '../../config'
+import {
+  TMP_BaseColorTheme,
+  TMP_ButtonColorTheme,
+  TMP_ButtonModesColorTheme,
+  TMP_ButtonStatesColorTheme,
+  TMP_ColorTheme,
+  TMP_StateColorTheme,
+} from '../../types'
+import {multiply, screen} from '../helpers'
+
+export function renderColorTheme(
+  colorPalette: TMP_ColorPalette,
+  value: {
+    light: TMP_ColorTheme
+    dark: TMP_ColorTheme
+  },
+): {
+  light: TMP_ColorTheme
+  dark: TMP_ColorTheme
+} {
+  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),
+    },
+    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 bg2 = renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg)
+  const fg = renderColorValue(colorPalette, bg, blendMode, value.fg)
+  const border = renderColorValue(colorPalette, bg, blendMode, value.border)
+  const muted = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg),
+  }
+  const accent = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg),
+  }
+  const link = {
+    fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg),
+  }
+  const code = {
+    bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
+    fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg),
+  }
+
+  const blend = rootBlendMode === 'multiply' ? multiply : screen
+
+  return {
+    _blend: blendMode,
+    bg: blend(baseBg, bg),
+    bg2: blend(baseBg, bg2),
+    fg: blend(baseBg, fg),
+    border: blend(baseBg, border),
+    muted: {
+      fg: blend(baseBg, muted.fg),
+    },
+    accent: {
+      fg: blend(baseBg, accent.fg),
+    },
+    link: {
+      fg: blend(baseBg, link.fg),
+    },
+    code: {
+      bg: blend(baseBg, code.bg),
+      fg: blend(baseBg, 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/defaults/colorPalette.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,124 @@
+import {ColorTokens} from '../../config'
+
+export const defaultColorTokens: ColorTokens = {
+  '*': {
+    _blend: ['multiply', 'screen'],
+    bg: ['50', '950'],
+    fg: ['800', '200'],
+    border: ['200', '800'],
+  },
+  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'],
+          border: ['500/0', '400/0'],
+        },
+        hovered: {
+          bg: ['600', '300'],
+          border: ['600/0', '300/0'],
+        },
+        pressed: {
+          bg: ['700', '200'],
+        },
+        selected: {
+          bg: ['700', '200'],
+        },
+        disabled: {
+          _hue: 'gray',
+          bg: ['100', '900'],
+        },
+      },
+      ghost: {
+        '*': {
+          _blend: ['multiply', 'screen'],
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['200', '800'],
+        },
+        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: ['100', '900'],
+          border: ['100', '900'],
+        },
+      },
+      bleed: {
+        '*': {
+          _blend: ['multiply', 'screen'],
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['white/0', 'black/0'],
+        },
+        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: ['100', '900'],
+        },
+      },
+    },
+    default: {
+      default: {
+        '*': {
+          bg: ['900', '200'],
+        },
+        hovered: {
+          bg: ['black', '100'],
+        },
+        pressed: {
+          bg: ['900', '200'],
+        },
+        selected: {
+          bg: ['black', '200'],
+        },
+        disabled: {
+          _hue: 'gray',
+          bg: ['100', '900'],
+        },
+      },
+    },
+  },
+}

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

@@ -0,0 +1,64 @@
+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 function resolveColorTokenValue(options: {
+  hue: ColorHueValue
+  scheme: 'light' | 'dark'
+  value: ColorTokenValue
+}): string {
+  const {hue, scheme, value} = options
+  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

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

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

@@ -0,0 +1,47 @@
+import {parseTokenValue} from './token'
+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 './types'
+
+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/_internal/config/index.ts

@@ -0,0 +1,3 @@
+export * from './helpers'
+export * from './token'
+export * from './types'

package/src/theme/_internal/config/token/index.ts

@@ -0,0 +1,2 @@
+export * from './parseTokenKey'
+export * from './parseTokenValue'