@sanity/ui 2.0.0-beta.4 → 2.0.0-beta.6

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

@@ -0,0 +1,104 @@
+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 {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))``
+
+/**
+ * @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,
+        ...style,
+      }),
+      [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/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export function ConditionalWrapper({
   children,
   condition,

package/src/core/utils/conditionalWrapper/index.ts

@@ -0,0 +1 @@
+export * from './conditionalWrapper'

package/src/core/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './arrow'
 export * from './boundaryElement'
+export * from './conditionalWrapper'
 export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'

package/src/theme/defaults/colorTokens.ts

@@ -575,39 +575,39 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
   },
   syntax: {
-    atrule: ['purple/700', 'purple/400'],
+    atrule: ['purple/600', 'purple/400'],
     attrName: ['green/700', 'green/400'],
     attrValue: ['yellow/700', 'yellow/400'],
     attribute: ['yellow/700', 'yellow/400'],
-    boolean: ['purple/700', 'purple/400'],
-    builtin: ['purple/700', 'purple/400'],
+    boolean: ['purple/600', 'purple/400'],
+    builtin: ['purple/600', 'purple/400'],
     cdata: ['yellow/700', 'yellow/400'],
     char: ['yellow/700', 'yellow/400'],
     class: ['orange/700', 'orange/400'],
     className: ['cyan/700', 'cyan/400'],
-    comment: ['gray/700/0.5', 'gray/400/0.5'],
-    constant: ['purple/700', 'purple/400'],
-    deleted: ['red/700', 'red/400'],
-    entity: ['red/700', 'red/400'],
+    comment: ['gray/400', 'gray/600'],
+    constant: ['purple/600', 'purple/400'],
+    deleted: ['red/600', 'red/400'],
+    entity: ['red/600', 'red/400'],
     function: ['green/700', 'green/400'],
-    hexcode: ['blue/700', 'blue/400'],
-    id: ['purple/700', 'purple/400'],
-    important: ['purple/700', 'purple/400'],
+    hexcode: ['blue/600', 'blue/400'],
+    id: ['purple/600', 'purple/400'],
+    important: ['purple/600', 'purple/400'],
     inserted: ['yellow/700', 'yellow/400'],
-    keyword: ['magenta/700', 'magenta/400'],
-    number: ['purple/700', 'purple/400'],
-    operator: ['magenta/700', 'magenta/400'],
-    property: ['blue/700', 'blue/400'],
+    keyword: ['magenta/600', 'magenta/400'],
+    number: ['purple/600', 'purple/400'],
+    operator: ['magenta/600', 'magenta/400'],
+    property: ['blue/600', 'blue/400'],
     pseudoClass: ['yellow/700', 'yellow/400'],
     pseudoElement: ['yellow/700', 'yellow/400'],
-    punctuation: ['gray/700', 'gray/400'],
-    regex: ['blue/700', 'blue/400'],
-    selector: ['red/700', 'red/400'],
+    punctuation: ['gray/600', 'gray/400'],
+    regex: ['blue/600', 'blue/400'],
+    selector: ['red/600', 'red/400'],
     string: ['yellow/700', 'yellow/400'],
-    symbol: ['purple/700', 'purple/400'],
-    tag: ['red/700', 'red/400'],
+    symbol: ['purple/600', 'purple/400'],
+    tag: ['red/600', 'red/400'],
     unit: ['orange/700', 'orange/400'],
-    url: ['red/700', 'red/400'],
-    variable: ['red/700', 'red/400'],
+    url: ['red/600', 'red/400'],
+    variable: ['red/600', 'red/400'],
   },
 }