@sanity/ui 2.9.0-canary.6 → 2.10.0-corel.0

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
 import {useElementSize} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
@@ -21,30 +21,31 @@ export const ElementQuery = forwardRef(function ElementQuery(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const theme = useTheme_v2()
-  const {children, media: _media, ...restProps} = props
-  const media = _media ?? theme.media
+  const {children, media = theme.media, ...restProps} = props
 
+  const ref = useRef<HTMLDivElement | null>(null)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
-  const max = useMemo(() => {
-    const eq = findMaxBreakpoints(media, width)
+  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
+  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
 
-    return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
-  const min = useMemo(() => {
-    const eq = findMinBreakpoints(media, width)
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-    return eq.length ? eq.join(' ') : undefined
-  }, [media, width])
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
-    element,
-  ])
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    ref.current = el
+    setElement(el)
+  }, [])
 
   return (
-    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
+    <div
+      data-ui="ElementQuery"
+      {...restProps}
+      data-eq-max={max.length ? max.join(' ') : undefined}
+      data-eq-min={min.length ? min.join(' ') : undefined}
+      ref={setRef}
+    >
       {children}
     </div>
   )

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

@@ -85,7 +85,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
         parentDispose?.()
       }
     },
-    [parentRegisterChild, setSize, setChildLayers],
+    [parentRegisterChild],
   )
 
   // Register this layer on mount

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

@@ -1,4 +1,4 @@
-import {useMemo, useState, useSyncExternalStore} from 'react'
+import {useMemo, useRef, useSyncExternalStore} from 'react'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -51,13 +51,13 @@ const emptySubscribe = () => () => {}
  * equality comparison (eg by identity), and only goes one level deep.
  */
 function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
-  const [cachedValue, setCachedValue] = useState(value)
+  const valueRef = useRef<ValueType>(value)
 
