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

package/src/theme/build/buildColorTheme.ts

@@ -0,0 +1,484 @@
+import {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorAvatarColorKey,
+  ThemeColorCardToneKey,
+  ThemeColorButtonModeKey,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+  ThemeColorAvatar_v2,
+  ThemeColorBadge_v2,
+  ThemeColorSyntax,
+  ThemeColorSchemes_v2,
+  ThemeColorScheme_v2,
+  ThemeColorCard_v2,
+  ThemeColorSchemeKey,
+  ThemeColorShadow,
+  ThemeColorState_v2,
+  ThemeColorButton_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
+  ThemeColorAvatarHue_v2,
+  ThemeColorInput_v2,
+  ThemeColorInputMode_v2,
+  ThemeColorInputState_v2,
+} from '../system'
+import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
+import {resolveColorTokens} from './resolveColorTokens'
+
+export function buildColorTheme(config?: ThemeConfig): ThemeColorSchemes_v2 {
+  const resolvedConfig: ThemeConfig = {
+    ...config,
+    color: resolveColorTokens(config?.color),
+  }
+
+  return {
+    light: buildColorScheme({scheme: 'light'}, resolvedConfig),
+    dark: buildColorScheme({scheme: 'dark'}, resolvedConfig),
+  }
+}
+
+function buildColorScheme(
+  options: {scheme: ThemeColorSchemeKey},
+  config: ThemeConfig,
+): ThemeColorScheme_v2 {
+  const {scheme} = options
+
+  return {
+    transparent: buildCardColorTheme({scheme, tone: 'transparent'}, config),
+    default: buildCardColorTheme({scheme, tone: 'default'}, config),
+    primary: buildCardColorTheme({scheme, tone: 'primary'}, config),
+    positive: buildCardColorTheme({scheme, tone: 'positive'}, config),
+    caution: buildCardColorTheme({scheme, tone: 'caution'}, config),
+    critical: buildCardColorTheme({scheme, tone: 'critical'}, config),
+  }
+}
+
+function buildCardColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorCard_v2 {
+  const {scheme, tone} = options
+  const tokens = config?.color?.base?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+  const blendMode = tokens?._blend || ['multiply', 'screen']
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    _dark: scheme === 'dark',
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    backdrop: _color(context, tokens?.backdrop),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    button: buildButtonColorTheme({scheme}, config),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    focusRing: _color(context, tokens?.focusRing),
+    icon: _color(context, tokens?.icon),
+    input: buildInputColorTheme({scheme, tone}, config),
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    selectable: buildSelectableColorTheme({scheme}, config),
+    shadow: buildShadowColorTheme({scheme, tone}, config),
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+    syntax: buildSyntaxColorTheme({scheme}, config),
+  }
+}
+
+function buildShadowColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorShadow {
+  const {scheme, tone} = options
+  const tokens = config?.color?.base?.[tone]
+  const hue = tokens?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    outline: _color(context, tokens?.shadow?.outline),
+    umbra: _color(context, tokens?.shadow?.umbra),
+    penumbra: _color(context, tokens?.shadow?.penumbra),
+    ambient: _color(context, tokens?.shadow?.ambient),
+  }
+}
+
+function buildAvatarColorTheme(
+  options: {scheme: ThemeColorSchemeKey},
+  stateTokens?: ThemeColorStateTokens,
+): ThemeColorAvatar_v2 {
+  const {scheme} = options
+
+  return {
+    gray: _buildAvatarColorTheme({color: 'gray', scheme}, stateTokens),
+    blue: _buildAvatarColorTheme({color: 'blue', scheme}, stateTokens),
+    purple: _buildAvatarColorTheme({color: 'purple', scheme}, stateTokens),
+    magenta: _buildAvatarColorTheme({color: 'magenta', scheme}, stateTokens),
+    red: _buildAvatarColorTheme({color: 'red', scheme}, stateTokens),
+    orange: _buildAvatarColorTheme({color: 'orange', scheme}, stateTokens),
+    yellow: _buildAvatarColorTheme({color: 'yellow', scheme}, stateTokens),
+    green: _buildAvatarColorTheme({color: 'green', scheme}, stateTokens),
+    cyan: _buildAvatarColorTheme({color: 'cyan', scheme}, stateTokens),
+  }
+}
+
+function _buildAvatarColorTheme(
+  options: {color: ThemeColorAvatarColorKey; scheme: ThemeColorSchemeKey},
+  stateTokens?: ThemeColorStateTokens,
+): ThemeColorAvatarHue_v2 {
+  const {color, scheme} = options
+  const tokens = stateTokens?.avatar?.[color]
+  const context: ColorTokenContext = {hue: tokens?._hue || 'gray', scheme}
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    bg: _color(context, tokens?.bg),
+    fg: _color(context, tokens?.fg),
+  }
+}
+
+function buildBadgeColorTheme(
+  tokens: ThemeColorBadgeTokens | undefined,
+  options: {scheme: ThemeColorSchemeKey},
+  config?: ThemeConfig,
+): ThemeColorBadge_v2 {
+  const {scheme} = options
+
+  return {
+    default: _buildBadgeColorTheme(tokens, {scheme, tone: 'default'}, config),
+    primary: _buildBadgeColorTheme(tokens, {scheme, tone: 'primary'}, config),
+    positive: _buildBadgeColorTheme(tokens, {scheme, tone: 'positive'}, config),
+    caution: _buildBadgeColorTheme(tokens, {scheme, tone: 'caution'}, config),
+    critical: _buildBadgeColorTheme(tokens, {scheme, tone: 'critical'}, config),
+  }
+}
+
+function _buildBadgeColorTheme(
+  parentTokens: ThemeColorBadgeTokens | undefined,
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorStateToneKey},
+  config?: ThemeConfig,
+): ThemeColorBadge_v2['default'] {
+  const {scheme, tone} = options
+  const tokens = parentTokens?.[tone]
+  const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    bg: _color(context, tokens?.bg),
+    fg: _color(context, tokens?.fg),
+    dot: _color(context, tokens?.dot),
+    icon: _color(context, tokens?.icon),
+  }
+}
+
+function buildButtonColorTheme(
+  options: {scheme: ThemeColorSchemeKey},
+  config?: ThemeConfig,
+): ThemeColorButton_v2 {
+  const {scheme} = options
+
+  const modes: Partial<ThemeColorButton_v2> = {}
+
+  for (const mode of THEME_COLOR_BUTTON_MODES) {
+    modes[mode] = buildButtonTonesColorTheme({scheme, mode}, config)
+  }
+
+  return modes as ThemeColorButton_v2
+}
+
+function buildButtonTonesColorTheme(
+  options: {
+    scheme: ThemeColorSchemeKey
+    mode: ThemeColorButtonModeKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonMode_v2 {
+  const {mode, scheme} = options
+
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
+  }
+
+  return tones as ThemeColorButtonMode_v2
+}
+
+function buildButtonStatesColorTheme(
+  options: {
+    mode: ThemeColorButtonModeKey
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonTone_v2 {
+  const {mode, scheme, tone} = options
+
+  const states: Partial<ThemeColorButtonTone_v2> = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
+  }
+
+  return states as ThemeColorButtonTone_v2
+}
+
+function buildButtonStateColorTheme(
+  options: {
+    mode: ThemeColorButtonModeKey
+    tone: ThemeColorStateToneKey
+    scheme: ThemeColorSchemeKey
+    state: ThemeColorStateKey
+  },
+  config?: ThemeConfig,
+): ThemeColorState_v2 {
+  const {mode, tone, scheme, state} = options
+  const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
+  const hue = tokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    icon: _color(context, tokens?.icon),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+  }
+}
+
+function buildInputColorTheme(
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
+  config?: ThemeConfig,
+): ThemeColorInput_v2 {
+  const {scheme, tone} = options
+
+  return {
+    default: buildInputStatesColorTheme({mode: 'default', scheme, tone}, config),
+    invalid: buildInputStatesColorTheme({mode: 'invalid', scheme, tone}, config),
+  }
+}
+
+function buildInputStatesColorTheme(
+  options: {
+    mode: 'default' | 'invalid'
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorCardToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorInputMode_v2 {
+  const {mode, scheme, tone} = options
+
+  return {
+    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', tone}, config),
+    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', tone}, config),
+    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', tone}, config),
+    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', tone}, config),
+  }
+}
+
+function buildInputStateColorTheme(
+  options: {
+    mode: 'default' | 'invalid'
+    scheme: ThemeColorSchemeKey
+    state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
+    tone: ThemeColorCardToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorInputState_v2 {
+  const {mode, tone, scheme, state} = options
+  const tokens = config?.color?.input?.[mode]?.[state]
+  const hue = tokens?._hue || config?.color?.base?.[tone]?._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),
+    border: _color(context, tokens?.border),
+    fg: _color(context, tokens?.fg),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+    },
+    placeholder: _color(context, tokens?.placeholder),
+  }
+}
+
+function buildSelectableColorTheme(
+  options: {
+    scheme: ThemeColorSchemeKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonMode_v2 {
+  const {scheme} = options
+
+  const tones: Partial<ThemeColorButtonMode_v2> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
+  }
+
+  return tones as ThemeColorButtonMode_v2
+}
+
+function buildSelectableStatesColorTheme(
+  options: {
+    scheme: ThemeColorSchemeKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorButtonTone_v2 {
+  const {scheme, tone} = options
+
+  const states: Partial<ThemeColorButtonTone_v2> = {}
+
+  for (const state of THEME_COLOR_STATES) {
+    states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
+  }
+
+  return states as ThemeColorButtonTone_v2
+}
+
+function buildSelectableStateColorTheme(
+  options: {
+    scheme: ThemeColorSchemeKey
+    state: ThemeColorStateKey
+    tone: ThemeColorStateToneKey
+  },
+  config?: ThemeConfig,
+): ThemeColorState_v2 {
+  const {scheme, state, tone} = options
+  const tokens = config?.color?.selectable?.[tone]?.[state]
+  const hue = tokens?._hue || 'gray'
+  const blendMode = tokens?._blend || ['screen', 'multiply']
+  const context: ColorTokenContext = {hue, scheme}
+
+  return {
+    _blend: blendMode[scheme === 'light' ? 0 : 1],
+    accent: {
+      fg: _color(context, tokens?.accent?.fg),
+    },
+    avatar: buildAvatarColorTheme({scheme}, tokens),
+    badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
+    bg: _color(context, tokens?.bg),
+    border: _color(context, tokens?.border),
+    code: {
+      bg: _color(context, tokens?.code?.bg),
+      fg: _color(context, tokens?.code?.fg),
+    },
+    fg: _color(context, tokens?.fg),
+    icon: _color(context, tokens?.icon),
+    muted: {
+      bg: _color(context, tokens?.muted?.bg),
+      fg: _color(context, tokens?.muted?.fg),
+    },
+    kbd: {
+      bg: _color(context, tokens?.kbd?.bg),
+      fg: _color(context, tokens?.kbd?.fg),
+      border: _color(context, tokens?.kbd?.border),
+    },
+    link: {
+      fg: _color(context, tokens?.link?.fg),
+    },
+    skeleton: {
+      from: _color(context, tokens?.skeleton?.from),
+      to: _color(context, tokens?.skeleton?.to),
+    },
+  }
+}
+
+function buildSyntaxColorTheme(
+  options: {scheme: ThemeColorSchemeKey},
+  config?: ThemeConfig,
+): ThemeColorSyntax {
+  const {scheme} = options
+  const tokens = config?.color?.syntax
+  const context: ColorTokenContext = {hue: 'gray', scheme}
+
+  return {
+    atrule: _color(context, tokens?.atrule),
+    attrName: _color(context, tokens?.attrName),
+    attrValue: _color(context, tokens?.attrValue),
+    attribute: _color(context, tokens?.attribute),
+    boolean: _color(context, tokens?.boolean),
+    builtin: _color(context, tokens?.builtin),
+    cdata: _color(context, tokens?.cdata),
+    char: _color(context, tokens?.char),
+    class: _color(context, tokens?.class),
+    className: _color(context, tokens?.className),
+    comment: _color(context, tokens?.comment),
+    constant: _color(context, tokens?.constant),
+    deleted: _color(context, tokens?.deleted),
+    doctype: _color(context, tokens?.doctype),
+    entity: _color(context, tokens?.entity),
+    function: _color(context, tokens?.function),
+    hexcode: _color(context, tokens?.hexcode),
+    id: _color(context, tokens?.id),
+    important: _color(context, tokens?.important),
+    inserted: _color(context, tokens?.inserted),
+    keyword: _color(context, tokens?.keyword),
+    number: _color(context, tokens?.number),
+    operator: _color(context, tokens?.operator),
+    prolog: _color(context, tokens?.prolog),
+    property: _color(context, tokens?.property),
+    pseudoClass: _color(context, tokens?.pseudoClass),
+    pseudoElement: _color(context, tokens?.pseudoElement),
+    punctuation: _color(context, tokens?.punctuation),
+    regex: _color(context, tokens?.regex),
+    selector: _color(context, tokens?.selector),
+    string: _color(context, tokens?.string),
+    symbol: _color(context, tokens?.symbol),
+    tag: _color(context, tokens?.tag),
+    unit: _color(context, tokens?.unit),
+    url: _color(context, tokens?.url),
+    variable: _color(context, tokens?.variable),
+  }
+}

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

@@ -0,0 +1,87 @@
+import {defaultColorPalette} from '../defaults/colorPalette'
+import {buildTheme} from './buildTheme'
+
+test('build theme', () => {
+  const rootTheme = buildTheme({
+    palette: {
+      ...defaultColorPalette,
+      black: '#000000',
+      white: '#ffffff',
+    },
+    color: {
+      base: {
+        default: {
+          bg: ['white/0', 'black/0'],
+          fg: ['black', 'white'],
+        },
+      },
+      button: {
+        ghost: {
+          default: {
+            '*': {
+              border: ['white/0', 'black/0'],
+            },
+          },
+        },
+      },
+    },
+  })
+
+  const {color} = rootTheme.v2!
+
+  expect({
+    light: {
+      bg: color.light.default.bg,
+      fg: color.light.default.fg,
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: color.light.default.button.ghost.default.enabled.border,
+            },
+          },
+        },
+      },
+    },
+    dark: {
+      bg: color.dark.default.bg,
+      fg: color.dark.default.fg,
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: color.dark.default.button.ghost.default.enabled.border,
+            },
+          },
+        },
+      },
+    },
+  }).toEqual({
+    light: {
+      bg: 'rgba(255,255,255,0)',
+      fg: '#000000',
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: 'rgba(246,246,248,0)',
+            },
+          },
+        },
+      },
+    },
+    dark: {
+      bg: 'rgba(0,0,0,0)',
+      fg: '#ffffff',
+      default: {
+        button: {
+          ghost: {
+            enabled: {
+              border: 'rgba(19,20,27,0)',
+            },
+          },
+        },
+      },
+    },
+  })
+})

