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

package/src/theme/defaults/config.ts

@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
+  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/defaults/fonts.ts

@@ -57,10 +57,10 @@ export const defaultThemeFonts: ThemeFonts = {
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
     },
     sizes: [
       {

package/src/theme/palette/constants.ts

@@ -10,6 +10,4 @@ export const HUES = [
   'cyan',
 ] as const
 
-export const TINTS = [
-  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
-] as const
+export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/src/theme/palette/types.ts

@@ -2,15 +2,3 @@ import {type HUES, type TINTS} from './constants'
 
 export type Hue = (typeof HUES)[number]
 export type Tint = (typeof TINTS)[number]
-
-export type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<Hue, {h: number; c: number}>
-}

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultPalette, defaultTokens} from './defaults'
+import {defaultTokens} from './defaults'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
@@ -12,7 +12,6 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   return {
     _version: 3,
-    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,

package/src/theme/v3/defaults.ts

@@ -1,22 +1,5 @@
-import {PaletteConfig} from '../palette'
 import {PartialTokens, Tokens} from './tokens'
 
-export const defaultPalette: PaletteConfig = {
-  chroma: {min: 0.005, max: 0.2325},
-  luminosity: {min: 0.1875, max: 1},
-  hues: {
-    gray: {h: 277, c: 0.04},
-    blue: {h: 273, c: 0.185},
-    purple: {h: 295, c: 0.4},
-    magenta: {h: 12, c: 0.4},
-    red: {h: 30, c: 0.4},
-    orange: {h: 68, c: 0.4},
-    yellow: {h: 90, c: 0.4},
-    green: {h: 171, c: 0.4},
-    cyan: {h: 194, c: 0.4},
-  },
-}
-
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
@@ -73,12 +56,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['900', '50'],
-              4: ['800', '150'],
+              0: ['950', '50'],
+              4: ['800', '100'],
             },
             border: {
-              0: ['800', '150'],
-              4: ['600', '350'],
+              0: ['800', '100'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['100', '900'],
@@ -150,15 +133,15 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['black', 'gray/50'],
-              4: ['900', '150'],
+              4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '150'],
-              4: ['700', '350'],
+              0: ['900', '100'],
+              4: ['700', '300'],
             },
             fg: {
-              0: ['150', 'black'],
-              4: ['550', '600'],
+              0: ['100', 'black'],
+              4: ['500', '600'],
             },
           },
         },
@@ -170,11 +153,11 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['gray/950', 'white'],
-              4: ['850', '100'],
+              4: ['800', '200'],
             },
             border: {
-              0: ['850', '100'],
-              4: ['650', '300'],
+              0: ['800', '100'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['white', 'black'],
@@ -201,5 +184,3 @@ export const defaultTokens: PartialTokens<Tokens> = {
     },
   },
 }
-
-// export const defaultTheme = buildTheme_v3()

package/src/theme/v3/types.ts

@@ -1,5 +1,4 @@
 import {ThemeConfig} from '../config'
-import {PaletteConfig} from '../palette'
 import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
 import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
 import {ThemeColor_v3} from './color'
@@ -11,7 +10,6 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -22,7 +20,6 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {

package/src/{core → ui}/StyleTags.tsx

@@ -11,7 +11,7 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   return (
     <>
       <style href="sanity-palette" precedence="palette">
-        {compilePalette(theme._palette)}
+        {compilePalette()}
       </style>
       <style href="sanity-theme" precedence="theme">
         {compileTheme({v3: theme} as RootTheme)}

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,6 @@ 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 {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
@@ -90,7 +89,7 @@ export const Button = forwardRef(function Button(
     text,
     textAlign,
     textOverflow = 'ellipsis',
-    textWeight,
+    textWeight = 'medium',
     tone = 'default',
     type = 'button',
     muted = false,
@@ -98,7 +97,7 @@ export const Button = forwardRef(function Button(
     wrap,
     ...restProps
   } = props
-  const {button: buttonTheme} = useTheme_v2()
+  // const {button: buttonTheme} = useTheme_v2()
 
   return (
     <As
@@ -114,7 +113,6 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
-          align={align}
           as="span"
           className={buttonLoadingBox()}
           display="flex"
@@ -129,6 +127,7 @@ export const Button = forwardRef(function Button(
       {(IconComponent || text || IconRightComponent) && (
         <Box
           as="span"
+          align={align}
           direction={direction}
           display="flex"
           flex={1}
@@ -161,7 +160,7 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              weight={textWeight ?? buttonTheme.textWeight}
+              weight={textWeight}
             >
               {text}
             </Text>
@@ -178,6 +177,7 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
+          align={align}
           as="span"
           direction={direction}
           display="flex"
@@ -185,6 +185,7 @@ export const Button = forwardRef(function Button(
           gap={gap}
           gapX={gapX}
           gapY={gapY}
+          justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}

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,73 @@ export const Card = forwardRef(function Card(
     selected,
     shadow,
     style,
-    tone: toneProp,
+    tone: toneProp = 'default',
     ...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,
         }),
+        selectable && _selectable({radius}),
       )}
+      data-context-tone={context.tone}
+      data-context-scheme={context.scheme}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
-      data-selectable={selectable ? '' : undefined}
       data-selected={selected ? '' : undefined}
+      data-tone={tone}
       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)'