-  if (!_isEqual(cachedValue, value)) {
-    setCachedValue(value)
+  if (!_isEqual(valueRef.current, value)) {
+    valueRef.current = value
   }
 
-  return cachedValue
+  return valueRef.current
 }
 
 function _isEqual(objA: Comparable, objB: Comparable): boolean {

package/src/theme/build/_deprecated/color/factory.ts

@@ -34,7 +34,7 @@ export interface ThemeColorBuilderOpts {
   solid: (opts: {
     base: ThemeColorBase
     dark: boolean
-    tone: ThemeColorToneKey
+    tone: ThemeColorName
     name: ThemeColorName
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
   }) => ThemeColorGenericState

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
+import {ThemeColorBase, ThemeColorMuted, ThemeColorToneKey} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorCardToneKey,
+  name: ThemeColorToneKey,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/build/buildColorTheme.ts

@@ -24,6 +24,7 @@ import {
   ThemeColorInput_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
+  THEME_COLOR_CARD_TONES,
 } from '../system'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
@@ -46,14 +47,11 @@ function buildColorScheme(
 ): ThemeColorScheme_v2 {
   const {scheme} = options
 
-  return {
-    transparent: buildCardColorTheme({scheme, tone: 'transparent'}, config),
-    default: buildCardColorTheme({scheme, tone: 'default'}, config),
-    primary: buildCardColorTheme({scheme, tone: 'primary'}, config),
-    positive: buildCardColorTheme({scheme, tone: 'positive'}, config),
-    caution: buildCardColorTheme({scheme, tone: 'caution'}, config),
-    critical: buildCardColorTheme({scheme, tone: 'critical'}, config),
-  }
+  return THEME_COLOR_CARD_TONES.reduce((acc, tone) => {
+    acc[tone] = buildCardColorTheme({scheme, tone}, config)
+
+    return acc
+  }, {} as ThemeColorScheme_v2)
 }
 
 function buildCardColorTheme(
@@ -77,7 +75,7 @@ function buildCardColorTheme(
     badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
     bg: _color(context, tokens?.bg),
     border: _color(context, tokens?.border),
-    button: buildButtonColorTheme({scheme}, config),
+    button: buildButtonColorTheme({scheme, tone}, config),
     code: {
       bg: _color(context, tokens?.code?.bg),
       fg: _color(context, tokens?.code?.fg),
@@ -98,7 +96,7 @@ function buildCardColorTheme(
       bg: _color(context, tokens?.muted?.bg),
       fg: _color(context, tokens?.muted?.fg),
     },
-    selectable: buildSelectableColorTheme({scheme}, config),
+    selectable: buildSelectableColorTheme({scheme, tone}, config),
     shadow: buildShadowColorTheme({scheme, tone}, config),
     skeleton: {
       from: _color(context, tokens?.skeleton?.from),
@@ -167,13 +165,11 @@ function buildBadgeColorTheme(
 ): ThemeColorBadge_v2 {
   const {scheme} = options
 
-  return {
-    default: _buildBadgeColorTheme(tokens, {scheme, tone: 'default'}, config),
-    primary: _buildBadgeColorTheme(tokens, {scheme, tone: 'primary'}, config),
-    positive: _buildBadgeColorTheme(tokens, {scheme, tone: 'positive'}, config),
-    caution: _buildBadgeColorTheme(tokens, {scheme, tone: 'caution'}, config),
-    critical: _buildBadgeColorTheme(tokens, {scheme, tone: 'critical'}, config),
-  }
+  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+    acc[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
+
+    return acc
+  }, {} as ThemeColorBadge_v2)
 }
 
 function _buildBadgeColorTheme(
@@ -195,15 +191,15 @@ function _buildBadgeColorTheme(
 }
 
 function buildButtonColorTheme(
-  options: {scheme: ThemeColorSchemeKey},
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
   config?: ThemeConfig,
 ): ThemeColorButton_v2 {
-  const {scheme} = options
+  const {scheme, tone: cardTone} = options
 
   const modes: Partial<ThemeColorButton_v2> = {}
 
   for (const mode of THEME_COLOR_BUTTON_MODES) {
-    modes[mode] = buildButtonTonesColorTheme({scheme, mode}, config)
+    modes[mode] = buildButtonTonesColorTheme({cardTone, scheme, mode}, config)
   }
 
   return modes as ThemeColorButton_v2
@@ -211,17 +207,18 @@ function buildButtonColorTheme(
 
 function buildButtonTonesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     mode: ThemeColorButtonModeKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {mode, scheme} = options
+  const {cardTone, mode, scheme} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
+    tones[tone] = buildButtonStatesColorTheme({cardTone, mode, scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -229,18 +226,19 @@ function buildButtonTonesColorTheme(
 
 function buildButtonStatesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {mode, scheme, tone} = options
+  const {cardTone, mode, scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
+    states[state] = buildButtonStateColorTheme({cardTone, mode, tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -248,6 +246,7 @@ function buildButtonStatesColorTheme(
 
 function buildButtonStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     tone: ThemeColorStateToneKey
     scheme: ThemeColorSchemeKey
@@ -255,9 +254,10 @@ function buildButtonStateColorTheme(
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {mode, tone, scheme, state} = options
+  const {cardTone, mode, tone, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
-  const hue = tokens?._hue || 'gray'
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -318,25 +318,26 @@ function buildInputStatesColorTheme(
   const {mode, scheme, tone} = options
 
   return {
-    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', tone}, config),
-    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', tone}, config),
-    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', tone}, config),
-    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', tone}, config),
+    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', cardTone: tone}, config),
+    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', cardTone: tone}, config),
+    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', cardTone: tone}, config),
+    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', cardTone: tone}, config),
   }
 }
 
 function buildInputStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: 'default' | 'invalid'
     scheme: ThemeColorSchemeKey
     state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
-    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorInputState_v2 {
-  const {mode, tone, scheme, state} = options
+  const {cardTone, mode, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.input?.[mode]?.[state]
-  const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -355,15 +356,16 @@ function buildInputStateColorTheme(
 function buildSelectableColorTheme(
   options: {
     scheme: ThemeColorSchemeKey
+    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {scheme} = options
+  const {scheme, tone: cardTone} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
+    tones[tone] = buildSelectableStatesColorTheme({cardTone, scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -371,17 +373,18 @@ function buildSelectableColorTheme(
 
 function buildSelectableStatesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {scheme, tone} = options
+  const {cardTone, scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
+    states[state] = buildSelectableStateColorTheme({cardTone, tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -389,15 +392,18 @@ function buildSelectableStatesColorTheme(
 
 function buildSelectableStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     state: ThemeColorStateKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {scheme, state, tone} = options
+  const {cardTone, scheme, state, tone} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.selectable?.[tone]?.[state]
-  const hue = tokens?._hue || 'gray'
+
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}