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

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/defaultTokens.ts

@@ -0,0 +1,201 @@
+import {PartialTokens, Tokens} from './tokens'
+
+export const defaultTokens: PartialTokens<Tokens> = {
+  color: {
+    '*': {
+      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: ['700', '300'],
+            },
+            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

@@ -0,0 +1,6 @@
+export * from './buildTheme_v3'
+export * from './color'
+export * from './defaultTokens'
+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)
+}

package/src/theme/v3/resolveTokens.ts

@@ -0,0 +1,204 @@
+import {
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_STATE_TONES,
+  ThemeColorCardToneKey,
+  ThemeColorStateToneKey,
+} from '../v2'
+import {CardColorTokens} from './color/card'
+import {ElementColorTokens} from './color/element'
+import {merge} from './merge'
+import {PartialTokens, Tokens} from './tokens'
+
+const defaultElementTokens: ElementColorTokens = {
+  _hue: 'gray',
+  bg: {
+    0: ['950', '50'],
+    4: ['700', '300'],
+  },
+  border: {
+    0: ['700', '300'],
+    4: ['400', '600'],
+  },
+  fg: {
+    0: ['100', '900'],
+    4: ['400', '600'],
+  },
+}
+
+/** @internal */
+export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
+  return {
+    color: {
+      '*': resolveCardColorTokens(tokens.color?.['*']),
+
+      ...THEME_COLOR_CARD_TONES.reduce(
+        (acc, tone) => {
+          return {
+            ...acc,
+            [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
+          }
+        },
+        {} as Record<ThemeColorCardToneKey, CardColorTokens>,
+      ),
+    },
+  }
+}
+
+function resolveCardColorTokens(
+  tokens: PartialTokens<CardColorTokens> | undefined,
+): CardColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    avatar: {
+      gray: {
+        _hue: tokens?.avatar?.gray?._hue ?? 'gray',
+        bg: tokens?.avatar?.gray?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
+      },
+      blue: {
+        _hue: tokens?.avatar?.blue?._hue ?? 'blue',
+        bg: tokens?.avatar?.blue?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
+      },
+      purple: {
+        _hue: tokens?.avatar?.purple?._hue ?? 'purple',
+        bg: tokens?.avatar?.purple?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
+      },
+      magenta: {
+        _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
+        bg: tokens?.avatar?.magenta?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
+      },
+      red: {
+        _hue: tokens?.avatar?.red?._hue ?? 'red',
+        bg: tokens?.avatar?.red?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
+      },
+      orange: {
+        _hue: tokens?.avatar?.orange?._hue ?? 'orange',
+        bg: tokens?.avatar?.orange?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
+      },
+      yellow: {
+        _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
+        bg: tokens?.avatar?.yellow?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
+      },
+      green: {
+        _hue: tokens?.avatar?.green?._hue ?? 'green',
+        bg: tokens?.avatar?.green?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
+      },
+      cyan: {
+        _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
+        bg: tokens?.avatar?.cyan?.bg ?? ['400', '500'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
+      },
+    },
+    backdrop: tokens?.backdrop ?? ['900', '100'],
+    code: {
+      bg: tokens?.code?.bg ?? ['950', '50'],
+      fg: tokens?.code?.fg ?? ['400', '600'],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ['400', '600'],
+        attribute: tokens?.code?.token?.attribute ?? ['400', '600'],
+        attrName: tokens?.code?.token?.attrName ?? ['400', '600'],
+        attrValue: tokens?.code?.token?.attrValue ?? ['400', '600'],
+        boolean: tokens?.code?.token?.boolean ?? ['400', '600'],
+        builtin: tokens?.code?.token?.builtin ?? ['400', '600'],
+        cdata: tokens?.code?.token?.cdata ?? ['400', '600'],
+        char: tokens?.code?.token?.char ?? ['400', '600'],
+        class: tokens?.code?.token?.class ?? ['400', '600'],
+        className: tokens?.code?.token?.className ?? ['400', '600'],
+        comment: tokens?.code?.token?.comment ?? ['600', '400'],
+        constant: tokens?.code?.token?.constant ?? ['400', '600'],
+        deleted: tokens?.code?.token?.deleted ?? ['400', '600'],
+        doctype: tokens?.code?.token?.doctype ?? ['400', '600'],
+        entity: tokens?.code?.token?.entity ?? ['400', '600'],
+        function: tokens?.code?.token?.function ?? ['400', '600'],
+        hexcode: tokens?.code?.token?.hexcode ?? ['400', '600'],
+        id: tokens?.code?.token?.id ?? ['400', '600'],
+        important: tokens?.code?.token?.important ?? ['400', '600'],
+        inserted: tokens?.code?.token?.inserted ?? ['400', '600'],
+        keyword: tokens?.code?.token?.keyword ?? ['400', '600'],
+        number: tokens?.code?.token?.number ?? ['400', '600'],
+        operator: tokens?.code?.token?.operator ?? ['400', '600'],
+        prolog: tokens?.code?.token?.prolog ?? ['400', '600'],
+        property: tokens?.code?.token?.property ?? ['400', '600'],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['400', '600'],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['400', '600'],
+        punctuation: tokens?.code?.token?.punctuation ?? ['400', '600'],
+        regex: tokens?.code?.token?.regex ?? ['400', '600'],
+        selector: tokens?.code?.token?.selector ?? ['400', '600'],
+        string: tokens?.code?.token?.string ?? ['400', '600'],
+        symbol: tokens?.code?.token?.symbol ?? ['400', '600'],
+        tag: tokens?.code?.token?.tag ?? ['400', '600'],
+        unit: tokens?.code?.token?.unit ?? ['400', '600'],
+        url: tokens?.code?.token?.url ?? ['400', '600'],
+        variable: tokens?.code?.token?.variable ?? ['400', '600'],
+      },
+    },
+    focusRing: tokens?.focusRing ?? ['500', '500'],
+    link: {
+      fg: tokens?.link?.fg ?? ['400', '600'],
+    },
+    shadow: {
+      outline: tokens?.shadow?.outline ?? ['500', '500'],
+      umbra: tokens?.shadow?.umbra ?? ['500', '500'],
+      penumbra: tokens?.shadow?.penumbra ?? ['500', '500'],
+      ambient: tokens?.shadow?.ambient ?? ['500', '500'],
+    },
+    skeleton: {
+      from: tokens?.skeleton?.from ?? ['900', '100'],
+      to: tokens?.skeleton?.to ?? ['950', '50'],
+    },
+
+    variant: {
+      solid: {
+        '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
+        ...THEME_COLOR_STATE_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+        ),
+      },
+      tinted: {
+        '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
+        ...THEME_COLOR_STATE_TONES.reduce(
+          (acc, tone) => {
+            acc[tone] = resolveElementTokens(
+              merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
+            )
+
+            return acc
+          },
+          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+        ),
+      },
+    },
+  }
+}
+
+function resolveElementTokens(tokens?: PartialTokens<ElementColorTokens>): ElementColorTokens {
+  return {
+    _hue: tokens?._hue ?? 'gray',
+    bg: {
+      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
+      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4],
+    },
+    border: {
+      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
+      4: tokens?.border?.[4] ?? defaultElementTokens.border[4],
+    },
+    fg: {
+      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
+      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4],
+    },
+  }
+}

package/src/theme/v3/tokens.ts

@@ -0,0 +1,16 @@
+import {ColorToken} from './color/token'
+import {ColorTokens} from './color/tokens'
+
+/** @public */
+export interface Tokens {
+  color: ColorTokens
+}
+
+/** @public */
+export type PartialTokens<T> = T extends [ColorToken, ColorToken]
+  ? T
+  : T extends {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+    ? {
+        [P in keyof T]?: PartialTokens<T[P]>
+      }
+    : T