@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.27

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

@@ -0,0 +1,219 @@
+import {ThemeFonts} from '../../system'
+
+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: 700,
+      medium: 800,
+      semibold: 900,
+      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,
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: 0,
+      },
+    ],
+  },
+  label: {
+    family:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.8,
+        iconSize: 15,
+        lineHeight: 11,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 11.25,
+        iconSize: 17,
+        lineHeight: 12,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 12.75,
+        iconSize: 19,
+        lineHeight: 13,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 14,
+        iconSize: 21,
+        lineHeight: 14,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 15.5,
+        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: 16,
+        iconSize: 25,
+        lineHeight: 23,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 7.5,
+        descenderHeight: 6.5,
+        fontSize: 19,
+        iconSize: 29,
+        lineHeight: 27,
+        letterSpacing: 0,
+      },
+      {
+        ascenderHeight: 8.5,
+        descenderHeight: 7.5,
+        fontSize: 22,
+        iconSize: 33,
+        lineHeight: 31,
+        letterSpacing: 0,
+      },
+    ],
+  },
+}

package/src/theme/build/index.ts

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

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

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

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

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

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

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,30 @@
+import {parseColor} from './parse'
+import {RGB, RGBA} from './types'
+
+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/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,23 @@
+export function merge(
+  target: Record<string, unknown>,
+  source: Record<string, unknown>,
+): Record<string, unknown> {
+  const ret = {...target}
+
+  for (const key of Object.keys(source)) {
+    const prevValue = target[key]
+    const nextValue = source[key]
+
+    if (isRecord(prevValue) && isRecord(nextValue)) {
+      ret[key] = merge(prevValue, nextValue)
+    } else {
+      ret[key] = nextValue
+    }
+  }
+
+  return ret
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+}

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