@sanity/ui 0.36.13 → 0.36.16

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

@@ -0,0 +1,63 @@
+import {hexToRgb, multiply, parseColor, rgba, screen} from '.'
+
+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(rgb).toEqual({r: 255, g: 0, b: 0})
+    })
+  })
+
+  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(rgb).toEqual({r: 129, g: 181, b: 254})
+    })
+  })
+
+  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(rgb).toEqual({r: 15, g: 55, b: 129})
+    })
+  })
+
+  describe('parseColor', () => {
+    it('should parse a hex to RGB', () => {
+      const rgb = parseColor('#ccc')
+
+      expect(rgb).toEqual({r: 204, g: 204, b: 204})
+    })
+
+    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})
+    })
+  })
+
+  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/lib/color-fns/convert.ts

@@ -0,0 +1,127 @@
+import {HSL, RGB} 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 rgbToHex({r, g, b}: RGB): string {
+  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/lib/color-fns/helpers/index.ts

@@ -0,0 +1 @@
+export * from './rgba'

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

@@ -0,0 +1,10 @@
+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/lib/color-fns/index.ts

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

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

@@ -0,0 +1,56 @@
+import {hexToRgb, hslToRgb} from './convert'
+import {HSL, RGB} 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 {
+  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))
+  }
+
+  throw new Error(`parseColor: unexpected color format: "${color}"`)
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @internal
+ */
+export interface RGB {
+  r: number
+  g: number
+  b: number
+}
+
+/**
+ * @internal
+ */
+export interface HSL {
+  h: number
+  s: number
+  l: number
+}

package/src/theme/lib/theme/avatar.ts

@@ -0,0 +1,9 @@
+/**
+ * @public
+ */
+export interface ThemeAvatar {
+  sizes: {
+    distance: number
+    size: number
+  }[]
+}

package/src/theme/lib/theme/color/_generic/index.ts

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

package/src/theme/lib/theme/color/_generic/types.ts

@@ -0,0 +1,29 @@
+/**
+ * @public
+ */
+export interface ThemeColorGenericState {
+  bg: string
+  /**
+   * @beta
+   */
+  bg2?: string
+  border: string
+  fg: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}

package/src/theme/lib/theme/color/base/index.ts

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

package/src/theme/lib/theme/color/base/types.ts

@@ -0,0 +1,19 @@
+/**
+ * @public
+ */
+export interface ThemeColorBase {
+  bg: string
+  fg: string
+  border: string
+  focusRing: string
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}

package/src/theme/lib/theme/color/button/createButtonModes.ts

@@ -0,0 +1,20 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {createButtonTones} from './createButtonTones'
+import {ThemeColorButton} from './types'
+
+export function createButtonModes(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted
+): ThemeColorButton {
+  return {
+    default: createButtonTones(opts, base, dark, solid, muted, 'default'),
+    ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
+    bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),
+  }
+}

package/src/theme/lib/theme/color/button/createButtonTones.ts

@@ -0,0 +1,52 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {ThemeColorButtonModeKey, ThemeColorButtonTones} from './types'
+
+export function createButtonTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  mode: ThemeColorButtonModeKey
+): ThemeColorButtonTones {
+  return {
+    default: opts.button({
+      base,
+      dark,
+      solid: solid.default,
+      muted: muted.default,
+      mode,
+    }),
+    primary: opts.button({
+      base,
+      dark,
+      solid: solid.primary,
+      muted: muted.primary,
+      mode,
+    }),
+    positive: opts.button({
+      base,
+      dark,
+      solid: solid.positive,
+      muted: muted.positive,
+      mode,
+    }),
+    caution: opts.button({
+      base,
+      dark,
+      solid: solid.caution,
+      muted: muted.caution,
+      mode,
+    }),
+    critical: opts.button({
+      base,
+      dark,
+      solid: solid.critical,
+      muted: muted.critical,
+      mode,
+    }),
+  }
+}

package/src/theme/lib/theme/color/button/index.ts

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

package/src/theme/lib/theme/color/button/types.ts

