@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

package/src/theme/v2/defaults/config.ts

@@ -0,0 +1,84 @@
+import type {RootTheme_v2} from '../theme'
+
+const BORDER_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
+  _version: 2,
+  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: [
+    null,
+    {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},
+    },
+  },
+  style: {
+    button: {
+      root: {
+        transition: 'background-color 100ms,border-color 100ms,color 100ms',
+      },
+    },
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  },
+}

package/src/theme/v2/defaults/fonts.ts

@@ -0,0 +1,227 @@
+import type {ThemeFonts} from '../../v0'
+
+export const defaultThemeFonts: ThemeFonts = {
+  code: {
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  heading: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 17,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 29,
+        letterSpacing: -0.25,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: -0.5,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: -1,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: -1,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 500,
+      medium: 600,
+      semibold: 700,
+      bold: 800,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 9.5,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 10.8,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.25,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 1.5,
+        descenderHeight: 2.5,
+        fontSize: 13.6,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15,
+        iconSize: 23,
+        lineHeight: 15,
+        letterSpacing: 0.5,
+      },
+    ],
+  },
+  text: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    sizes: [
+      {
+        ascenderHeight: 4,
+        descenderHeight: 4,
+        fontSize: 10,
+        iconSize: 17,
+        lineHeight: 15,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 5,
+        descenderHeight: 5,
+        fontSize: 13,
+        iconSize: 21,
+        lineHeight: 19,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 6,
+        descenderHeight: 6,
+        fontSize: 15,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7,
+        descenderHeight: 7,
+        fontSize: 18,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 21,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+      },
+    ],
+  },
+}

package/src/theme/v2/index.ts

@@ -1,4 +1,6 @@
 export * from './avatar'
+export * from './build'
 export * from './color'
+export * from './config'
 export * from './input'
 export * from './theme'

package/src/theme/v2/input.ts

@@ -1,8 +1,6 @@
-import {ThemeFocusRing} from '../v0/focusRing'
+import type {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeInput_v2 {
   checkbox: {
     size: number

package/src/theme/v2/theme.ts

@@ -1,15 +1,13 @@
-import {ThemeFocusRing} from '../v0/focusRing'
-import {ThemeFonts, ThemeFontWeightKey} from '../v0/font'
-import {ThemeLayer} from '../v0/layer'
-import {ThemeShadow} from '../v0/shadow'
-import {ThemeStyles} from '../v0/styles'
-import {ThemeAvatar_v2} from './avatar'
-import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
-import {ThemeInput_v2} from './input'
+import type {ThemeFocusRing} from '../v0/focusRing'
+import type {ThemeFonts, ThemeFontWeightKey} from '../v0/font'
+import type {ThemeLayer} from '../v0/layer'
+import type {ThemeShadow} from '../v0/shadow'
+import type {ThemeStyles} from '../v0/styles'
+import type {ThemeAvatar_v2} from './avatar'
+import type {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
+import type {ThemeInput_v2} from './input'
 
-/**
- * @public
- */
+/** @public */
 export interface RootTheme_v2 {
   _version: 2
   avatar: ThemeAvatar_v2
@@ -35,9 +33,7 @@ export interface RootTheme_v2 {
   /** @internal */
   style?: ThemeStyles
 }
-/**
- * @public
- */
+/** @public */
 export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
   /**

package/src/theme/v3/_constants.ts

@@ -0,0 +1,29 @@
+/** @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 = [...CONTAINER_SCALE, 'auto'] as const
+
+/** @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

package/src/theme/v3/_parseColorToken.ts

@@ -0,0 +1,180 @@
+import type {ColorToken} from './color'
+import {type Hue, HUES, type Tint, TINTS} from './palette'
+
+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/v3/buildTheme_v3.ts

@@ -1,10 +1,13 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {defaultThemeFonts} from '../defaults/fonts'
-import {buildColor_v3} from './color/buildColor_v3'
-import {defaultPalette, defaultTokens} from './defaults'
+import {black, hues, white} from '@sanity/color'
+
+import type {ThemeShadow} from '../v0'
+import {defaultThemeConfig} from '../v2/defaults/config'
+import {defaultThemeFonts} from './defaultFonts'
+import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
-import {Theme_v3, ThemeOptions} from './types'
+import type {Radius, Shadow, Space, Theme_v3, ThemeOptions} from './types'
 
+/** @public */
 export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
   const {v2} = options ?? {}
 
@@ -12,19 +15,25 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   return {
     _version: 3,
-    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,
     card: v2?.card ?? defaultThemeConfig.card,
-    color: buildColor_v3(tokens.color),
+    color: tokens.color,
     container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
+    font: defaultThemeFonts,
     input: v2?.input ?? defaultThemeConfig.input,
     layer: v2?.layer ?? defaultThemeConfig.layer,
     media: v2?.media ?? defaultThemeConfig.media,
-    radius: v2?.radius ?? defaultThemeConfig.radius,
-    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
-    space: v2?.space ?? defaultThemeConfig.space,
+    palette: {black, white, hues},
+    // TODO
+    radius: (v2?.radius ?? defaultThemeConfig.radius) as unknown as Record<Radius, number>,
+    // TODO
+    shadow: (v2?.shadow ?? defaultThemeConfig.shadow) as unknown as Record<
+      Shadow,
+      ThemeShadow | undefined
+    >,
+    // TODO
+    space: (v2?.space ?? defaultThemeConfig.space) as unknown as Record<Space, number>,
   }
 }

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

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

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

@@ -0,0 +1,14 @@
+import type {AVATAR_COLORS} from './_constants'
+import type {ColorValue} from './token'
+
+/** @public */
+export type AvatarColor = (typeof AVATAR_COLORS)[number]
+
+/** @public */
+export interface ThemeColorAvatarHue_v3 {
+  bg: ColorValue
+  fg: ColorValue
+}
+
+/** @public */
+export type ThemeColorAvatar_v3 = Record<AvatarColor, ThemeColorAvatarHue_v3>