@sanity/ui 2.6.7-canary.0 → 2.6.7

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -1,7 +1,7 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useRef, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
@@ -20,8 +20,8 @@ export default function AlignedStory() {
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
   const content = (
     <Text>
@@ -39,11 +39,9 @@ export default function AlignedStory() {
   )
 
   const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
 
-  useClickOutside(
-    () => setOpen(false),
-    () => [buttonElementRef.current, popoverElementRef.current],
-  )
+  useClickOutside(handleClose, [buttonElement, popoverElement])
 
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
@@ -58,14 +56,14 @@ export default function AlignedStory() {
             padding={3}
             portal={portal}
             placement={placement}
-            ref={popoverElementRef}
+            ref={setPopoverElement}
             width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}
               mode="bleed"
               onClick={handleToggleOpen}
-              ref={buttonElementRef}
+              ref={setButtonElement}
               selected={open}
             />
           </Popover>

package/src/core/primitives/popover/constants.ts

@@ -7,16 +7,16 @@ export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
 export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['bottom', 'left', 'right'],
+  top: ['bottom', 'left', 'right'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],
   'top-end': ['bottom-end', 'left-end', 'right-end'],
-  'bottom': ['top', 'left', 'right'],
+  bottom: ['top', 'left', 'right'],
   'bottom-start': ['top-start', 'left-start', 'right-start'],
   'bottom-end': ['top-end', 'left-end', 'right-end'],
-  'left': ['right', 'top', 'bottom'],
+  left: ['right', 'top', 'bottom'],
   'left-start': ['right-start', 'top-start', 'bottom-start'],
   'left-end': ['right-end', 'top-end', 'bottom-end'],
-  'right': ['left', 'top', 'bottom'],
+  right: ['left', 'top', 'bottom'],
   'right-start': ['left-start', 'top-start', 'bottom-start'],
   'right-end': ['left-end', 'top-end', 'bottom-end'],
 }

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

@@ -12,8 +12,8 @@ const BASE_STYLE: CSSObject = {
   '&[data-as="ul"],&[data-as="ol"]': {
     listStyle: 'none',
   },
-  'gridTemplateColumns': 'minmax(0, 1fr)',
-  'gridAutoRows': 'min-content',
+  gridTemplateColumns: 'minmax(0, 1fr)',
+  gridAutoRows: 'min-content',
 }
 
 export function stackBaseStyle(): CSSObject {

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

@@ -10,13 +10,13 @@ import {
   Tooltip,
 } from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 const PORTAL_OPTIONS = {
   '(true)': true,
   '(false)': false,
-  'portal1': 'portal1',
+  portal1: 'portal1',
 }
 
 export default function CustomPortalStory() {
@@ -30,15 +30,13 @@ export default function CustomPortalStory() {
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-    }),
-    [portal1Element],
-  )
 
   return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+      }}
+    >
       <Flex align="center" height="fill" justify="center">
         <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
           <Card

package/src/core/primitives/tooltip/constants.ts

@@ -8,16 +8,16 @@ export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
 
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
   'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
   'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
-  'bottom': ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
   'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
   'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
-  'left': ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
   'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
   'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
-  'right': ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
   'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
   'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
 }

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

@@ -20,11 +20,10 @@ import {
   useRef,
   useState,
   useId,
+  useSyncExternalStore,
   useImperativeHandle,
-  useLayoutEffect,
 } from 'react'
 import {styled} from 'styled-components'
-import {useEffectEvent} from 'use-effect-event'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -86,8 +85,9 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)`
+const Root = styled(Layer)<{$maxWidth: number}>`
   pointer-events: none;
