@sanity/ui 2.0.13-alpha.2 → 2.0.14

package/src/core/styles/grid/gridItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
@@ -27,7 +27,7 @@ const GRID_ITEM_COLUMN = {
 }
 
 function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$row, (row) => {
     if (typeof row === 'number') {
@@ -39,7 +39,7 @@ function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeP
 }
 
 function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart,
@@ -47,13 +47,13 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
 }
 
 function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$column, (column) => {
     if (typeof column === 'number') {
@@ -65,7 +65,7 @@ function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & The
 }
 
 function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart,
@@ -73,7 +73,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
 }
 
 function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columnEnd, (columnEnd) => ({
     gridColumnEnd: columnEnd,

package/src/core/styles/grid/gridStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
@@ -43,7 +43,7 @@ export function responsiveGridStyle(): Array<
 }
 
 function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow,
@@ -51,7 +51,7 @@ function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoRows, (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
@@ -59,7 +59,7 @@ function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$autoCols, (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
@@ -67,7 +67,7 @@ function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProp
 }
 
 function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$columns, (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
@@ -75,7 +75,7 @@ function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps
 }
 
 function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media} = props.theme.sanity.v2
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$rows, (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
@@ -83,7 +83,7 @@ function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gap, (gap) => ({
     gridGap: gap ? rem(space[gap]) : undefined,
@@ -91,7 +91,7 @@ function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapX, (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : undefined,
@@ -99,7 +99,7 @@ function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
 }
 
 function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
-  const {media, space} = props.theme.sanity.v2
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : undefined,

package/src/core/styles/helpers.ts

@@ -1,4 +1,4 @@
-import {Theme} from '@sanity/ui/theme'
+import {Theme, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../constants'
 
@@ -64,7 +64,7 @@ export function _getResponsiveSpace(
     return null
   }
 
-  const {media, space} = theme.sanity.v2
+  const {media, space} = getTheme_v2(theme)
 
   return _responsive(media, spaceIndexes, (spaceIndex) =>
     _fillCSSObject(props, rem(space[spaceIndex])),

package/src/core/styles/input/responsiveInputPaddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 
@@ -14,7 +14,7 @@ export function responsiveInputPaddingStyle(
   props: TextInputResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[] {
   const {$fontSize, $iconLeft, $iconRight, $padding, $space} = props
-  const {font, media, space} = props.theme.sanity.v2
+  const {font, media, space} = getTheme_v2(props.theme)
   const len = Math.max($padding.length, $space.length, $fontSize.length)
   const _padding: number[] = []
   const _space: number[] = []

package/src/core/styles/input/textInputStyle.ts

@@ -1,4 +1,4 @@
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {CardTone} from '../../types'
@@ -43,7 +43,7 @@ export function textInputBaseStyle(
   props: TextInputInputStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
   const {$scheme, $tone, $weight} = props
-  const {color, font} = props.theme.sanity.v2
+  const {color, font} = getTheme_v2(props.theme)
 
   return css`
     appearance: none;
@@ -113,7 +113,7 @@ export function textInputBaseStyle(
 }
 
 export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
-  const {font, media} = props.theme.sanity.v2
+  const {font, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$fontSize, (sizeIndex) => {
     const size = font.text.sizes[sizeIndex] || font.text.sizes[2]
@@ -129,7 +129,7 @@ export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
   const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing} = props
-  const {color, input} = props.theme.sanity.v2
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     --input-box-shadow: none;

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {buildTheme, getScopedTheme} from '../../../theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
 const theme = getScopedTheme(buildTheme(), 'light', 'default')

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {buildTheme, getScopedTheme} from '../../../theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
 const theme = getScopedTheme(buildTheme(), 'light', 'default')

package/src/core/styles/radius/radiusStyle.ts

@@ -1,10 +1,10 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'
 
 export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {media, radius} = props.theme.sanity.v2
+  const {media, radius} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$radius, (value) => {
     let borderRadius: string | 0 = 0

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

@@ -1,4 +1,4 @@
-import {ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
+import {ThemeBoxShadow, ThemeShadow, getTheme_v2} 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} = props.theme.sanity.v2
+  const {card, media, shadow} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$shadow, (index) =>
     shadowStyle(shadow[index], card.shadow.outline),

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

@@ -1,7 +1,8 @@
 import {css, styled} from 'styled-components'
+import {getTheme_v2} from '../../../../theme'
 
 export const Root = styled.div((props) => {
-  const {button, card, input} = props.theme.sanity.v2
+  const {button, card, input} = getTheme_v2(props.theme)
 
   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,7 +1,12 @@
-import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey, Theme} from '@sanity/ui/theme'
+import {
+  RootTheme,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  Theme,
+  getScopedTheme,
+} 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'
 
@@ -48,10 +53,6 @@ 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,6 +1,5 @@
-import type {Theme, Theme_v2} from '@sanity/ui/theme'
+import {Theme, Theme_v2, getTheme_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
   }
 }