@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/theme/_parseColorToken.ts

@@ -1,180 +0,0 @@
-import {HUES, TINTS} from './constants'
-import type {ColorToken, Hue, Tint} from './types'
-
-const RE_PERCENTAGE = /^([0-9]+)%/
-const RE_OPACITY = /^(1|0\.[0-9]+)?/
-
-/** @internal */
-export interface ColorNode {
-  type: 'color'
-  name: 'black' | 'white'
-  /** Between 0 and 1 */
-  opacity: number
-  /** Between 0 and 1 */
-  mix: number
-}
-
-/** @internal */
-export interface ColorTintNode {
-  type: 'tint'
-  hue: Hue
-  tint: Tint
-  /** Between 0 and 1 */
-  opacity: number
-  /** Between 0 and 1 */
-  mix: number
-}
-
-/** @internal */
-export interface ColorInheritNode {
-  type: 'inherit'
-}
-
-/** @internal */
-export type TokenizeColorResult = ColorNode | ColorTintNode | ColorInheritNode
-
-/** @internal */
-export function _parseColorToken(str: ColorToken, options: {defaultHue: Hue}): TokenizeColorResult {
-  const {defaultHue} = options
-
-  let cursor = 0
-
-  return parseColorNode()
-
-  function _consume(s: string) {
-    if (str.startsWith(s, cursor)) {
-      cursor += s.length
-
-      return s
-    }
-
-    return undefined
-  }
-
-  function _peek() {
-    return str[cursor]
-  }
-
-  function parseColorNode(): ColorNode | ColorTintNode | ColorInheritNode {
-    ignoreWhitespace()
-
-    let v = _consume('black') || _consume('white')
-
-    if (v) {
-      return {
-        type: 'color',
-        name: v as 'black' | 'white',
-        opacity: parseOpacity() ?? 1,
-        mix: parseMix() ?? 1,
-      }
-    }
-
-    for (const hue of HUES) {
-      v = _consume(String(hue))
-
-      if (v) {
-        if (_peek() !== '-') {
-          throw new Error(`Expected "-" after hue key`)
-        }
-
-        cursor += 1
-
-        const tint = parseTint()
-
-        if (!tint) {
-          throw new Error(`Expected tint after hue`)
-        }
-
-        return {
-          type: 'tint',
-          hue,
-          tint,
-          opacity: parseOpacity() ?? 1,
-          mix: parseMix() ?? 1,
-        }
-      }
-    }
-
-    const tint = parseTint()
-
-    if (tint) {
-      return {
-        type: 'tint',
-        hue: defaultHue,
-        tint,
-        opacity: parseOpacity() ?? 1,
-        mix: parseMix() ?? 1,
-      }
-    }
-
-    if (str === 'inherit') {
-      return {
-        type: 'inherit',
-      }
-    }
-
-    throw new Error(`Invalid color: ${str}`)
-  }
-
-  function parseTint() {
-    ignoreWhitespace()
-
-    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
-    }
-
-    return undefined
-  }
-
-  function parseMix() {
-    ignoreWhitespace()
-
-    const match = RE_PERCENTAGE.exec(str.slice(cursor))
-
-    if (match) {
-      cursor += match[0].length
-
-      return parseFloat(match[1]) / 100
-    }
-
-    return undefined
-  }
-
-  function parseOpacity() {
-    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/buildTheme.ts

@@ -1,32 +0,0 @@
-import {black, hues, white} from '@sanity/color'
-
-import {defaultColor} from './defaults/color'
-import {defaultTheme} from './defaults/common'
-import {defaultFonts} from './defaults/fonts'
-import {resolveTokens} from './resolveTokens'
-import type {Theme, ThemeOptions} from './types'
-
-/** @public */
-export function buildTheme(options?: ThemeOptions): Theme {
-  const tokens = resolveTokens({
-    color: options?.color ?? defaultColor,
-  })
-
-  return {
-    _version: 3,
-    _tokens: tokens,
-    avatar: defaultTheme.avatar,
-    button: defaultTheme.button,
-    card: defaultTheme.card,
-    color: tokens.color,
-    container: defaultTheme.container,
-    font: defaultFonts,
-    input: defaultTheme.input,
-    layer: defaultTheme.layer,
-    media: defaultTheme.media,
-    palette: {black, white, hues},
-    radius: defaultTheme.radius,
-    shadow: defaultTheme.shadow,
-    space: defaultTheme.space,
-  }
-}

package/src/theme/constants.ts

@@ -1,90 +0,0 @@
-/** @public */
-export const HUES = [
-  'gray',
-  'blue',
-  'purple',
-  'magenta',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'cyan',
-] as const
-
-/** @public */
-export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
-
-/** @public */
-export const AVATAR_SIZE = [0, 1, 2, 3] as const
-
-/** @public */
-export const CONTAINER_SCALE = [0, 1, 2, 3, 4, 5] as const
-
-/** @public */
-export const CONTAINER: [...typeof CONTAINER_SCALE, 'auto'] = [...CONTAINER_SCALE, 'auto']
-
-/** @public */
-export const RADIUS = [0, 1, 2, 3, 4, 5, 6] as const
-
-/** @public */
-export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
-
-/** @public */
-export const FONT_CODE_SIZE = [0, 1, 2, 3, 4] as const
-
-/** @public */
-export const FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5] as const
-
-/** @public */
-export const FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5] as const
-
-/** @public */
-export const FONT_TEXT_SIZE = [0, 1, 2, 3, 4] as const
-
-/** @public */
-export const SHADOW = [0, 1, 2, 3, 4, 5] as const
-
-/** @public */
-export const COLOR_SCHEMES = ['light', 'dark'] as const
-
-/** @public */
-export const COLOR_VARIANTS = ['tinted', 'solid'] as const
-
-/** @public */
-export const AVATAR_COLORS = [
-  'gray',
-  'blue',
-  'purple',
-  'magenta',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'cyan',
-] as const
-
-/** @public */
-export const CARD_TONES = [
-  'transparent',
-  'default',
-  'neutral',
-  'primary', // selections
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-] as const
-
-/** @public */
-export const ELEMENT_TONES = [
-  'default',
-  'neutral',
-  'primary', // selections
-  'suggest',
-  'positive',
-  'caution',
-  'critical',
-] as const
-
-/** @public */
-export const BUTTON_MODES = ['default', 'ghost', 'bleed'] as const

