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

package/src/theme/_parseColorToken.ts

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

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

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

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

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