@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/theme/build/buildTheme.test.ts

@@ -1,87 +0,0 @@
-import {defaultColorPalette} from '../defaults/colorPalette'
-import {buildTheme} from './buildTheme'
-
-test('build theme', () => {
-  const rootTheme = buildTheme({
-    palette: {
-      ...defaultColorPalette,
-      black: '#000000',
-      white: '#ffffff',
-    },
-    color: {
-      base: {
-        default: {
-          bg: ['white/0', 'black/0'],
-          fg: ['black', 'white'],
-        },
-      },
-      button: {
-        ghost: {
-          default: {
-            '*': {
-              border: ['white/0', 'black/0'],
-            },
-          },
-        },
-      },
-    },
-  })
-
-  const {color} = rootTheme.v2!
-
-  expect({
-    light: {
-      bg: color.light.default.bg,
-      fg: color.light.default.fg,
-      default: {
-        button: {
-          ghost: {
-            enabled: {
-              border: color.light.default.button.ghost.default.enabled.border,
-            },
-          },
-        },
-      },
-    },
-    dark: {
-      bg: color.dark.default.bg,
-      fg: color.dark.default.fg,
-      default: {
-        button: {
-          ghost: {
-            enabled: {
-              border: color.dark.default.button.ghost.default.enabled.border,
-            },
-          },
-        },
-      },
-    },
-  }).toEqual({
-    light: {
-      bg: 'rgba(255,255,255,0)',
-      fg: '#000000',
-      default: {
-        button: {
-          ghost: {
-            enabled: {
-              border: 'rgba(246,246,248,0)',
-            },
-          },
-        },
-      },
-    },
-    dark: {
-      bg: 'rgba(0,0,0,0)',
-      fg: '#ffffff',
-      default: {
-        button: {
-          ghost: {
-            enabled: {
-              border: 'rgba(19,20,27,0)',
-            },
-          },
-        },
-      },
-    },
-  })
-})

package/src/theme/build/buildTheme.ts

@@ -1,36 +0,0 @@
-import {ThemeConfig} from '../config'
-import {defaultThemeConfig} from '../defaults/config'
-import {defaultThemeFonts} from '../defaults/fonts'
-import {RootTheme, RootTheme_v2} from '../system'
-import {v2_v0} from '../versioning'
-import {buildColorTheme} from './buildColorTheme'
-import {renderThemeColorSchemes} from './renderColorTheme'
-
-/** @internal */
-export function buildTheme(config?: ThemeConfig): RootTheme {
-  const colorTheme = buildColorTheme(config)
-
-  const v2: RootTheme_v2 = {
-    _version: 2,
-    avatar: config?.avatar ?? defaultThemeConfig.avatar,
-    button: config?.button ?? defaultThemeConfig.button,
-    card: config?.card ?? defaultThemeConfig.card,
-    // How colors are generated:
-    // 1. Merge custom tokens with default tokens
-    // 2. Generate tree of color keys (gray/500, black, white, etc.)
-    // 3. Apply mixing and render to hex values
-    // render(build(mergeWithDefaults()))
-    color: renderThemeColorSchemes(colorTheme, config),
-    container: config?.container ?? defaultThemeConfig.container,
-    font: config?.font ?? defaultThemeFonts,
-    input: config?.input ?? defaultThemeConfig.input,
-    layer: config?.layer ?? defaultThemeConfig.layer,
-    media: config?.media ?? defaultThemeConfig.media,
-    radius: config?.radius ?? defaultThemeConfig.radius,
-    shadow: config?.shadow ?? defaultThemeConfig.shadow,
-    space: config?.space ?? defaultThemeConfig.space,
-    style: config?.style ?? defaultThemeConfig.style,
-  }
-
-  return v2_v0(v2)
-}

package/src/theme/build/colorToken/colorToken.ts

