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

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

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

@@ -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'

package/src/theme/_internal/config/token/parseTokenKey.test.ts

@@ -0,0 +1,72 @@
+import {parseTokenKey} from './parseTokenKey'
+
+test('parse token key', () => {
+  expect(parseTokenKey('*/_blend')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: '_blend',
+  })
+
+  expect(parseTokenKey('*/_hue')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: '_hue',
+  })
+
+  expect(parseTokenKey('primary/_hue')).toEqual({
+    type: 'base',
+    tone: 'primary',
+    key: '_hue',
+  })
+
+  // ['primary/_hue', 'purple'],
+  // ['positive/_hue', 'cyan'],
+  // ['caution/_hue', 'yellow'],
+  // ['critical/_hue', 'red'],
+
+  expect(parseTokenKey('*/bg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'bg',
+  })
+
+  expect(parseTokenKey('*/focusRing')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'focusRing',
+  })
+
+  expect(parseTokenKey('*/muted/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'muted/fg',
+  })
+
+  expect(parseTokenKey('*/link/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'link/fg',
+  })
+
+  expect(parseTokenKey('*/code/fg')).toEqual({
+    type: 'base',
+    tone: '*',
+    key: 'code/fg',
+  })
+
+  expect(parseTokenKey('default/_blend')).toEqual({
+    type: 'base',
+    tone: 'default',
+    key: '_blend',
+  })
+
+  // ['default/bg', 'white', '900'],
+  // ['default/fg', 'black', '100'],
+
+  expect(parseTokenKey('button/*/default/_blend')).toEqual({
+    type: 'button',
+    tone: '*',
+    mode: 'default',
+    key: '_blend',
+  })
+})

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

@@ -0,0 +1,88 @@
+import {isColorButtonMode} from '../../helpers'
+import {ColorButtonMode} from '../../types'
+import {
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+} from '../helpers'
+import {
+  ColorConfigBaseKey,
+  ColorConfigBaseTone,
+  ColorConfigBlendKey,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+} from '../types'
+
+export interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigBaseTone
+  key: ColorConfigBaseKey | ColorConfigBlendKey
+}
+
+export interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ColorButtonMode
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+export function parseTokenKey(str: string): TokenKeyNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join('/')
+
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: 'base',
+        tone: segment0,
+        key,
+      }
+    }
+  }
+
+  if (segment0 === 'button') {
+    const segment1 = segments.shift() || ''
+
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || ''
+
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join('/')
+
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: 'button',
+            tone: segment1,
+            mode: segment2,
+            key,
+          }
+        }
+      }
+    }
+  }
+
+  return undefined
+}

package/src/theme/_internal/config/token/parseTokenValue.test.ts

@@ -0,0 +1,45 @@
+import {parseTokenValue} from './parseTokenValue'
+
+test('parse color value', () => {
+  expect(parseTokenValue('cyan')).toEqual({
+    type: 'hue',
+    value: 'cyan',
+  })
+
+  expect(parseTokenValue('50')).toEqual({
+    type: 'color',
+    tint: '50',
+  })
+
+  expect(parseTokenValue('cyan/500')).toEqual({
+    type: 'color',
+    key: 'cyan/500',
+    hue: 'cyan',
+    tint: '500',
+  })
+
+  expect(parseTokenValue('screen')).toEqual({
+    type: 'blendMode',
+    value: 'screen',
+  })
+
+  expect(parseTokenValue('multiply')).toEqual({
+    type: 'blendMode',
+    value: 'multiply',
+  })
+
+  expect(parseTokenValue('0')).toEqual({
+    type: 'color',
+    opacity: 0,
+  })
+
+  expect(parseTokenValue('0.1')).toEqual({
+    type: 'color',
+    opacity: 0.1,
+  })
+
+  expect(parseTokenValue('1')).toEqual({
+    type: 'color',
+    opacity: 1,
+  })
+})

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

