@sanity/ui 3.0.0-static.2 → 3.0.0-static.3

package/src/theme/defaults/config.ts

@@ -1,6 +1,6 @@
 import {RootTheme_v2} from '../v2'
 
-const BORDER_WIDTH = 1
+const BORDER_WIDTH = 0.5
 const OUTLINE_WIDTH = 0.5
 
 export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {

package/src/ui/_compat/theme/themeContext.ts

@@ -0,0 +1,10 @@
+import {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const ThemeContext: Context<ThemeContextValue | null> =
+  createGlobalScopedContext<ThemeContextValue | null>('@sanity/ui/context/theme', null)

package/src/{core → ui}/_compat/theme/themeProvider.tsx

@@ -8,6 +8,8 @@ import {
 import {ReactElement, ReactNode, useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {ThemeColorProvider} from './themeColorProvider'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -53,9 +55,19 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   }
 
   return (
-    <ThemeContext.Provider value={themeContext}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-    </ThemeContext.Provider>
+    <CardProvider
+      compat_provider={
+        // Render a theme provider around the card if the scheme or tone differs from the root theme.
+        // This is needed for backwards compatibility with the legacy theme API.
+        ThemeColorProvider
+      }
+      scheme={scheme}
+      tone={tone}
+    >
+      <ThemeContext.Provider value={themeContext}>
+        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      </ThemeContext.Provider>
+    </CardProvider>
   )
 }
 

package/src/{core → ui}/_compat/types.ts

@@ -261,4 +261,14 @@ export const screen = _screen
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export const studioTheme = buildTheme()
+export const studioTheme = (() => {
+  let theme: ReturnType<typeof buildTheme> | undefined
+  return {
+    get value() {
+      if (!theme) {
+        theme = buildTheme()
+      }
+      return theme
+    },
+  }
+})()

package/src/{core → ui}/components/autocomplete/__workshop__/async.tsx

@@ -131,10 +131,11 @@ function AsyncOption(props: {
 
   return (
     <Card
-      data-as="button"
+      as="button"
       disabled={disabled}
       padding={3}
       radius={1}
+      selectable
       selected={selected}
       tabIndex={tabIndex}
     >

package/src/{core → ui}/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -21,17 +21,9 @@ export default function ConstrainedHeightStory() {
   return (
     <Card height="fill" tone="transparent">
       <Container height="fill" padding={3} sizing="border" width={1}>
-        <Card
-          height="fill"
-          ref={setBoundaryElement}
-          radius={3}
-          shadow={3}
-          style={{position: 'relative'}}
-          tone="default"
-          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
-        >
+        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
           <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
-            <Stack space={5}>
+            <Stack gap={5}>
               <BoundaryElementProvider element={boundaryElement}>
                 <ConstrainedHeightExampleField id="example-1" label="Example 1" />
                 <ConstrainedHeightExampleField id="example-2" label="Example 2" />
@@ -104,7 +96,8 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           open
           overflow="auto"
           placement="bottom-start"
-          radius={1}
+          portal
+          radius={3}
           ref={popoverRef}
           referenceElement={inputElement}
         />
@@ -114,7 +107,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   )
 
   return (
-    <Stack space={3}>
+    <Stack gap={3}>
       <Text size={1} weight="medium">
         {label}
       </Text>
@@ -126,7 +119,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
-          radius={1}
+          radius={2}
           renderOption={renderOption}
           renderPopover={renderPopover}
           renderValue={renderValue}

package/src/{core → ui}/components/autocomplete/__workshop__/fullscreen.tsx

@@ -11,7 +11,6 @@ import {
   Layer,
   Portal,
   PortalProvider,
-  Skeleton,
   Stack,
   Text,
   TextSkeleton,
@@ -253,7 +252,7 @@ function AsyncOption(props: {
   return (
     <Card
       aria-label={data?.title}
-      data-as="a"
+      as="button"
       disabled={disabled}
       padding={2}
       radius={2}
@@ -262,9 +261,9 @@ function AsyncOption(props: {
       tabIndex={tabIndex}
     >
       <Flex align="center">
-        <Skeleton radius={2} style={{width: 35, height: 35}} />
+        <Box muted radius={2} style={{width: 35, height: 35}} />
         <Box flex={1} marginLeft={3}>
-          <Stack space={2}>
+          <Stack gap={2}>
             {loading && (
               <>
                 <TextSkeleton style={{maxWidth: 200}} />

package/src/{core → ui}/components/autocomplete/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'components/autocomplete',
+  name: './components/autocomplete',
   title: 'Autocomplete',
   stories: [
     {

package/src/{core → ui}/components/autocomplete/autocomplete.tsx

@@ -34,6 +34,7 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+// import {Selectable} from '../../primitives/_selectable'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Props, Radius} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
@@ -171,7 +172,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         // data-as="button"
         padding={paddingProp}
         radius={2}
-        tone="inherit"
+        selectable
+        // tone="inherit"
       >
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
@@ -617,6 +619,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
                 {cloneElement(renderOption(option), {
                   disabled: loading,
                   selected: active,
+                  selectable: true,
                   tabIndex: listFocused && active ? 0 : -1,
                 })}
               </AutocompleteOption>
@@ -670,7 +673,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
-        radius={radius}
+        radius={3}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}

package/src/{core → ui}/components/hotkeys/hotkeys.tsx

@@ -2,7 +2,7 @@ import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
 import {ForwardedRef, forwardRef} from 'react'
 
-import {Box, Inline, KBD} from '../../primitives'
+import {Box, KBD} from '../../primitives'
 import {Props} from '../../types'
 
 /**
@@ -25,10 +25,10 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: Props<HotkeysProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 1, ...restProps} = props
+  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 0.5, ...restProps} = props
 
   if (!keys || keys.length === 0) {
-    return <></>
+    return undefined
   }
 
   return (
@@ -42,13 +42,11 @@ export const Hotkeys = forwardRef(function Hotkeys(
       gapY={gapY}
       ref={ref}
     >
-      <Inline as="span" gap={gap}>
-        {keys.map((key, i) => (
-          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
-            {key}
-          </KBD>
-        ))}
-      </Inline>
+      {keys.map((key, i) => (
+        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
+          {key}
+        </KBD>
+      ))}
     </Box>
   )
 })

package/src/{core → ui}/components/toast/toast.tsx

@@ -109,7 +109,6 @@ export function Toast(
       animate={animate}
       exit={exit}
       transition={transition}
-      width="fill"
       position="relative"
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>

package/src/ui/hooks/useMatchMedia.ts

@@ -0,0 +1,28 @@
+import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
+
+/**
+ * Efficiently subscribes to `window.matchMedia` queries
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * @public
+ */
+export function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean {
+  useDebugValue(mediaQueryString)
+
+  return useSyncExternalStore(
+    useCallback(
+      (onStoreChange) => {
+        const media = window.matchMedia(mediaQueryString)
+        media.addEventListener('change', onStoreChange)
+        return () => media.removeEventListener('change', onStoreChange)
+      },
+      [mediaQueryString],
+    ),
+    () => window.matchMedia(mediaQueryString).matches,
+    getServerSnapshot,
+  )
+}

package/src/{core → ui}/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,6 +1,7 @@
 import {useMemo, useSyncExternalStore} from 'react'
 
-import {useTheme_v2} from '../../_compat'
+// TODO: get from theme?
+const media = [360, 600, 900, 1200, 1800, 2400]
 
 /**
  * @internal
@@ -27,7 +28,7 @@ function _getMediaQuery(media: number[], index: number): MediaQuery {
   return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
 }
 
-function _createMediaStore(media: number[]): _MediaStore {
+function _createMediaStore(): _MediaStore {
   const mediaLen = media.length
   let sizes: {mq: MediaQueryList; index: number}[]
 
@@ -95,8 +96,9 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
-  const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
+  // const {media} = useTheme_v2()
+  // const media = MEDIA
+  const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/{core → ui}/primitives/box/box.tsx

@@ -144,6 +144,7 @@ export const Box = forwardRef(function Box(
           wrap,
         }),
       )}
+      // data-gap={gap}
       ref={ref}
     >
       {props.children}

package/src/{core → ui}/primitives/button/button.tsx

@@ -14,7 +14,7 @@ import {FontTextSize, Space} from '@sanity/ui/theme'
 import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import {useTheme_v2} from '../../_compat'
+// import {useTheme_v2} from '../../_compat'
 import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
@@ -84,13 +84,13 @@ export const Button = forwardRef(function Button(
     paddingBottom,
     paddingLeft,
     paddingRight,
-    radius = 2,
+    radius = 3,
     selected,
     space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     text,
     textAlign,
     textOverflow = 'ellipsis',
-    textWeight,
+    textWeight = 'medium',
     tone = 'default',
     type = 'button',
     muted = false,
@@ -98,7 +98,7 @@ export const Button = forwardRef(function Button(
     wrap,
     ...restProps
   } = props
-  const {button: buttonTheme} = useTheme_v2()
+  // const {button: buttonTheme} = useTheme_v2()
 
   return (
     <As
@@ -161,7 +161,8 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              weight={textWeight ?? buttonTheme.textWeight}
+              // weight={textWeight ?? buttonTheme.textWeight}
+              weight={textWeight}
             >
               {text}
             </Text>

package/src/{core → ui}/primitives/card/card.tsx

@@ -1,10 +1,11 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_selectable, card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {createElement, ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 
-import {ThemeColorProvider, useRootTheme} from '../../_compat'
 import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
+import {CardProvider} from './cardProvider'
+import {useCard} from './useCard'
 
 /**
  * @public
@@ -49,54 +50,70 @@ export const Card = forwardRef(function Card(
     selected,
     shadow,
     style,
-    tone: toneProp,
+    tone: toneProp = 'inherit',
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
 
-  const rootTheme = useRootTheme()
+  const parent = useCard()
 
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
-  const scheme = schemeProp === undefined ? rootTheme.scheme : schemeProp
+  const context = {
+    tone: parent?.tone ?? 'default',
+    scheme: parent?.scheme ?? 'light',
+  }
+
+  const tone = toneProp === 'inherit' ? context.tone : toneProp
+  const scheme = schemeProp === undefined ? context.scheme : schemeProp
 
-  const node = (
+  let node = (
     <Box
-      // data-as={typeof as === 'string' ? as : undefined}
       data-ui="Card"
       {...restProps}
       as={as}
       className={composeClassNames(
         className,
         card({
-          scheme: scheme === rootTheme.scheme ? undefined : scheme,
+          scheme: scheme === context.scheme ? undefined : scheme,
           shadow,
-          tone: tone === rootTheme.tone ? undefined : tone,
+          tone: tone === context.tone ? undefined : tone,
         }),
+        selectable && _selectable({radius}),
       )}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
-      data-selectable={selectable ? '' : undefined}
       data-selected={selected ? '' : undefined}
       radius={radius}
       ref={ref}
-      // selected={selected}
       style={style}
     />
   )
 
-  if (scheme === rootTheme.scheme && tone === rootTheme.tone) {
+  if (scheme === context.scheme && tone === context.tone) {
     return node
   }
 
-  return (
-    // Render a theme provider around the card if the scheme or tone differs from the root theme.
-    // This is needed for backwards compatibility with the legacy theme API.
-    <ThemeColorProvider scheme={scheme} tone={tone ?? rootTheme.tone}>
+  node = (
+    <CardProvider
+      compat_provider={parent?.compat_provider}
+      rendered={true}
+      scheme={scheme}
+      tone={tone ?? context.tone}
+    >
       {node}
-    </ThemeColorProvider>
+    </CardProvider>
   )
+
+  if (parent?.compat_provider) {
+    return createElement(parent.compat_provider, {
+      children: node,
+      scheme,
+      tone: tone ?? context.tone,
+    })
+  }
+
+  return node
 })
 
 Card.displayName = 'ForwardRef(Card)'

package/src/ui/primitives/card/cardContext.ts

@@ -0,0 +1,10 @@
+import {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {CardContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const CardContext: Context<CardContextValue | null> =
+  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/context/card', null)

package/src/ui/primitives/card/cardProvider.tsx

@@ -0,0 +1,19 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactNode, useMemo} from 'react'
+
+import {CardContext} from './cardContext'
+import {CardCompatProviderComponent} from './types'
+
+export function CardProvider(props: {
+  compat_provider?: CardCompatProviderComponent
+  children?: ReactNode
+  rendered?: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}) {
+  const {children, rendered = false, tone, scheme} = props
+
+  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
+
+  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
+}

package/src/ui/primitives/card/index.ts

@@ -0,0 +1,4 @@
+export * from './card'
+export * from './cardProvider'
+export * from './types'
+export * from './useCard'

package/src/ui/primitives/card/types.ts

@@ -0,0 +1,27 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ComponentType, ReactNode} from 'react'
+
+/**
+ * @internal
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
+ */
+export interface CardStyleProps {
+  $checkered: boolean
+  $focusRing: boolean
+  $muted: boolean
+  $tone: ThemeColorCardToneKey
+}
+
+export type CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}>
+
+/** @internal */
+export interface CardContextValue {
+  compat_provider?: CardCompatProviderComponent
+  rendered: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}

package/src/ui/primitives/card/useCard.ts

@@ -0,0 +1,7 @@
+import {useContext} from 'react'
+
+import {CardContext} from './cardContext'
+
+export function useCard() {
+  return useContext(CardContext)
+}

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

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

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

@@ -1,6 +1,8 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {CardTone} from '../../../types'
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'
 import {Card} from '../../card'
@@ -21,6 +23,7 @@ export default function SidePanelStory() {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
 
@@ -42,7 +45,7 @@ export default function SidePanelStory() {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject updateRef={updateRef} />
+                Some editor <InlineObject tone={tone} updateRef={updateRef} />
               </Text>
             </Card>
           </Stack>
@@ -52,8 +55,8 @@ export default function SidePanelStory() {
   )
 }
 
-function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
-  const {updateRef} = props
+function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRef']}) {
+  const {tone, updateRef} = props
   const [open, setOpen] = useState(false)
 
   const handleClick = useCallback(() => {
@@ -79,6 +82,7 @@ function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
       open={open}
       overflow="auto"
       portal
+      tone={tone}
       width={0}
       updateRef={updateRef}
     >