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

package/src/styles/padding/paddingStyle.test.ts

@@ -1,32 +0,0 @@
-/** @jest-environment jsdom */
-
-import {studioTheme, Theme} from '../../theme'
-import {responsivePaddingStyle} from './paddingStyle'
-
-const theme: Theme = {sanity: studioTheme}
-
-describe('styles/padding', () => {
-  it('should 1', () => {
-    const styles = responsivePaddingStyle({$padding: [0], theme})
-
-    expect(styles).toEqual([[{padding: 0}]])
-  })
-
-  it('should 2', () => {
-    const styles = responsivePaddingStyle({$padding: [0, 1, 2], theme})
-
-    expect(styles).toEqual([
-      [
-        {
-          padding: 0,
-        },
-        {
-          '@media screen and (min-width: 360px)': {padding: '0.25rem'},
-        },
-        {
-          '@media screen and (min-width: 600px)': {padding: '0.5rem'},
-        },
-      ],
-    ])
-  })
-})

package/src/styles/padding/paddingStyle.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {_getResponsiveSpace} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsivePaddingStyleProps} from './types'
-
-export function responsivePaddingStyle(
-  props: ResponsivePaddingStyleProps & ThemeProps,
-): CSSObject[][] {
-  const {theme} = props
-
-  return [
-    _getResponsiveSpace(theme, ['padding'], props.$padding),
-    _getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
-    _getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
-    _getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
-    _getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
-    _getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
-    _getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
-  ].filter(Boolean) as CSSObject[][]
-}

package/src/styles/radius/radiusStyle.ts

@@ -1,23 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {_responsive, rem} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveRadiusStyleProps} from './types'
-
-export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media, radius} = theme.sanity
-
-  return _responsive(media, props.$radius, (value) => {
-    let borderRadius: string | 0 = 0
-
-    if (typeof value === 'number') {
-      borderRadius = rem(radius[value])
-    }
-
-    if (value === 'full') {
-      borderRadius = '9999px'
-    }
-
-    return {borderRadius}
-  })
-}

package/src/styles/shadow/shadowStyle.ts

@@ -1,28 +0,0 @@
-import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow, cssVars} from '../../theme'
-import {CSSObject} from '../../types/styled'
-import {rem, _responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveShadowStyleProps} from './types'
-
-function toBoxShadow(shadow: BoxShadow, color: string) {
-  return `${shadow.map(rem).join(' ')} ${color}`
-}
-
-function shadowStyle(shadow: ThemeShadow | null): CSSObject {
-  if (!shadow) return EMPTY_RECORD
-
-  const outline = `0 0 0 ${rem(1)} ${cssVars.default['base-shadow-outline-color']}`
-  const umbra = toBoxShadow(shadow.umbra, cssVars.default['base-shadow-umbra-color'])
-  const penumbra = toBoxShadow(shadow.penumbra, cssVars.default['base-shadow-penumbra-color'])
-  const ambient = toBoxShadow(shadow.ambient, cssVars.default['base-shadow-ambient-color'])
-
-  return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
-}
-
-export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media, shadows} = theme.sanity
-
-  return _responsive(media, props.$shadow, (shadow) => shadowStyle(shadows[shadow]))
-}

package/src/styles/types.ts

@@ -1,8 +0,0 @@
-import {Theme} from '../theme'
-
-/**
- * @internal
- */
-export interface ThemeProps {
-  theme: Theme
-}

package/src/theme/__workshop__/color.tsx

@@ -1,65 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {Box, Card, Tree, TreeItem, cssVars, useRootTheme} from '@sanity/ui'
-
-export default function ColorStory() {
-  const {theme} = useRootTheme()
-
-  if (!theme.color) {
-    return null
-  }
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Tree space={1}>
-        {Object.entries(theme.color)
-          // .filter((v) => v[0] !== 'dark')
-          .map(([key, value]) => (
-            <ColorGroup key={key} name={key} value={value as any} />
-          ))}
-      </Tree>
-    </Box>
-  )
-}
-
-function ColorGroup({name, value}: {name: string; value: Record<string, unknown>}) {
-  const entries = Object.entries(value)
-
-  return (
-    <TreeItem fontSize={1} padding={2} text={name}>
-      {entries.map(([key, value]) => {
-        if (value && typeof value === 'object') {
-          return <ColorGroup key={key} name={key} value={value as Record<string, unknown>} />
-        }
-
-        if (typeof value !== 'string') {
-          return null
-        }
-
-        return <ColorPreview key={key} name={key} value={value} />
-      })}
-    </TreeItem>
-  )
-}
-
-function ColorPreview({name, value}: {name: string; value: string}) {
-  const text = (
-    <>
-      <Card
-        radius={2}
-        style={{
-          backgroundColor: value,
-          boxShadow: `inset 0 0 0 1px ${cssVars.default['base-shadow-outline-color']}`,
-          display: 'inline-block',
-          height: 17,
-          width: 25,
-          margin: '0 8px -6px 0',
-          verticalAlign: 'top',
-        }}
-        tone="inherit"
-      />
-      {name} <code>{value}</code>
-    </>
-  )
-
-  return <TreeItem fontSize={1} padding={2} text={text} />
-}

package/src/theme/__workshop__/index.ts

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'theme',
-  title: 'Theme',
-  stories: [
-    {
-      name: 'nested-provider',
-      title: 'Nested provider',
-      component: lazy(() => import('./nestedProvider')),
-    },
-    {
-      name: 'layer',
-      title: 'Layer',
-      component: lazy(() => import('./layer')),
-    },
-    {
-      name: 'color',
-      title: 'Color',
-      component: lazy(() => import('./color')),
-    },
-  ],
-})

package/src/theme/defaults.ts

@@ -1,7 +0,0 @@
-import {ThemeLayer} from './lib/theme/layer'
-
-export const DEFAULT_THEME_LAYER: ThemeLayer = {
-  dialog: {zOffset: 600},
-  popover: {zOffset: 400},
-  tooltip: {zOffset: 200},
-}

package/src/theme/lib/color-fns/blend/index.ts

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

package/src/theme/lib/color-fns/blend/multiply.ts

@@ -1,22 +0,0 @@
-import {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: 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)),
-  }
-}
-
-function clamp(num: number) {
-  return Math.max(Math.min(num, 255), 0)
-}

package/src/theme/lib/color-fns/blend/screen.ts

@@ -1,22 +0,0 @@
-import {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: 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)),
-  }
-}
-
-function clamp(num: number) {
-  return Math.max(Math.min(num, 255), 0)
-}

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

@@ -1,65 +0,0 @@
-/** @jest-environment jsdom */
-
-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,141 +0,0 @@
-import {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({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/theme/avatar.ts

@@ -1,12 +0,0 @@
-import {FocusRing} from '../../types'
-
-/**
- * @public
- */
-export interface ThemeAvatar {
-  sizes: {
-    distance: number
-    size: number
-  }[]
-  focusRing: FocusRing
-}

package/src/theme/lib/theme/color/_legacy/createColorTheme.ts

@@ -1,7 +0,0 @@
-/**
- * @internal
- * @deprecated Use studioTheme instead.
- */
-export function createColorTheme(): null {
-  return null
-}

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

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