@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/src/{primitives → core/primitives}/container/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {

package/src/{primitives → core/primitives}/heading/heading.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -7,7 +8,6 @@ import {
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'

package/src/{primitives → core/primitives}/inline/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {

package/src/{primitives → core/primitives}/label/label.tsx

@@ -1,8 +1,8 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
 

package/src/{primitives → core/primitives}/popover/__workshop__/RecursiveStory.tsx

@@ -1,12 +1,5 @@
-import {
-  Button,
-  Flex,
-  LayerProvider,
-  Placement,
-  Popover,
-  ThemeColorToneKey,
-  useLayer,
-} from '@sanity/ui'
+import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {

package/src/{primitives → core/primitives}/popover/__workshop__/TestStory.tsx

@@ -22,6 +22,7 @@ export default function TestStory(): ReactElement {
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
@@ -31,7 +32,9 @@ export default function TestStory(): ReactElement {
 
   const updateRef = useRef<PopoverUpdateCallback>()
 
-  const button = <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+  const button = (
+    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
+  )
 
   return (
     <Card
@@ -67,7 +70,7 @@ export default function TestStory(): ReactElement {
               {mount && (
                 <Popover
                   arrow={arrow}
-                  content={<Text>{text}</Text>}
+                  content={<Text size={1}>{text}</Text>}
                   constrainSize={constrainSize}
                   fallbackPlacements={['left', 'bottom', 'right', 'top']}
                   matchReferenceWidth={matchReferenceWidth}
@@ -75,7 +78,7 @@ export default function TestStory(): ReactElement {
                   overflow="hidden"
                   padding={3}
                   placement={placement}
-                  portal
+                  portal={portal}
                   preventOverflow={preventOverflow}
                   radius={radius}
                   updateRef={updateRef}

package/src/{primitives → core/primitives}/popover/constants.ts

@@ -2,8 +2,9 @@ import {Placement, PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
-export const DEFAULT_POPOVER_ARROW_WIDTH = 27
-export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
+export const DEFAULT_POPOVER_ARROW_WIDTH = 19
+export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
+export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['bottom', 'left', 'right'],

package/src/{primitives → core/primitives}/popover/helpers.ts

@@ -1,4 +1,4 @@
-import {Theme} from '../../theme'
+import {Theme} from '@sanity/ui/theme'
 import {DEFAULT_POPOVER_PADDING} from './constants'
 import {PopoverWidth} from './types'
 

package/src/{primitives → core/primitives}/popover/popover.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   MutableRefObject,
   RefCallback,
@@ -21,7 +22,7 @@ import {
   useRef,
 } from 'react'
 import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -89,7 +90,7 @@ export const Popover = memo(
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-      arrow: arrowProp = true,
+      arrow: arrowProp = false,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -99,6 +100,8 @@ export const Popover = memo(
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onActivate,
       open,
       overflow = 'hidden',
       padding: paddingProp,
@@ -189,11 +192,7 @@ export const Popover = memo(
       }
 
       // Define distance between reference and floating element
-      ret.push(
-        offset({
-          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        }),
-      )
+      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
 
       // Track sizes
       if (constrainSize || matchReferenceWidth) {

package/src/{primitives → core/primitives}/popover/popoverCard.tsx

@@ -1,14 +1,17 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
-import {ThemeColorSchemeKey} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
-import {useLayer} from '../../utils'
+import {Arrow, useLayer} from '../../utils'
 import {Card} from '../card'
 import {Flex} from '../flex'
-import {DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_MARGINS} from './constants'
-import {PopoverArrow} from './popoverArrow'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
 
 const Root = styled(Card)({
   '&:not([hidden])': {
@@ -91,20 +94,15 @@ export const PopoverCard = memo(
       [strategy, style, width, x, y, zIndex],
     )
 
-    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-    const arrowStyle: CSSProperties = useMemo(() => {
-      const style: CSSProperties = {
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
         left: arrowX !== null ? arrowX : undefined,
         top: arrowY !== null ? arrowY : undefined,
         right: undefined,
         bottom: undefined,
-      }
-
-      if (staticSide) style[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH
-
-      return style
-    }, [arrowX, arrowY, staticSide])
+      }),
+      [arrowX, arrowY],
+    )
 
     return (
       <Root
@@ -125,7 +123,15 @@ export const PopoverCard = memo(
           </Flex>
         </Flex>
 
-        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
       </Root>
     )
   }),

package/src/{primitives → core/primitives}/radio/styles.ts

@@ -59,7 +59,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.bg2};
+        background: ${color.default.enabled.fg};
         opacity: 0;
       }
     }

package/src/{primitives → core/primitives}/select/styles.ts

@@ -1,3 +1,5 @@
+import {ThemeFontSize} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
@@ -7,8 +9,6 @@ import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
 } from '../../styles/internal'
-import {ThemeFontSize} from '../../theme'
-import {CSSObject} from '../../types/styled'
 
 function rootStyle(): ReturnType<typeof css> {
   return css`

package/src/{primitives → core/primitives}/stack/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]

package/src/{primitives → core/primitives}/switch/__workshop__/example.tsx

@@ -13,7 +13,7 @@ export default function ExampleStory() {
       <Flex align="center" as="label">
         <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
         <Box marginLeft={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Label
           </Text>
         </Box>

package/src/{primitives → core/primitives}/switch/styles.ts

@@ -79,7 +79,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: var(--card-focus-ring-color);
+      --switch-bg-color: ${color.default.enabled.fg};
       --switch-fg-color: ${color.default.enabled.bg};
     }
 
@@ -90,7 +90,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: var(--card-focus-ring-color);
+        --switch-bg-color: ${color.default.enabled.fg};
         --switch-fg-color: ${color.default.enabled.bg};
       }
     }

package/src/{primitives → core/primitives}/text/__workshop__/colored.tsx

@@ -1,4 +1,5 @@
-import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
+import {Flex, Text, useTheme} from '@sanity/ui'
+import {Theme, ThemeColorSpotKey} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'

package/src/{primitives → core/primitives}/text/text.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -6,7 +7,6 @@ import {
   responsiveTextAlignStyle,
   responsiveTextFont,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {textBaseStyle} from './styles'
 

package/src/{primitives → core/primitives}/textArea/__workshop__/plain.tsx

@@ -26,7 +26,7 @@ export default function PlainStory() {
       <Container width={0}>
         <Card padding={3} tone={tone}>
           <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
               TextArea
             </Text>
             <TextArea

package/src/{primitives → core/primitives}/textArea/textArea.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
@@ -13,7 +14,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**

package/src/{primitives → core/primitives}/textInput/__workshop__/plain.tsx

@@ -35,7 +35,7 @@ export default function PlainStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
         <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
+          <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
             TextInput
           </Text>
           <Wrapper>

package/src/{primitives → core/primitives}/textInput/__workshop__/states.tsx

@@ -9,14 +9,14 @@ export default function StatesStory() {
       <Container width={1}>
         <Stack space={5}>
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
             <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
           </Stack>
 
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
             <TextInput
@@ -28,7 +28,7 @@ export default function StatesStory() {
           </Stack>
 
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="read-only-example">Read-only</label>
             </Text>
             <TextInput

package/src/{primitives → core/primitives}/textInput/textInput.tsx

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -16,7 +17,7 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {useRootTheme} from '../../theme'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'

package/src/{primitives → core/primitives}/tooltip/constants.ts

@@ -1,7 +1,12 @@
 import {Placement} from '@floating-ui/react-dom'
 
+export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
+export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6
+export const DEFAULT_TOOLTIP_ARROW_RADIUS = 2
+
 export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
+
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
   'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],

package/src/{primitives → core/primitives}/tooltip/tooltip.test.tsx

@@ -1,8 +1,8 @@
 /** @jest-environment jsdom */
 import {screen, act, fireEvent} from '@testing-library/react'
-import '../../../test/mocks/resizeObserver.mock'
-import '../../../test/mocks/matchMedia.mock'
-import {render} from '../../../test'
+import '../../../../test/mocks/resizeObserver.mock'
+import '../../../../test/mocks/matchMedia.mock'
+import {render} from '../../../../test'
 import {Text, Button} from '../../primitives'
 import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 

package/src/{primitives → core/primitives}/tooltip/tooltip.tsx

@@ -9,6 +9,7 @@ import {
   Middleware,
   RootBoundary,
 } from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence, motion} from 'framer-motion'
 import {
   cloneElement,
@@ -23,21 +24,22 @@ import {
   useId,
 } from 'react'
 import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {Placement} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {Arrow, Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
 import {ConditionalWrapper} from './conditionalWrapper'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {TooltipArrow} from './tooltipArrow'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
 /**
@@ -56,6 +58,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
+  radius?: number | number[]
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
   /**
@@ -95,7 +98,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
   const {
-    arrow: arrowProp = true,
+    arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
@@ -105,6 +108,7 @@ export const Tooltip = forwardRef(function Tooltip(
     padding = 3,
     placement: placementProp = 'bottom',
     portal: portalProp,
+    radius = 2,
     scheme,
     shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
@@ -161,7 +165,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
     // Place arrow
     if (arrowProp) {
-      ret.push(arrow({element: arrowRef, padding: 2}))
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
     return ret
@@ -173,23 +177,18 @@ export const Tooltip = forwardRef(function Tooltip(
     whileElementsMounted: autoUpdate,
   })
 
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
   const arrowX = middlewareData.arrow?.x
   const arrowY = middlewareData.arrow?.y
 
-  const arrowStyle: CSSProperties = useMemo(() => {
-    const style: CSSProperties = {
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
       left: arrowX !== null ? arrowX : undefined,
       top: arrowY !== null ? arrowY : undefined,
       right: undefined,
       bottom: undefined,
-    }
-
-    if (staticSide) style[staticSide] = -15
-
-    return style
-  }, [arrowX, arrowY, staticSide])
+    }),
+    [arrowX, arrowY],
+  )
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
@@ -412,12 +411,20 @@ export const Tooltip = forwardRef(function Tooltip(
           data-ui="Tooltip__card"
           data-placement={placement}
           padding={padding}
-          radius={3}
+          radius={radius}
           scheme={scheme}
           shadow={shadow}
         >
           {content}
-          {arrowProp && <TooltipArrow ref={setArrow} style={arrowStyle} />}
+          {arrowProp && (
+            <Arrow
+              ref={setArrow}
+              style={arrowStyle}
+              width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+              height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+              radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+            />
+          )}
         </Card>
       </ConditionalWrapper>
     </Root>

package/src/{styles → core/styles}/border/borderStyle.ts

@@ -1,10 +1,8 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
-const BORDER_VALUE = '1px solid var(--card-border-color)'
-
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
 > {
@@ -13,45 +11,50 @@ export function responsiveBorderStyle(): Array<
 
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
+    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
   )
 }
 
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
+    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
   )
 }
 
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
+    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
   )
 }
 
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
+    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
   )
 }
 
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
+    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
   )
 }

package/src/{styles → core/styles}/box/boxStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {Property} from 'csstype'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'

package/src/{styles → core/styles}/colorVars/colorVarsStyle.ts

@@ -1,5 +1,5 @@
-import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
-import {CSSObject} from '../../types/styled'
+import {ThemeColorBase, ThemeColorGenericState} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 
 /**
  * @internal
@@ -17,7 +17,7 @@ export function _colorVarsStyle(
     '--card-shadow-penumbra-color': base.shadow.penumbra,
     '--card-shadow-ambient-color': base.shadow.ambient,
     '--card-focus-ring-color': base.focusRing,
-    '--card-icon-color': color.iconColor,
+    '--card-icon-color': color.icon,
 
     // Card
     '--card-bg-color': color.bg,

package/src/{styles → core/styles}/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../../constants'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'

package/src/{styles → core/styles}/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'