@@ -1,19 +0,0 @@
-import {parseTokenValue, ThemeColorTokenValue} from '../../config'
-import {compileColorTokenValue} from './compileColorToken'
-import {ColorTokenContext} from './types'
-
-const DEFAULT_COLOR_TOKEN_VALUE: ThemeColorTokenValue = ['500', '500']
-
-export function resolveColorTokenValue(
-  context: ColorTokenContext,
-  value: ThemeColorTokenValue = DEFAULT_COLOR_TOKEN_VALUE,
-): string {
-  const {hue, scheme} = context
-  const node = parseTokenValue(value[scheme === 'light' ? 0 : 1])
-
-  if (!node || node.type !== 'color') {
-    throw new Error(`Invalid color token: ${value[0]}`)
-  }
-
-  return compileColorTokenValue({...node, hue: node.hue || hue})
-}

package/src/theme/build/colorToken/compileColorToken.ts

@@ -1,21 +0,0 @@
-import {TokenColorValueNode} from '../../config'
-
-export function compileColorTokenValue(node: TokenColorValueNode): string {
-  let key = ''
-
-  if (node.key === 'black' || node.key === 'white') {
-    key = node.key
-  } else {
-    key = `${node.hue}/${node.tint}`
-  }
-
-  if (node.mix !== undefined) {
-    return `${key} ${node.mix * 100}%`
-  }
-
-  if (node.opacity !== undefined) {
-    key += `/${node.opacity}`
-  }
-
-  return key
-}

package/src/theme/build/colorToken/index.ts

@@ -1,2 +0,0 @@
-export * from './colorToken'
-export * from './types'

package/src/theme/build/colorToken/types.ts

@@ -1,6 +0,0 @@
-import {ColorHueKey} from '@sanity/color'
-
-export interface ColorTokenContext {
-  hue: ColorHueKey
-  scheme: 'light' | 'dark'
-}

package/src/theme/build/index.ts

@@ -1,3 +0,0 @@
-export * from './_deprecated/color'
-export * from './buildTheme'
-export * from './lib/color-fns'

package/src/theme/build/lib/color-fns/blend/index.ts

@@ -1,3 +0,0 @@
-export * from './mix'
-export * from './multiply'
-export * from './screen'

package/src/theme/build/lib/color-fns/blend/mix.ts

@@ -1,21 +0,0 @@
-import {RGB, RGBA} from '../types'
-
-function mixChannel(b: number, s: number, weight: number) {
-  const diff = s - b
-
-  const delta = diff * weight
-
-  return b + delta
-}
-
-/**
- * Apply the \`mix\` blend mode
- * @internal
- */
-export function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB {
-  return {
-    r: mixChannel(b.r, s.r, weight),
-    g: mixChannel(b.g, s.g, weight),
-    b: mixChannel(b.b, s.b, weight),
-  }
-}

package/src/theme/build/lib/color-fns/blend/multiply.ts

@@ -1,18 +0,0 @@
-import {RGB, RGBA} from '../types'
-
-function multiplyChannel(b: number, s: number) {
-  return b * s
-}
-
-/**
- * Apply the \`multiply\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
- * @internal
- */
-export function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB {
-  return {
-    r: multiplyChannel(b.r / 255, s.r / 255) * 255,
-    g: multiplyChannel(b.g / 255, s.g / 255) * 255,
-    b: multiplyChannel(b.b / 255, s.b / 255) * 255,
-  }
-}

package/src/theme/build/lib/color-fns/blend/screen.ts

@@ -1,18 +0,0 @@
-import {RGB, RGBA} from '../types'
-
-function screenChannel(b: number, s: number) {
-  return b + s - b * s
-}
-
-/**
- * Apply the \`screen\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
- * @internal
- */
-export function screen(b: RGB | RGBA, s: RGB | RGBA): RGB {
-  return {
-    r: screenChannel(b.r / 255, s.r / 255) * 255,
-    g: screenChannel(b.g / 255, s.g / 255) * 255,
-    b: screenChannel(b.b / 255, s.b / 255) * 255,
-  }
-}

package/src/theme/build/lib/color-fns/color-fns.test.ts

