@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

package/src/core/primitives/badge/badge.tsx

@@ -40,7 +40,7 @@ export const Badge = forwardRef(function Badge(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mode: _deprecated_mode,
     padding = 1,
-    radius = 2,
+    radius = 'full',
     tone = 'default',
     ...restProps
   } = props

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

@@ -1,20 +1,19 @@
 import {CSSObject} from '@sanity/ui/theme'
-import {ThemeProps} from '../../styles'
 import {BadgeStyleProps} from './types'
 
-export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
-  const {$tone, theme} = props
-  const color = theme.sanity.color.badge?.[$tone] || theme.sanity.color.muted[$tone].enabled
+export function badgeStyle(props: BadgeStyleProps): CSSObject {
+  const {$tone} = props
 
   return {
-    '--card-bg-color': color.bg,
-    '--card-fg-color': color.fg,
+    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
+    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
 
     backgroundColor: 'var(--card-bg-color)',
     cursor: 'default',
 
     '&:not([hidden])': {
       display: 'inline-block',
+      verticalAlign: 'top',
     },
   }
 }

package/src/core/primitives/button/button.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
@@ -91,6 +91,7 @@ export const Button = forwardRef(function Button(
     width,
     ...restProps
   } = props
+  const {button} = useTheme_v2()
 
   const justify = useArrayProp(justifyProp)
   const padding = useArrayProp(paddingProp)
@@ -103,8 +104,6 @@ export const Button = forwardRef(function Button(
   const radius = useArrayProp(radiusProp)
   const space = useArrayProp(spaceProp)
 
-  const theme = useTheme()
-
   const boxProps = useMemo(
     () => ({
       // flex: 1,
@@ -156,7 +155,7 @@ export const Button = forwardRef(function Button(
                   align={textAlign}
                   size={fontSize}
                   textOverflow="ellipsis"
-                  weight={theme.sanity.button.textWeight}
+                  weight={button.textWeight}
                 >
                   {text}
                 </Text>

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

@@ -1,21 +1,21 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
+import {_cardColorStyle} from '../../styles/card'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 
 /**
  * @internal
  */
-export function buttonBaseStyles({
-  $width,
-  theme,
-}: {$width?: ButtonWidth} & ThemeProps): ReturnType<typeof css> {
-  const {styles} = theme.sanity
+export function buttonBaseStyles(
+  props: {$width?: ButtonWidth} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$width} = props
+  const {style} = getTheme_v2(props.theme)
 
   return css`
-    ${styles?.button};
+    ${style?.button};
 
     -webkit-font-smoothing: inherit;
     appearance: none;
@@ -66,26 +66,25 @@ function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
 export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
-  const {$mode, theme} = props
-  const buttonTheme = theme.sanity.button
+  const {$mode} = props
+  const {button, color: baseColor, style} = getTheme_v2(props.theme)
   const shadow = props.$mode === 'ghost'
-  const base = theme.sanity.color.base
-  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
+  const mode = baseColor.button[$mode] || baseColor.button.default
   const color = mode[props.$tone] || mode.default
   const border = {
-    width: buttonTheme.border.width,
+    width: button.border.width,
     color: 'var(--card-border-color)',
   }
   // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
   const defaultBoxShadow = undefined
 
   return [
-    _colorVarsStyle(base, color.enabled),
+    _cardColorStyle(baseColor, color.enabled),
     {
       backgroundColor: 'var(--card-bg-color)',
       color: 'var(--card-fg-color)',
       boxShadow: focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
       "&:not([data-disabled='true'])": {
         boxShadow: combineBoxShadow(
           focusRingBorderStyle(border),
@@ -93,9 +92,9 @@ export function buttonColorStyles(
         ),
         '&:focus': {
           boxShadow: focusRingStyle({
-            base,
-            border: {width: 2, color: base.bg},
-            focusRing: buttonTheme.focusRing,
+            base: baseColor,
+            border: {width: 2, color: baseColor.bg},
+            focusRing: button.focusRing,
           }),
         },
         '&:focus:not(:focus-visible)': {
@@ -105,13 +104,13 @@ export function buttonColorStyles(
           ),
         },
         '@media (hover: hover)': {
-          '&:hover': _colorVarsStyle(base, color.hovered),
-          '&:active': _colorVarsStyle(base, color.pressed),
-          '&[data-hovered]': _colorVarsStyle(base, color.hovered),
+          '&:hover': _cardColorStyle(baseColor, color.hovered),
+          '&:active': _cardColorStyle(baseColor, color.pressed),
+          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
         },
-        '&[data-selected]': _colorVarsStyle(base, color.pressed),
+        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
       },
     },
-    theme.sanity.styles?.button?.root,
+    style?.button?.root,
   ].filter(Boolean) as CSSObject[]
 }

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -1,22 +1,22 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
-import {Theme, ThemeColorToneKey} from '@sanity/ui/theme'
+import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
+import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 
-const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
-  $tone,
-  theme,
-}: {
-  $tone: ThemeColorToneKey
-  theme: Theme
-}) => {
-  const tone = theme.sanity.color.solid[$tone]
+const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
+  props: {
+    $tone: ThemeColorStateToneKey
+  } & ThemeProps,
+) => {
+  const {$tone} = props
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.button.default[$tone]
 
   return css`
     &:not([data-selected]) {
-      --card-fg-color: ${tone ? tone.enabled.bg : undefined};
-      --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
+      --card-fg-color: ${tone.enabled.bg};
+      --card-muted-fg-color: ${tone.enabled.bg};
     }
 
     [data-ui='Card']:disabled & {
@@ -63,7 +63,7 @@ export default function SelectedStory() {
 }
 
 function Preview({selected}: {selected: boolean}) {
-  const theme = useRootTheme()
+  const rootTheme = useRootTheme()
 
   return (
     <Flex>
@@ -74,14 +74,14 @@ function Preview({selected}: {selected: boolean}) {
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
-          $tone={theme.tone === 'default' ? 'caution' : 'default'}
+          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
         >
           <EditIcon />
         </TextWithTone>
         <TextWithTone
           data-selected={selected ? '' : undefined}
           muted
-          $tone={theme.tone === 'default' ? 'positive' : 'default'}
+          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />
         </TextWithTone>

package/src/core/primitives/card/card.tsx

@@ -80,7 +80,7 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
-  // TODO: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
+  // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>
       <Root

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

@@ -1,6 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
+import {_cardColorStyle} from '../../styles/card'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
 import {CardStyleProps} from './types'
 
@@ -11,8 +12,8 @@ export function cardStyle(
 }
 
 export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, theme} = props
-  const space = theme.sanity.space
+  const {$checkered} = props
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     ${$checkered &&
@@ -48,15 +49,14 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, theme} = props
-  const {focusRing} = theme.sanity.card
-  const {base, card, dark} = theme.sanity.color
-  const border = {width: 0, color: 'var(--card-border-color)'}
+  const {$checkered, $focusRing} = props
+  const {card, color, style} = getTheme_v2(props.theme)
+  const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
   return css`
-    color-scheme: ${dark ? 'dark' : 'light'};
+    color-scheme: ${color._dark ? 'dark' : 'light'};
 
-    ${_colorVarsStyle(base, card.enabled, $checkered)}
+    ${_cardColorStyle(color, color, $checkered)}
 
     background-color: var(--card-bg-color);
     color: var(--card-fg-color);
@@ -69,34 +69,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &:disabled {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
       }
 
       &:not(:disabled) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
             : undefined};
         }
 
@@ -112,34 +112,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &[data-disabled] {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
             : undefined};
         }
 
@@ -149,6 +149,6 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       }
     }
 
-    ${theme.sanity.styles?.card?.root}
+    ${style?.card?.root}
   `
 }

package/src/core/primitives/checkbox/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'
@@ -10,9 +11,7 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 }
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
-  const color = theme.sanity.color.input
-  const {input, radius} = theme.sanity
+  const {color, input, radius} = getTheme_v2(props.theme)
   const {focusRing} = input.checkbox
 
   return css`
@@ -34,12 +33,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       width: ${rem(input.checkbox.size)};
       box-sizing: border-box;
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: color.input.default.enabled.border,
         width: input.border.width,
       })};
       border-radius: ${rem(radius[2])};
       line-height: 1;
-      background-color: ${color.default.enabled.bg};
+      background-color: ${color.input.default.enabled.bg};
 
       & > svg {
         display: block;
@@ -56,12 +55,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
     }
 
     &:checked + span {
-      background: ${color.default.enabled.fg};
+      background: ${color.input.default.enabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.fg,
+        color: color.input.default.enabled.fg,
         width: input.border.width,
       })};
-      color: ${color.default.enabled.bg};
+      color: ${color.input.default.enabled.bg};
     }
 
     /* focus */
@@ -75,47 +74,47 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
     }
 
     &[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,
       })};
-      color: ${color.default.disabled.fg};
+      color: ${color.input.default.disabled.fg};
     }
     &[data-error]&:checked + span {
-      background-color: ${color.invalid.enabled.bg2};
-      color: ${color.default.enabled.bg};
+      background-color: ${color.input.invalid.enabled.muted.bg};
+      color: ${color.input.default.enabled.bg};
     }
     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
       box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.invalid.readOnly.bg2},
+        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
         focusRing: {width: 1, offset: 1},
       })};
     }
 
     &:disabled + span {
-      background-color: ${color.default.disabled.bg};
+      background-color: ${color.input.default.disabled.bg};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.disabled.border,
+        color: color.input.default.disabled.border,
       })};
-      color: ${color.default.disabled.fg};
+      color: ${color.input.default.disabled.fg};
     }
     &:disabled&:checked + span {
-      background-color: ${color.default.disabled.bg2};
+      background-color: ${color.input.default.disabled.muted.bg};
     }
 
     &[data-read-only] + span {
-      background-color: ${color.default.readOnly.bg};
+      background-color: ${color.input.default.readOnly.bg};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.readOnly.border,
+        color: color.input.default.readOnly.border,
       })};
-      color: ${color.default.readOnly.fg};
+      color: ${color.input.default.readOnly.fg};
     }
 
     &[data-read-only]&:checked + span {
-      background-color: ${color.default.readOnly.bg2};
+      background-color: ${color.input.default.readOnly.muted.bg};
     }
 
     &:checked + span > svg:first-child {

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

@@ -1,7 +1,10 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css, ExecutionContext} from 'styled-components'
 
 function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
-  const color = theme.sanity.color.syntax
+  const {
+    color: {syntax: color},
+  } = getTheme_v2(theme)
 
   return {
     '&.atrule': {color: color.atrule},

package/src/core/primitives/container/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'
 import {ResponsiveWidthStyleProps} from './types'
 
@@ -14,8 +14,7 @@ export function containerBaseStyle(): CSSObject {
 export function responsiveContainerWidthStyle(
   props: ResponsiveWidthStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {container, media} = theme.sanity
+  const {container, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),

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

@@ -1,9 +1,11 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$accent, $muted, theme} = props
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     ${$accent &&
@@ -17,7 +19,7 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
     `}
 
     & code {
-      font-family: ${theme.sanity.fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
     }
 

package/src/core/primitives/inline/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'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
@@ -18,14 +18,14 @@ export function inlineBaseStyle(): CSSObject {
 }
 
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
+  const {media, space} = getTheme_v2(props.theme)
 
-  return _responsive(theme.sanity.media, props.$space, (spaceIndex) => {
-    const space = rem(theme.sanity.space[spaceIndex])
+  return _responsive(media, props.$space, (spaceIndex) => {
+    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
 
     return {
-      margin: `-${space} 0 0 -${space}`,
-      '& > div': {padding: `${space} 0 0 ${space}`},
+      margin: `-${_space} 0 0 -${_space}`,
+      '& > div': {padding: `${_space} 0 0 ${_space}`},
     }
   })
 }

package/src/core/primitives/kbd/kbd.tsx

@@ -1,7 +1,6 @@
 import {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -17,17 +16,14 @@ export interface KBDProps {
   radius?: Radius | Radius[]
 }
 
-function kbdStyle(props: ThemeProps) {
-  const {theme} = props
-  const color = theme.sanity.color.kbd || theme.sanity.color.base
-
+function kbdStyle() {
   return css`
-    --card-fg-color: ${color.fg};
-    --kbd-box-bg: ${color.bg};
-    --kbd-box-shadow: ${color.border};
+    --card-bg-color: var(--card-kbd-bg-color);
+    --card-border-color: var(--card-kbd-border-color);
+    --card-fg-color: var(--card-kbd-fg-color);
 
-    box-shadow: inset 0 0 0 1px var(--kbd-box-shadow);
-    background: var(--kbd-box-bg);
+    box-shadow: inset 0 0 0 1px var(--card-border-color);
+    background: var(--card-bg-color);
     font: inherit;
 
     &:not([hidden]) {
@@ -52,7 +48,7 @@ export const KBD = forwardRef(function KBD(
   return (
     <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
-        <Text as="span" size={fontSize} weight="medium">
+        <Text as="span" size={fontSize} weight="semibold">
           {children}
         </Text>
       </Box>

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

@@ -1,11 +1,12 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$accent, $muted, theme} = props
-  const {fonts} = theme.sanity
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   return css`
     text-transform: uppercase;
@@ -21,7 +22,7 @@ export function labelBaseStyle(
     `}
 
     & code {
-      font-family: ${fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
     }
 

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

@@ -1,18 +1,17 @@
-import {Theme} from '@sanity/ui/theme'
 import {DEFAULT_POPOVER_PADDING} from './constants'
 import {PopoverWidth} from './types'
 
 export function calcCurrentWidth(params: {
   mediaIndex: number
-  theme: Theme
+  container: number[]
   width: PopoverWidth[]
 }): number | undefined {
-  const {mediaIndex, theme, width} = params
+  const {container, mediaIndex, width} = params
 
   const w = width[mediaIndex]
   const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
 
-  return typeof currentWidth === 'number' ? theme.sanity.container[currentWidth] : undefined
+  return typeof currentWidth === 'number' ? container[currentWidth] : undefined
 }
 
 export function calcMaxWidth(params: {