+  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -127,7 +127,6 @@ export const Tooltip = forwardRef(function Tooltip(
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
-  const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
@@ -135,6 +134,24 @@ export const Tooltip = forwardRef(function Tooltip(
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
+  const documentBodyOffsetWidth = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body.offsetWidth,
+    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+    () => 800,
+  )
+  // Get the maximum tooltip width (sans tooltip padding)
+  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+  // If both portal and boundary elements are provided, use the smaller width of the two.
+  const tooltipWidth = useMemo(() => {
+    const availableWidths = [
+      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+      portalElement?.offsetWidth || documentBodyOffsetWidth,
+    ]
+
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement?.offsetWidth])
+
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
@@ -268,8 +285,31 @@ export const Tooltip = forwardRef(function Tooltip(
     [childProp?.props, handleIsOpenChange],
   )
 
-  // Handle closing the tooltip when the mouse leaves the referenceElement
-  useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
+  // Detect whether the mouse is moving outside of the reference element. This is sometimes
+  // necessary, because the tooltip might not always close as it should (e.g. when clicking
+  // the reference element triggers a CPU-heavy operation.)
+  useEffect(() => {
+    if (!showTooltip) return
+
+    function handleWindowMouseMove(event: MouseEvent) {
+      if (!referenceElement) return
+
+      const isHoveringReference =
+        referenceElement === event.target ||
+        (event.target instanceof Node && referenceElement.contains(event.target))
+
+      if (!isHoveringReference) {
+        handleIsOpenChange(false)
+        window.removeEventListener('mousemove', handleWindowMouseMove)
+      }
+    }
+
+    window.addEventListener('mousemove', handleWindowMouseMove)
+
+    return () => {
+      window.removeEventListener('mousemove', handleWindowMouseMove)
+    }
+  }, [showTooltip, referenceElement, handleIsOpenChange])
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
@@ -300,20 +340,6 @@ export const Tooltip = forwardRef(function Tooltip(
       window.removeEventListener('keydown', handleWindowKeyDown)
     }
   }, [handleIsOpenChange, showTooltip])
-
-  // // Set the max width of the tooltip based on boundaries and portals
-  useLayoutEffect(() => {
-    // Get the maximum tooltip width (sans tooltip padding)
-    // Tooltip width should never exceed the width of either any supplied boundary or portal element.
-    // If both portal and boundary elements are provided, use the smaller width of the two.
-    const availableWidths = [
-      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
-      portalElement?.offsetWidth || document.body.offsetWidth,
-    ]
-
-    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
-  }, [boundaryElement, portalElement])
-
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl
@@ -376,11 +402,9 @@ export const Tooltip = forwardRef(function Tooltip(
       data-ui="Tooltip"
       {...restProps}
       ref={setFloating}
-      style={{
-        ...floatingStyles,
-        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : undefined,
-      }}
+      style={floatingStyles}
       zOffset={zOffset}
+      $maxWidth={tooltipWidth}
     >
       <TooltipCard
         {...restProps}
@@ -430,47 +454,4 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 })
 
-/**
- * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
- * @see https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks
- */
-function useCloseOnMouseLeave({
-  handleIsOpenChange,
-  referenceElement,
-  showTooltip,
-}: {
-  handleIsOpenChange: (open: boolean, immediate?: boolean) => void
-  referenceElement: HTMLElement | null
-  showTooltip: boolean
-}) {
-  // Since we don't want the `mouseevent` events to be attached and removed if the `referenceElement` is changed
-  // we use a "effect event" (https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
-  // in order to always see the latest `referenceElement` value inside the event handler itself.
-  const onMouseMove = useEffectEvent((target: EventTarget | null, teardown: () => void) => {
-    if (!referenceElement) return
-
-    const isHoveringReference =
-      referenceElement === target || (target instanceof Node && referenceElement.contains(target))
-
-    if (!isHoveringReference) {
-      handleIsOpenChange(false)
-      // Allow removing the event listener eagerly, to avoid race conditions
-      teardown()
-    }
-  })
-
-  // Detect whether the mouse is moving outside of the reference element. This is sometimes
-  // necessary, because the tooltip might not always close as it should (e.g. when clicking
-  // the reference element triggers a CPU-heavy operation.)
-  useEffect(() => {
-    if (!showTooltip) return
-
-    const handleMouseMove = (event: MouseEvent) => {
-      onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
-    }
-
-    window.addEventListener('mousemove', handleMouseMove)
-
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [onMouseMove, showTooltip])
-}
+const emptySubscribe = () => () => {}

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

@@ -36,7 +36,6 @@ export function TooltipDelayGroupProvider(
   const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
   const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
 
-  // @TODO split out into separate contexts
   const value: TooltipDelayGroupContextValue = useMemo(
     () => ({
       isGroupActive: isGroupActive,

package/src/core/styles/font/responsiveFont.ts

@@ -21,11 +21,11 @@ export function responsiveFont(
   const defaultSize = sizes[2]
 
   const base: CSSObject = {
-    'position': 'relative',
-    'fontFamily': family,
+    position: 'relative',
+    fontFamily: family,
     fontWeight,
-    'padding': '1px 0',
-    'margin': 0,
+    padding: '1px 0',
+    margin: 0,
 
     '&:before': {
       content: '""',
@@ -75,10 +75,10 @@ export function fontSize(size: ThemeFontSize): CSSObject {
   const customIconOffset = (capHeight - customIconSize) / 2
 
   return {
-    'fontSize': rem(fontSize),
-    'lineHeight': `calc(${lineHeight} / ${fontSize})`,
-    'letterSpacing': rem(letterSpacing),
-    'transform': `translateY(${rem(descenderHeight)})`,
+    fontSize: rem(fontSize),
+    lineHeight: `calc(${lineHeight} / ${fontSize})`,
+    letterSpacing: rem(letterSpacing),
+    transform: `translateY(${rem(descenderHeight)})`,
 
     '&:before': {
       marginTop: `calc(${rem(0 - negHeight)} - 1px)`,

package/src/core/theme/__workshop__/debug/story.tsx

@@ -191,7 +191,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-gray-fg-color)',
-              'backgroundColor': 'var(--card-avatar-gray-bg-color)',
+              backgroundColor: 'var(--card-avatar-gray-bg-color)',
             } as any
           }
         >
@@ -206,7 +206,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-red-fg-color)',
-              'backgroundColor': 'var(--card-avatar-red-bg-color)',
+              backgroundColor: 'var(--card-avatar-red-bg-color)',
             } as any
           }
         >
@@ -221,7 +221,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-orange-fg-color)',
-              'backgroundColor': 'var(--card-avatar-orange-bg-color)',
+              backgroundColor: 'var(--card-avatar-orange-bg-color)',
             } as any
           }
         >
@@ -236,7 +236,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-yellow-fg-color)',
-              'backgroundColor': 'var(--card-avatar-yellow-bg-color)',
+              backgroundColor: 'var(--card-avatar-yellow-bg-color)',
             } as any
           }
         >
@@ -251,7 +251,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-green-fg-color)',
-              'backgroundColor': 'var(--card-avatar-green-bg-color)',
+              backgroundColor: 'var(--card-avatar-green-bg-color)',
             } as any
           }
         >