package/src/theme/build/buildTheme.ts

@@ -0,0 +1,36 @@
+import {ThemeConfig} from '../config'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import {RootTheme, RootTheme_v2} from '../system'
+import {v2_v0} from '../versioning'
+import {buildColorTheme} from './buildColorTheme'
+import {renderThemeColorSchemes} from './renderColorTheme'
+
+/** @internal */
+export function buildTheme(config?: ThemeConfig): RootTheme {
+  const colorTheme = buildColorTheme(config)
+
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: config?.avatar ?? defaultThemeConfig.avatar,
+    button: config?.button ?? defaultThemeConfig.button,
+    card: config?.card ?? defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: config?.container ?? defaultThemeConfig.container,
+    font: config?.font ?? defaultThemeFonts,
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style,
+  }
+
+  return v2_v0(v2)
+}

package/src/theme/build/colorToken/colorToken.ts

@@ -0,0 +1,19 @@
+import {ThemeColorTokenValue, parseTokenValue} from '../../config'
+import {compileColorTokenValue} from './compileColorToken'
+import {ColorTokenContext} from './types'
+
+const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
+
+export function resolveColorTokenValue(
+  context: ColorTokenContext,
+  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
+): 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})
+}

package/src/theme/build/colorToken/compileColorToken.ts