@@ -1,68 +0,0 @@
-/** @jest-environment jsdom */
-
-import {multiply, screen} from './blend'
-import {hexToRgb, rgbToHex} from './convert'
-import {parseColor} from './parse'
-import {rgba} from './rgba'
-
-const hues = {
-  gray: {
-    600: '#6e7683',
-  },
-  blue: {
-    500: '#2276fc',
-  },
-}
-
-describe('color-fns', () => {
-  describe('hexToRgb', () => {
-    it('should convert hex to RGB', () => {
-      const hex = '#ff0000'
-      const rgb = hexToRgb(hex)
-
-      expect(rgbToHex(rgb)).toEqual('#ff0000')
-    })
-  })
-
-  describe('screen', () => {
-    it('should blend color using the "screen" mode', () => {
-      const backdrop = hexToRgb(hues.blue[500])
-      const source = hexToRgb(hues.gray[600])
-      const rgb = screen(backdrop, source)
-
-      expect(rgbToHex(rgb)).toEqual('#81b5fe')
-    })
-  })
-
-  describe('multiply', () => {
-    it('should blend color using the "multiply" mode', () => {
-      const backdrop = hexToRgb(hues.blue[500])
-      const source = hexToRgb(hues.gray[600])
-      const rgb = multiply(backdrop, source)
-
-      expect(rgbToHex(rgb)).toEqual('#0f3781')
-    })
-  })
-
-  describe('parseColor', () => {
-    it('should parse a hex to RGB', () => {
-      const rgb = parseColor('#ccc')
-
-      expect(rgbToHex(rgb)).toEqual('#cccccc')
-    })
-
-    it('should parse a HSL to RGB', () => {
-      const rgb1 = parseColor('hsl(210, 20%, 50%)')
-      const rgb2 = parseColor('hsl(210, 10%, 0%)')
-
-      expect(rgbToHex(rgb1)).toEqual('#668099')
-      expect(rgbToHex(rgb2)).toEqual('#000000')
-    })
-  })
-
-  describe('helpers/rgba', () => {
-    it('should convert hex to RGBA string', () => {
-      expect(rgba('#f00', 0.5)).toBe(`rgba(255,0,0,0.5)`)
-    })
-  })
-})

package/src/theme/build/lib/color-fns/contrastRatio.ts

@@ -1,31 +0,0 @@
-import {parseColor} from './parse'
-import {RGB, RGBA} from './types'
-
-/** @internal */
-export function getContrastRatio(bg: string, fg: string): number {
-  const rgb1 = parseColor(bg) // bg: RGB | RGBA, fg: RGB | RGBA
-  const rgb2 = parseColor(fg)
-
-  // convert the two colors from sRGB to linear-light RGB
-  const c1 = rgb_lrgb(rgb1)
-  const c2 = rgb_lrgb(rgb2)
-
-  // compute the relative luminances
-  const l1 = lrgb_luminance(c1)
-  const l2 = lrgb_luminance(c2)
-
-  // compute the contrast ratio
-  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
-}
-
-function rgb_lrgb({r, g, b}: RGB | RGBA): [number, number, number] {
-  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)]
-}
-
-function rgb_lrgb1(v: number) {
-  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
-}
-
-function lrgb_luminance([r, g, b]: [number, number, number]) {
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b
-}

package/src/theme/build/lib/color-fns/convert.ts

