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

package/src/theme/studioTheme/fonts.ts

@@ -1,219 +0,0 @@
-import {ThemeFonts} from '../lib/theme'
-
-export const fonts: 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: 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:
-      '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: 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: 8,
-        descenderHeight: 8,
-        fontSize: 33,
-        iconSize: 49,
-        lineHeight: 39,
-        letterSpacing: 0,
-      },
-      {
-        ascenderHeight: 9,
-        descenderHeight: 9,
-        fontSize: 38,
-        iconSize: 53,
-        lineHeight: 45,
-        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: 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,31 +0,0 @@
-import {
-  parseColor,
-  rgbToHex,
-  screen as _screen,
-  multiply as _multiply,
-  rgba,
-} 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))
-
-  if (s.a) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}
-
-export function screen(bg: string, fg: string): string {
-  const b = parseColor(bg)
-  const s = parseColor(fg)
-  const hex = rgbToHex(_screen(b, s))
-
-  if (s.a) {
-    return rgba(hex, s.a)
-  }
-
-  return hex
-}

package/src/theme/studioTheme/index.ts

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

package/src/theme/studioTheme/theme.ts

@@ -1,88 +0,0 @@
-import {RootTheme} from '../types'
-import {tones} 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},
-    ],
-    focusRing: {offset: 1, width: 1},
-  },
-  button: {
-    textWeight: 'medium',
-    focusRing: {offset: -1, width: 2},
-  },
-  card: {
-    focusRing: {offset: -1, width: 1},
-  },
-  color: {
-    tones: tones,
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore This is necessary until workshop is updated.
-    base: {bg: '#fffff'},
-  },
-  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, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
-    {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,
-      focusRing: {offset: -1, width: 1},
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {offset: -1, width: 1},
-    },
-    switch: {
-      width: 21,
-      height: 13,
-      padding: 2,
-      transitionDurationMs: 150,
-      transitionTimingFunction: 'ease-out',
-      focusRing: {offset: 1, width: 1},
-    },
-    border: {
-      width: 1,
-    },
-    select: {
-      focusRing: {offset: -1, width: 1},
-    },
-    text: {
-      focusRing: {offset: -1, 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,106 +0,0 @@
-/** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-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,28 +0,0 @@
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-import {ThemeProvider} from './themeProvider'
-import {useRootTheme} from './useRootTheme'
-
-/**
- * @public
- * @deprecated
- */
-export interface ThemeColorProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
-}
-
-/**
- * @public
- * @deprecated Use `toneContext` instead.
- */
-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,81 +0,0 @@
-import {useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider, createGlobalStyle} from 'styled-components'
-import {DEFAULT_THEME_LAYER} from './defaults'
-import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
-import {legacyColors} from './lib/theme/color/_legacy/legacyColor'
-import {createCssVars} from './lib/theme/color/cssVariables'
-import {cssObjectToCssString} from './lib/theme/color/cssVariables/utils'
-import {ThemeContext} from './themeContext'
-import {ToneProvider} from './toneContext/toneProvider'
-import {RootTheme, Theme, ThemeContextValue} from './types'
-
-const GlobalVariables = createGlobalStyle<{$vars?: string}>`
-  :root {
-    ${({$vars}) => $vars}
-  }
-`
-
-/**
- * @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 {layer: rootLayer, ...restTheme} = themeProp
-
-    const layer = rootLayer || DEFAULT_THEME_LAYER
-
-    return {sanity: {...restTheme, layer, color: {...legacyColors, tones: restTheme.color.tones}}}
-  }, [themeProp])
-
-  const value: ThemeContextValue | null = useMemo(
-    () =>
-      themeProp && {
-        version: 0.0,
-        theme: themeProp,
-        scheme,
-        tone,
-      },
-    [themeProp, scheme, tone],
-  )
-
-  const cssVariables = useMemo(() => {
-    if (!themeProp?.color.tones) return
-
-    return cssObjectToCssString(createCssVars(scheme, themeProp?.color.tones))
-  }, [scheme, themeProp?.color.tones])
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <ThemeContext.Provider value={value}>
-      <GlobalVariables $vars={cssVariables} />
-      <StyledThemeProvider theme={theme}>
-        <ToneProvider tone={tone} scheme={scheme}>
-          {children}
-        </ToneProvider>
-      </StyledThemeProvider>
-    </ThemeContext.Provider>
-  )
-}

package/src/theme/toneContext/toneContext.ts

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

package/src/theme/toneContext/toneProvider.tsx

@@ -1,31 +0,0 @@
-import {useMemo} from 'react'
-import {ThemeColorName, ThemeColorSchemeKey, useRootTheme} from '..'
-import {ToneContext} from './toneContext'
-import {ToneContextValue} from './types'
-
-/**
- * @public
- */
-export interface ToneProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone: ThemeColorName
-}
-
-/**
- * @public
- */
-export function ToneProvider(props: ToneProviderProps): React.ReactElement {
-  const {children, scheme, tone} = props
-  const root = useRootTheme()
-  const value: ToneContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      scheme: scheme || root.scheme,
-      tone,
-    }),
-    [root.scheme, scheme, tone],
-  )
-
-  return <ToneContext.Provider value={value}>{children}</ToneContext.Provider>
-}

package/src/theme/toneContext/types.ts

@@ -1,10 +0,0 @@
-import {ThemeColorName, ThemeColorSchemeKey} from '..'
-
-/**
- * @public
- */
-export interface ToneContextValue {
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  tone: ThemeColorName
-}

package/src/theme/toneContext/useToneContext.tsx

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {useContext} from 'react'
-
-import {isRecord} from '../../lib/isRecord'
-import {ToneContext} from './toneContext'
-import {ToneContextValue} from './types'
-
-/**
- * @public
- */
-export function useToneContext(): ToneContextValue {
-  const value: unknown = useContext(ToneContext)
-
-  if (!value) {
-    throw new Error('useToneContext(): 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('useToneContext(): the context value is not compatible')
-  }
-
-  return value as any as ToneContextValue
-}

package/src/theme/types.ts

@@ -1,45 +0,0 @@
-import {CSSObject} from '../types/styled'
-import {BaseTheme, 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: RootTheme
-}
-
-/**
- * @public
- */
-export interface ThemeContextValue {
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorName
-}
-
-/**
- * @public
- */
-export interface FocusRing {
-  offset: number
-  width: number
-}