@sanity/ui 2.0.0-alpha.33 → 2.0.0-alpha.35

package/src/core/primitives/popover/popover.tsx

@@ -22,7 +22,7 @@ import {
   useRef,
 } from 'react'
 import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -85,7 +85,7 @@ export const Popover = memo(
       Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
-    const theme = useTheme()
+    const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
@@ -115,7 +115,7 @@ export const Popover = memo(
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
@@ -135,7 +135,11 @@ export const Popover = memo(
     // Update width when
     // - media index changes
     // - `width` property changes
-    const width = calcCurrentWidth({mediaIndex, theme, width: widthArrayProp})
+    const width = calcCurrentWidth({
+      container,
+      mediaIndex,
+      width: widthArrayProp,
+    })
     const widthRef = useRef(width)
 
     useEffect(() => {

package/src/core/primitives/popover/types.ts

@@ -2,5 +2,5 @@
 export type PopoverUpdateCallback = () => void
 
 /** @public */
-// TODO: remove `auto` from PopoverWidth
+// todo: remove `auto` from PopoverWidth
 export type PopoverWidth = number | 'auto'

package/src/core/primitives/radio/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
@@ -17,10 +18,7 @@ export function radioBaseStyle(): ReturnType<typeof css> {
 }
 
 export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.radio
-  const color = theme.sanity.color.input
+  const {color, input} = getTheme_v2(props.theme)
   const dist = (input.radio.size - input.radio.markSize) / 2
 
   return css`
@@ -45,9 +43,9 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
       height: ${rem(input.radio.size)};
       width: ${rem(input.radio.size)};
       border-radius: ${rem(input.radio.size / 2)};
-      background: ${color.default.enabled.bg};
+      background: ${color.input.default.enabled.bg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
 
@@ -59,7 +57,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
         height: ${rem(input.radio.markSize)};
         width: ${rem(input.radio.markSize)};
         border-radius: ${rem(input.radio.markSize / 2)};
-        background: ${color.default.enabled.fg};
+        background: ${color.input.default.enabled.fg};
         opacity: 0;
       }
     }
@@ -67,14 +65,14 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
     /* focused */
     &:not(:disabled):focus + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
-        focusRing,
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.radio.focusRing,
       })};
     }
 
     &:not(:disabled):focus:not(:focus-visible) + span {
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
     }
@@ -85,33 +83,33 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
 
     /* customValidity */
     &[data-error] + span {
-      background-color: ${color.invalid.enabled.border};
+      background-color: ${color.input.invalid.enabled.border};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.invalid.enabled.bg2,
+        color: color.input.invalid.enabled.muted.bg,
       })};
       &::after {
-        background: ${color.invalid.enabled.bg2};
+        background: ${color.input.invalid.enabled.muted.bg};
       }
     }
 
     /* read only */
     &[data-read-only] + span {
-      box-shadow: 0 0 0 1px ${color.default.readOnly.border};
-      background: ${color.default.readOnly.bg};
+      box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      background: ${color.input.default.readOnly.bg};
 
       &::after {
-        background: ${color.default.readOnly.border};
+        background: ${color.input.default.readOnly.border};
       }
     }
 
     /* disabled */
     &:not([data-read-only]):disabled + span {
-      box-shadow: 0 0 0 1px ${color.default.disabled.border};
-      background: ${color.default.disabled.bg};
+      box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      background: ${color.input.default.disabled.bg};
 
       &::after {
-        background: ${color.default.disabled.border};
+        background: ${color.input.default.disabled.border};
       }
     }
   `

package/src/core/primitives/select/styles.ts

@@ -1,4 +1,4 @@
-import {ThemeFontSize} from '@sanity/ui/theme'
+import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
@@ -24,14 +24,13 @@ function rootStyle(): ReturnType<typeof css> {
 }
 
 function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const font = theme.sanity.fonts.text
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
-    font-family: ${font.family};
+    font-family: ${font.text.family};
     color: inherit;
     width: 100%;
     outline: none;
@@ -44,27 +43,24 @@ function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
 }
 
 function inputColorStyle(props: ThemeProps) {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.select
-  const color = theme.sanity.color.input
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
     /* enabled */
-    background-color: ${color.default.enabled.bg};
-    color: ${color.default.enabled.fg};
+    background-color: ${color.input.default.enabled.bg};
+    color: ${color.input.default.enabled.fg};
     box-shadow: ${focusRingBorderStyle({
-      color: color.default.enabled.border,
+      color: color.input.default.enabled.border,
       width: input.border.width,
     })};
 
     /* hovered */
     @media (hover: hover) {
       &:not(:disabled):hover {
-        background-color: ${color.default.hovered.bg};
-        color: ${color.default.hovered.fg};
+        background-color: ${color.input.default.hovered.bg};
+        color: ${color.input.default.hovered.fg};
         box-shadow: ${focusRingBorderStyle({
-          color: color.default.hovered.border,
+          color: color.input.default.hovered.border,
           width: input.border.width,
         })};
       }
@@ -73,27 +69,27 @@ function inputColorStyle(props: ThemeProps) {
     /* focused */
     &:not(:disabled):focus {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
-        focusRing,
+        border: {width: input.border.width, color: color.input.default.enabled.border},
+        focusRing: input.select.focusRing,
       })};
     }
 
     /* read-only */
     &[data-read-only] {
-      background-color: ${color.default.readOnly.bg};
-      color: ${color.default.readOnly.fg};
+      background-color: ${color.input.default.readOnly.bg};
+      color: ${color.input.default.readOnly.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.readOnly.border,
+        color: color.input.default.readOnly.border,
         width: input.border.width,
       })};
     }
 
     /* disabled */
     &:not([data-read-only]):disabled {
-      background-color: ${color.default.disabled.bg};
-      color: ${color.default.disabled.fg};
+      background-color: ${color.input.default.disabled.bg};
+      color: ${color.input.default.disabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.disabled.border,
+        color: color.input.default.disabled.border,
         width: input.border.width,
       })};
     }
