@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

package/src/theme/v3/color/parseColor.ts

@@ -1,167 +0,0 @@
-import {Hue, HUES, Tint, TINTS} from '../../palette'
-
-const RE_PERCENTAGE = /^([0-9]+)%/
-const RE_OPACITY = /^(1|0\.[0-9]+)?/
-
-export interface TokenizeColorResult {
-  color: {type: 'black' | 'white'} | {type: 'hue'; hue: Hue | undefined; tint: Tint | undefined}
-  opacity: number | undefined
-  mix: number | undefined
-}
-
-export function parseColor(str: string): TokenizeColorResult {
-  let cursor = 0
-
-  const color = getColor()
-
-  if (!color) {
-    throw new Error(`Invalid color: ${str}`)
-  }
-
-  const opacity = getOpacity()
-  const mix = getMixPercentage()
-
-  return {
-    color,
-    mix,
-    opacity,
-  }
-
-  function _consume(s: string) {
-    if (str.startsWith(s, cursor)) {
-      cursor += s.length
-
-      return s
-    }
-
-    return undefined
-  }
-
-  function _peek() {
-    return str[cursor]
-  }
-
-  function getColor(): TokenizeColorResult['color'] | undefined {
-    ignoreWhitespace()
-
-    let v = _consume('black') || _consume('white')
-
-    if (v) {
-      return {
-        type: v as 'black' | 'white',
-      }
-    }
-
-    for (const hue of HUES) {
-      v = _consume(String(hue))
-
-      if (v) {
-        if (_peek() !== '/') {
-          throw new Error(`Expected slash after hue`)
-        }
-
-        cursor += 1
-
-        const tint = getTint()
-
-        if (!tint) {
-          throw new Error(`Expected tint after hue`)
-        }
-
-        return {
-          type: 'hue',
-          hue,
-          tint,
-        }
-      }
-    }
-
-    const tint = getTint()
-
-    if (tint) {
-      return {
-        type: 'hue',
-        hue: undefined,
-        tint,
-      }
-    }
-
-    return undefined
-  }
-
-  function getTint() {
-    ignoreWhitespace()
-
-    // if (_peek() === '/') {
-    //   cursor += 1
-
-    let v = Number(str.slice(cursor, cursor + 3)) as Tint
-
-    if (TINTS.includes(v)) {
-      cursor += 3
-
-      return v
-    }
-
-    v = Number(str.slice(cursor, cursor + 2)) as Tint
-
-    if (TINTS.includes(v)) {
-      cursor += 2
-
-      return v
-    }
-
-    // for (const tint of COLOR_TINTS) {
-    //   const v = _consume(String(tint))
-
-    //   if (v) {
-    //     return tint
-    //   }
-    // }
-
-    //   cursor -= 1
-    // }
-
-    return undefined
-  }
-
-  function getMixPercentage() {
-    ignoreWhitespace()
-
-    const match = RE_PERCENTAGE.exec(str.slice(cursor))
-
-    if (match) {
-      cursor += match[0].length
-
-      return parseFloat(match[1])
-    }
-
-    return undefined
-  }
-
-  function getOpacity() {
-    ignoreWhitespace()
-
-    if (_peek() === '/') {
-      cursor += 1
-
-      const match = RE_OPACITY.exec(str.slice(cursor))
-
-      if (match) {
-        cursor += match[0].length
-
-        return parseFloat(match[1])
-      }
-
-      cursor -= 1
-    }
-
-    return undefined
-  }
-
-  function ignoreWhitespace() {
-    while (_peek() === ' ') {
-      cursor++
-    }
-  }
-}

package/src/theme/v3/color/renderColor.test.ts

@@ -1,19 +0,0 @@
-import {renderColor, RenderColorContext} from './renderColor'
-
-it('should render color', () => {
-  const context: RenderColorContext = {
-    bgVar: '--bg',
-    hue: 'gray',
-    scheme: 'light',
-  }
-
-  expect(renderColor(['500/0.2', '500/0.2'], context)).toBe(
-    `color-mix(in srgb, transparent, var(--gray-500) 20%)`,
-  )
-
-  expect(renderColor(['500', '500'], context)).toBe(`var(--gray-500)`)
-
-  expect(renderColor(['50 20%', '50 20%'], context)).toBe(
-    `color-mix(in srgb, var(--bg), var(--gray-50) 20%)`,
-  )
-})

package/src/theme/v3/color/renderColor.ts

@@ -1,33 +0,0 @@
-import {Hue} from '../../palette'
-import {ThemeColorSchemeKey} from '../../v2'
-import {parseColor} from './parseColor'
-import {ColorToken} from './token'
-
-type CSSVariableKey = `--${string}`
-
-export interface RenderColorContext {
-  bgVar: CSSVariableKey
-  hue: Hue
-  scheme: ThemeColorSchemeKey
-}
-
-export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
-  const {bgVar, hue, scheme} = context
-
-  const result = parseColor(token[scheme === 'dark' ? 0 : 1])
-
-  const colorVar =
-    result.color.type === 'hue'
-      ? `--${result.color.hue ?? hue}-${result.color.tint}`
-      : `--${result.color.type}`
-
-  if (result.mix !== undefined) {
-    return `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)`
-  }
-
-  if (result.opacity !== undefined) {
-    return `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)`
-  }
-
-  return `var(${colorVar})`
-}

package/src/theme/v3/defaults.ts

