@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

package/src/theme/versioning/v3_v2.ts

@@ -1,108 +0,0 @@
-// import {vars} from '@sanity/ui/css'
-
-import {RootTheme_v2} from '../v2'
-import {Theme_v3} from '../v3'
-import {themeColor_v3_v2} from './themeColor_v3_v2'
-
-export function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {
-  return {
-    _version: 2,
-    avatar: theme_v3.avatar,
-    button: theme_v3.button,
-    card: theme_v3.card,
-    color: {
-      dark: {
-        transparent: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.transparent,
-          dark: true,
-          // vars: vars.color.dark.transparent,
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.default,
-          dark: true,
-          // vars: vars.color.dark.default,
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.neutral,
-          dark: true,
-          // vars: vars.color.dark.neutral,
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.primary,
-          dark: true,
-          // vars: vars.color.dark.primary,
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.suggest,
-          dark: true,
-          // vars: vars.color.dark.suggest,
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.positive,
-          dark: true,
-          // vars: vars.color.dark.positive,
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.caution,
-          dark: true,
-          // vars: vars.color.dark.caution,
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.dark.card.critical,
-          dark: true,
-          // vars: vars.color.dark.critical,
-        }),
-      },
-      light: {
-        transparent: themeColor_v3_v2({
-          color: theme_v3.color.light.card.transparent,
-          dark: false,
-          // vars: vars.color.light.transparent,
-        }),
-        default: themeColor_v3_v2({
-          color: theme_v3.color.light.card.default,
-          dark: false,
-          // vars: vars.color.light.default,
-        }),
-        neutral: themeColor_v3_v2({
-          color: theme_v3.color.light.card.neutral,
-          dark: false,
-          // vars: vars.color.light.neutral,
-        }),
-        primary: themeColor_v3_v2({
-          color: theme_v3.color.light.card.primary,
-          dark: false,
-          // vars: vars.color.light.primary,
-        }),
-        suggest: themeColor_v3_v2({
-          color: theme_v3.color.light.card.suggest,
-          dark: false,
-          // vars: vars.color.light.suggest,
-        }),
-        positive: themeColor_v3_v2({
-          color: theme_v3.color.light.card.positive,
-          dark: false,
-          // vars: vars.color.light.positive,
-        }),
-        caution: themeColor_v3_v2({
-          color: theme_v3.color.light.card.caution,
-          dark: false,
-          // vars: vars.color.light.caution,
-        }),
-        critical: themeColor_v3_v2({
-          color: theme_v3.color.light.card.critical,
-          dark: false,
-          // vars: vars.color.light.critical,
-        }),
-      },
-    },
-    container: theme_v3.container,
-    font: theme_v3.font,
-    input: theme_v3.input,
-    layer: theme_v3.layer,
-    media: theme_v3.media,
-    radius: theme_v3.radius,
-    shadow: theme_v3.shadow,
-    space: theme_v3.space,
-  }
-}

package/src/ui/StyleTags.tsx

@@ -1,24 +0,0 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
-import {ReactNode} from 'react'
-
-/* @beta */
-export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
-  const {theme: themeProp} = props
-
-  const theme = themeProp ?? buildTheme_v3()
-
-  return (
-    <>
-      <style href="sanity-palette" precedence="palette">
-        {compilePalette()}
-      </style>
-      <style href="sanity-theme" precedence="theme">
-        {compileTheme({v3: theme} as RootTheme)}
-      </style>
-      <style href="sanity-system" precedence="system">
-        {compileSystem()}
-      </style>
-    </>
-  )
-}

package/src/ui/_compat/index.ts

@@ -1,9 +0,0 @@
-export * from './styles'
-export * from './theme'
-export * from './types'
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'

package/src/ui/_compat/styles/_responsive.ts

@@ -1,19 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-
-/**
- * @internal
- * @deprecated do not use
- */
-export function _responsive<T>(
-  media: number[],
-  values: T[],
-  callback: (value: T, index: number, array: T[]) => CSSObject,
-): CSSObject[] {
-  const statements = values?.map(callback) || []
-
-  return statements.map((statement, mediaIndex) => {
-    if (mediaIndex === 0) return statement
-
-    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
-  })
-}

package/src/ui/_compat/styles/index.ts

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

package/src/ui/_compat/theme/index.ts

@@ -1,5 +0,0 @@
-export * from './themeColorProvider'
-export * from './themeProvider'
-export * from './types'
-export * from './useRootTheme'
-export * from './useTheme'

