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

package/src/theme/config/tokens/parseTokenKey.test.ts

@@ -0,0 +1,64 @@
+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',
+  })
+
+  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',
+  })
+
+  expect(parseTokenKey('button/*/default/_blend')).toEqual({
+    type: 'button',
+    tone: '*',
+    mode: 'default',
+    key: '_blend',
+  })
+})

package/src/theme/config/tokens/parseTokenKey.ts

@@ -0,0 +1,66 @@
+import {isColorButtonMode} from '../../system'
+import {
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+} from '../helpers'
+import {TokenKeyNode} from './types'
+
+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/config/tokens/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/config/tokens/parseTokenValue.ts

@@ -0,0 +1,102 @@
+import {isColorBlendModeValue, isColorHueKey, isColorTintKey} from '../../system'
+import {isColorOpacityValue, isColorValue} from '../helpers'
+import {TokenValueNode} from './types'
+
+export function parseTokenValue(str: string): TokenValueNode | undefined {
+  const segments = str.split('/')
+  const segment0 = segments.shift() || ''
+
+  if (isColorTintKey(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 (isColorHueKey(segment0)) {
+    const hue = segment0
+    const segment1 = segments.shift() || ''
+
+    if (isColorTintKey(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/config/tokens/types.ts

@@ -0,0 +1,51 @@
+import {ColorHueKey, ColorTintKey} from '@sanity/color'
+import {ThemeColorBlendModeKey, ThemeColorButtonModeKey} from '../../system'
+import {
+  ColorConfigCardKey,
+  ColorConfigCardTone,
+  ColorConfigBlendKey,
+  ColorConfigStateKey,
+  ColorConfigStateTone,
+} from '../system'
+
+/** @internal */
+export interface TokenBaseKeyNode {
+  type: 'base'
+  tone: ColorConfigCardTone
+  key: ColorConfigCardKey | ColorConfigBlendKey
+}
+
+/** @internal */
+export interface TokenButtonKeyNode {
+  type: 'button'
+  tone: ColorConfigStateTone
+  mode: ThemeColorButtonModeKey
+  key: ColorConfigStateKey | ColorConfigBlendKey
+}
+
+/** @internal */
+export type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+
+/** @internal */
+export interface TokenColorValueNode {
+  type: 'color'
+  key?: 'black' | 'white' | `${ColorHueKey}/${ColorTintKey}` | ColorTintKey
+  hue?: ColorHueKey
+  tint?: ColorTintKey
+  opacity?: number
+}
+
+/** @internal */
+export interface TokenHueValueNode {
+  type: 'hue'
+  value?: ColorHueKey
+}
+
+/** @internal */
+export interface TokenBlendModeValueNode {
+  type: 'blendMode'
+  value?: ThemeColorBlendModeKey
+}
+
+/** @internal */
+export type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode

package/src/theme/config/types.ts

@@ -0,0 +1,45 @@
+import {ColorHueKey, ColorTint as ColorPaletteValue, ColorTintKey} from '@sanity/color'
+import {
+  ThemeAvatar_v2,
+  ThemeFocusRing,
+  ThemeFontWeightKey,
+  ThemeFonts,
+  ThemeInput_v2,
+  ThemeLayer,
+  ThemeShadow,
+  ThemeStyles,
+} from '../system'
+import {ThemeColorTokens} from './tokens'
+
+/** @public */
+export type ThemeColorPalette = {
+  black: string | ColorPaletteValue
+  white: string | ColorPaletteValue
+} & Record<ColorHueKey, Record<ColorTintKey, string | ColorPaletteValue>>
+
+/** @public */
+export interface ThemeConfig {
+  avatar?: ThemeAvatar_v2
+  button?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    textWeight: ThemeFontWeightKey
+  }
+  card?: {
+    border: {width: number}
+    focusRing: ThemeFocusRing
+    shadow: {outline: number}
+  }
+  color?: ThemeColorTokens
+  container?: number[]
+  font?: ThemeFonts
+  input?: ThemeInput_v2
+  layer?: ThemeLayer
+  media?: number[]
+  palette?: ThemeColorPalette
+  radius?: number[]
+  shadow?: Array<ThemeShadow | null>
+  space?: number[]
+  /** @internal */
+  style?: ThemeStyles
+}

package/src/theme/defaults/colorPalette.ts

@@ -0,0 +1,5 @@
+import {color} from '@sanity/color'
+
+import {ThemeColorPalette} from '../config'
+
+export const defaultColorPalette: ThemeColorPalette = color