@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

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

@@ -11,12 +11,8 @@ function screenChannel(b: number, s: number) {
  */
 export function screen(b: RGB | RGBA, s: RGB | RGBA): RGB {
   return {
-    r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
-    g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),
-    b: Math.round(clamp(screenChannel(b.b / 255, s.b / 255) * 255)),
+    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,
   }
 }
-
-function clamp(num: number) {
-  return Math.max(Math.min(num, 255), 0)
-}

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

@@ -1,6 +1,9 @@
 /** @jest-environment jsdom */
 
-import {hexToRgb, multiply, parseColor, rgba, screen} from '.'
+import {multiply, screen} from './blend'
+import {hexToRgb, rgbToHex} from './convert'
+import {parseColor} from './parse'
+import {rgba} from './rgba'
 
 const hues = {
   gray: {
@@ -17,7 +20,7 @@ describe('color-fns', () => {
       const hex = '#ff0000'
       const rgb = hexToRgb(hex)
 
-      expect(rgb).toEqual({r: 255, g: 0, b: 0})
+      expect(rgbToHex(rgb)).toEqual('#ff0000')
     })
   })
 
@@ -27,7 +30,7 @@ describe('color-fns', () => {
       const source = hexToRgb(hues.gray[600])
       const rgb = screen(backdrop, source)
 
-      expect(rgb).toEqual({r: 129, g: 181, b: 254})
+      expect(rgbToHex(rgb)).toEqual('#81b5fe')
     })
   })
 
@@ -37,7 +40,7 @@ describe('color-fns', () => {
       const source = hexToRgb(hues.gray[600])
       const rgb = multiply(backdrop, source)
 
-      expect(rgb).toEqual({r: 15, g: 55, b: 129})
+      expect(rgbToHex(rgb)).toEqual('#0f3781')
     })
   })
 
@@ -45,15 +48,15 @@ describe('color-fns', () => {
     it('should parse a hex to RGB', () => {
       const rgb = parseColor('#ccc')
 
-      expect(rgb).toEqual({r: 204, g: 204, b: 204})
+      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(rgb1).toEqual({r: 102, g: 128, b: 153})
-      expect(rgb2).toEqual({r: 0, g: 0, b: 0})
+      expect(rgbToHex(rgb1)).toEqual('#668099')
+      expect(rgbToHex(rgb2)).toEqual('#000000')
     })
   })
 

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

@@ -0,0 +1,31 @@
+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/{lib → build/lib}/color-fns/convert.ts

@@ -1,3 +1,4 @@
+import {clamp, round} from '../utils'
 import {HSL, RGB, RGBA} from './types'
 
 /**
@@ -40,7 +41,15 @@ export function rgbaToRGBA(rgba: string): RGBA {
 /**
  * @internal
  */
-export function rgbToHex({r, g, b}: RGB): string {
+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)
 }
 

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

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

package/src/theme/{lib/color-fns/helpers → build/lib/color-fns}/rgba.ts

@@ -1,4 +1,4 @@
-import {parseColor} from '../parse'
+import {parseColor} from './parse'
 
 /**
  * @internal

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

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

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

@@ -0,0 +1,19 @@
+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

@@ -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/build/mixThemeColor.test.ts

@@ -0,0 +1,21 @@
+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

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