package/src/ui/_compat/theme/theme.test.tsx

@@ -1,73 +0,0 @@
-/** @jest-environment jsdom */
-
-import {buildTheme} from '@sanity/ui/theme'
-
-import {render} from '../../../../test'
-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: buildTheme(),
-          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')
-    })
-  })
-})

package/src/ui/_compat/theme/themeColorProvider.tsx

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

package/src/ui/_compat/theme/themeContext.ts

@@ -1,10 +0,0 @@
-import {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @internal
- */
-export const ThemeContext: Context<ThemeContextValue | null> =
-  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/ui/_compat/theme/themeProvider.tsx

@@ -1,74 +0,0 @@
-import {
-  getScopedTheme,
-  type RootTheme,
-  type Theme,
-  type ThemeColorCardToneKey,
-  type ThemeColorSchemeKey,
-} from '@sanity/ui/theme'
-import {ReactElement, ReactNode, useContext, useMemo} from 'react'
-import {ThemeProvider as StyledThemeProvider} from 'styled-components'
-
-import {CardProvider} from '../../primitives/card/cardProvider'
-import {ThemeColorProvider} from './themeColorProvider'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export interface ThemeProviderProps {
-  children?: ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorCardToneKey
-}
-
-/**
- * @public
- */
-export function ThemeProvider(props: ThemeProviderProps): ReactElement {
-  const parentTheme = useContext(ThemeContext)
-  const {children} = props
-  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = props.theme ?? (parentTheme?.theme || null)
-  const tone = props.tone ?? (parentTheme?.tone || 'default')
-
-  const themeContext: ThemeContextValue | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return {
-      version: 0.0,
-      theme: rootTheme,
-      scheme,
-      tone,
-    }
-  }, [rootTheme, scheme, tone])
-
-  const theme: Theme | null = useMemo(() => {
-    if (!rootTheme) return null
-
-    return getScopedTheme(rootTheme, scheme, tone)
-  }, [scheme, rootTheme, tone])
-
-  if (!theme) {
-    return <pre>ThemeProvider: no "theme" property provided</pre>
-  }
-
-  return (
-    <CardProvider
-      compat_provider={
-        // Render a theme provider around the card if the scheme or tone differs from the root theme.
-        // This is needed for backwards compatibility with the legacy theme API.
-        ThemeColorProvider
-      }
-      scheme={scheme}
-      tone={tone}
-    >
-      <ThemeContext.Provider value={themeContext}>
-        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-      </ThemeContext.Provider>
-    </CardProvider>
-  )
-}
-
-ThemeProvider.displayName = 'ThemeProvider'

package/src/ui/_compat/theme/types.ts

@@ -1,12 +0,0 @@
-import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-
-/**
- * @public
- */
-export interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorCardToneKey
-}

package/src/ui/_compat/theme/useRootTheme.ts

@@ -1,17 +0,0 @@
-import {useContext} from 'react'
-
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export function useRootTheme(): ThemeContextValue {
-  const value = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  return value as unknown as ThemeContextValue
-}

package/src/ui/_compat/theme/useTheme.ts

@@ -1,16 +0,0 @@
-import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from 'styled-components'
-
-/**
- * @public
- */
-export function useTheme(): Theme {
-  return useStyledTheme() as Theme
-}
-
-/**
- * @public
- */
-export function useTheme_v2(): Theme_v2 {
-  return getTheme_v2(useStyledTheme() as Theme)
-}

package/src/ui/_compat/types.ts