package/src/theme/defaults/color.ts

@@ -1,197 +0,0 @@
-import type {ColorTokens, PartialTokens} from '../types'
-
-/** @internal */
-export const defaultColor: PartialTokens<ColorTokens> = {
-  '*': {
-    backdrop: ['gray-100/0.5', 'black/0.5'],
-    code: {
-      bg: ['50', '950'],
-      fg: ['700', '300'],
-      token: {
-        atrule: ['purple-600', 'purple-400'],
-        attrName: ['green-600', 'green-400'],
-        attrValue: ['yellow-600', 'yellow-400'],
-        attribute: ['yellow-600', 'yellow-400'],
-        boolean: ['purple-600', 'purple-400'],
-        builtin: ['purple-600', 'purple-400'],
-        cdata: ['yellow-600', 'yellow-400'],
-        char: ['yellow-600', 'yellow-400'],
-        class: ['orange-600', 'orange-400'],
-        className: ['cyan-600', 'cyan-400'],
-        comment: ['gray-400', 'gray-600'],
-        constant: ['purple-600', 'purple-400'],
-        deleted: ['red-600', 'red-400'],
-        entity: ['red-600', 'red-400'],
-        function: ['green-600', 'green-400'],
-        hexcode: ['blue-600', 'blue-400'],
-        id: ['purple-600', 'purple-400'],
-        important: ['purple-600', 'purple-400'],
-        inserted: ['green-600', 'green-400'],
-        keyword: ['magenta-600', 'magenta-400'],
-        number: ['purple-600', 'purple-400'],
-        operator: ['magenta-600', 'magenta-400'],
-        prolog: ['gray-600', 'gray-400'],
-        property: ['blue-600', 'blue-400'],
-        pseudoClass: ['yellow-600', 'yellow-400'],
-        pseudoElement: ['yellow-600', 'yellow-400'],
-        punctuation: ['gray-600', 'gray-400'],
-        regex: ['blue-600', 'blue-400'],
-        selector: ['red-600', 'red-400'],
-        string: ['yellow-600', 'yellow-400'],
-        symbol: ['purple-600', 'purple-400'],
-        tag: ['red-600', 'red-400'],
-        unit: ['orange-600', 'orange-400'],
-        url: ['red-600', 'red-400'],
-        variable: ['red-600', 'red-400'],
-      },
-    },
-    focusRing: ['blue-500', 'blue-500'],
-    link: {
-      fg: ['blue-600', 'blue-400'],
-    },
-    shadow: {
-      outline: ['600/0.3', '500/0.4'],
-      umbra: ['600/0.1', 'black/0.2'],
-      penumbra: ['600/0.07', 'black/0.14'],
-      ambient: ['600/0.06', 'black/0.12'],
-    },
-    skeleton: {
-      from: ['200 70%', '800 35%'],
-      to: ['200 40%', '800 50%'],
-    },
-    variant: {
-      tinted: {
-        '*': {
-          bg: {
-            0: ['100 75%', '900 75%'],
-            4: ['300', '700'],
-          },
-          border: {
-            0: ['200', '700 50%'],
-            4: ['300 75%', '500'],
-          },
-          fg: {
-            0: ['900', '100'],
-            4: ['700', '300'],
-          },
-        },
-        'primary': {
-          _hue: 'blue',
-          bg: {0: ['inherit', 'inherit']},
-        },
-        'suggest': {
-          _hue: 'purple',
-          bg: {0: ['inherit', 'inherit']},
-        },
-        'positive': {
-          _hue: 'green',
-          bg: {0: ['inherit', 'inherit']},
-        },
-        'caution': {
-          _hue: 'yellow',
-          bg: {0: ['inherit', 'inherit']},
-        },
-        'critical': {
-          _hue: 'red',
-          bg: {0: ['inherit', 'inherit']},
-        },
-      },
-      solid: {
-        '*': {
-          bg: {
-            0: ['500', '400'],
-            4: ['600', '300'],
-          },
-          border: {
-            0: ['400', '200'],
-            4: ['500', '100'],
-          },
-          fg: {
-            0: ['white', 'black'],
-            4: ['200', '700'],
-          },
-        },
-        'default': {
-          bg: {
-            0: ['800', '200'],
-            4: ['black', 'white'],
-          },
-          border: {
-            0: ['700', '300'],
-            4: ['800', '200'],
-          },
-        },
-        'primary': {
-          _hue: 'blue',
-        },
-        'suggest': {
-          _hue: 'purple',
-        },
-        'positive': {
-          _hue: 'green',
-        },
-        'caution': {
-          _hue: 'yellow',
-        },
-        'critical': {
-          _hue: 'red',
-        },
-      },
-    },
-  },
-  'transparent': {
-    variant: {
-      tinted: {
-        '*': {
-          bg: {
-            0: ['gray-50', 'black'],
-            4: ['300 75%', '700 75%'],
-          },
-          border: {
-            0: ['200', '800 75%'],
-            4: ['400', '700'],
-          },
-          fg: {
-            0: ['black', '100'],
-            4: ['700', '400'],
-          },
-        },
-      },
-    },
-  },
-  'default': {
-    variant: {
-      tinted: {
-        '*': {
-          bg: {
-            0: ['white', '950'],
-            4: ['300 75%', '700'],
-          },
-          border: {
-            0: ['100', '800 75%'],
-            4: ['300', '700'],
-          },
-          fg: {
-            0: ['black', 'white'],
-            4: ['600', '400'],
-          },
-        },
-      },
-    },
-  },
-  'primary': {
-    _hue: 'blue',
-  },
-  'suggest': {
-    _hue: 'purple',
-  },
-  'positive': {
-    _hue: 'green',
-  },
-  'caution': {
-    _hue: 'yellow',
-  },
-  'critical': {
-    _hue: 'red',
-  },
-}

