@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/__workshop__/constants.ts

@@ -17,9 +17,10 @@ import {
 import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
-  '0 (default)': 0,
-  '1': 1,
+  '0': 0,
+  '1 (default)': 1,
   '2': 2,
+  '3': 3,
 }
 
 export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {

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

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

@@ -69,12 +69,12 @@ export const Avatar = forwardRef(function Avatar(
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
+  const {avatar} = useTheme_v2()
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
-  const {avatar} = useTheme_v2()
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
@@ -111,7 +111,17 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s * 2)), [size])
+  const initialsSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root
@@ -175,7 +185,7 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize}>
+            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
               {initials}
             </InitialsLabel>
           </Initials>

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

@@ -5,7 +5,7 @@ import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
-import {Text} from '../text'
+import {Label} from '../label'
 
 function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {avatar, media} = getTheme_v2(props.theme)
@@ -67,15 +67,26 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {count, size: sizeProp = 0} = props
+  const {count, size: sizeProp = 1} = props
   const size = useArrayProp(sizeProp)
-  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+
+  const fontSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize} weight="medium">
+      <Label as="span" size={fontSize} weight="medium">
         {count}
-      </Text>
+      </Label>
     </Root>
   )
 })

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

@@ -63,7 +63,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props
   const children = childrenToElementArray(childrenProp).filter(
@@ -81,7 +81,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
       {len === 0 && (
         <div>
-          <AvatarCounter count={len} />
+          <AvatarCounter count={len} size={size} />
         </div>
       )}
 

package/src/core/primitives/tooltip/tooltip.tsx

@@ -105,7 +105,7 @@ export const Tooltip = forwardRef(function Tooltip(
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding = 3,
+    padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,

package/src/core/types/avatar.ts

@@ -6,7 +6,7 @@ export type AvatarPosition = 'top' | 'bottom' | 'inside'
 /**
  * @public
  */
-export type AvatarSize = 0 | 1 | 2
+export type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public

package/src/theme/defaults/config.ts

@@ -7,6 +7,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
   _version: 2,
   avatar: {
     sizes: [
+      {distance: -4, size: 19},
       {distance: -4, size: 25},
       {distance: -8, size: 33},
       {distance: -12, size: 49},

package/src/theme/defaults/fonts.ts

@@ -125,7 +125,15 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 9.8,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5,
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 9.5,
         iconSize: 15,
         lineHeight: 11,
         letterSpacing: 0.5,
@@ -133,7 +141,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 11.25,
+        fontSize: 10.8,
         iconSize: 17,
         lineHeight: 12,
         letterSpacing: 0.5,
@@ -141,7 +149,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 12.75,
+        fontSize: 12.25,
         iconSize: 19,
         lineHeight: 13,
         letterSpacing: 0.5,
@@ -149,7 +157,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 14,
+        fontSize: 13.6,
         iconSize: 21,
         lineHeight: 14,
         letterSpacing: 0.5,
@@ -157,7 +165,7 @@ export const defaultThemeFonts: ThemeFonts = {
       {
         ascenderHeight: 2,
         descenderHeight: 2,
-        fontSize: 15.5,
+        fontSize: 15,
         iconSize: 23,
         lineHeight: 15,
         letterSpacing: 0.5,