@@ -266,7 +266,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-cyan-fg-color)',
-              'backgroundColor': 'var(--card-avatar-cyan-bg-color)',
+              backgroundColor: 'var(--card-avatar-cyan-bg-color)',
             } as any
           }
         >
@@ -281,7 +281,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-blue-fg-color)',
-              'backgroundColor': 'var(--card-avatar-blue-bg-color)',
+              backgroundColor: 'var(--card-avatar-blue-bg-color)',
             } as any
           }
         >
@@ -296,7 +296,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-purple-fg-color)',
-              'backgroundColor': 'var(--card-avatar-purple-bg-color)',
+              backgroundColor: 'var(--card-avatar-purple-bg-color)',
             } as any
           }
         >
@@ -311,7 +311,7 @@ function DebugState() {
           style={
             {
               '--card-fg-color': 'var(--card-avatar-magenta-fg-color)',
-              'backgroundColor': 'var(--card-avatar-magenta-bg-color)',
+              backgroundColor: 'var(--card-avatar-magenta-bg-color)',
             } as any
           }
         >
@@ -395,7 +395,7 @@ function getStateVars(state: ThemeColorState_v2) {
     '--card-skeleton-from-color': state.skeleton.from,
     '--card-skeleton-to-color': state.skeleton.to,
 
-    'backgroundColor': 'var(--card-bg-color)',
-    'color': 'var(--card-fg-color)',
+    backgroundColor: 'var(--card-bg-color)',
+    color: 'var(--card-fg-color)',
   } as CSSProperties
 }

package/src/core/utils/layer/layerProvider.tsx

@@ -91,7 +91,6 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   // Register this layer on mount
   useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild])
 
-  // @TODO split out into separate contexts
   const value: LayerContextValue = useMemo(
     () => ({
       version: 0.0,

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,21 +1,19 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
   const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
   const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-      portal2: portal2Element,
-      portal3: portal3Element,
-    }),
-    [portal1Element, portal2Element, portal3Element],
-  )
 
   return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+        portal2: portal2Element,
+        portal3: portal3Element,
+      }}
+    >
       <Container width={1}>
         <Card height="fill" padding={4}>
           <Stack space={2}>

package/src/core/utils/portal/portalProvider.tsx