@@ -1,274 +0,0 @@
-// This file re-exports API members which existed in the `@sanity/ui` export in v1.
-
-import {
-  type BaseTheme as _BaseTheme,
-  buildTheme,
-  type HSL as _HSL,
-  type PartialThemeColorBuilderOpts,
-  type RGB as _RGB,
-  type RootTheme as _RootTheme,
-  type Theme as _Theme,
-  type ThemeAvatar,
-  type ThemeBoxShadow,
-  type ThemeColor,
-  type ThemeColorBase,
-  type ThemeColorBuilderOpts,
-  type ThemeColorButton,
-  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
-  type ThemeColorButtonState,
-  type ThemeColorButtonStates,
-  type ThemeColorButtonTones,
-  type ThemeColorCard,
-  type ThemeColorCardState,
-  type ThemeColorGenericState,
-  type ThemeColorInput,
-  type ThemeColorInputState,
-  type ThemeColorInputStates,
-  type ThemeColorMuted,
-  type ThemeColorMutedTone,
-  type ThemeColorName,
-  type ThemeColorScheme,
-  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
-  type ThemeColorSchemes,
-  type ThemeColorSelectable,
-  type ThemeColorSelectableState,
-  type ThemeColorSelectableStates,
-  type ThemeColorSolid,
-  type ThemeColorSolidTone,
-  type ThemeColorSpot,
-  type ThemeColorSpotKey,
-  type ThemeColorSyntax as _ThemeColorSyntax,
-  type ThemeColorToneKey,
-  type ThemeFont as _ThemeFont,
-  type ThemeFontKey as _ThemeFontKey,
-  type ThemeFonts as _ThemeFonts,
-  type ThemeFontSize as _ThemeFontSize,
-  type ThemeFontWeight as _ThemeFontWeight,
-  type ThemeFontWeightKey as _ThemeFontWeightKey,
-  type ThemeInput,
-  type ThemeLayer as _ThemeLayer,
-  type ThemeShadow as _ThemeShadow,
-  type ThemeStyles,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
- */
-export type BaseTheme = _BaseTheme
-
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
- */
-export type BoxShadow = ThemeBoxShadow
-
-/**
- * @public
- * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
- */
-export type HSL = _HSL
-
-/**
- * @public
- * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
- */
-export type RGB = _RGB
-
-/**
- * @public
- * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
- */
-export type RootTheme = _RootTheme
-
-/**
- * @public
- * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
- */
-export type Styles = ThemeStyles
-
-/**
- * @public
- * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
- */
-export type Theme = _Theme
-
-/**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorSchemeKey = _ThemeColorSchemeKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorSyntax = _ThemeColorSyntax
-
-/**
- * @public
- * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
- */
-export type ThemeFont = _ThemeFont
-
-/**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontKey = _ThemeFontKey
-
-/**
- * @public
- * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontSize = _ThemeFontSize
-
-/**
- * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontWeight = _ThemeFontWeight
-
-/**
- * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontWeightKey = _ThemeFontWeightKey
-
-/**
- * @public
- * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
- */
-export type ThemeFonts = _ThemeFonts
-
-/**
- * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
- */
-export type ThemeLayer = _ThemeLayer
-
-/**
- * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
- */
-export type ThemeShadow = _ThemeShadow
-
-export {
-  type PartialThemeColorBuilderOpts,
-  type ThemeAvatar,
-  type ThemeColor,
-  type ThemeColorBase,
-  type ThemeColorBuilderOpts,
-  type ThemeColorButton,
-  type ThemeColorButtonState,
-  type ThemeColorButtonStates,
-  type ThemeColorButtonTones,
-  type ThemeColorCard,
-  type ThemeColorCardState,
-  type ThemeColorGenericState,
-  type ThemeColorInput,
-  type ThemeColorInputState,
-  type ThemeColorInputStates,
-  type ThemeColorMuted,
-  type ThemeColorMutedTone,
-  type ThemeColorName,
-  type ThemeColorScheme,
-  type ThemeColorSchemes,
-  type ThemeColorSelectable,
-  type ThemeColorSelectableState,
-  type ThemeColorSelectableStates,
-  type ThemeColorSolid,
-  type ThemeColorSolidTone,
-  type ThemeColorSpot,
-  type ThemeColorSpotKey,
-  type ThemeColorToneKey,
-  type ThemeInput,
-}
-
-import {
-  createColorTheme as _createColorTheme,
-  hexToRgb as _hexToRgb,
-  hslToRgb as _hslToRgb,
-  multiply as _multiply,
-  parseColor as _parseColor,
-  rgba as _rgba,
-  rgbToHex as _rgbToHex,
-  rgbToHsl as _rgbToHsl,
-  screen as _screen,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export const createColorTheme = _createColorTheme
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export const hexToRgb = _hexToRgb
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export const hslToRgb = _hslToRgb
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export const multiply = _multiply
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export const parseColor = _parseColor
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export const rgbToHex = _rgbToHex
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export const rgbToHsl = _rgbToHsl
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export const rgba = _rgba
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export const screen = _screen
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export const studioTheme = (() => {
-  let theme: ReturnType<typeof buildTheme> | undefined
-  return {
-    get value() {
-      if (!theme) {
-        theme = buildTheme()
-      }
-      return theme
-    },
-  }
-})()