@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -1,193 +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-1`, hue: tokens._hue, scheme}
-
-  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, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-        fg: renderColor(avatarTokens.fg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-      }
-
-      return acc
-    }, {} as ThemeColorAvatar_v2),
-    backdrop: renderColor(tokens.backdrop, 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),
-    },
-    token: {
-      atrule: renderColor(tokens.token.atrule, context),
-      attrName: renderColor(tokens.token.attrName, context),
-      attrValue: renderColor(tokens.token.attrValue, context),
-      attribute: renderColor(tokens.token.attribute, context),
-      boolean: renderColor(tokens.token.boolean, context),
-      builtin: renderColor(tokens.token.builtin, context),
-      cdata: renderColor(tokens.token.cdata, context),
-      char: renderColor(tokens.token.char, context),
-      class: renderColor(tokens.token.class, context),
-      className: renderColor(tokens.token.className, context),
-      comment: renderColor(tokens.token.comment, context),
-      constant: renderColor(tokens.token.constant, context),
-      deleted: renderColor(tokens.token.deleted, context),
-      doctype: renderColor(tokens.token.doctype, context),
-      entity: renderColor(tokens.token.entity, context),
-      function: renderColor(tokens.token.function, context),
-      hexcode: renderColor(tokens.token.hexcode, context),
-      id: renderColor(tokens.token.id, context),
-      important: renderColor(tokens.token.important, context),
-      inserted: renderColor(tokens.token.inserted, context),
-      keyword: renderColor(tokens.token.keyword, context),
-      number: renderColor(tokens.token.number, context),
-      operator: renderColor(tokens.token.operator, context),
-      prolog: renderColor(tokens.token.prolog, context),
-      property: renderColor(tokens.token.property, context),
-      pseudoClass: renderColor(tokens.token.pseudoClass, context),
-      pseudoElement: renderColor(tokens.token.pseudoElement, context),
-      punctuation: renderColor(tokens.token.punctuation, context),
-      regex: renderColor(tokens.token.regex, context),
-      selector: renderColor(tokens.token.selector, context),
-      string: renderColor(tokens.token.string, context),
-      symbol: renderColor(tokens.token.symbol, context),
-      tag: renderColor(tokens.token.tag, context),
-      unit: renderColor(tokens.token.unit, context),
-      url: renderColor(tokens.token.url, context),
-      variable: renderColor(tokens.token.variable, context),
-    },
-    variant: {
-      solid: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-              cardTone,
-              debugId: `solid`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-      tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
-              cardTone,
-              debugId: `tinted`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
-      },
-    },
-  }
-}
-
-function buildColorElement_v3(
-  tokens: ElementColorTokens,
-  options: {
-    cardTone: ThemeColorCardToneKey
-    debugId?: string
-    scheme: ThemeColorSchemeKey
-    tone?: ThemeColorStateToneKey
-  },
-): ThemeColorElement {
-  const {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 = {bgVar: `--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/card.ts

@@ -1,116 +0,0 @@
-import {Hue} from '../../palette'
-import {ThemeColorStateToneKey} from '../../v2'
-import {ElementColorTokens} from './element'
-import {ColorToken} from './token'
-
-/** @public */
-export interface CardColorTokens {
-  _hue: Hue
-  avatar: Record<
-    Hue,
-    {
-      _hue: Hue
-      bg: [ColorToken, ColorToken]
-      fg: [ColorToken, ColorToken]
-    }
-  >
-  backdrop: [ColorToken, ColorToken]
-  focusRing: [ColorToken, ColorToken]
-  link: {
-    fg: [ColorToken, ColorToken]
-  }
-  shadow: {
-    outline: [ColorToken, ColorToken]
-    umbra: [ColorToken, ColorToken]
-    penumbra: [ColorToken, ColorToken]
-    ambient: [ColorToken, ColorToken]
-  }
-  skeleton: {
-    from: [ColorToken, ColorToken]
-    to: [ColorToken, ColorToken]
-  }
-  token: {
-    atrule: [ColorToken, ColorToken]
-    attrName: [ColorToken, ColorToken]
-    attrValue: [ColorToken, ColorToken]
-    attribute: [ColorToken, ColorToken]
-    boolean: [ColorToken, ColorToken]
-    builtin: [ColorToken, ColorToken]
-    cdata: [ColorToken, ColorToken]
-    char: [ColorToken, ColorToken]
-    class: [ColorToken, ColorToken]
-    className: [ColorToken, ColorToken]
-    comment: [ColorToken, ColorToken]
-    constant: [ColorToken, ColorToken]
-    deleted: [ColorToken, ColorToken]
-    doctype: [ColorToken, ColorToken]
-    entity: [ColorToken, ColorToken]
-    function: [ColorToken, ColorToken]
-    hexcode: [ColorToken, ColorToken]
-    id: [ColorToken, ColorToken]
-    important: [ColorToken, ColorToken]
-    inserted: [ColorToken, ColorToken]
-    keyword: [ColorToken, ColorToken]
-    number: [ColorToken, ColorToken]
-    operator: [ColorToken, ColorToken]
-    prolog: [ColorToken, ColorToken]
-    property: [ColorToken, ColorToken]
-    pseudoClass: [ColorToken, ColorToken]
-    pseudoElement: [ColorToken, ColorToken]
-    punctuation: [ColorToken, ColorToken]
-    regex: [ColorToken, ColorToken]
-    selector: [ColorToken, ColorToken]
-    string: [ColorToken, ColorToken]
-    symbol: [ColorToken, ColorToken]
-    tag: [ColorToken, ColorToken]
-    unit: [ColorToken, ColorToken]
-    url: [ColorToken, ColorToken]
-    variable: [ColorToken, ColorToken]
-  }
-  variant: {
-    solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-    tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
-  }
-}
-
-// /**
-//  * @public
-//  */
-// export interface ThemeColorSyntax {
-//   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
-// }

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

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

@@ -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%)`,
-  )
-})