package/src/theme/defaults/common.ts

@@ -1,71 +0,0 @@
-import type {Theme} from '../types'
-
-const BORDER_WIDTH = 1
-const OUTLINE_WIDTH = 0.5
-
-export const defaultTheme: Omit<Theme, '_version' | '_tokens' | 'color' | 'font' | 'palette'> = {
-  avatar: {
-    sizes: [
-      {distance: -4, size: 19},
-      {distance: -4, size: 25},
-      {distance: -8, size: 33},
-      {distance: -12, size: 49},
-    ],
-    focusRing: {offset: 1, width: 1},
-  },
-  button: {
-    textWeight: 'medium',
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-  },
-  card: {
-    border: {width: BORDER_WIDTH},
-    focusRing: {offset: -1, width: 1},
-    shadow: {outline: OUTLINE_WIDTH},
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: {zOffset: 600},
-    popover: {zOffset: 400},
-    tooltip: {zOffset: 200},
-  },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
-  shadow: [
-    undefined,
-    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
-    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
-    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
-    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: BORDER_WIDTH,
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {offset: -1, width: 1},
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {offset: -1, width: 1},
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-      focusRing: {offset: 1, width: 1},
-    },
-    select: {
-      focusRing: {offset: -1, width: 1},
-    },
-    text: {
-      focusRing: {offset: -1, width: 1},
-    },
-  },
-}