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

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

@@ -10,7 +10,7 @@ import {
   RootBoundary,
 } from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {AnimatePresence, motion} from 'framer-motion'
+import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
   forwardRef,
@@ -19,27 +19,30 @@ import {
   useMemo,
   useRef,
   useState,
-  CSSProperties,
   ForwardedRef,
   useId,
 } from 'react'
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {Placement} from '../../types'
-import {Arrow, Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
-import {Card} from '../card'
+import {
+  ConditionalWrapper,
+  Layer,
+  LayerProps,
+  Portal,
+  useBoundaryElement,
+  usePortal,
+} from '../../utils'
 import {Delay} from '../types'
-import {ConditionalWrapper} from './conditionalWrapper'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
-  DEFAULT_TOOLTIP_ARROW_HEIGHT,
-  DEFAULT_TOOLTIP_ARROW_RADIUS,
-  DEFAULT_TOOLTIP_ARROW_WIDTH,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
+import {TooltipCard} from './tooltipCard'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
 /**
@@ -98,6 +101,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
   const {
+    animate = false,
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
@@ -113,7 +117,6 @@ export const Tooltip = forwardRef(function Tooltip(
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
     delay,
-    animate = false,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -168,8 +171,14 @@ export const Tooltip = forwardRef(function Tooltip(
       ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
     return ret
-  }, [arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -180,15 +189,8 @@ export const Tooltip = forwardRef(function Tooltip(
   const arrowX = middlewareData.arrow?.x
   const arrowY = middlewareData.arrow?.y
 
-  const arrowStyle: CSSProperties = useMemo(
-    () => ({
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined,
-    }),
-    [arrowX, arrowY],
-  )
+  const originX = middlewareData['@sanity/ui/origin']?.originX
+  const originY = middlewareData['@sanity/ui/origin']?.originY
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
@@ -386,7 +388,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   if (disabled) return child
 
-  const root = (
+  const tooltip = (
     <Root
       data-ui="Tooltip"
       {...restProps}
@@ -395,62 +397,50 @@ export const Tooltip = forwardRef(function Tooltip(
       zOffset={zOffset}
       $maxWidth={tooltipWidth}
     >
-      <ConditionalWrapper
-        condition={animate} // Add animation wrapper if it should animate
-        wrapper={(children) => (
-          <motion.div
-            initial={{opacity: 0.5, scale: 0.95}}
-            animate={{opacity: 1, scale: 1}}
-            exit={{opacity: 0, scale: 0.95}}
-            transition={{duration: 0.3, type: 'spring'}}
-          >
-            {children}
-          </motion.div>
-        )}
+      <TooltipCard
+        {...restProps}
+        animate={animate}
+        arrow={arrowProp}
+        arrowRef={setArrow}
+        arrowX={arrowX}
+        arrowY={arrowY}
+        originX={originX}
+        originY={originY}
+        padding={padding}
+        placement={placement}
+        radius={radius}
+        ref={setFloating}
+        scheme={scheme}
+        shadow={shadow}
       >
-        <Card
-          data-ui="Tooltip__card"
-          data-placement={placement}
-          padding={padding}
-          radius={radius}
-          scheme={scheme}
-          shadow={shadow}
-        >
-          {content}
-          {arrowProp && (
-            <Arrow
-              ref={setArrow}
-              style={arrowStyle}
-              width={DEFAULT_TOOLTIP_ARROW_WIDTH}
-              height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
-              radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
-            />
-          )}
-        </Card>
-      </ConditionalWrapper>
+        {content}
+      </TooltipCard>
     </Root>
   )
 
   return (
     <>
-      {child}
+      {/* the tooltip */}
       <ConditionalWrapper
         condition={animate}
-        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>} // Add AnimatePresence if it should animate
+        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>}
       >
         {showTooltip && (
           <ConditionalWrapper
-            condition={!!portalProp} // Add portal if portalProp is set
+            condition={!!portalProp}
             wrapper={(children) => (
               <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
                 {children}
               </Portal>
             )}
           >
-            {root}
+            {tooltip}
           </ConditionalWrapper>
         )}
       </ConditionalWrapper>
+
+      {/* the referred element */}
+      {child}
     </>
   )
 })

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

