@sanity/ui 2.0.0-beta.14 → 2.0.0-beta.16

package/package.json

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

package/src/core/__workshop__/fontsPlugin.tsx

@@ -7,7 +7,7 @@ const GlobalStyle = createGlobalStyle`
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable.ttf') format('ttf');
     font-named-instance: 'Regular';
   }
   @font-face {
@@ -15,7 +15,7 @@ const GlobalStyle = createGlobalStyle`
     font-style: italic;
     font-weight: 100 900;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    src: url('https://studio-static.sanity.io/InterVariable-Italic.ttf') format('ttf');
     font-named-instance: 'Italic';
   }
 `

package/src/core/components/toast/toast.tsx

@@ -1,7 +1,9 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import type {ButtonTone} from '../../types'
 
 /**
  * @public
@@ -20,17 +22,28 @@ const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
   warning: 'caution',
   success: 'positive',
   info: 'primary',
-}
+} as const
+
+const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'primary',
+} satisfies {[key: string]: ButtonTone}
 
 const ROLES = {
   error: 'alert',
   warning: 'alert',
   success: 'alert',
   info: 'alert',
-}
+} as const
 
 const Root = styled(Card)`
   pointer-events: all;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 const TextBox = styled(Flex)`
@@ -49,6 +62,7 @@ export function Toast(
 ): React.ReactElement {
   const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
+  const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
   return (
@@ -84,6 +98,7 @@ export function Toast(
               icon={CloseIcon}
               mode="bleed"
               padding={2}
+              tone={buttonTone}
               onClick={onClose}
               style={{verticalAlign: 'top'}}
             />

package/src/core/components/toast/toastProvider.tsx

@@ -1,6 +1,7 @@
 import {AnimatePresence, motion} from 'framer-motion'
 import {useCallback, useEffect, useMemo, useRef, useState, startTransition} from 'react'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'
@@ -132,9 +133,25 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
               <AnimatePresence initial={false}>
                 {state.map(({dismiss, id, params}) => (
                   <motion.div
-                    animate={{opacity: 1, y: 0, scale: 1}}
-                    exit={{opacity: 0, scale: 0.5, transition: {duration: 0.2}}}
-                    initial={{opacity: 0, y: 32, scale: 0.25, willChange: 'transform'}}
+                    animate={{
+                      opacity: [0, 1, 1],
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+                      y: 0,
+                      scale: 1,
+                    }}
+                    exit={{
+                      opacity: [1, 1, 0],
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+                      scale: 0.5,
+                      transition: {duration: 0.2},
+                    }}
+                    initial={{
+                      opacity: 0,
+                      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+                      y: 32,
+                      scale: 0.25,
+                      willChange: 'transform',
+                    }}
                     key={id}
                     layout="position"
                     transition={{type: 'spring', damping: 30, stiffness: 400}}

package/src/core/constants.ts

@@ -10,6 +10,11 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
+/**
+ * @internal
+ */
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity'
+
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
  * @internal
@@ -20,9 +25,23 @@ export const POPOVER_MOTION_PROPS: {
   exit: Variant
   transition: Transition
 } = {
-  initial: {opacity: 0.5, scale: 0.97},
-  animate: {opacity: 1, scale: 1},
-  exit: {opacity: 0, scale: 0.97},
+  initial: {
+    opacity: 0.5,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+    scale: 0.97,
+    willChange: 'transform',
+  },
+  animate: {
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, null, 1],
+    scale: 1,
+  },
+  exit: {
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [null, 0, 0],
+    scale: 0.97,
+  },
   transition: {duration: 0.4, type: 'spring'},
 }
 

package/src/core/primitives/popover/popoverCard.tsx

@@ -3,7 +3,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -22,6 +22,10 @@ const MotionCard = styled(motion(Card))`
   flex-direction: column;
   width: max-content;
   min-width: min-content;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 /**

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

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -12,7 +12,12 @@ import {
   DEFAULT_TOOLTIP_ARROW_WIDTH,
 } from './constants'
 
-const MotionCard = styled(motion(Card))``
+const MotionCard = styled(motion(Card))`
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`
 
 /**
  * @internal

package/src/theme/getScopedTheme.ts

@@ -36,6 +36,7 @@ export function getScopedTheme(
       layer: layer_v0,
       v2: {
         ...v2,
+        _resolved: true,
         color: color_v2,
         layer: layer_v2,
       },

package/src/theme/system/theme.ts

@@ -114,7 +114,15 @@ export type RootTheme = BaseTheme
 /**
  * @public
  */
-export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {color: ThemeColorCard_v2}
+export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
+  color: ThemeColorCard_v2
+  /**
+   * Indicates whether the theme is resolved or raw, it's necessary to avoid issues
+   * with sanity V2 components accessing a v1 <ThemeProvider>.
+   * See https://github.com/sanity-io/ui/pull/1203 for more info.
+   */
+  _resolved: boolean
+}
 
 /**
  * @public

package/src/theme/versioning/getTheme_v2.ts

@@ -6,7 +6,7 @@ const cache = new WeakMap<Theme, Theme_v2>()
 
 /** @public */
 export function getTheme_v2(theme: Theme): Theme_v2 {
-  if (theme.sanity.v2) return theme.sanity.v2
+  if (theme.sanity.v2?._resolved) return theme.sanity.v2
 
   const cached_v2 = cache.get(theme)
 
@@ -14,6 +14,7 @@ export function getTheme_v2(theme: Theme): Theme_v2 {
 
   const v2: Theme_v2 = {
     _version: 2,
+    _resolved: true,
     avatar: {
       ...defaultThemeConfig.avatar,
       ...theme.sanity.avatar,