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

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

@@ -0,0 +1,89 @@
+import {expect, test} from 'vitest'
+
+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/v2/build/buildTheme.ts

@@ -0,0 +1,37 @@
+import type {RootTheme} from '../../types'
+import {v2_v0} from '../../versioning/v2_v0'
+import type {ThemeConfig} from '../config'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import type {RootTheme_v2} from '../theme'
+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/v2/build/colorToken/colorToken.ts

@@ -0,0 +1,19 @@
+import {parseTokenValue, type ThemeColorTokenValue} from '../../config'
+import {compileColorTokenValue} from './compileColorToken'
+import type {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/v2/build/colorToken/compileColorToken.ts

@@ -0,0 +1,21 @@
+import type {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/v2/build/colorToken/types.ts

@@ -0,0 +1,6 @@
+import type {Hue} from '../../../v3'
+
+export interface ColorTokenContext {
+  hue: Hue
+  scheme: 'light' | 'dark'
+}

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

@@ -0,0 +1,21 @@
+import type {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/v2/build/lib/color-fns/blend/multiply.ts

@@ -0,0 +1,18 @@
+import type {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/v2/build/lib/color-fns/blend/screen.ts

@@ -0,0 +1,18 @@
+import type {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/v2/build/lib/color-fns/color-fns.test.ts

@@ -0,0 +1,68 @@
+import {describe, expect, it} from 'vitest'
+
+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/v2/build/lib/color-fns/contrastRatio.ts

@@ -0,0 +1,34 @@
+import {parseColor} from './parse'
+import type {RGB, RGBA} from './types'
+
+/**
+ * @internal
+ * @deprecated Will be removed in next major version
+ */
+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/v2/build/lib/color-fns/convert.ts

@@ -0,0 +1,150 @@
+import {clamp, round} from '../utils'
+import type {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/v2/build/lib/color-fns/parse.ts

@@ -0,0 +1,60 @@
+import {hexToRgb, hslToRgb, rgbaToRGBA} from './convert'
+import type {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/v2/build/merge.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+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/v2/build/mixThemeColor.test.ts

@@ -0,0 +1,23 @@
+import {expect, test} from 'vitest'
+
+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/v2/build/mixThemeColor.ts

@@ -0,0 +1,53 @@
+import {multiply, parseColor, type 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)
+}