@@ -0,0 +1,110 @@
+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_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
+import {Placement, Radius} from '../../types'
+import {Arrow} from '../../utils'
+import {Card, CardProps} from '../card'
+import {
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
+} from './constants'
+
+const MotionCard = styled(motion(Card))`
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`
+
+/**
+ * @internal
+ */
+export const TooltipCard = memo(
+  forwardRef(function TooltipCard(
+    props: {
+      animate?: boolean
+      arrow: boolean
+      arrowRef: React.Ref<HTMLDivElement>
+      arrowX?: number
+      arrowY?: number
+      originX?: number
+      originY?: number
+      padding?: number | number[]
+      placement?: Placement
+      radius?: Radius | Radius[]
+      scheme?: ThemeColorSchemeKey
+      shadow?: number | number[]
+    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) {
+    const {
+      animate,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      children,
+      originX,
+      originY,
+      padding,
+      placement,
+      radius,
+      scheme,
+      shadow,
+      style,
+      ...restProps
+    } = props
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        originX,
+        originY,
+        willChange: animate ? 'transform' : undefined,
+        ...style,
+      }),
+      [animate, originX, originY, style],
+    )
+
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }),
+      [arrowX, arrowY],
+    )
+
+    return (
+      <MotionCard
+        data-ui="Tooltip__card"
+        {...(restProps as CardProps & MotionProps)}
+        data-placement={placement}
+        padding={padding}
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        style={rootStyle}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
+      >
+        {children}
+
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+            height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+            radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+          />
+        )}
+      </MotionCard>
+    )
+  }),
+)
+
+TooltipCard.displayName = 'TooltipCard'

package/src/core/styles/card/_cardColorStyle.ts

