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

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

package/src/theme/_internal/types.ts

@@ -0,0 +1,72 @@
+import {ColorBlendModeValue} from './config'
+import {
+  COLOR_BASE_TONES,
+  COLOR_BUTTON_MODES,
+  COLOR_HUES,
+  COLOR_STATE_TONES,
+  COLOR_STATES,
+  COLOR_TINTS,
+} from './constants'
+
+export type ColorHueValue = (typeof COLOR_HUES)[number]
+
+export type ColorTintValue = (typeof COLOR_TINTS)[number]
+
+export type ColorBaseTone = (typeof COLOR_BASE_TONES)[number]
+
+export type ColorButtonMode = (typeof COLOR_BUTTON_MODES)[number]
+
+export type ColorState = (typeof COLOR_STATES)[number]
+
+export type ColorStateTone = (typeof COLOR_STATE_TONES)[number]
+
+export interface TMP_StateColorTheme {
+  _blend: ColorBlendModeValue
+  bg: string
+  bg2?: string
+  fg: string
+  border: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}
+
+export type TMP_ButtonStatesColorTheme = Record<ColorState, TMP_StateColorTheme>
+
+export type TMP_ButtonModesColorTheme = Record<ColorButtonMode, TMP_ButtonStatesColorTheme>
+
+export type TMP_ButtonColorTheme = Record<ColorStateTone, TMP_ButtonModesColorTheme>
+
+export interface TMP_BaseColorTheme {
+  _blend: ColorBlendModeValue
+  dark: boolean
+  base: {
+    bg: string
+    fg: string
+    border: string
+  }
+  button: TMP_ButtonColorTheme
+}
+
+export type TMP_ColorTheme = Record<ColorBaseTone, TMP_BaseColorTheme>
+
+export interface TMP_Theme {
+  color: {
+    light: TMP_ColorTheme
+    dark: TMP_ColorTheme
+  }
+}

package/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from './_internal'
 export * from './lib/color-fns'
 export * from './lib/theme'
 export * from './studioTheme'