@@ -0,0 +1,123 @@
+import {isColorBlendModeValue, isColorHueValue, isColorTintValue} from '../../helpers'
+import {ColorHueValue, ColorTintValue} from '../../types'
+import {isColorOpacityValue, isColorValue} from '../helpers'
+import {ColorBlendModeValue} from '../types'
+
+export interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueValue}/${ColorTintValue}` | ColorTintValue
+  hue?: ColorHueValue
+  tint?: ColorTintValue
+  opacity?: number
+}
+
+export interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueValue
+}
+
+export interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ColorBlendModeValue
+}
+
+export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode
+
+export function parseTokenValue(str: string): TokenValueNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorTintValue(segment0)) {
+    const tint = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        tint,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      tint,
+    }
+  }
+
+  if (isColorValue(segment0)) {
+    const key = segment0 as 'black' | 'white'
+    const segment1 = segments.shift() || ''
+
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1)
+
+      return {
+        type: 'color',
+        key,
+        opacity,
+      }
+    }
+
+    return {
+      type: 'color',
+      key,
+    }
+  }
+
+  if (isColorHueValue(segment0)) {
+    const hue = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorTintValue(segment1)) {
+      const tint = segment1
+      const segment2 = segments.shift() || ''
+
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2)
+
+        return {
+          type: 'color',
+          key: `${hue}/${tint}`,
+          hue,
+          tint,
+          opacity,
+        }
+      }
+
+      return {
+        type: 'color',
+        key: `${hue}/${tint}`,
+        hue,
+        tint,
+      }
+    }
+
+    return {
+      type: 'hue',
+      value: `${hue}`,
+    }
+  }
+
+  if (isColorOpacityValue(segment0)) {
+    const opacity = Number(segment0)
+
+    return {
+      type: 'color',
+      opacity,
+    }
+  }
+
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0
+
+    return {
+      type: 'blendMode',
+      value,
+    }
+  }
+
+  return undefined
+}

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

@@ -0,0 +1,137 @@
+import {ColorTint as ColorPaletteValue} from '@sanity/color'
+
+import {COLOR_BASE_TONES, COLOR_BLEND_MODES, COLOR_STATE_TONES} from '../constants'
+import {ColorButtonMode, ColorHueValue, ColorState, ColorTintValue} from '../types'
+
+export type ColorBlendModeValue = (typeof COLOR_BLEND_MODES)[number]
+
+export type ColorTokenValue = [ColorConfigValue, ColorConfigValue]
+
+export type ColorBlendModeTokenValue = [ColorBlendModeValue, ColorBlendModeValue]
+
+export const COLOR_CONFIG_BASE_TONES = ['*', ...COLOR_BASE_TONES] as const
+export type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
+
+export const COLOR_CONFIG_STATE_TONES = ['*', ...COLOR_STATE_TONES] as const
+export type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
+
+export interface BaseColorTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueValue
+  bg?: ColorTokenValue
+  fg?: ColorTokenValue
+  border?: ColorTokenValue
+  focusRing?: ColorTokenValue
+  shadow?: {
+    outline?: ColorTokenValue
+    umbra?: ColorTokenValue
+    penumbra?: ColorTokenValue
+    ambient?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
+}
+
+export interface StateColorTokens {
+  _blend?: ColorBlendModeTokenValue
+  _hue?: ColorHueValue
+  bg?: ColorTokenValue
+  bg2?: ColorTokenValue
+  fg?: ColorTokenValue
+  border?: ColorTokenValue
+  muted?: {
+    fg?: ColorTokenValue
+  }
+  accent?: {
+    fg?: ColorTokenValue
+  }
+  link?: {
+    fg?: ColorTokenValue
+  }
+  code?: {
+    bg?: ColorTokenValue
+    fg?: ColorTokenValue
+  }
+  skeleton?: {
+    from?: ColorTokenValue
+    to?: ColorTokenValue
+  }
+}
+
+export type ButtonModeColorTokens = Partial<Record<'*' | ColorState, StateColorTokens>>
+
+export interface ButtonColorTokens extends Partial<Record<ColorButtonMode, ButtonModeColorTokens>> {
+  _hue?: ColorHueValue
+}
+
+export interface ColorTokens extends Partial<Record<ColorConfigBaseTone, BaseColorTokens>> {
+  button?: Partial<Record<ColorConfigStateTone, ButtonColorTokens>>
+}
+
+export type TMP_ColorPalette = {
+  black: string | ColorPaletteValue
+  white: string | ColorPaletteValue
+} & Record<ColorHueValue, Record<ColorTintValue, string | ColorPaletteValue>>
+
+export interface ColorThemeConfig {
+  // eslint-disable-next-line
+  palette?: TMP_ColorPalette
+  tokens?: ColorTokens
+}
+
+export interface ThemeConfig {
+  color?: ColorThemeConfig
+}
+
+export const COLOR_CONFIG_BASE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'shadow/outline',
+  'shadow/umbra',
+  'shadow/penumbra',
+  'shadow/ambient',
+  'skeleton/from',
+  'skeleton/to',
+] as const
+export type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
+
+export const COLOR_CONFIG_STATE_KEYS = [
+  '_hue',
+  'bg',
+  'fg',
+  'border',
+  'focusRing',
+  'muted/fg',
+  'link/fg',
+  'code/bg',
+  'code/fg',
+  'skeleton/from',
+  'skeleton/to',
+] as const
+export type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
+
+export const COLOR_CONFIG_BLEND_KEYS = ['_blend'] as const
+export type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
+
+export type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
+
+export type ColorConfigValue =
+  | `black`
+  | `white`
+  | `black/${ColorConfigOpacityValue}`
+  | `white/${ColorConfigOpacityValue}`
+  | `${ColorHueValue}`
+  | `${ColorHueValue}/${ColorTintValue}`
+  | `${ColorHueValue}/${ColorTintValue}/${ColorConfigOpacityValue}`
+  | `${ColorTintValue}`
+  | `${ColorTintValue}/${ColorConfigOpacityValue}`
+  | ColorBlendModeValue

package/src/theme/_internal/constants.ts

@@ -0,0 +1,48 @@
+export const COLOR_HUES = [
+  'gray',
+  'cyan',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+] as const
+
+export const COLOR_TINTS = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+] as const
+
+export const COLOR_BASE_TONES = [
+  'transparent',
+  'default',
+  'primary', // todo: rename to `accent`
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+export const COLOR_STATE_TONES = [
+  'default',
+  'primary', // todo: rename to `accent`
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+export const COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const
+
+export const COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const
+
+export const COLOR_BLEND_MODES = ['multiply', 'screen'] as const

package/src/theme/_internal/helpers.ts

@@ -0,0 +1,19 @@
+import {ColorBlendModeValue} from './config'
+import {COLOR_BLEND_MODES, COLOR_BUTTON_MODES, COLOR_HUES, COLOR_TINTS} from './constants'
+import {ColorButtonMode, ColorHueValue, ColorTintValue} from './types'
+
+export function isColorBlendModeValue(str: string): str is ColorBlendModeValue {
+  return COLOR_BLEND_MODES.includes(str as ColorBlendModeValue)
+}
+
+export function isColorHueValue(str: string): str is ColorHueValue {
+  return COLOR_HUES.includes(str as ColorHueValue)
+}
+
+export function isColorTintValue(str: string): str is ColorTintValue {
+  return COLOR_TINTS.includes(str as ColorTintValue)
+}
+
+export function isColorButtonMode(str: string): str is ColorButtonMode {
+  return COLOR_BUTTON_MODES.includes(str as ColorButtonMode)
+}

package/src/theme/_internal/index.ts

@@ -0,0 +1,5 @@
+export * from './build'
+export * from './config'
+export * from './constants'
+export * from './helpers'
+export * from './types'