@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

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

@@ -1,67 +0,0 @@
-import {isColorButtonMode} from '../../v2'
-import {
-  isColorConfigBaseKey,
-  isColorConfigBaseTone,
-  isColorConfigBlendKey,
-  isColorConfigStateKey,
-  isColorConfigStateTone,
-} from '../helpers'
-import {TokenKeyNode} from './types'
-
-/** @internal */
-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/v3/buildTheme_v3.test.ts

@@ -1,40 +0,0 @@
-import {buildTheme_v3} from './buildTheme_v3'
-
-it('should build theme', () => {
-  const theme = buildTheme_v3({
-    tokens: {
-      color: {
-        '*': {
-          variant: {
-            tinted: {
-              '*': {
-                bg: {
-                  0: ['50', '950'],
-                },
-                fg: {
-                  0: ['900 50%', '100 50%'],
-                },
-              },
-            },
-          },
-        },
-        'primary': {
-          _hue: 'purple',
-        },
-        'positive': {
-          _hue: 'green',
-        },
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log('default', theme.color.light.card.default)
-  // eslint-disable-next-line no-console
-  console.log('primary', theme.color.light.card.primary)
-  // eslint-disable-next-line no-console
-  console.log(
-    'primary.variant.tinted.positive',
-    theme.color.light.card.primary.variant.tinted.positive,
-  )
-})

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

@@ -1,226 +0,0 @@
-import {
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorAvatar_v2,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
-} from '../../v2'
-import {CardColorTokens} from './card'
-import {
-  ThemeColor_v3,
-  ThemeColorCard_v3,
-  ThemeColorElement,
-  ThemeColorScheme_v3,
-  ThemeColorVariant,
-} from './color'
-import {ElementColorTokens} from './element'
-import {renderColor, RenderColorContext} from './renderColor'
-import {ColorTokens} from './tokens'
-
-const debug = false
-
-let nodeLen = 0
-
-/** @internal */
-export function buildColor_v3(tokens: ColorTokens): ThemeColor_v3 {
-  return {
-    dark: buildColorScheme_v3(tokens, {scheme: 'dark'}),
-    light: buildColorScheme_v3(tokens, {scheme: 'light'}),
-  }
-}
-
-function buildColorScheme_v3(
-  tokens: ColorTokens,
-  options: {scheme: ThemeColorSchemeKey},
-): ThemeColorScheme_v3 {
-  const {scheme} = options
-
-  return {
-    card: THEME_COLOR_CARD_TONES.reduce(
-      (acc, tone) => {
-        acc[tone] = buildColorCard_v3(tokens[tone], {cardTone: tone, scheme})
-
-        return acc
-      },
-      {} as Record<ThemeColorCardToneKey, ThemeColorCard_v3>,
-    ),
-  }
-}
-
-function buildColorCard_v3(
-  tokens: CardColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    scheme: ThemeColorSchemeKey
-  },
-): ThemeColorCard_v3 {
-  const {cardTone, scheme} = options
-  const context: RenderColorContext = {
-    bgVar: `--color-bg`,
-    bgValue: 'transparent',
-    hue: tokens._hue,
-    scheme,
-  }
-
-  const tintedDefaultVariant = buildColorElement_v3(tokens.variant.tinted.default, {
-    bgValue: 'transparent',
-    cardTone,
-    debugId: 'tinted',
-    scheme,
-    tone: 'default',
-  })
-
-  const bgValue = tintedDefaultVariant.bg[0]
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    avatar: THEME_COLOR_AVATAR_COLORS.reduce<ThemeColorAvatar_v2>((acc, hue) => {
-      const avatarTokens = tokens.avatar[hue]
-
-      acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {
-          bgValue,
-          bgVar: `--color-bg-1`,
-          hue: avatarTokens._hue,
-          scheme,
-        }),
-        fg: renderColor(avatarTokens.fg, {
-          bgValue,
-          bgVar: `--color-bg-1`,
-          hue: avatarTokens._hue,
-          scheme,
-        }),
-      }
-
-      return acc
-    }, {} as ThemeColorAvatar_v2),
-    backdrop: renderColor(tokens.backdrop, context),
-    code: {
-      bg: renderColor(tokens.code.bg, context),
-      fg: renderColor(tokens.code.fg, context),
-      token: {
-        atrule: renderColor(tokens.code.token.atrule, context),
-        attrName: renderColor(tokens.code.token.attrName, context),
-        attrValue: renderColor(tokens.code.token.attrValue, context),
-        attribute: renderColor(tokens.code.token.attribute, context),
-        boolean: renderColor(tokens.code.token.boolean, context),
-        builtin: renderColor(tokens.code.token.builtin, context),
-        cdata: renderColor(tokens.code.token.cdata, context),
-        char: renderColor(tokens.code.token.char, context),
-        class: renderColor(tokens.code.token.class, context),
-        className: renderColor(tokens.code.token.className, context),
-        comment: renderColor(tokens.code.token.comment, context),
-        constant: renderColor(tokens.code.token.constant, context),
-        deleted: renderColor(tokens.code.token.deleted, context),
-        doctype: renderColor(tokens.code.token.doctype, context),
-        entity: renderColor(tokens.code.token.entity, context),
-        function: renderColor(tokens.code.token.function, context),
-        hexcode: renderColor(tokens.code.token.hexcode, context),
-        id: renderColor(tokens.code.token.id, context),
-        important: renderColor(tokens.code.token.important, context),
-        inserted: renderColor(tokens.code.token.inserted, context),
-        keyword: renderColor(tokens.code.token.keyword, context),
-        number: renderColor(tokens.code.token.number, context),
-        operator: renderColor(tokens.code.token.operator, context),
-        prolog: renderColor(tokens.code.token.prolog, context),
-        property: renderColor(tokens.code.token.property, context),
-        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
-        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
-        punctuation: renderColor(tokens.code.token.punctuation, context),
-        regex: renderColor(tokens.code.token.regex, context),
-        selector: renderColor(tokens.code.token.selector, context),
-        string: renderColor(tokens.code.token.string, context),
-        symbol: renderColor(tokens.code.token.symbol, context),
-        tag: renderColor(tokens.code.token.tag, context),
-        unit: renderColor(tokens.code.token.unit, context),
-        url: renderColor(tokens.code.token.url, context),
-        variable: renderColor(tokens.code.token.variable, context),
-      },
-    },
-    focusRing: renderColor(tokens.focusRing, context),
-    shadow: {
-      outline: renderColor(tokens.shadow.outline, context),
-      umbra: renderColor(tokens.shadow.umbra, context),
-      penumbra: renderColor(tokens.shadow.penumbra, context),
-      ambient: renderColor(tokens.shadow.ambient, context),
-    },
-    skeleton: {
-      from: renderColor(tokens.skeleton.from, context),
-      to: renderColor(tokens.skeleton.to, context),
-    },
-
-    variant: {
-      solid: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-          acc[tone] = buildColorElement_v3(tokens.variant.solid[tone], {
-            bgValue,
-            cardTone,
-            debugId: `solid`,
-            scheme,
-            tone,
-          })
-
-          return acc
-        }, {} as ThemeColorVariant),
-      },
-      tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-          if (tone === 'default') {
-            acc[tone] = tintedDefaultVariant
-          } else {
-            acc[tone] = buildColorElement_v3(tokens.variant.tinted[tone], {
-              bgValue,
-              cardTone,
-              debugId: `tinted`,
-              scheme,
-              tone,
-            })
-          }
-
-          return acc
-        }, {} as ThemeColorVariant),
-      },
-    },
-  }
-}
-
-function buildColorElement_v3(
-  tokens: ElementColorTokens,
-  options: {
-    bgValue: string
-    cardTone: ThemeColorCardToneKey
-    debugId?: string
-    scheme: ThemeColorSchemeKey
-    tone?: ThemeColorStateToneKey
-  },
-): ThemeColorElement {
-  const {bgValue, cardTone, debugId, scheme, tone} = options
-
-  const path = [scheme, cardTone, debugId, tone].filter(Boolean).join('/')
-
-  if (debug) {
-    // eslint-disable-next-line no-console
-    console.log(nodeLen, path)
-    nodeLen += 1
-  }
-
-  const context: RenderColorContext = {bgValue, bgVar: `--color-bg`, hue: tokens._hue, scheme}
-
-  return {
-    _hue: tokens._hue ?? 'gray',
-    bg: {
-      0: renderColor(tokens.bg[0], context),
-      4: renderColor(tokens.bg[4], context),
-    },
-    border: {
-      0: renderColor(tokens.border[0], context),
-      4: renderColor(tokens.border[4], context),
-    },
-    fg: {
-      0: renderColor(tokens.fg[0], context),
-      4: renderColor(tokens.fg[4], context),
-    },
-  }
-}

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,20 +0,0 @@
-import {renderColor, RenderColorContext} from './renderColor'
-
-it('should render color', () => {
-  const context: RenderColorContext = {
-    bgValue: 'transparent',
-    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,43 +0,0 @@
-import {Hue} from '../../palette'
-import {ThemeColorSchemeKey} from '../../v2'
-import {parseColor} from './parseColor'
-import {ColorToken} from './token'
-
-/** @public */
-export type CSSVariableKey = `--${string}`
-
-/** @public */
-export interface RenderColorContext {
-  bgVar: CSSVariableKey
-  bgValue: string
-  hue: Hue
-  scheme: ThemeColorSchemeKey
-}
-
-/** @public */
-export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
-  const {bgValue, bgVar, hue, scheme} = context
-
-  const t = token[scheme === 'dark' ? 0 : 1]
-
-  if (t === 'inherit') {
-    return bgValue
-  }
-
-  const result = parseColor(t)
-
-  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})`
-}