@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,98 +0,0 @@
-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
-  code: {
-    bg: string
-    fg: 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
-    }
-  }
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: 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

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

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

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

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

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

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

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

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

package/src/theme/v3/defaults.ts

@@ -1,202 +0,0 @@
-import {PartialTokens, Tokens} from './tokens'
-
-export const defaultTokens: PartialTokens<Tokens> = {
-  color: {
-    '*': {
-      // backdrop: ['black/0.2', '200/0.2'],
-      backdrop: ['black/0.5', 'gray/100/0.5'],
-      code: {
-        bg: ['950', '50'],
-        fg: ['300', '700'],
-        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'],
-        },
-      },
-      focusRing: ['blue/500', 'blue/500'],
-      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'],
-      },
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['950', '50'],
-              4: ['800', '200'],
-            },
-            border: {
-              0: ['700', '100'],
-              4: ['500', '300'],
-            },
-            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: ['400', '500'],
-              4: ['300', '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: ['800', '300 50%'],
-            },
-            border: {
-              0: ['800', '300 40%'],
-              4: ['600', '300'],
-            },
-            fg: {
-              0: ['100', 'black'],
-              4: ['400', '700'],
-            },
-          },
-        },
-      },
-    },
-    'default': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['950', 'white'],
-              4: ['800', '200'],
-            },
-            border: {
-              0: ['800', '100'],
-              4: ['600', '300'],
-            },
-            fg: {
-              0: ['white', 'black'],
-              4: ['400', '600'],
-            },
-          },
-        },
-      },
-    },
-    'neutral': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['700', '200'],
-            },
-          },
-        },
-      },
-    },
-    'primary': {
-      _hue: 'blue',
-    },
-    'suggest': {
-      _hue: 'purple',
-    },
-    'positive': {
-      _hue: 'green',
-    },
-    'caution': {
-      _hue: 'yellow',
-    },
-    'critical': {
-      _hue: 'red',
-    },
-  },
-}

package/src/theme/v3/index.ts

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

@@ -1,22 +0,0 @@
-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)
-}