@sanity/ui 2.0.12 → 2.0.13-alpha.2

package/src/core/styles/shadow/shadowStyle.ts

@@ -1,4 +1,4 @@
-import {ThemeBoxShadow, ThemeShadow, getTheme_v2} from '@sanity/ui/theme'
+import {ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_RECORD} from '../../constants'
 import {rem, _responsive} from '../helpers'
@@ -21,7 +21,7 @@ function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSO
 }
 
 export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
-  const {card, media, shadow} = getTheme_v2(props.theme)
+  const {card, media, shadow} = props.theme.sanity.v2
 
   return _responsive(media, props.$shadow, (index) =>
     shadowStyle(shadow[index], card.shadow.outline),

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,8 +1,7 @@
 import {css, styled} from 'styled-components'
-import {getTheme_v2} from '../../../../theme'
 
 export const Root = styled.div((props) => {
-  const {button, card, input} = getTheme_v2(props.theme)
+  const {button, card, input} = props.theme.sanity.v2
 
   return css`
     background: #000;

package/src/core/theme/theme.test.tsx

@@ -1,8 +1,8 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {render} from '../../../test'
+import {buildTheme} from '../../theme'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'

package/src/core/theme/themeProvider.tsx

@@ -1,12 +1,7 @@
-import {
-  RootTheme,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  Theme,
-  getScopedTheme,
-} from '@sanity/ui/theme'
+import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey, Theme} from '@sanity/ui/theme'
 import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+import {getScopedTheme} from '../../theme'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -53,6 +48,10 @@ export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
     return <pre>ThemeProvider: no "theme" property provided</pre>
   }
 
+  if (!theme.sanity.v2) {
+    return <pre>ThemeProvider: no "theme.sanity.v2" property in theme</pre>
+  }
+
   return (
     <ThemeContext.Provider value={themeContext}>
       <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>

package/src/core/theme/useTheme.ts

@@ -1,5 +1,6 @@
-import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
+import type {Theme, Theme_v2} from '@sanity/ui/theme'
 import {useTheme as useStyledTheme} from 'styled-components'
+import {getTheme_v2} from '../../theme'
 
 /**
  * @public

package/src/core/utils/arrow/arrow.tsx

@@ -1,5 +1,5 @@
 import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import {styled, css} from 'styled-components'
+import styled, {css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 const TestCard = styled(Card)`
   --card-fg-color: orange;

package/src/core/utils/layer/layer.tsx

@@ -1,5 +1,5 @@
 import {FocusEvent, forwardRef, useCallback, useEffect, useRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
 import {useForwardedRef} from '../../hooks'

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,5 +1,5 @@
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 
 /**
  * @public

package/src/core/utils/virtualList/virtualList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
-import {styled} from 'styled-components'
+import styled from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
 import {_ResizeObserver} from '../../observers'

package/src/theme/system/theme.ts

@@ -133,6 +133,6 @@ export interface Theme {
      * @deprecated Use `v2.color` instead
      */
     color: ThemeColor
-    v2?: Theme_v2
+    v2: Theme_v2
   }
 }