@sanity/ui 0.37.2 → 0.37.3

package/src/theme/studioTheme/fonts.ts

@@ -1,223 +0,0 @@
-import {ThemeFonts} from '../lib/theme'
-
-export const fonts: ThemeFonts = {
-  code: {
-    family: '-apple-system-ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace',
-    horizontalOffset: 0.075,
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 3,
-        descenderHeight: 3,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 13,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 17,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 21,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 25,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  heading: {
-    family:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif',
-    horizontalOffset: 0.075,
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
-      bold: 900,
-    },
-    sizes: [
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 12,
-        iconSize: 17,
-        lineHeight: 17,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 21,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 21,
-        iconSize: 33,
-        lineHeight: 27,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 27,
-        iconSize: 41,
-        lineHeight: 33,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 9,
-        descenderHeight: 7,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 39,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 10,
-        descenderHeight: 8,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 45,
-        letterSpacing: 0,
-      },
-    ],
-  },
-  label: {
-    family:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif',
-    horizontalOffset: 0.075,
-    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:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif',
-    horizontalOffset: 0.075,
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    },
-    sizes: [
-      {
-        ascenderHeight: 3,
-        descenderHeight: 3,
-        fontSize: 10,
-        iconSize: 17,
-        lineHeight: 13,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 4,
-        descenderHeight: 4,
-        fontSize: 13,
-        iconSize: 21,
-        lineHeight: 17,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 5,
-        descenderHeight: 5,
-        fontSize: 16,
-        iconSize: 25,
-        lineHeight: 21,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 6,
-        descenderHeight: 6,
-        fontSize: 19,
-        iconSize: 29,
-        lineHeight: 25,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 7,
-        descenderHeight: 7,
-        fontSize: 22,
-        iconSize: 33,
-        lineHeight: 29,
-        letterSpacing: 0,
-      },
-    ],
-  },
-}

package/src/theme/studioTheme/helpers.ts

@@ -1,17 +0,0 @@
-import {parseColor, rgbToHex, screen as _screen, multiply as _multiply} from '../lib/color-fns'
-
-export function multiply(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_multiply(b, s))
-
-  return hex
-}
-
-export function screen(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_screen(b, s))
-
-  return hex
-}

package/src/theme/studioTheme/index.ts

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

package/src/theme/studioTheme/theme.ts

@@ -1,68 +0,0 @@
-import {RootTheme} from '../types'
-import {color} from './color'
-import {fonts} from './fonts'
-
-/**
- * @public
- */
-export const studioTheme: RootTheme = {
-  avatar: {
-    sizes: [
-      {distance: -3, size: 25},
-      {distance: -6, size: 35},
-      {distance: -9, size: 55},
-    ],
-  },
-  button: {
-    textWeight: 'medium',
-  },
-  color,
-  container: [320, 640, 960, 1280, 1600, 1920],
-  focusRing: {
-    offset: 1,
-    width: 2,
-  },
-  fonts,
-  media: [360, 600, 900, 1200, 1800, 2400],
-  radius: [0, 1, 3, 6, 9, 12, 21],
-  shadows: [
-    null,
-    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
-    {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
-    {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
-    {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    checkbox: {
-      size: 17,
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-    },
-    switch: {
-      width: 33,
-      height: 17,
-      padding: 4,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-    },
-    border: {
-      width: 1,
-    },
-  },
-  // styles: {
-  //   button: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  //   card: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  // },
-}

package/src/theme/theme.test.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import {render} from '../../test'
-import {studioTheme} from './studioTheme'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-import {useRootTheme} from './useRootTheme'
-
-describe('theme', () => {
-  describe('useRootTheme', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootTheme = useRootTheme()
-
-        log(rootTheme)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: ThemeContextValue = {
-          version: 0.0,
-          scheme: 'light',
-          theme: studioTheme,
-          tone: 'default',
-        }
-
-        return (
-          <ThemeContext.Provider value={value}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].scheme).toBe('light')
-      expect(log.mock.calls[0][0].tone).toBe('default')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <ThemeContext.Provider value={value as any}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
-
-        return (
-          <ThemeContext.Provider value={value as any}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useRootTheme(): the context value is not compatible'
-      )
-    })
-  })
-})