@@ -1,205 +0,0 @@
-import {PaletteConfig} from '../palette'
-import {PartialTokens, Tokens} from './tokens'
-
-export const defaultPalette: PaletteConfig = {
-  chroma: {min: 0.005, max: 0.2325},
-  luminosity: {min: 0.1875, max: 1},
-  hues: {
-    gray: {h: 277, c: 0.04},
-    blue: {h: 273, c: 0.185},
-    purple: {h: 295, c: 0.4},
-    magenta: {h: 12, c: 0.4},
-    red: {h: 30, c: 0.4},
-    orange: {h: 68, c: 0.4},
-    yellow: {h: 90, c: 0.4},
-    green: {h: 171, c: 0.4},
-    cyan: {h: 194, c: 0.4},
-  },
-}
-
-export const defaultTokens: PartialTokens<Tokens> = {
-  color: {
-    '*': {
-      // backdrop: ['black/0.2', '200/0.2'],
-      backdrop: ['black/0.5', 'gray/100/0.5'],
-      focusRing: ['blue/500', 'blue/300'],
-      link: {
-        fg: ['blue/400', 'blue/600'],
-      },
-      shadow: {
-        outline: ['500/0.4', '500/0.3'],
-        umbra: ['black/0.2', '500/0.1'],
-        penumbra: ['black/0.14', '500/0.07'],
-        ambient: ['black/0.12', '500/0.06'],
-      },
-      token: {
-        atrule: ['purple/300', 'purple/600'],
-        attrName: ['green/300', 'green/600'],
-        attrValue: ['yellow/300', 'yellow/600'],
-        attribute: ['yellow/300', 'yellow/600'],
-        boolean: ['purple/300', 'purple/600'],
-        builtin: ['purple/300', 'purple/600'],
-        cdata: ['yellow/300', 'yellow/600'],
-        char: ['yellow/300', 'yellow/600'],
-        class: ['orange/300', 'orange/600'],
-        className: ['cyan/300', 'cyan/600'],
-        comment: ['gray/600', 'gray/300'],
-        constant: ['purple/300', 'purple/600'],
-        deleted: ['red/300', 'red/600'],
-        entity: ['red/300', 'red/600'],
-        function: ['green/300', 'green/600'],
-        hexcode: ['blue/300', 'blue/600'],
-        id: ['purple/300', 'purple/600'],
-        important: ['purple/300', 'purple/600'],
-        inserted: ['green/300', 'green/600'],
-        keyword: ['magenta/300', 'magenta/600'],
-        number: ['purple/300', 'purple/600'],
-        operator: ['magenta/300', 'magenta/600'],
-        prolog: ['gray/300', 'gray/600'],
-        property: ['blue/300', 'blue/600'],
-        pseudoClass: ['yellow/300', 'yellow/600'],
-        pseudoElement: ['yellow/300', 'yellow/600'],
-        punctuation: ['gray/300', 'gray/600'],
-        regex: ['blue/300', 'blue/600'],
-        selector: ['red/300', 'red/600'],
-        string: ['yellow/300', 'yellow/600'],
-        symbol: ['purple/300', 'purple/600'],
-        tag: ['red/300', 'red/600'],
-        unit: ['orange/300', 'orange/600'],
-        url: ['red/300', 'red/600'],
-        variable: ['red/300', 'red/600'],
-      },
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['900', '50'],
-              4: ['800', '150'],
-            },
-            border: {
-              0: ['800', '150'],
-              4: ['600', '350'],
-            },
-            fg: {
-              0: ['100', '900'],
-              4: ['300', '700'],
-            },
-          },
-          'primary': {
-            _hue: 'blue',
-          },
-          'suggest': {
-            _hue: 'purple',
-          },
-          'positive': {
-            _hue: 'green',
-          },
-          'caution': {
-            _hue: 'yellow',
-          },
-          'critical': {
-            _hue: 'red',
-          },
-        },
-        solid: {
-          '*': {
-            bg: {
-              0: ['300', '500'],
-              4: ['200', '600'],
-            },
-            border: {
-              0: ['200', '400'],
-              4: ['100', '500'],
-            },
-            fg: {
-              0: ['black', 'white'],
-              4: ['600', '400'],
-            },
-          },
-          'default': {
-            bg: {
-              0: ['200', '800'],
-              4: ['white', 'black'],
-            },
-            border: {
-              0: ['300', '700'],
-              4: ['200', '800'],
-            },
-          },
-          'primary': {
-            _hue: 'blue',
-          },
-          'suggest': {
-            _hue: 'purple',
-          },
-          'positive': {
-            _hue: 'green',
-          },
-          'caution': {
-            _hue: 'yellow',
-          },
-          'critical': {
-            _hue: 'red',
-          },
-        },
-      },
-    },
-    'transparent': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['black', 'gray/50'],
-              4: ['900', '150'],
-            },
-            border: {
-              0: ['900', '150'],
-              4: ['700', '350'],
-            },
-            fg: {
-              0: ['150', 'black'],
-              4: ['550', '600'],
-            },
-          },
-        },
-      },
-    },
-    'default': {
-      variant: {
-        tinted: {
-          '*': {
-            bg: {
-              0: ['gray/950', 'white'],
-              4: ['850', '100'],
-            },
-            border: {
-              0: ['850', '100'],
-              4: ['650', '300'],
-            },
-            fg: {
-              0: ['white', 'black'],
-              4: ['400', '600'],
-            },
-          },
-        },
-      },
-    },
-    'primary': {
-      _hue: 'blue',
-    },
-    'suggest': {
-      _hue: 'purple',
-    },
-    'positive': {
-      _hue: 'green',
-    },
-    'caution': {
-      _hue: 'yellow',
-    },
-    'critical': {
-      _hue: 'red',
-    },
-  },
-}
-
-// export const defaultTheme = buildTheme_v3()

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(theme._palette)}
-      </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
-}