@@ -12,6 +12,8 @@ export function _cardColorStyle(
   return {
     // from base
 
+    '--card-backdrop-color': base.backdrop,
+
     '--card-focus-ring-color': base.focusRing,
 
     '--card-shadow-outline-color': base.shadow.outline,

package/src/core/styles/input/textInputStyle.ts

@@ -195,9 +195,10 @@ export function textInputRepresentationStyle(
       }
 
       /* disabled */
-      *:disabled + & {
+      *:not(:invalid):disabled + & {
         --card-bg-color: ${color.input.default.disabled.bg} !important;
         --card-fg-color: ${color.input.default.disabled.fg} !important;
+        --card-icon-color: ${color.input.default.disabled.fg} !important;
 
         &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
@@ -207,12 +208,30 @@ export function textInputRepresentationStyle(
         }
       }
 
+      *:invalid:disabled + & {
+        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
       /* readOnly */
-      *:read-only + & {
+      *:not(:invalid):read-only + & {
         --card-bg-color: ${color.input.default.readOnly.bg} !important;
         --card-fg-color: ${color.input.default.readOnly.fg} !important;
       }
 
+      *:invalid:read-only + & {
+        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+      }
+
       /* hovered */
       @media (hover: hover) {
         *:not(:disabled):not(:read-only):not(:invalid):hover + & {
@@ -220,12 +239,24 @@ export function textInputRepresentationStyle(
           --card-fg-color: ${color.input.default.hovered.fg};
         }
 
+        *:invalid:not(:disabled):not(:read-only):hover + & {
+          --card-bg-color: ${color.input.invalid.hovered.bg};
+          --card-fg-color: ${color.input.invalid.hovered.fg};
+        }
+
         *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
           --input-box-shadow: ${focusRingBorderStyle({
             color: color.input.default.hovered.border,
             width: input.border.width,
           })};
         }
+
+        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.hovered.border,
+            width: input.border.width,
+          })};
+        }
       }
     }
   `

package/src/core/styles/margin/marginsStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const theme = getScopedTheme(defaultTheme, 'light', 'default')
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/core/styles/padding/paddingStyle.test.ts

@@ -1,9 +1,9 @@
 /** @jest-environment jsdom */
 
-import {getScopedTheme, defaultTheme} from '@sanity/ui/theme'
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const theme = getScopedTheme(defaultTheme, 'light', 'default')
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/core/theme/__workshop__/build/Root.tsx

@@ -159,6 +159,7 @@ export const Root = styled.div((props) => {
       --link-fg: var(--card-enabled-link-fg);
       --code-bg: var(--card-enabled-code-bg);
       --code-fg: var(--card-enabled-code-fg);
+      --kbd-bg: var(--card-enabled-kbd-bg);
       --skeleton-from: var(--card-enabled-skeleton-from);
       --skeleton-to: var(--card-enabled-skeleton-to);
 
@@ -322,15 +323,15 @@ export const Root = styled.div((props) => {
       color: var(--icon);
     }
 
-    .muted-fg {
+    .muted {
       color: var(--muted-fg);
     }
 
-    .accent-fg {
+    .accent {
       color: var(--accent-fg);
     }
 
-    .link-fg {
+    .link {
       color: var(--link-fg);
     }
 
@@ -339,6 +340,22 @@ export const Root = styled.div((props) => {
       color: var(--code-fg);
     }
 
+    .kbd {
+      background-color: var(--kbd-bg);
+      color: var(--kbd-fg);
+    }
+
+    .badge {
+      background-color: var(--badge-bg);
+      color: var(--badge-fg);
+    }
+
+    .badge--default {
+      --badge-bg: var(--badge-default-bg);
+      --badge-fg: var(--badge-default-fg);
+      --badge-border: var(--badge-default-border);
+    }
+
     .skeleton-from {
       color: var(--skeleton-from);
     }

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

@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {
-  ThemeColorButtonStates_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorCard_v2,
-  ThemeColorInputStates_v2,
+  ThemeColorInputMode_v2,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
 import {
-  THEME_COLOR_CARD_TONES,
   THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_INPUT_MODES,
   THEME_COLOR_STATE_TONES,
   ThemeColorCardToneKey,
   ThemeColorInputModeKey,
 } from '@sanity/ui/theme'
-import {defaultTheme} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {ReactElement} from 'react'
 import {rem} from '../../../styles'
 import {useTheme_v2} from '../../useTheme'
 import {getCSSProps} from './helpers'
 import {Root} from './Root'
 
-const theme = defaultTheme
+const theme = buildTheme()
 
 export default function BuildStory(): ReactElement {
   return (
@@ -268,7 +268,7 @@ function StatePreview(props: {theme: ThemeColorState_v2}) {
   )
 }
 
-function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
+function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
   const {theme: button} = props
 
   return (
@@ -289,18 +289,24 @@ function ButtonPreview(props: {theme: ThemeColorButtonStates_v2}) {
         <div className="icon" style={{flex: 'none'}}>
           &copy;
         </div>
-        <div className="muted-fg" style={{flex: 'none'}}>
+        <div className="muted" style={{flex: 'none'}}>
           m
         </div>
-        <div className="accent-fg" style={{flex: 'none'}}>
+        <div className="accent" style={{flex: 'none'}}>
           a
         </div>
-        <div className="link-fg" style={{flex: 'none'}}>
+        <div className="link" style={{flex: 'none'}}>
           l
         </div>
         <div className="code" style={{flex: 'none'}}>
           c
         </div>
+        <div className="kbd" style={{flex: 'none'}}>
+          k
+        </div>
+        <div className="badge badge--default" style={{flex: 'none'}}>
+          b
+        </div>
         <div style={{flex: 'none'}}>
           <CheckeredBackground />
         </div>
@@ -424,7 +430,7 @@ function Skeleton() {
   )
 }
 
-function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputStates_v2}) {
+function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
   const {mode, theme: input} = props
 
   return (

package/src/core/theme/__workshop__/canvas.tsx

@@ -10,14 +10,14 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {
-  ThemeColorButtonStates_v2,
-  ThemeColorButtonTones_v2,
+  ThemeColorButtonMode_v2,
+  ThemeColorButtonTone_v2,
   ThemeColorButton_v2,
+  ThemeColorCard_v2,
   ThemeColorScheme_v2,
-  ThemeColorSelectableStates_v2,
+  ThemeColorSelectableTone_v2,
   ThemeColorSelectable_v2,
   ThemeColorState_v2,
-  ThemeColorCard_v2,
   getContrastRatio,
   mix,
   parseColor,
@@ -202,7 +202,7 @@ function ColorButton(props: {color: ThemeColorButton_v2}) {
   )
 }
 
-function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
+function ColorButtonMode(props: {color: ThemeColorButtonMode_v2}) {
   const {color} = props
 
   return (
@@ -243,7 +243,7 @@ function ColorButtonMode(props: {color: ThemeColorButtonTones_v2}) {
   )
 }
 
-function ColorGenericStates(props: {color: ThemeColorButtonStates_v2}) {
+function ColorGenericStates(props: {color: ThemeColorButtonTone_v2}) {
   const {color} = props
 
   return (
@@ -335,7 +335,7 @@ function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
   )
 }
 
-function ColorSelectableTone(props: {color: ThemeColorSelectableStates_v2}) {
+function ColorSelectableTone(props: {color: ThemeColorSelectableTone_v2}) {
   const {color} = props
 
   return (