@@ -0,0 +1,21 @@
+import {TokenColorValueNode} from '../../config'
+
+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.mix !== undefined) {
+    return `${key} ${node.mix * 100}%`
+  }
+
+  if (node.opacity !== undefined) {
+    key += `/${node.opacity}`
+  }
+
+  return key
+}

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

@@ -0,0 +1,2 @@
+export * from './colorToken'
+export * from './types'

package/src/theme/build/colorToken/types.ts

@@ -0,0 +1,6 @@
+import {ColorHueKey} from '@sanity/color'
+
+export interface ColorTokenContext {
+  hue: ColorHueKey
+  scheme: 'light' | 'dark'
+}

package/src/theme/build/index.ts

@@ -0,0 +1,3 @@
+export * from './_deprecated/color'
+export * from './buildTheme'
+export * from './lib/color-fns'

package/src/theme/build/lib/color-fns/blend/index.ts

@@ -0,0 +1,3 @@
+export * from './mix'
+export * from './multiply'
+export * from './screen'

package/src/theme/build/lib/color-fns/blend/mix.ts

@@ -0,0 +1,21 @@
+import {RGB, RGBA} from '../types'
+
+function mixChannel(b: number, s: number, weight: number) {
+  const diff = s - b
+
+  const delta = diff * weight
+
+  return b + delta
+}
+
+/**
+ * Apply the \`mix\` blend mode
+ * @internal
+ */
+export function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB {
+  return {
+    r: mixChannel(b.r, s.r, weight),
+    g: mixChannel(b.g, s.g, weight),
+    b: mixChannel(b.b, s.b, weight),
+  }
+}