@@ -105,11 +101,11 @@ function textSize(size: ThemeFontSize) {
 }
 
 function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
-  const {theme, $fontSize} = props
-  const {sizes} = theme.sanity.fonts.text
+  const {$fontSize} = props
+  const {font, media} = getTheme_v2(props.theme)
 
-  return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
-    textSize(sizes[sizeIndex] || sizes[2]),
+  return _responsive(media, $fontSize, (sizeIndex) =>
+    textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
   )
 }
 
@@ -133,8 +129,7 @@ function inputStyle(): Array<
 }
 
 function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const color = theme.sanity.color.input
+  const {color} = getTheme_v2(props.theme)
 
   return css`
     pointer-events: none;
@@ -143,23 +138,23 @@ function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
     right: 0;
 
     /* enabled */
-    --card-fg-color: ${color.default.enabled.fg};
+    --card-fg-color: ${color.input.default.enabled.fg};
 
     /* hover */
     @media (hover: hover) {
       select:not(disabled):not(:read-only):hover + && {
-        --card-fg-color: ${color.default.hovered.fg};
+        --card-fg-color: ${color.input.default.hovered.fg};
       }
     }
 
     /* disabled */
     select:disabled + && {
-      --card-fg-color: ${color.default.disabled.fg};
+      --card-fg-color: ${color.input.default.disabled.fg};
     }
 
     /* read-only */
     select[data-read-only] + && {
-      --card-fg-color: ${color.default.readOnly.fg};
+      --card-fg-color: ${color.input.default.readOnly.fg};
     }
   `
 }

package/src/core/primitives/stack/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 
 export interface ResponsiveStackSpaceStyleProps {
@@ -23,8 +23,7 @@ export function stackBaseStyle(): CSSObject {
 export function responsiveStackSpaceStyle(
   props: ResponsiveStackSpaceStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media, space} = theme.sanity
+  const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex]),

