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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.34",
+  "version": "2.0.0-alpha.35",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
-    "@sanity/color": "3.0.0-beta.7",
+    "@sanity/color": "3.0.0-beta.8",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",
@@ -88,7 +88,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^2.0.2",
+    "@sanity/ui-workshop": "^2.0.3",
     "@storybook/addon-a11y": "^7.6.1",
     "@storybook/addon-docs": "^7.6.1",
     "@storybook/addon-essentials": "^7.6.1",

package/src/core/_compat.ts

@@ -1,11 +1,11 @@
 // re-export for backwards compatibility
 export {
-  COLOR_CONFIG_BASE_KEYS,
-  COLOR_CONFIG_BASE_TONES,
+  COLOR_CONFIG_CARD_KEYS,
+  COLOR_CONFIG_CARD_TONES,
   COLOR_CONFIG_BLEND_KEYS,
   COLOR_CONFIG_STATE_KEYS,
   COLOR_CONFIG_STATE_TONES,
-  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BLEND_MODES,
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_STATES,
@@ -35,13 +35,13 @@ export {
   rgba,
   rgbaToRGBA,
   screen,
-  studioTheme,
+  defaultTheme as studioTheme,
   type BaseTheme,
   type BoxShadow,
   type CSSObject,
   type ColorBlendModeTokenValue,
-  type ColorConfigBaseKey,
-  type ColorConfigBaseTone,
+  type ColorConfigCardKey,
+  type ColorConfigCardTone,
   type ColorConfigBlendKey,
   type ColorConfigOpacityValue,
   type ColorConfigStateKey,
@@ -57,7 +57,7 @@ export {
   type ThemeColor,
   type ThemeColorBase,
   type ThemeColorBaseTokens,
-  type ThemeColorBaseToneKey,
+  type ThemeColorCardToneKey,
   type ThemeColorBlendModeKey,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,

package/src/core/components/dialog/dialog.tsx

@@ -12,7 +12,7 @@ import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {
@@ -296,12 +296,12 @@ export const Dialog = forwardRef(function Dialog(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const dialog = useDialog()
-  const theme = useTheme()
+  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius: cardRadiusProp = 3,
-    cardShadow = 4,
+    cardRadius: cardRadiusProp = 4,
+    cardShadow = 3,
     children,
     contentRef,
     footer,
@@ -316,7 +316,7 @@ export const Dialog = forwardRef(function Dialog(
     position: positionProp = dialog.position || 'fixed',
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate = false,
     ...restProps
   } = props

package/src/core/components/dialog/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
@@ -11,7 +11,7 @@ export interface ResponsiveDialogPositionStyleProps {
 }
 
 export function dialogStyle({theme}: ThemeProps): CSSObject {
-  const color = theme.sanity.color.base
+  const {color} = getTheme_v2(theme)
 
   return {
     '&:not([hidden])': {
@@ -25,15 +25,14 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.umbra,
+    background: color.backdrop,
   }
 }
 
 export function responsiveDialogPositionStyle(
   props: ResponsiveDialogPositionStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }

package/src/core/components/hotkeys/hotkeys.tsx

@@ -16,10 +16,12 @@ export interface HotkeysProps {
 }
 
 const Root = styled.kbd`
+  font: inherit;
+  padding: 1px;
+
   &:not([hidden]) {
     display: block;
   }
-  font: inherit;
 `
 
 const Key = styled(KBD)`
@@ -37,7 +39,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>,
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
+  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
   const space = useArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -0,0 +1,50 @@
+import {UsersIcon} from '@sanity/icons'
+import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
+import {Hotkeys} from '../../hotkeys'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+export default function AvatarMenuStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button icon={UsersIcon} />}
+        id="avatar-menu"
+        menu={
+          <Menu>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="purple" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>Jane Smith</Text>
+                </Box>
+                <Box padding={1}>
+                  <Badge>Me</Badge>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '1']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="magenta" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>John Doe</Text>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '2']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

package/src/core/components/menu/__workshop__/index.ts

@@ -75,5 +75,10 @@ export default defineScope({
       title: 'Menu with shouldFocus',
       component: lazy(() => import('./shouldFocus')),
     },
+    {
+      name: 'avatar',
+      title: 'Avatar menu',
+      component: lazy(() => import('./avatarMenu')),
+    },
   ],
 })

package/src/core/components/menu/menuItem.tsx

@@ -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/core/components/skeleton/textSkeleton.tsx

@@ -1,24 +1,22 @@
-import {Theme, ThemeFontKey} from '@sanity/ui/theme'
+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 {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/core/components/tree/style.ts

@@ -1,6 +1,7 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
+import {_cardColorStyle} from '../../styles/card'
 
 export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
@@ -36,51 +37,47 @@ export function treeItemRootStyle(): ReturnType<typeof css> {
 }
 
 export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {theme} = props
   const $tone = 'default'
-  const {base, muted, selectable} = theme.sanity.color
-  // @todo: remove use of `muted` here
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.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'] {
-        ${_colorVarsStyle(base, tone.enabled)}
+        ${_cardColorStyle(color, tone.enabled)}
       }
 
       &[data-selected] > [role='treeitem'] {
-        ${_colorVarsStyle(base, tone.pressed)}
+        ${_cardColorStyle(color, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_colorVarsStyle(base, tone.hovered)}
+          ${_cardColorStyle(color, tone.hovered)}
         }
 
         & > [role='treeitem']:focus {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_cardColorStyle(color, tone.selected)}
         }
       }
     }
 
-    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
     &[role='treeitem'] {
       & > [data-ui='TreeItem__box'] {
-        ${_colorVarsStyle(base, tone.enabled)}
+        ${_cardColorStyle(color, tone.enabled)}
       }
 
       &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_colorVarsStyle(base, tone.pressed)}
+        ${_cardColorStyle(color, tone.pressed)}
       }
 
       @media (hover: hover) {
         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_colorVarsStyle(base, tone.hovered)}
+          ${_cardColorStyle(color, tone.hovered)}
         }
 
         &:focus > [data-ui='TreeItem__box'] {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_cardColorStyle(color, tone.selected)}
         }
       }
     }
@@ -94,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/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,5 +1,5 @@
 /** @jest-environment node */
-import {studioTheme} from '@sanity/ui/theme'
+import {defaultTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
@@ -14,7 +14,7 @@ describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
     expect(
       renderToStaticMarkup(
-        <ThemeProvider theme={studioTheme}>
+        <ThemeProvider theme={defaultTheme}>
           <Log />
         </ThemeProvider>,
       ),
@@ -23,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/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/core/primitives/_selectable/style.ts

@@ -1,7 +1,8 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
-import {SelectableTone} from '../../types/selectable'
+import {_cardColorStyle} from '../../styles/card'
+import {SelectableTone} from '../../types'
 
 /**
  * @internal
@@ -37,13 +38,12 @@ export function selectableBaseStyle(): ReturnType<typeof css> {
 export function selectableColorStyle(
   props: SelectableStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$tone, theme} = props
-  const {base, muted, selectable} = theme.sanity.color
-  // @todo: remove use of `muted` here
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
+  const {$tone} = props
+  const {color, style} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
 
   return css`
-    ${_colorVarsStyle(base, tone.enabled)}
+    ${_cardColorStyle(color, tone.enabled)}
 
     background-color: var(--card-bg-color);
     color: var(--card-fg-color);
@@ -52,28 +52,28 @@ export function selectableColorStyle(
     /* &:is(button) */
     &[data-as='button'] {
       &:disabled {
-        ${_colorVarsStyle(base, tone.disabled)}
+        ${_cardColorStyle(color, tone.disabled)}
       }
 
       &:not(:disabled) {
         &[aria-pressed='true'] {
-          ${_colorVarsStyle(base, tone.pressed)}
+          ${_cardColorStyle(color, tone.pressed)}
         }
 
         &[data-selected],
         &[aria-selected='true'] > & {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_cardColorStyle(color, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
+              ${_cardColorStyle(color, tone.hovered)}
             }
 
             &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
+              ${_cardColorStyle(color, tone.pressed)}
             }
           }
         }
@@ -83,32 +83,32 @@ export function selectableColorStyle(
     /* &:is(a) */
     &[data-as='a'] {
       &[data-disabled] {
-        ${_colorVarsStyle(base, tone.disabled)}
+        ${_cardColorStyle(color, tone.disabled)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, tone.pressed)}
+          ${_cardColorStyle(color, tone.pressed)}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, tone.selected)}
+          ${_cardColorStyle(color, tone.selected)}
         }
 
         @media (hover: hover) {
           &:not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
+              ${_cardColorStyle(color, tone.hovered)}
             }
             &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
+              ${_cardColorStyle(color, tone.pressed)}
             }
           }
         }
       }
     }
 
-    ${theme.sanity.styles?.card?.root}
+    ${style?.card?.root}
   `
 }

package/src/core/primitives/avatar/avatar.tsx

@@ -3,7 +3,7 @@ import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'reac
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {useTheme} from '../../theme'
+import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
@@ -74,10 +74,10 @@ export const Avatar = forwardRef(function Avatar(
   } = props
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
-  const theme = useTheme()
+  const {avatar} = useTheme_v2()
 
   // @todo: remove this
-  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
+  const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2
 

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -7,8 +8,7 @@ import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {theme} = props
-  const {avatar, media} = theme.sanity
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]
@@ -24,7 +24,7 @@ function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeP
 }
 
 function _avatarCounterBaseStyle(props: ThemeProps) {
-  const {theme} = props
+  const {space} = getTheme_v2(props.theme)
 
   return css`
     align-items: center;
@@ -37,7 +37,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     box-shadow:
       0 0 0 1px var(--card-bg-color),
       inset 0 0 0 1px var(--card-hairline-hard-color);
-    padding: 0 ${rem(theme.sanity.space[2])};
+    padding: 0 ${rem(space[2])};
 
     &:not([hidden]) {
       display: flex;

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,3 +1,4 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {cloneElement, forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -24,8 +25,7 @@ function avatarStackStyle() {
 }
 
 function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {theme} = props
-  const {avatar, media} = theme.sanity
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]

package/src/core/primitives/avatar/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 {focusRingStyle} from '../../styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
@@ -57,12 +57,12 @@ function avatarArrowStyle(): CSSObject {
 }
 
 export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
-  const {$color, theme} = props
-  const {focusRing} = theme.sanity.avatar
+  const {$color} = props
+  const {avatar} = getTheme_v2(props.theme)
 
   return {
-    '--avatar-bg-color': theme.sanity.color.avatar?.[$color]?.bg || theme.sanity.color.spot[$color],
-    '--avatar-fg-color': theme.sanity.color.avatar?.[$color]?.fg || 'var(--card-bg-color)',
+    '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
+    '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
 
     backgroundColor: 'var(--avatar-bg-color)',
     position: 'relative',
@@ -94,7 +94,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 
       // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:focus': {
-        boxShadow: focusRingStyle({focusRing}),
+        boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
       },
 
       '&:focus:not(:focus-visible)': {
@@ -107,8 +107,7 @@ export function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSOb
 export function responsiveAvatarSizeStyle(
   props: ResponsiveAvatarSizeStyleProps & ThemeProps,
 ): CSSObject[] {
-  const {theme} = props
-  const {avatar, media} = theme.sanity
+  const {avatar, media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]

package/src/core/primitives/avatar/types.ts

@@ -1,11 +1,11 @@
-import {ThemeColorSpotKey} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {AvatarSize} from '../../types'
 
 /**
  * @internal
  */
 export interface AvatarRootStyleProps {
-  $color: ThemeColorSpotKey
+  $color: ThemeColorAvatarColorKey
 }
 
 /**

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

@@ -7,7 +7,7 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PropsStory() {
-  const mode = useSelect('Mode', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
   const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')

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

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function Tones() {
-  const mode = useSelect('Mode', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
+  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">