@sanity/ui 0.37.2 → 0.37.3

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

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

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

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

package/src/theme/lib/color-fns/helpers/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/lib/color-fns/index.ts

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

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

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

@@ -1,17 +0,0 @@
-/**
- * @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

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

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

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

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

@@ -1,29 +0,0 @@
-/**
- * @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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,60 +0,0 @@
-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%)',
-        },
-      })
-    })
-  })
-})