@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,164 @@
+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 {ColorTokenContext, resolveColorTokenValue as _color} from '../helpers'
+import {resolveColorTokens} from './resolveColorTokens'
+
+export function buildColorTheme(
+  options: {scheme: 'light' | 'dark'},
+  config?: ThemeConfig,
+): TMP_ColorTheme {
+  const {scheme} = options
+
+  const resolvedConfig = {
+    ...config,
+    color: {
+      ...config?.color,
+      tokens: resolveColorTokens(config?.color?.tokens ?? defaultColorTokens),
+    },
+  }
+
+  return {
+    transparent: buildBaseColorTheme({scheme, tone: 'transparent'}, resolvedConfig),
+    default: buildBaseColorTheme({scheme, tone: 'default'}, resolvedConfig),
+    primary: buildBaseColorTheme({scheme, tone: 'primary'}, resolvedConfig),
+    positive: buildBaseColorTheme({scheme, tone: 'positive'}, resolvedConfig),
+    caution: buildBaseColorTheme({scheme, tone: 'caution'}, resolvedConfig),
+    critical: buildBaseColorTheme({scheme, tone: 'critical'}, resolvedConfig),
+  }
+}
+
+export function buildBaseColorTheme(
+  options: {scheme: 'light' | 'dark'; tone: ColorBaseTone},
+  config?: ThemeConfig,
+): TMP_BaseColorTheme {
+  const {scheme, tone} = options
+  const tokens = config?.color?.tokens?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+  const bg = _color(context, tokens?.bg || ['gray/50', 'black'])
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    dark: scheme === 'dark',
+    base: {
+      bg,
+      fg: _color(context, tokens?.fg || ['black', 'white']),
+      border: _color(context, tokens?.border || ['black', 'white']),
+      focusRing: _color(context, tokens?.focusRing || ['black', 'white']),
+      shadow: {
+        outline: _color(context, tokens?.shadow?.outline || ['500/0.2', '500/0.2']),
+        umbra: _color(context, tokens?.shadow?.umbra || ['500/0.2', '500/0.2']),
+        penumbra: _color(context, tokens?.shadow?.penumbra || ['500/0.2', '500/0.2']),
+        ambient: _color(context, tokens?.shadow?.ambient || ['500/0.2', '500/0.2']),
+      },
+      skeleton: {
+        from: _color(context, tokens?.skeleton?.from || ['500/0.2', '500/0.2']),
+        to: _color(context, tokens?.skeleton?.to || ['500/0.2', '500/0.2']),
+      },
+    },
+    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?.button?.[tone]?.[mode]?.[state]
+  const hue = tokens?._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 || ['500', '400']),
+    bg2: _color(context, tokens?.bg2 || ['500', '400']),
+    fg: _color(context, tokens?.fg || ['white', 'black']),
+    border: _color(context, tokens?.border || ['500', '400']),
+    muted: {
+      fg: _color(context, tokens?.fg || ['500', '400']),
+    },
+    accent: {
+      fg: _color(context, tokens?.fg || ['500', '400']),
+    },
+    link: {
+      fg: _color(context, tokens?.fg || ['500', '400']),
+    },
+    code: {
+      bg: _color(context, tokens?.bg || ['500', '400']),
+      fg: _color(context, tokens?.fg || ['500', '400']),
+    },
+  }
+}

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

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

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

@@ -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,147 @@
+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'],
+        },
+      },
+    },
+  },
+}