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

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

@@ -1,24 +1,23 @@
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {useTheme} from '../../theme'
-
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Text} from '../text'
-import {spotColor} from './spotColors'
+import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
-import {ThemeColorSpotKey} from './types'
 
 /**
  * @public
  */
 export interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
+  color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -31,7 +30,7 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
+const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
 )
@@ -44,7 +43,15 @@ const Stroke = styled.ellipse(avatarStyle.stroke)
 
 const Initials = styled.div(avatarStyle.initials)
 
+const InitialsLabel = styled(Label)({
+  color: 'inherit',
+})
+
+const Image = styled.svg(avatarStyle.image)
+
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export const Avatar = forwardRef(function Avatar(
@@ -52,8 +59,9 @@ export const Avatar = forwardRef(function Avatar(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
+    __unstable_hideInnerStroke,
     as: asProp,
-    color: colorKey = 'gray',
+    color = 'gray',
     src,
     title,
     initials,
@@ -66,12 +74,10 @@ export const Avatar = forwardRef(function Avatar(
   } = props
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
-  const theme = useTheme()
-  const {scheme} = useToneContext()
+  const {avatar} = useTheme_v2()
 
-  const color = spotColor[colorKey][scheme].hex
-
-  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
+  // @todo: remove this
+  const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2
 
@@ -105,7 +111,7 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
 
   return (
     <Root
@@ -113,8 +119,8 @@ export const Avatar = forwardRef(function Avatar(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Avatar"
       {...restProps}
-      $size={size}
       $color={color}
+      $size={size}
       aria-label={title}
       data-arrow-position={arrowPosition}
       data-status={status}
@@ -131,7 +137,7 @@ export const Avatar = forwardRef(function Avatar(
       </Arrow>
 
       {!imageFailed && src && (
-        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -145,30 +151,33 @@ export const Avatar = forwardRef(function Avatar(
           </defs>
 
           <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-          <BgStroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
+
+          {!__unstable_hideInnerStroke && (
+            <BgStroke
+              cx={_radius}
+              cy={_radius}
+              rx={_radius}
+              ry={_radius}
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
+
           <Stroke
             cx={_radius}
             cy={_radius}
             rx={_radius}
             ry={_radius}
-            stroke={color}
             vectorEffect="non-scaling-stroke"
           />
-        </svg>
+        </Image>
       )}
 
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize}>
-              <strong>{initials}</strong>
-            </Text>
+            <InitialsLabel forwardedAs="span" size={initialsSize}>
+              {initials}
+            </InitialsLabel>
           </Initials>
         </>
       )}

package/src/{primitives → core/primitives}/avatar/avatarCounter.tsx

@@ -1,15 +1,14 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
 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]
@@ -25,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;
@@ -33,12 +32,12 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
     box-sizing: border-box;
     user-select: none;
     color: inherit;
-    color: ${cssVars.mutable['fg-color']};
-    background:  ${cssVars.mutable['bg-color']};
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
     box-shadow:
-      0 0 0 1px  ${cssVars.mutable['bg-color']},
-      inset 0 0 0 1.5px ${cssVars.default['border-base']});
-    padding: 0 ${rem(theme.sanity.space[2])};
+      0 0 0 1px var(--card-bg-color),
+      inset 0 0 0 1px var(--card-hairline-hard-color);
+    padding: 0 ${rem(space[2])};
 
     &:not([hidden]) {
       display: flex;
@@ -74,8 +73,8 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize}>
-        <strong>{count}</strong>
+      <Text as="span" size={counterSize} weight="medium">
+        {count}
       </Text>
     </Root>
   )

package/src/{primitives → 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/{primitives → core/primitives}/avatar/styles.ts

@@ -1,7 +1,6 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 export const avatarStyle = {
@@ -10,6 +9,7 @@ export const avatarStyle = {
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
   initials: avatarInitialsStyle,
+  image: avatarImageStyle,
 }
 
 function avatarArrowStyle(): CSSObject {
@@ -57,15 +57,18 @@ 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 {
-    backgroundColor: $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',
     boxSizing: 'border-box',
     userSelect: 'none',
-    boxShadow: `0 0 0 1px ${cssVars.mutable['bg-color']}`,
+    boxShadow: '0 0 0 1px var(--card-bg-color)',
 
     '&[data-status="inactive"]': {
       opacity: 0.5,
@@ -91,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)': {
@@ -104,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]
@@ -124,11 +126,17 @@ export function responsiveAvatarSizeStyle(
   })
 }
 
+export function avatarImageStyle(): CSSObject {
+  return {
+    position: 'relative',
+  }
+}
+
 export function avatarInitialsStyle(): CSSObject {
   return {
     width: '100%',
     height: '100%',
-    color: cssVars.default['text-primary'],
+    color: 'var(--avatar-fg-color)',
     alignItems: 'center',
     justifyContent: 'center',
     textTransform: 'uppercase',
@@ -144,13 +152,14 @@ export function avatarInitialsStyle(): CSSObject {
 function avatarBgStrokeStyle(): CSSObject {
   return {
     strokeWidth: '4px',
-    stroke: cssVars.mutable['bg-color'],
+    stroke: 'var(--card-bg-color)',
   }
 }
 
 function avatarStrokeStyle(): CSSObject {
   return {
-    strokeWidth: '3px',
+    strokeWidth: '2px',
+    stroke: 'var(--avatar-bg-color)',
 
     '[data-status="editing"] &': {
       strokeDasharray: '2 4',

package/src/{primitives → core/primitives}/avatar/types.ts

@@ -1,10 +1,11 @@
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {AvatarSize} from '../../types'
 
 /**
  * @internal
  */
 export interface AvatarRootStyleProps {
-  $color: string
+  $color: ThemeColorAvatarColorKey
 }
 
 /**
@@ -13,17 +14,3 @@ export interface AvatarRootStyleProps {
 export interface ResponsiveAvatarSizeStyleProps {
   $size: AvatarSize[]
 }
-
-/**
- * @public
- */
-export type ThemeColorSpotKey =
-  | 'gray'
-  | 'blue'
-  | 'purple'
-  | 'magenta'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'cyan'

package/src/{primitives → 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/{primitives → 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">

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

@@ -1,7 +1,7 @@
 /** @jest-environment jsdom */
 
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

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

@@ -15,6 +15,7 @@ import {BadgeStyleProps} from './types'
 export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
+  /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -25,6 +26,8 @@ const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
 )
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export const Badge = forwardRef(function Badge(
@@ -34,9 +37,10 @@ export const Badge = forwardRef(function Badge(
   const {
     children,
     fontSize = 1,
-    mode = 'default',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
     padding = 1,
-    radius = 2,
+    radius = 'full',
     tone = 'default',
     ...restProps
   } = props
@@ -45,7 +49,6 @@ export const Badge = forwardRef(function Badge(
     <Root
       data-ui="Badge"
       {...restProps}
-      $mode={mode}
       $tone={tone}
       $radius={useArrayProp(radius)}
       padding={useArrayProp(padding)}

package/src/core/primitives/badge/styles.ts

@@ -0,0 +1,19 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps): CSSObject {
+  const {$tone} = props
+
+  return {
+    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
+    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
+
+    backgroundColor: 'var(--card-bg-color)',
+    cursor: 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+      verticalAlign: 'top',
+    },
+  }
+}

package/src/{primitives → core/primitives}/badge/types.ts

@@ -1,9 +1,8 @@
-import {BadgeMode, BadgeTone} from '../../types'
+import {BadgeTone} from '../../types'
 
 /**
  * @internal
  */
 export interface BadgeStyleProps {
-  $mode: BadgeMode
   $tone: BadgeTone
 }

package/src/{primitives → core/primitives}/box/__workshop__/responsive.tsx

@@ -1,4 +1,4 @@
-import {Box, Text, cssVars} from '@sanity/ui'
+import {Box, Text} from '@sanity/ui'
 
 export default function ResponsiveStory() {
   return (
@@ -9,7 +9,7 @@ export default function ResponsiveStory() {
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
         sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: `1px solid ${cssVars.default['border-base']}`}}
+        style={{outline: '1px solid var(--card-border-color)'}}
       >
         <Text align="center" muted>
           This is a box with responsive props

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

@@ -51,6 +51,9 @@ const Root = styled.div<
 )
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export const Box = forwardRef(function Box(

package/src/{primitives → core/primitives}/button/__workshop__/sanityUploadButton.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   & input {
-    -webkit-appearance: none;
+    appearance: none;
     overflow: hidden;
     overflow: clip;
     top: 0;
@@ -14,6 +14,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
     opacity: 0;
     position: absolute;
     max-width: 0;
+    width: -webkit-fill-available;
     width: stretch;
   }
 

package/src/{primitives → core/primitives}/button/__workshop__/stacked.tsx

@@ -25,7 +25,7 @@ export default function StackedStory() {
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
 
   return (
-    <Card height="fill" tone="transparent">
+    <Card height="fill">
       <Flex align="center" height="fill" justify="center">
         <Container width={0} style={{textAlign: 'center'}}>
           <Box padding={4}>

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

@@ -3,7 +3,7 @@
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'
 
 describe('atoms/button', () => {

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

@@ -4,8 +4,8 @@ import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {cssVars, useTheme} from '../../theme'
-import {ButtonMode, ButtonTextAlign, ButtonTone, FlexJustify} from '../../types'
+import {useTheme_v2} from '../../theme'
+import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
 import {Box} from '../box'
 import {Flex} from '../flex'
 import {Spinner} from '../spinner'
@@ -34,10 +34,12 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 const Root = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone} & ResponsiveRadiusStyleProps & ThemeProps
+  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
+    ThemeProps
 >(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
 
 const LoadingBox = styled.div`
@@ -49,7 +51,7 @@ const LoadingBox = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${cssVars.mutable['bg-color']};
+  background-color: var(--card-bg-color);
   border-radius: inherit;
   z-index: 1;
   box-shadow: inherit;
@@ -59,7 +61,7 @@ const LoadingBox = styled.div`
  * @public
  */
 export const Button = forwardRef(function Button(
-  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as'>,
+  props: ButtonProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'width'>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -70,7 +72,7 @@ export const Button = forwardRef(function Button(
     iconRight,
     justify: justifyProp = 'center',
     loading,
-    mode = 'default',
+    mode = 'ghost',
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -86,8 +88,10 @@ export const Button = forwardRef(function Button(
     tone = 'default',
     type = 'button',
     muted = false,
+    width,
     ...restProps
   } = props
+  const {button} = useTheme_v2()
 
   const justify = useArrayProp(justifyProp)
   const padding = useArrayProp(paddingProp)
@@ -100,8 +104,6 @@ export const Button = forwardRef(function Button(
   const radius = useArrayProp(radiusProp)
   const space = useArrayProp(spaceProp)
 
-  const theme = useTheme()
-
   const boxProps = useMemo(
     () => ({
       // flex: 1,
@@ -128,6 +130,7 @@ export const Button = forwardRef(function Button(
       disabled={Boolean(loading || disabled)}
       ref={ref}
       type={type}
+      $width={width}
     >
       {Boolean(loading) && (
         <LoadingBox>
@@ -152,7 +155,7 @@ export const Button = forwardRef(function Button(
                   align={textAlign}
                   size={fontSize}
                   textOverflow="ellipsis"
-                  weight={theme.sanity.button.textWeight}
+                  weight={button.textWeight}
                 >
                   {text}
                 </Text>