package/src/core/primitives/switch/__workshop__/props.tsx

@@ -1,41 +1,21 @@
-import {Flex, Switch, useTheme} from '@sanity/ui'
-import {useBoolean, useNumber} from '@sanity/ui-workshop'
-import {useCallback, useMemo} from 'react'
-import {ThemeProvider} from 'styled-components'
+import {Flex, Switch} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useCallback} from 'react'
 
 export default function PropsStory() {
   const checked = useBoolean('Checked', false)
   const indeterminate = useBoolean('Indeterminate', false)
   const readOnly = useBoolean('Read only', false)
-  const theme = useTheme()
-  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.input.switch.focusRing.offset)
-  const focusRingWidth = useNumber('Focus ring width', theme.sanity.input.switch.focusRing.width)
   const handleChange = useCallback(() => undefined, [])
 
-  const customTheme = useMemo(
-    () => ({
-      ...theme,
-      sanity: {
-        ...theme.sanity,
-        focusRing: {
-          offset: focusRingOffset || theme.sanity.input.switch.focusRing.offset,
-          width: focusRingWidth || theme.sanity.input.switch.focusRing.width,
-        },
-      },
-    }),
-    [focusRingOffset, focusRingWidth, theme],
-  )
-
   return (
-    <ThemeProvider theme={customTheme}>
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Switch
-          checked={checked}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-          readOnly={readOnly}
-        />
-      </Flex>
-    </ThemeProvider>
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Switch
+        checked={checked}
+        indeterminate={indeterminate}
+        onChange={handleChange}
+        readOnly={readOnly}
+      />
+    </Flex>
   )
 }

package/src/core/primitives/switch/styles.ts

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
@@ -35,14 +36,11 @@ export function switchInputStyles(): ReturnType<typeof css> {
 
 /* Representation */
 export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.switch
-  const color = theme.sanity.color.input
+  const {color, input} = getTheme_v2(props.theme)
 
   return css`
-    --switch-bg-color: ${color.default.enabled.border};
-    --switch-fg-color: ${color.default.enabled.bg};
+    --switch-bg-color: ${color.input.default.enabled.border};
+    --switch-fg-color: ${color.input.default.enabled.bg};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -71,7 +69,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
 
     /* Focus styles */
     input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({focusRing})};
+      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
     }
 
     input:focus:not(:focus-visible) + && {
@@ -79,38 +77,37 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: ${color.default.enabled.fg};
-      --switch-fg-color: ${color.default.enabled.bg};
+      --switch-bg-color: ${color.input.default.enabled.fg};
+      --switch-fg-color: ${color.input.default.enabled.bg};
     }
 
     @media (hover: hover) {
       input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.default.hovered.border};
-        --switch-fg-color: ${color.default.hovered.bg};
+        --switch-bg-color: ${color.input.default.hovered.border};
+        --switch-fg-color: ${color.input.default.hovered.bg};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.default.enabled.fg};
-        --switch-fg-color: ${color.default.enabled.bg};
+        --switch-bg-color: ${color.input.default.enabled.fg};
+        --switch-fg-color: ${color.input.default.enabled.bg};
       }
     }
 
     input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.default.disabled.border};
-      --switch-fg-color: ${color.default.disabled.bg};
+      --switch-bg-color: ${color.input.default.disabled.border};
+      --switch-fg-color: ${color.input.default.disabled.bg};
     }
 
     input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.default.readOnly.border};
-      --switch-fg-color: ${color.default.readOnly.bg};
+      --switch-bg-color: ${color.input.default.readOnly.border};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
     }
   `
 }
 
 /* Track */
 export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const {input} = theme.sanity
