@sanity/ui 3.0.2 → 4.0.0-static.2

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/{config.ts → common.ts}

@@ -1,10 +1,9 @@
-import {RootTheme_v2} from '../system'
+import type {Theme} from '../types'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
 
-export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
-  _version: 2,
+export const defaultTheme: Omit<Theme, '_version' | '_tokens' | 'color' | 'font' | 'palette'> = {
   avatar: {
     sizes: [
       {distance: -4, size: 19},
@@ -31,9 +30,9 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 3, 6, 9, 12, 21],
+  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
-    null,
+    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]},
@@ -69,16 +68,4 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  style: {
-    button: {
-      root: {
-        transition: 'background-color 100ms,border-color 100ms,color 100ms',
-      },
-    },
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  },
 }