@sanity/ui 3.3.1 → 3.3.3

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
-}

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

@@ -1,21 +0,0 @@
-import {mixThemeColor} from './mixThemeColor'
-
-test('mix 1', () => {
-  const result = mixThemeColor('#222222', {
-    black: '#222222',
-    white: '#ffffff',
-    blendMode: 'multiply',
-  })
-
-  expect(result).toBe('#222222')
-})
-
-test('mix 2', () => {
-  const result = mixThemeColor('#ffffff', {
-    black: '#222222',
-    white: '#ffffff',
-    blendMode: 'multiply',
-  })
-
-  expect(result).toBe('#ffffff')
-})

package/src/theme/build/mixThemeColor.ts

@@ -1,53 +0,0 @@
-import {multiply, parseColor, RGB, rgbToHex, screen} from './lib/color-fns'
-import {clamp, range} from './lib/utils'
-
-const RGB_RANGE: [number, number] = [0, 255]
-
-export function mixThemeColor(
-  value: string,
-  options: {
-    bg?: string
-    blendMode: 'multiply' | 'screen'
-    black: string
-    white: string
-  },
-): string {
-  const {blendMode} = options
-
-  const color = parseColor(value)
-  const black = parseColor(options.black)
-  const white = parseColor(options.white)
-
-  const bg = options.bg ? parseColor(options.bg) : blendMode === 'multiply' ? white : black
-
-  const paletteRange: {r: [number, number]; g: [number, number]; b: [number, number]} = {
-    r: [black.r, white.r],
-    g: [black.g, white.g],
-    b: [black.b, white.b],
-  }
-
-  const convertedBgColor: RGB = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE),
-  }
-
-  const convertedColor: RGB = {
-    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
-    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
-    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE),
-  }
-
-  const resultColor =
-    blendMode === 'multiply'
-      ? multiply(convertedBgColor, convertedColor)
-      : screen(convertedBgColor, convertedColor)
-
-  const v: RGB = {
-    r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
-    g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
-    b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b),
-  }
-
-  return rgbToHex(v)
-}