@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/{components → core/components}/menu/menuGroup.tsx

@@ -4,7 +4,7 @@ import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -45,8 +45,8 @@ export function MenuGroup(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useToneContext()
   const menu = useMenu()
+  const {scheme} = useRootTheme()
   const {
     activeElement,
     mount,

package/src/{components → core/components}/menu/menuItem.tsx

@@ -12,8 +12,8 @@ import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {ThemeColorToneKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
+import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 
@@ -30,7 +30,7 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
   selected?: boolean
   space?: number | number[]
   text?: React.ReactNode
-  tone?: ThemeColorToneKey
+  tone?: SelectableTone
 }
 
 /**
@@ -65,7 +65,7 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useToneContext()
+  const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
     activeElement,
@@ -103,6 +103,8 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
+  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+
   const setRef = useCallback(
     (el: HTMLDivElement | null) => {
       ref.current = el
@@ -151,7 +153,11 @@ export const MenuItem = forwardRef(function MenuItem(
           )}
 
           {hotkeys && (
-            <Hotkeys fontSize={fontSize} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
+            <Hotkeys
+              fontSize={hotkeysFontSize}
+              keys={hotkeys}
+              style={{marginTop: -4, marginBottom: -4}}
+            />
           )}
 
           {iconRight && (

package/src/{components → core/components}/skeleton/styles.ts

@@ -1,5 +1,4 @@
 import {css, keyframes} from 'styled-components'
-import {cssVars} from '../../theme'
 
 const keyframe = keyframes`
   0% {
@@ -13,11 +12,11 @@ const keyframe = keyframes`
 const animation = css`
   background-image: linear-gradient(
     to right,
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-to']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-from']},
-    ${cssVars.default['skeleton-from']}
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
   );
   background-position: 100%;
   background-size: 200% 100%;
@@ -41,11 +40,11 @@ export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
       $animated
         ? animation
         : css`
-            background-color: ${cssVars.default['skeleton-from']};
+            background-color: var(--card-skeleton-color-from);
           `}
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
-    background-color: ${cssVars.default['skeleton-from']};
+    background-color: var(--card-skeleton-color-from);
   }
 `

package/src/{components → core/components}/skeleton/textSkeleton.tsx

@@ -1,24 +1,22 @@
+import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {_responsive} from '../../styles'
-import {Theme, ThemeFontKey} from '../../theme'
+import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(({
-  $size,
-  $style,
-  theme,
-}: {
-  $size: number[]
-  $style: ThemeFontKey
-  theme: Theme
-}) => {
-  const {media} = theme.sanity
-  const font = theme.sanity.fonts[$style]
+const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
+  props: {
+    $size: number[]
+    $style: ThemeFontKey
+  } & ThemeProps,
+) => {
+  const {$size, $style} = props
+  const {font, media} = getTheme_v2(props.theme)
+  const fontStyle = font[$style]
 
   const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = font.sizes[sizeIndex]
+    const fontSize = fontStyle.sizes[sizeIndex]
     const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
 
     return {height: capHeight}

package/src/{components → core/components}/tab/tab.tsx

@@ -31,7 +31,10 @@ const CustomButton = styled(Button)`
  */
 export const Tab = forwardRef(function Tab(
   props: TabProps &
-    Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type'>,
+    Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
+    >,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -88,7 +91,6 @@ export const Tab = forwardRef(function Tab(
       onBlur={handleBlur}
       onFocus={handleFocus}
       padding={padding}
-      radius="full"
       ref={setRef}
       role="tab"
       selected={selected}

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

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 import {useToast} from './useToast'

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

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ThemeColorToneKey} from '../../theme'
 
 /**
  * @public
@@ -10,6 +10,7 @@ export interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -37,12 +38,16 @@ const TextBox = styled(Flex)`
 `
 
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.ReactElement {
-  const {closable, description, onClose, title, status, ...restProps} = props
+  const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
@@ -52,14 +57,18 @@ export function Toast(
       role={role}
       {...restProps}
       marginTop={3}
-      radius={2}
+      radius={radius}
       shadow={2}
       tone={cardTone}
     >
       <Flex align="flex-start">
         <TextBox flex={1} padding={3}>
           <Stack space={3}>
-            {title && <Text weight="semibold">{title}</Text>}
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
             {description && (
               <Text muted size={1}>
                 {description}

package/src/{components → core/components}/tree/__workshop__/tabFromElement.tsx

@@ -26,7 +26,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Box paddingY={3}>
-        <Text>
+        <Text muted size={1}>
           This example is to demonstrate that when you tab from an outside element (using the
           keyboard to navigate), you can still access the tree and tree item. Press the input
           beneath and start tabbing / using the arrow.

package/src/{components → core/components}/tree/style.ts

@@ -1,12 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
-import {
-  _colorVarStyleActive,
-  _colorVarStyleHover,
-  _colorVarStyleSelected,
-} from '../../styles/colorVars'
-import {cssVars} from '../../theme'
-import {cardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {_cardColorStyle} from '../../styles/card'
 
 export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
@@ -15,6 +10,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       cursor: default;
       border-radius: 3px;
 
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
       &:focus {
         position: relative;
       }
@@ -26,6 +24,9 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
       & > div {
         cursor: default;
         border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
       }
 
       &:focus > div {
@@ -35,51 +36,48 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
   `
 }
 
-export function treeItemRootColorStyle(): ReturnType<typeof css> {
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+  const $tone = 'default'
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
+
   return css`
-    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
     &[role='none'] {
       & > [role='treeitem'] {
-        ${cardVariables}
-
-        background-color:${cssVars.mutable['bg-color']};
-        color: var(--treeitem-fg-color);
+        ${_cardColorStyle(color, tone.enabled)}
       }
 
       &[data-selected] > [role='treeitem'] {
-        ${_colorVarStyleActive()}
+        ${_cardColorStyle(color, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.hovered)}
         }
 
         & > [role='treeitem']:focus {
-          ${_colorVarStyleSelected()}
+          ${_cardColorStyle(color, tone.selected)}
         }
       }
     }
 
-    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
     &[role='treeitem'] {
       & > [data-ui='TreeItem__box'] {
-        ${cardVariables}
-        background-color: ${cssVars.mutable['bg-color']};
-        color: ${cssVars.mutable['fg-color']};
+        ${_cardColorStyle(color, tone.enabled)}
       }
 
       &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_colorVarStyleActive()}
+        ${_cardColorStyle(color, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.hovered)}
         }
 
         &:focus > [data-ui='TreeItem__box'] {
-          ${_colorVarStyleSelected()}
+          ${_cardColorStyle(color, tone.selected)}
         }
       }
     }
@@ -93,8 +91,8 @@ export interface TreeItemBoxStyleProps {
 export function treeItemBoxStyle(
   props: TreeItemBoxStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$level, theme} = props
-  const {space} = theme.sanity
+  const {$level} = props
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     padding-left: ${rem(space[2] * $level)};

package/src/{components → core/components}/tree/treeItem.tsx

@@ -1,8 +1,8 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {ThemeFontWeightKey} from '../../theme'
 import {
   treeItemRootStyle,
   treeItemRootColorStyle,
@@ -50,14 +50,14 @@ export const TreeItem = memo(function TreeItem(
   const {
     children,
     expanded: expandedProp = false,
-    fontSize,
+    fontSize = 1,
     href,
     icon,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding = 3,
+    padding = 2,
     selected = false,
     space = 2,
     text,

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

@@ -10,6 +10,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 
 /**
  * @internal
+ * @deprecated No longer used.
  */
 export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
   top: 'bottom',

package/src/{hooks → core/hooks}/useElementRect/__workshop__/example.tsx

@@ -21,7 +21,9 @@ export default function ExampleStory() {
             <Card scheme="dark" style={{position: 'absolute', ...size}} />
           </div>
 
-          <Code language="json">{JSON.stringify(size)}</Code>
+          <Code language="json" size={1}>
+            {JSON.stringify(size)}
+          </Code>
         </Stack>
       </Container>
     </Box>

package/src/{hooks → core/hooks}/useMediaIndex/__workshop__/test.tsx

@@ -6,7 +6,7 @@ export default function TestStory() {
   return (
     <Card padding={[3, 4, 5]}>
       <Stack space={2}>
-        <Text weight="semibold">The current media index is {mediaIndex}.</Text>
+        <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>
     </Card>

package/src/{hooks → core/hooks}/useMediaIndex/useMediaIndex.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment node */
+import {defaultTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
-import {studioTheme, ThemeProvider} from '../../theme'
+import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
 function Log() {
@@ -13,7 +14,7 @@ describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
     expect(
       renderToStaticMarkup(
-        <ThemeProvider theme={studioTheme}>
+        <ThemeProvider theme={defaultTheme}>
           <Log />
         </ThemeProvider>,
       ),
@@ -22,7 +23,7 @@ describe('useMediaIndex', () => {
   it(`SSR to markup for hydration doesn't throw`, () => {
     expect(
       renderToString(
-        <ThemeProvider theme={studioTheme}>
+        <ThemeProvider theme={defaultTheme}>
           <Log />
         </ThemeProvider>,
       ),

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

@@ -1,5 +1,5 @@
 import {useSyncExternalStore} from 'react'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 
 /**
  * @internal
@@ -96,8 +96,7 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
-  const theme = useTheme()
-  const {media} = theme.sanity
+  const {media} = useTheme_v2()
 
   let store = MEDIA_STORE_CACHE.get(media)
 

package/src/{index.ts → core/index.ts}

@@ -1,3 +1,5 @@
+export * from './_compat'
+
 export * from './primitives'
 export * from './components'
 export * from './helpers'

package/src/{lib → core/lib}/isRecord.ts

@@ -1,3 +1,3 @@
 export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object')
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
 }

package/src/{primitives → core/primitives}/_selectable/style.ts

@@ -1,19 +1,14 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {
-  _colorVarStyleHover,
-  _selectableVarStyle,
-  _selectableVarStyleDisabled,
-} from '../../styles/colorVars'
-
-import {ThemeColorSchemeKey, ThemeColorToneKey, createCssVars, cssVars} from '../../theme'
+import {_cardColorStyle} from '../../styles/card'
+import {SelectableTone} from '../../types'
 
 /**
  * @internal
  */
 export interface SelectableStyleProps {
-  $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
+  $tone: SelectableTone
 }
 
 export function selectableBaseStyle(): ReturnType<typeof css> {
@@ -28,6 +23,8 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 
@@ -41,41 +38,42 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
 export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {theme, $tone, $scheme} = props
+  const {$tone} = props
+  const {color, style} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
 
   return css`
-    ${$tone !== 'default' && createCssVars($scheme, theme.sanity.color.tones, $tone)}
-    ${_selectableVarStyle($tone)}
+    ${_cardColorStyle(color, tone.enabled)}
 
-    background-color: ${cssVars.mutable['bg-color']};
-    color: ${cssVars[$tone]['text-secondary']};
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
     outline: none;
 
-    /* &:is(button) - Looks like a button in default mode */
+    /* &:is(button) */
     &[data-as='button'] {
       &:disabled {
-        ${_selectableVarStyleDisabled()}
+        ${_cardColorStyle(color, tone.disabled)}
       }
 
       &:not(:disabled) {
         &[aria-pressed='true'] {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.pressed)}
         }
 
         &[data-selected],
         &[aria-selected='true'] > & {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, tone.hovered)}
             }
 
             &:active {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, tone.pressed)}
             }
           }
         }
@@ -85,32 +83,32 @@ export function selectableColorStyle(
     /* &:is(a) */
     &[data-as='a'] {
       &[data-disabled] {
-        ${_selectableVarStyleDisabled()}
+        ${_cardColorStyle(color, tone.disabled)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.pressed)}
         }
 
         &[data-selected] {
-          ${_colorVarStyleHover()}
+          ${_cardColorStyle(color, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, tone.hovered)}
             }
             &:active {
-              ${_colorVarStyleHover()}
+              ${_cardColorStyle(color, tone.pressed)}
             }
           }
         }
       }
     }
 
-    ${theme.sanity.styles?.card?.root}
+    ${style?.card?.root}
   `
 }

package/src/{primitives → core/primitives}/avatar/__workshop__/asButton.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/{primitives → core/primitives}/avatar/__workshop__/stack.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center">