@@ -0,0 +1,44 @@
+import {ThemeColorGenericState} from '../_generic'
+
+/**
+ * @public
+ */
+export type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export type ThemeColorButtonState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export interface ThemeColorButtonStates {
+  enabled: ThemeColorButtonState
+  hovered: ThemeColorButtonState
+  pressed: ThemeColorButtonState
+  selected: ThemeColorButtonState
+  disabled: ThemeColorButtonState
+}
+
+/**
+ * @public
+ * @todo Rename to `ThemeColorButtonMode`.
+ */
+export interface ThemeColorButtonTones {
+  default: ThemeColorButtonStates
+  primary: ThemeColorButtonStates
+  positive: ThemeColorButtonStates
+  caution: ThemeColorButtonStates
+  critical: ThemeColorButtonStates
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorButton {
+  default: ThemeColorButtonTones
+  ghost: ThemeColorButtonTones
+  bleed: ThemeColorButtonTones
+}

package/src/theme/lib/theme/color/card/createCardStates.ts

@@ -0,0 +1,58 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {ThemeColorName} from '../types'
+import {ThemeColorCard} from './types'
+
+export function createCardStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted
+): ThemeColorCard {
+  return {
+    enabled: opts.card({
+      base,
+      dark,
+      name,
+      state: 'enabled',
+      solid,
+      muted,
+    }),
+    disabled: opts.card({
+      base,
+      dark,
+      name,
+      state: 'disabled',
+      solid,
+      muted,
+    }),
+    hovered: opts.card({
+      base,
+      dark,
+      name,
+      state: 'hovered',
+      solid,
+      muted,
+    }),
+    pressed: opts.card({
+      base,
+      dark,
+      name,
+      state: 'pressed',
+      solid,
+      muted,
+    }),
+    selected: opts.card({
+      base,
+      dark,
+      name,
+      state: 'selected',
+      solid,
+      muted,
+    }),
+  }
+}

package/src/theme/lib/theme/color/card/index.ts

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

package/src/theme/lib/theme/color/card/types.ts

@@ -0,0 +1,18 @@
+import {ThemeColorGenericState} from '../_generic'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export type ThemeColorCardState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export interface ThemeColorCard {
+  enabled: ThemeColorCardState
+  hovered: ThemeColorCardState
+  pressed: ThemeColorCardState
+  selected: ThemeColorCardState
+  disabled: ThemeColorCardState
+}

package/src/theme/lib/theme/color/color.test.ts

@@ -0,0 +1,60 @@
+import {createColorTheme} from '.'
+
+describe('color', () => {
+  describe('createColorTheme', () => {
+    it('should generate base (scheme=light, name=default)', () => {
+      const theme = createColorTheme()
+      const scheme = 'light'
+      const name = 'default'
+      const color = theme[scheme][name]
+
+      expect(color.base).toEqual({
+        bg: 'hsl(0, 0%, 100%)',
+        border: 'hsl(0, 0%, 95%)',
+        fg: 'hsl(0, 0%, 0%)',
+        focusRing: 'hsl(240, 100%, 50%)',
+        shadow: {
+          ambient: 'hsl(0, 0%, 0%)',
+          outline: 'hsl(0, 0%, 0%)',
+          penumbra: 'hsl(0, 0%, 0%)',
+          umbra: 'hsl(0, 0%, 0%)',
+        },
+        skeleton: {
+          from: 'hsl(0, 0%, 0%)',
+          to: 'hsl(0, 0%, 0%)',
+        },
+      })
+    })
+
+    it('should generate muted states (scheme=light, name=default)', () => {
+      const theme = createColorTheme()
+      const scheme = 'light'
+      const name = 'default'
+      const color = theme[scheme][name]
+
+      expect(color.muted.default.enabled).toEqual({
+        bg: 'hsl(0, 0%, 95%)',
+        bg2: 'hsl(0, 0%, 95%)',
+        border: 'hsl(0, 0%, 70%)',
+        fg: 'hsl(0, 0%, 20%)',
+        muted: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        link: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        accent: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        code: {
+          bg: 'hsl(0, 0%, 0%)',
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        skeleton: {
+          from: 'hsl(0, 0%, 0%)',
+          to: 'hsl(0, 0%, 0%)',
+        },
+      })
+    })
+  })
+})