@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/theme/v3/color/color.ts

@@ -0,0 +1,94 @@
+import {Hue} from '../../palette'
+import {
+  ThemeColorAvatar_v2,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  ThemeColorStateToneKey,
+} from '../../v2'
+
+// export interface ThemeColorAvatarHue_v2 {}
+
+export interface ThemeColorElement {
+  _hue: Hue
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
+
+export type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
+
+export type ThemeColorVariantKey = 'tinted' | 'solid'
+
+// export type ThemeColorCard_v3 = Record<ThemeColorVariantKey, ThemeColorVariant>
+
+export interface ThemeColorCard_v3 {
+  _hue: Hue
+  avatar: ThemeColorAvatar_v2
+  backdrop: string
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  token: {
+    atrule: string
+    attrName: string
+    attrValue: string
+    attribute: string
+    boolean: string
+    builtin: string
+    cdata: string
+    char: string
+    class: string
+    className: string
+    comment: string
+    constant: string
+    deleted: string
+    doctype: string
+    entity: string
+    function: string
+    hexcode: string
+    id: string
+    important: string
+    inserted: string
+    keyword: string
+    number: string
+    operator: string
+    prolog: string
+    property: string
+    pseudoClass: string
+    pseudoElement: string
+    punctuation: string
+    regex: string
+    selector: string
+    string: string
+    symbol: string
+    tag: string
+    unit: string
+    url: string
+    variable: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+  variant: Record<ThemeColorVariantKey, ThemeColorVariant>
+}
+
+export interface ThemeColorScheme_v3 {
+  card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
+}
+
+// color[scheme].card[cardTone][colorVariant][elementTone][property][level]
+export type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>

package/src/theme/v3/color/element.ts

@@ -0,0 +1,19 @@
+import {Hue} from '../../palette'
+import {ColorToken} from './token'
+
+/** @public */
+export interface ElementColorTokens {
+  _hue: Hue
+  bg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  border: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+  fg: {
+    0: [ColorToken, ColorToken]
+    4: [ColorToken, ColorToken]
+  }
+}

package/src/theme/v3/color/index.ts

@@ -0,0 +1,7 @@
+export * from './buildColor_v3'
+export * from './card'
+export * from './color'
+export * from './element'
+export * from './renderColor'
+export * from './token'
+export * from './tokens'

package/src/theme/v3/color/parseColor.test.ts

@@ -0,0 +1,79 @@
+import {parseColor} from './parseColor'
+
+it('should parse color', () => {
+  expect(parseColor('black/0.5')).toEqual({
+    color: {
+      type: 'black',
+    },
+    opacity: 0.5,
+  })
+
+  expect(parseColor('black')).toEqual({
+    color: {
+      type: 'black',
+    },
+  })
+
+  expect(parseColor('white')).toEqual({
+    color: {
+      type: 'white',
+    },
+  })
+
+  expect(parseColor('white/1')).toEqual({
+    color: {
+      type: 'white',
+    },
+    opacity: 1,
+  })
+
+  expect(parseColor('50')).toEqual({
+    color: {
+      type: 'hue',
+      tint: '50',
+    },
+  })
+
+  expect(parseColor('50/0.5')).toEqual({
+    color: {
+      type: 'hue',
+      tint: '50',
+    },
+    opacity: 0.5,
+  })
+
+  expect(parseColor('500/0.5')).toEqual({
+    color: {
+      type: 'hue',
+      tint: '500',
+    },
+    opacity: 0.5,
+  })
+
+  expect(parseColor('red/50')).toEqual({
+    color: {
+      type: 'hue',
+      hue: 'red',
+      tint: '50',
+    },
+  })
+
+  expect(parseColor('red/200/0.5 5%')).toEqual({
+    color: {
+      type: 'hue',
+      hue: 'red',
+      tint: '200',
+    },
+    opacity: 0.5,
+    mix: 5,
+  })
+
+  expect(parseColor('red/50 50%')).toEqual({
+    color: {
+      type: 'hue',
+      hue: 'red',
+      tint: '50',
+    },
+    mix: 50,
+  })
+})

package/src/theme/v3/color/parseColor.ts

@@ -0,0 +1,167 @@
+import {Hue, HUES, Tint, TINTS} from '../../palette'
+
+const RE_PERCENTAGE = /^([0-9]+)%/
+const RE_OPACITY = /^(1|0\.[0-9]+)?/
+
+export interface TokenizeColorResult {
+  color: {type: 'black' | 'white'} | {type: 'hue'; hue: Hue | undefined; tint: Tint | undefined}
+  opacity: number | undefined
+  mix: number | undefined
+}
+
+export function parseColor(str: string): TokenizeColorResult {
+  let cursor = 0
+
+  const color = getColor()
+
+  if (!color) {
+    throw new Error(`Invalid color: ${str}`)
+  }
+
+  const opacity = getOpacity()
+  const mix = getMixPercentage()
+
+  return {
+    color,
+    mix,
+    opacity,
+  }
+
+  function _consume(s: string) {
+    if (str.startsWith(s, cursor)) {
+      cursor += s.length
+
+      return s
+    }
+
+    return undefined
+  }
+
+  function _peek() {
+    return str[cursor]
+  }
+
+  function getColor(): TokenizeColorResult['color'] | undefined {
+    ignoreWhitespace()
+
+    let v = _consume('black') || _consume('white')
+
+    if (v) {
+      return {
+        type: v as 'black' | 'white',
+      }
+    }
+
+    for (const hue of HUES) {
+      v = _consume(String(hue))
+
+      if (v) {
+        if (_peek() !== '/') {
+          throw new Error(`Expected slash after hue`)
+        }
+
+        cursor += 1
+
+        const tint = getTint()
+
+        if (!tint) {
+          throw new Error(`Expected tint after hue`)
+        }
+
+        return {
+          type: 'hue',
+          hue,
+          tint,
+        }
+      }
+    }
+
+    const tint = getTint()
+
+    if (tint) {
+      return {
+        type: 'hue',
+        hue: undefined,
+        tint,
+      }
+    }
+
+    return undefined
+  }
+
+  function getTint() {
+    ignoreWhitespace()
+
+    // if (_peek() === '/') {
+    //   cursor += 1
+
+    let v = Number(str.slice(cursor, cursor + 3)) as Tint
+
+    if (TINTS.includes(v)) {
+      cursor += 3
+
+      return v
+    }
+
+    v = Number(str.slice(cursor, cursor + 2)) as Tint
+
+    if (TINTS.includes(v)) {
+      cursor += 2
+
+      return v
+    }
+
+    // for (const tint of COLOR_TINTS) {
+    //   const v = _consume(String(tint))
+
+    //   if (v) {
+    //     return tint
+    //   }
+    // }
+
+    //   cursor -= 1
+    // }
+
+    return undefined
+  }
+
+  function getMixPercentage() {
+    ignoreWhitespace()
+
+    const match = RE_PERCENTAGE.exec(str.slice(cursor))
+
+    if (match) {
+      cursor += match[0].length
+
+      return parseFloat(match[1])
+    }
+
+    return undefined
+  }
+
+  function getOpacity() {
+    ignoreWhitespace()
+
+    if (_peek() === '/') {
+      cursor += 1
+
+      const match = RE_OPACITY.exec(str.slice(cursor))
+
+      if (match) {
+        cursor += match[0].length
+
+        return parseFloat(match[1])
+      }
+
+      cursor -= 1
+    }
+
+    return undefined
+  }
+
+  function ignoreWhitespace() {
+    while (_peek() === ' ') {
+      cursor++
+    }
+  }
+}

package/src/theme/v3/color/renderColor.test.ts

@@ -0,0 +1,19 @@
+import {renderColor, RenderColorContext} from './renderColor'
+
+it('should render color', () => {
+  const context: RenderColorContext = {
+    bgVar: '--bg',
+    hue: 'gray',
+    scheme: 'light',
+  }
+
+  expect(renderColor(['500/0.2', '500/0.2'], context)).toBe(
+    `color-mix(in srgb, transparent, var(--gray-500) 20%)`,
+  )
+
+  expect(renderColor(['500', '500'], context)).toBe(`var(--gray-500)`)
+
+  expect(renderColor(['50 20%', '50 20%'], context)).toBe(
+    `color-mix(in srgb, var(--bg), var(--gray-50) 20%)`,
+  )
+})

package/src/theme/v3/color/renderColor.ts

@@ -0,0 +1,33 @@
+import {Hue} from '../../palette'
+import {ThemeColorSchemeKey} from '../../v2'
+import {parseColor} from './parseColor'
+import {ColorToken} from './token'
+
+type CSSVariableKey = `--${string}`
+
+export interface RenderColorContext {
+  bgVar: CSSVariableKey
+  hue: Hue
+  scheme: ThemeColorSchemeKey
+}
+
+export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
+  const {bgVar, hue, scheme} = context
+
+  const result = parseColor(token[scheme === 'dark' ? 0 : 1])
+
+  const colorVar =
+    result.color.type === 'hue'
+      ? `--${result.color.hue ?? hue}-${result.color.tint}`
+      : `--${result.color.type}`
+
+  if (result.mix !== undefined) {
+    return `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)`
+  }
+
+  if (result.opacity !== undefined) {
+    return `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)`
+  }
+
+  return `var(${colorVar})`
+}

package/src/theme/v3/color/token.ts

@@ -0,0 +1,17 @@
+import {Hue, Tint} from '../../palette'
+
+/** @public */
+export type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
+
+/** @public */
+export type ColorToken =
+  | `black`
+  | `black/${ColorTokenOpacityValue}`
+  | `white`
+  | `white/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint}`
+  | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
+  | `${Hue}/${Tint} ${number}%`
+  | `${Tint}`
+  | `${Tint}/${ColorTokenOpacityValue}`
+  | `${Tint} ${number}%`

package/src/theme/v3/color/tokens.ts

@@ -0,0 +1,5 @@
+import {ThemeColorCardToneKey} from '../../v2'
+import {CardColorTokens} from './card'
+
+/** @public */
+export type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>

package/src/theme/v3/defaults.ts

@@ -0,0 +1,205 @@
+import {PaletteConfig} from '../palette'
+import {PartialTokens, Tokens} from './tokens'
+
+export const defaultPalette: PaletteConfig = {
+  chroma: {min: 0.005, max: 0.2325},
+  luminosity: {min: 0.1875, max: 1},
+  hues: {
+    gray: {h: 277, c: 0.04},
+    blue: {h: 273, c: 0.185},
+    purple: {h: 295, c: 0.4},
+    magenta: {h: 12, c: 0.4},
+    red: {h: 30, c: 0.4},
+    orange: {h: 68, c: 0.4},
+    yellow: {h: 90, c: 0.4},
+    green: {h: 171, c: 0.4},
+    cyan: {h: 194, c: 0.4},
+  },
+}
+
+export const defaultTokens: PartialTokens<Tokens> = {
+  color: {
+    '*': {
+      // backdrop: ['black/0.2', '200/0.2'],
+      backdrop: ['black/0.5', 'gray/100/0.5'],
+      focusRing: ['blue/500', 'blue/300'],
+      link: {
+        fg: ['blue/400', 'blue/600'],
+      },
+      shadow: {
+        outline: ['500/0.4', '500/0.3'],
+        umbra: ['black/0.2', '500/0.1'],
+        penumbra: ['black/0.14', '500/0.07'],
+        ambient: ['black/0.12', '500/0.06'],
+      },
+      token: {
+        atrule: ['purple/300', 'purple/600'],
+        attrName: ['green/300', 'green/600'],
+        attrValue: ['yellow/300', 'yellow/600'],
+        attribute: ['yellow/300', 'yellow/600'],
+        boolean: ['purple/300', 'purple/600'],
+        builtin: ['purple/300', 'purple/600'],
+        cdata: ['yellow/300', 'yellow/600'],
+        char: ['yellow/300', 'yellow/600'],
+        class: ['orange/300', 'orange/600'],
+        className: ['cyan/300', 'cyan/600'],
+        comment: ['gray/600', 'gray/300'],
+        constant: ['purple/300', 'purple/600'],
+        deleted: ['red/300', 'red/600'],
+        entity: ['red/300', 'red/600'],
+        function: ['green/300', 'green/600'],
+        hexcode: ['blue/300', 'blue/600'],
+        id: ['purple/300', 'purple/600'],
+        important: ['purple/300', 'purple/600'],
+        inserted: ['green/300', 'green/600'],
+        keyword: ['magenta/300', 'magenta/600'],
+        number: ['purple/300', 'purple/600'],
+        operator: ['magenta/300', 'magenta/600'],
+        prolog: ['gray/300', 'gray/600'],
+        property: ['blue/300', 'blue/600'],
+        pseudoClass: ['yellow/300', 'yellow/600'],
+        pseudoElement: ['yellow/300', 'yellow/600'],
+        punctuation: ['gray/300', 'gray/600'],
+        regex: ['blue/300', 'blue/600'],
+        selector: ['red/300', 'red/600'],
+        string: ['yellow/300', 'yellow/600'],
+        symbol: ['purple/300', 'purple/600'],
+        tag: ['red/300', 'red/600'],
+        unit: ['orange/300', 'orange/600'],
+        url: ['red/300', 'red/600'],
+        variable: ['red/300', 'red/600'],
+      },
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['900', '50'],
+              4: ['800', '150'],
+            },
+            border: {
+              0: ['800', '150'],
+              4: ['600', '350'],
+            },
+            fg: {
+              0: ['100', '900'],
+              4: ['300', '700'],
+            },
+          },
+          'primary': {
+            _hue: 'blue',
+          },
+          'suggest': {
+            _hue: 'purple',
+          },
+          'positive': {
+            _hue: 'green',
+          },
+          'caution': {
+            _hue: 'yellow',
+          },
+          'critical': {
+            _hue: 'red',
+          },
+        },
+        solid: {
+          '*': {
+            bg: {
+              0: ['300', '500'],
+              4: ['200', '600'],
+            },
+            border: {
+              0: ['200', '400'],
+              4: ['100', '500'],
+            },
+            fg: {
+              0: ['black', 'white'],
+              4: ['600', '400'],
+            },
+          },
+          'default': {
+            bg: {
+              0: ['200', '800'],
+              4: ['white', 'black'],
+            },
+            border: {
+              0: ['300', '700'],
+              4: ['200', '800'],
+            },
+          },
+          'primary': {
+            _hue: 'blue',
+          },
+          'suggest': {
+            _hue: 'purple',
+          },
+          'positive': {
+            _hue: 'green',
+          },
+          'caution': {
+            _hue: 'yellow',
+          },
+          'critical': {
+            _hue: 'red',
+          },
+        },
+      },
+    },
+    'transparent': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['black', 'gray/50'],
+              4: ['900', '150'],
+            },
+            border: {
+              0: ['900', '150'],
+              4: ['700', '350'],
+            },
+            fg: {
+              0: ['150', 'black'],
+              4: ['550', '600'],
+            },
+          },
+        },
+      },
+    },
+    'default': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['gray/950', 'white'],
+              4: ['850', '100'],
+            },
+            border: {
+              0: ['850', '100'],
+              4: ['650', '300'],
+            },
+            fg: {
+              0: ['white', 'black'],
+              4: ['400', '600'],
+            },
+          },
+        },
+      },
+    },
+    'primary': {
+      _hue: 'blue',
+    },
+    'suggest': {
+      _hue: 'purple',
+    },
+    'positive': {
+      _hue: 'green',
+    },
+    'caution': {
+      _hue: 'yellow',
+    },
+    'critical': {
+      _hue: 'red',
+    },
+  },
+}
+
+// export const defaultTheme = buildTheme_v3()

package/src/theme/v3/index.ts

@@ -0,0 +1,6 @@
+export * from './buildTheme_v3'
+export * from './color'
+export * from './defaults'
+export * from './resolveTokens'
+export * from './tokens'
+export * from './types'

package/src/theme/v3/merge.ts

@@ -0,0 +1,22 @@
+export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
+  return (records.filter(Boolean) as T[]).reduce(_merge, {} as T)
+}
+
+function _merge<T extends Record<string, any>>(acc: T, source: T): T {
+  for (const key of Object.keys(source)) {
+    const prevValue = acc[key]
+    const nextValue = source[key]
+
+    if (isRecord(prevValue) && isRecord(nextValue)) {
+      ;(acc as any)[key] = merge(prevValue, nextValue)
+    } else {
+      ;(acc as any)[key] = nextValue
+    }
+  }
+
+  return acc
+}
+
+function isRecord(value: unknown): value is Record<string, any> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}