@@ -1,5 +1,5 @@
-import {useMemo} from 'react'
-import {useMounted} from '../../hooks/useMounted'
+import {useMemo, useSyncExternalStore} from 'react'
+import {useUnique} from '../../hooks/_internal'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -23,18 +23,24 @@ export interface PortalProviderProps {
  * @public
  */
 export function PortalProvider(props: PortalProviderProps): React.ReactElement {
-  const {boundaryElement, children, element, __unstable_elements: elements} = props
-  const mounted = useMounted()
+  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+  const elements = useUnique(elementsProp)
+  const fallbackElement = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body,
+    () => null,
+  )
 
-  // @TODO split out into separate contexts
   const value: PortalContextValue = useMemo(() => {
     return {
       version: 0.0,
       boundaryElement: boundaryElement || null,
-      element: element || mounted ? document.body : null,
+      element: element || fallbackElement,
       elements,
     }
-  }, [boundaryElement, element, elements, mounted])
+  }, [boundaryElement, element, elements, fallbackElement])
 
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
+
+const emptySubscribe = () => () => {}

package/src/theme/build/buildColorTheme.test.ts

@@ -9,23 +9,23 @@ test('buildColorTheme: base', () => {
           bg: ['50', '900'],
           fg: ['800', '200'],
         },
-        'transparent': {
+        transparent: {
           bg: ['50', 'black'],
         },
-        'default': {
+        default: {
           bg: ['white', '950'],
           fg: ['black', '200'],
         },
-        'primary': {
+        primary: {
           _hue: 'purple',
         },
-        'positive': {
+        positive: {
           _hue: 'cyan',
         },
-        'caution': {
+        caution: {
           _hue: 'yellow',
         },
-        'critical': {
+        critical: {
           _hue: 'red',
         },
       },
@@ -100,23 +100,23 @@ test('buildColorTheme: button', () => {
         bg: ['50', '900'],
         fg: ['800', '200'],
       },
-      'transparent': {
+      transparent: {
         bg: ['50', 'black'],
       },
-      'default': {
+      default: {
         bg: ['white', '950'],
         fg: ['black', '200'],
       },
-      'primary': {
+      primary: {
         _hue: 'purple',
       },
-      'positive': {
+      positive: {
         _hue: 'cyan',
       },
-      'caution': {
+      caution: {
         _hue: 'yellow',
       },
-      'critical': {
+      critical: {
         _hue: 'red',
       },
     },
@@ -127,7 +127,7 @@ test('buildColorTheme: button', () => {
             bg: ['500', '400'],
             fg: ['white', 'black'],
           },
-          'hovered': {
+          hovered: {
             bg: ['600', '300'],
           },
         },

package/src/theme/config/tokens/color/types.ts

@@ -21,15 +21,15 @@ export interface ThemeColorAvatarHueTokens {
 /** @public */
 export interface ThemeColorAvatarTokens {
   '*'?: ThemeColorAvatarHueTokens
-  'gray'?: ThemeColorAvatarHueTokens
-  'blue'?: ThemeColorAvatarHueTokens
-  'purple'?: ThemeColorAvatarHueTokens
-  'magenta'?: ThemeColorAvatarHueTokens
-  'red'?: ThemeColorAvatarHueTokens
-  'orange'?: ThemeColorAvatarHueTokens
-  'yellow'?: ThemeColorAvatarHueTokens
-  'green'?: ThemeColorAvatarHueTokens
-  'cyan'?: ThemeColorAvatarHueTokens
+  gray?: ThemeColorAvatarHueTokens
+  blue?: ThemeColorAvatarHueTokens
+  purple?: ThemeColorAvatarHueTokens
+  magenta?: ThemeColorAvatarHueTokens
+  red?: ThemeColorAvatarHueTokens
+  orange?: ThemeColorAvatarHueTokens
+  yellow?: ThemeColorAvatarHueTokens
+  green?: ThemeColorAvatarHueTokens
+  cyan?: ThemeColorAvatarHueTokens
 }
 
 /** @public */
@@ -66,11 +66,11 @@ export interface ThemeColorBadgeToneTokens {
 /** @public */
 export interface ThemeColorBadgeTokens {
   '*'?: ThemeColorBadgeToneTokens
-  'default'?: ThemeColorBadgeToneTokens
-  'primary'?: ThemeColorBadgeToneTokens
-  'positive'?: ThemeColorBadgeToneTokens
-  'caution'?: ThemeColorBadgeToneTokens
-  'critical'?: ThemeColorBadgeToneTokens
+  default?: ThemeColorBadgeToneTokens
+  primary?: ThemeColorBadgeToneTokens
+  positive?: ThemeColorBadgeToneTokens
+  caution?: ThemeColorBadgeToneTokens
+  critical?: ThemeColorBadgeToneTokens
 }
 
 /** @public */