@@ -1,150 +0,0 @@
-import {clamp, round} from '../utils'
-import {HSL, RGB, RGBA} from './types'
-
-/**
- * @internal
- */
-export function hexToRgb(hex: string): RGB {
-  if (hex.length === 4) {
-    const hexR = hex.slice(1, 2)
-    const hexG = hex.slice(2, 3)
-    const hexB = hex.slice(3, 4)
-
-    return {
-      r: parseInt(hexR + hexR, 16),
-      g: parseInt(hexG + hexG, 16),
-      b: parseInt(hexB + hexB, 16),
-    }
-  }
-
-  return {
-    r: parseInt(hex.slice(1, 3), 16),
-    g: parseInt(hex.slice(3, 5), 16),
-    b: parseInt(hex.slice(5, 7), 16),
-  }
-}
-
-/**
- * @internal
- */
-export function rgbaToRGBA(rgba: string): RGBA {
-  const values = rgba.replace(/rgba\(|\)/g, '').split(',')
-
-  return {
-    r: parseInt(values[0]),
-    g: parseInt(values[1]),
-    b: parseInt(values[2]),
-    a: parseFloat(values[3]),
-  }
-}
-
-/**
- * @internal
- */
-export function rgbToHex(color: RGB | RGBA): string {
-  const r = round(clamp(Math.round(color.r), 0, 255))
-  const g = round(clamp(Math.round(color.g), 0, 255))
-  const b = round(clamp(Math.round(color.b), 0, 255))
-
-  if ('a' in color) {
-    return `rgba(${r},${g},${b},${color.a})`
-  }
-
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
-}
-
-/**
- * @internal
- * @see https://css-tricks.com/converting-color-spaces-in-javascript/
- */
-export function rgbToHsl({r, g, b}: RGB): HSL {
-  // Make r, g, and b fractions of 1
-  r /= 255
-  g /= 255
-  b /= 255
-
-  // Find greatest and smallest channel values
-  const cmin = Math.min(r, g, b)
-  const cmax = Math.max(r, g, b)
-  const delta = cmax - cmin
-
-  let h = 0
-  let s = 0
-  let l = 0
-
-  // Calculate hue
-  // No difference
-  if (delta == 0) h = 0
-  // Red is max
-  else if (cmax == r) h = ((g - b) / delta) % 6
-  // Green is max
-  else if (cmax == g) h = (b - r) / delta + 2
-  // Blue is max
-  else h = (r - g) / delta + 4
-
-  h = Math.round(h * 60)
-
-  // Make negative hues positive behind 360°
-  if (h < 0) h += 360
-
-  // Calculate lightness
-  l = (cmax + cmin) / 2
-
-  // Calculate saturation
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
-
-  // Multiply l and s by 100
-  s = +(s * 100).toFixed(1)
-  l = +(l * 100).toFixed(1)
-
-  return {h, s, l}
-}
-
-/**
- * @internal
- */
-export function hslToRgb(hsl: HSL): RGB {
-  // Must be fractions of 1
-  const s = hsl.s / 100
-  const l = hsl.l / 100
-
-  const c = (1 - Math.abs(2 * l - 1)) * s
-  const x = c * (1 - Math.abs(((hsl.h / 60) % 2) - 1))
-  const m = l - c / 2
-
-  let r = 0
-  let g = 0
-  let b = 0
-
-  if (0 <= hsl.h && hsl.h < 60) {
-    r = c
-    g = x
-    b = 0
-  } else if (60 <= hsl.h && hsl.h < 120) {
-    r = x
-    g = c
-    b = 0
-  } else if (120 <= hsl.h && hsl.h < 180) {
-    r = 0
-    g = c
-    b = x
-  } else if (180 <= hsl.h && hsl.h < 240) {
-    r = 0
-    g = x
-    b = c
-  } else if (240 <= hsl.h && hsl.h < 300) {
-    r = x
-    g = 0
-    b = c
-  } else if (300 <= hsl.h && hsl.h < 360) {
-    r = c
-    g = 0
-    b = x
-  }
-
-  return {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255),
-  }
-}

package/src/theme/build/lib/color-fns/index.ts

@@ -1,6 +0,0 @@
-export * from './blend'
-export * from './contrastRatio'
-export * from './convert'
-export * from './parse'
-export * from './rgba'
-export * from './types'

package/src/theme/build/lib/color-fns/parse.ts