package/src/theme/themeColorProvider.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-import {ThemeProvider} from './themeProvider'
-import {useRootTheme} from './useRootTheme'
-
-/**
- * @public
- */
-export interface ThemeColorProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
-}
-
-/**
- * @public
- */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
-  const {children, scheme, tone} = props
-  const root = useRootTheme()
-
-  return (
-    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
-      {children}
-    </ThemeProvider>
-  )
-}

package/src/theme/themeContext.ts

@@ -1,12 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../lib/globalScope'
-import {ThemeContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/theme')
-
-globalScope[key] = globalScope[key] || createContext<ThemeContextValue | null>(null)
-
-/**
- * @internal
- */
-export const ThemeContext: React.Context<ThemeContextValue | null> = globalScope[key]

package/src/theme/themeProvider.tsx

@@ -1,61 +0,0 @@
-import React, {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
-import {DEFAULT_THEME_LAYER} from './defaults'
-import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'
-import {ThemeContext} from './themeContext'
-import {RootTheme, Theme, ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorName
-}
-
-/**
- * @public
- */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
-  const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: themeProp = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
-
-  const theme: Theme | null = useMemo(() => {
-    if (!themeProp) return null
-
-    const {color: rootColor, layer: rootLayer, ...restTheme} = themeProp
-    const colorScheme = rootColor[scheme] || rootColor.light
-    const color = colorScheme[tone] || colorScheme.default
-    const layer = rootLayer || DEFAULT_THEME_LAYER
-
-    return {sanity: {...restTheme, color, layer}}
-  }, [scheme, themeProp, tone])
-
-  const value: ThemeContextValue | null = useMemo(
-    () =>
-      themeProp && {
-        version: 0.0,
-        theme: themeProp,
-        scheme,
-        tone,
-      },
-    [themeProp, scheme, tone]
-  )
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <ThemeContext.Provider value={value}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-    </ThemeContext.Provider>
-  )
-}

package/src/theme/types.ts

@@ -1,39 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-
-/**
- * @public
- */
-export type RootTheme = BaseTheme<Styles>
-
-/**
- * @todo Rename to `ThemeStyles`
- * @public
- */
-export interface Styles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
-
-/**
- * @public
- */
-export interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
-}
-
-/**
- * @public
- */
-export interface ThemeContextValue {
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorName
-}

package/src/theme/useRootTheme.ts

@@ -1,24 +0,0 @@
-import {useContext} from 'react'
-import {isRecord} from '../lib/isRecord'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export function useRootTheme(): ThemeContextValue {
-  const value: unknown = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
-    throw new Error('useRootTheme(): the context value is not compatible')
-  }
-
-  return value as any as ThemeContextValue
-}

package/src/theme/useTheme.ts

@@ -1,10 +0,0 @@
-import {useTheme as useStyledTheme} from 'styled-components'
-
-import {Theme} from './types'
-
-/**
- * @public
- */
-export function useTheme(): Theme {
-  return useStyledTheme() as Theme
-}

package/src/types/avatar.ts

@@ -1,14 +0,0 @@
-/**
- * @public
- */
-export type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/**
- * @public
- */
-export type AvatarSize = 0 | 1 | 2
-
-/**
- * @public
- */
-export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/types/badge.ts

@@ -1,9 +0,0 @@
-/**
- * @public
- */
-export type BadgeMode = 'default' | 'outline'
-
-/**
- * @public
- */
-export type BadgeTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/box.ts

@@ -1,19 +0,0 @@
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/**
- * @public
- */
-export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
-
-/**
- * @public
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/types/button.ts

@@ -1,14 +0,0 @@
-/**
- * @public
- */
-export type ButtonMode = 'default' | 'ghost' | 'bleed'
-
-/**
- * @public
- */
-export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- */
-export type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'

package/src/types/card.ts

@@ -1,6 +0,0 @@
-import {ThemeColorToneKey} from '../theme'
-
-/**
- * @public
- */
-export type CardTone = ThemeColorToneKey | 'inherit'

package/src/types/common.ts

@@ -1,12 +0,0 @@
-import {Placement as PopperPlacement} from '@popperjs/core'
-
-/**
- * @public
- */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
-/**
- * A re-export of Popper’s `Placement` type
- * @public
- */
-export type Placement = PopperPlacement

package/src/types/dialog.ts

@@ -1,4 +0,0 @@
-/**
- * @public
- */
-export type DialogPosition = 'absolute' | 'fixed'