+  const {input} = getTheme_v2(props.theme)
 
   return css`
     &:not([hidden]) {
@@ -130,8 +127,8 @@ export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
 export function switchThumbStyles(
   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$indeterminate, theme} = props
-  const {input} = theme.sanity
+  const {$indeterminate} = props
+  const {input} = getTheme_v2(props.theme)
   const trackWidth = input.switch.width
   const trackHeight = input.switch.height
   const trackPadding = input.switch.padding

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,27 +1,27 @@
-import {Flex, Text, useTheme} from '@sanity/ui'
-import {Theme, ThemeColorSpotKey} from '@sanity/ui/theme'
+import {Flex, Text, ThemeProps} from '@sanity/ui'
+import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 
-const ColoredText = styled(Text)<{color?: ThemeColorSpotKey}>((props: {
-  color?: ThemeColorSpotKey
-  theme: Theme
-}) => {
-  const {spot} = props.theme.sanity.color
+const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
+  props: {
+    $color?: ThemeColorAvatarColorKey
+  } & ThemeProps,
+) => {
+  const {color} = getTheme_v2(props.theme)
 
   return css`
-    color: ${spot[props.color || 'gray']};
+    color: ${color.avatar[props.$color || 'gray'].bg};
   `
 })
 
 export default function ColoredTextStory() {
-  const theme = useTheme()
   const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" color={color} size={4} theme={theme} weight="bold">
+      <ColoredText align="center" $color={color} size={4} weight="bold">
         {color}
       </ColoredText>
     </Flex>

package/src/core/primitives/text/styles.ts

@@ -1,11 +1,12 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$accent, $muted, theme} = props
-  const {weights} = theme.sanity.fonts.text
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     color: var(--card-fg-color);
@@ -21,7 +22,7 @@ export function textBaseStyle(
     `}
 
     & code {
-      font-family: ${theme.sanity.fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
       background-color: var(--card-code-bg-color);
       color: var(--card-code-fg-color);
@@ -51,7 +52,7 @@ export function textBaseStyle(
     }
 
     & strong {
-      font-weight: ${weights.bold};
+      font-weight: ${font.text.weights.bold};
     }
 
     & svg {
@@ -63,6 +64,10 @@ export function textBaseStyle(
     & [data-sanity-icon] {
       vertical-align: baseline;
       color: var(--card-icon-color);
+
+      & path {
+        vector-effect: non-scaling-stroke !important;
+      }
     }
   `
 }

package/src/core/primitives/tooltip/tooltip.tsx

@@ -26,7 +26,7 @@ import {
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {Placement} from '../../types'
 import {Arrow, Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {Card} from '../card'
@@ -96,7 +96,7 @@ export const Tooltip = forwardRef(function Tooltip(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const theme = useTheme()
+  const {layer} = useTheme_v2()
   const {
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
@@ -111,7 +111,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = theme.sanity.layer?.tooltip.zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
     animate = false,
     ...restProps

package/src/core/styles/border/borderStyle.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 {ResponsiveBorderStyleProps} from './types'
@@ -10,8 +10,7 @@ export function responsiveBorderStyle(): Array<
 }
 
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {card, media} = theme.sanity
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$border, (value) =>
@@ -20,8 +19,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {card, media} = theme.sanity
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderTop, (value) =>
@@ -30,8 +28,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {card, media} = theme.sanity
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderRight, (value) =>
@@ -40,8 +37,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {card, media} = theme.sanity
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderBottom, (value) =>
@@ -50,8 +46,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
 }
 
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {card, media} = theme.sanity
+  const {card, media} = getTheme_v2(props.theme)
   const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderLeft, (value) =>

package/src/core/styles/box/boxStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {Property} from 'csstype'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -36,8 +36,7 @@ export function responsiveBoxStyle(): Array<
 }
 
 function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$display, (display) => ({
     '&:not([hidden])': {display},
@@ -45,8 +44,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
 }
 
 function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
@@ -54,8 +52,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height],
@@ -63,8 +60,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$overflow, (overflow) => ({
     overflow,