@@ -1,60 +0,0 @@
-import {hexToRgb, hslToRgb, rgbaToRGBA} from './convert'
-import {HSL, RGB, RGBA} from './types'
-
-const HEX_CHARS = '0123456789ABCDEFabcdef'
-
-const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i
-
-function isHexChars(str: string) {
-  for (const c of str) {
-    if (HEX_CHARS.indexOf(c) === -1) {
-      return false
-    }
-  }
-
-  return true
-}
-
-function isHex(str: string) {
-  if (str[0] !== '#') return false
-
-  // Accept both #000 and #000000
-  if (!(str.length === 4 || str.length === 7)) return false
-
-  return isHexChars(str.slice(1))
-}
-
-function parseHsl(str: string): HSL {
-  const res = HSL_RE.exec(str)
-
-  if (!res) {
-    throw new Error(`parseHsl: string is not a HSL color: "${str}"`)
-  }
-
-  return {h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5])}
-}
-
-/**
- * @internal
- */
-export function parseColor(color: unknown): RGB | RGBA {
-  if (!color) return {r: 0, g: 0, b: 0}
-
-  if (typeof color !== 'string') {
-    throw new Error('parseColor: expected a string')
-  }
-
-  if (isHex(color)) {
-    return hexToRgb(color)
-  }
-
-  if (color.startsWith('hsl(')) {
-    return hslToRgb(parseHsl(color))
-  }
-
-  if (color.startsWith('rgba(')) {
-    return rgbaToRGBA(color)
-  }
-
-  throw new Error(`parseColor: unexpected color format: "${color}"`)
-}

package/src/theme/build/lib/color-fns/rgba.ts

@@ -1,10 +0,0 @@
-import {parseColor} from './parse'
-
-/**
- * @internal
- */
-export function rgba(color: unknown, a: number): string {
-  const rgb = parseColor(color)
-
-  return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`
-}

package/src/theme/build/lib/color-fns/types.ts

@@ -1,28 +0,0 @@
-/**
- * @internal
- */
-export interface RGB {
-  r: number
-  g: number
-  b: number
-  a?: undefined
-}
-
-/**
- * @internal
- */
-export interface RGBA {
-  r: number
-  g: number
-  b: number
-  a: number
-}
-
-/**
- * @internal
- */
-export interface HSL {
-  h: number
-  s: number
-  l: number
-}

package/src/theme/build/lib/isRecord.ts

@@ -1,3 +0,0 @@
-export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
-}

package/src/theme/build/lib/lazy.ts

@@ -1,30 +0,0 @@
-/**
- * Defines a lazy, self-replacing property on `obj`.
- *
- * On first access the `factory` is called and the getter is replaced with the
- * computed plain value — subsequent reads have zero overhead.
- *
- * The property is enumerable (visible in `Object.keys` / spread) in both states.
- *
- * @internal
- */
-export function defineLazyProperty<T extends object, K extends keyof T>(
-  obj: T,
-  key: K,
-  factory: () => T[K],
-): void {
-  Object.defineProperty(obj, key, {
-    get() {
-      const value = factory()
-      Object.defineProperty(obj, key, {
-        value,
-        enumerable: true,
-        writable: false,
-        configurable: false,
-      })
-      return value
-    },
-    enumerable: true,
-    configurable: true,
-  })
-}

package/src/theme/build/lib/utils.ts

@@ -1,19 +0,0 @@
-export function lerp(x: number, y: number, a: number): number {
-  return x * (1 - a) + y * a
-}
-
-export function invlerp(x: number, y: number, a: number): number {
-  return clamp((a - x) / (y - x))
-}
-
-export function clamp(a: number, min = 0, max = 1): number {
-  return Math.min(max, Math.max(min, a))
-}
-
-export function range(x1: number, y1: number, x2: number, y2: number, a: number): number {
-  return lerp(x2, y2, invlerp(x1, y1, a))
-}
-
-export function round(value: number): number {
-  return Math.round(value)
-}

package/src/theme/build/merge.ts

@@ -1,26 +0,0 @@
-import {isRecord} from './lib/isRecord'
-
-export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
-  const _records = records.filter(Boolean) as T[]
-
-  if (_records.length === 0) {
-    return {} as T
-  }
-
-  return _records.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
-}