@sanity/ui 2.0.0-beta.9 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
-    "@sanity/color": "3.0.0-beta.9",
+    "@sanity/color": "^3.0.0",
     "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.5",

package/src/core/__workshop__/fontsPlugin.tsx

@@ -3,20 +3,60 @@ import {createGlobalStyle} from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
-    font-named-instance: 'Regular';
+    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
   }
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: italic;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
-    font-named-instance: 'Italic';
+    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
   }
 `
 

package/src/core/components/dialog/dialog.tsx

@@ -394,6 +394,7 @@ export const Dialog = forwardRef(function Dialog(
     <Portal __unstable_name={portalProp}>
       <Root
         {...restProps}
+        $animate={animate}
         $padding={padding}
         $position={position}
         aria-labelledby={labelId}
@@ -406,7 +407,6 @@ export const Dialog = forwardRef(function Dialog(
         ref={ref}
         role="dialog"
         zOffset={zOffset}
-        animate={animate}
       >
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard

package/src/core/components/dialog/styles.ts

@@ -41,11 +41,11 @@ export function responsiveDialogPositionStyle(
  * @internal
  */
 export interface AnimationDialogStyleProps {
-  animate: boolean
+  $animate: boolean
 }
 
 export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
-  if (!props.animate) return css``
+  if (!props.$animate) return css``
 
   return css`
     @keyframes zoomIn {

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}}
+                    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/button/button.tsx

@@ -72,7 +72,7 @@ export const Button = forwardRef(function Button(
     iconRight,
     justify: justifyProp = 'center',
     loading,
-    mode = 'ghost',
+    mode = 'default',
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -149,17 +149,15 @@ export const Button = forwardRef(function Button(
             )}
 
             {text && (
-              <Box flex={iconRight ? 1 : undefined}>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
+              <Text
+                muted={muted}
+                align={textAlign}
+                size={fontSize}
+                textOverflow="ellipsis"
+                weight={button.textWeight}
+              >
+                {text}
+              </Text>
             )}
 
             {iconRight && (

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

@@ -46,6 +46,10 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
       }
     }
 
+    & strong {
+      font-weight: ${font.heading.weights.bold};
+    }
+
     & svg {
       /* Certain popular CSS libraries changes the defaults for SVG display */
       /* Make sure SVGs are rendered as inline elements */

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;
+  }
 `
 
 /**
@@ -99,9 +103,10 @@ export const PopoverCard = memo(
         top: y,
         width,
         zIndex,
+        willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [originX, originY, strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(

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

@@ -102,6 +102,11 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
       --switch-bg-color: ${color.input.default.readOnly.border};
       --switch-fg-color: ${color.input.default.readOnly.bg};
     }
+
+    input:checked[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.fg};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
   `
 }
 

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -62,7 +62,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -1,7 +1,8 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function StatesStory() {
+  const invalid = useBoolean('Invalid', false, 'Props')
   const onChange = useAction('onChange')
 
   return (
@@ -12,7 +13,12 @@ export default function StatesStory() {
             <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
-            <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
+            <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
+              id="enabled-example"
+              onChange={onChange}
+              value="This is some text"
+            />
           </Stack>
 
           <Stack space={3}>
@@ -20,6 +26,7 @@ export default function StatesStory() {
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               disabled
               id="disabled-example"
               onChange={onChange}
@@ -32,6 +39,7 @@ export default function StatesStory() {
               <label htmlFor="read-only-example">Read-only</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               id="read-only-example"
               readOnly
               onChange={onChange}

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
@@ -57,9 +62,10 @@ export const TooltipCard = memo(
       () => ({
         originX,
         originY,
+        willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [originX, originY, style],
+      [animate, originX, originY, style],
     )
 
     const arrowStyle: CSSProperties = useMemo(

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/theme/__workshop__/debug/story.tsx

@@ -1,3 +1,4 @@
+import {CropIcon} from '@sanity/icons'
 import {
   THEME_COLOR_BUTTON_MODES,
   THEME_COLOR_CARD_TONES,
@@ -8,6 +9,7 @@ import {
   ThemeColorScheme_v2,
   ThemeColorState_v2,
 } from '@sanity/ui/theme'
+import {useBoolean} from '@sanity/ui-workshop'
 import {CSSProperties} from 'react'
 import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
 import {useRootTheme} from '../../useRootTheme'
@@ -27,17 +29,23 @@ export default function DebugStory() {
 function DebugScheme(props: {scheme: ThemeColorScheme_v2}) {
   const {scheme} = props
 
+  const button = useBoolean('Button', false, 'Props') || false
+  const selectable = useBoolean('Selectable', false, 'Props') || false
+
   return (
     <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
       {THEME_COLOR_CARD_TONES.map((tone) => (
-        <DebugCard card={scheme[tone]} key={tone} />
+        <DebugCard card={scheme[tone]} features={{button, selectable}} key={tone} />
       ))}
     </Box>
   )
 }
 
-function DebugCard(props: {card: ThemeColorCard_v2}) {
-  const {card} = props
+function DebugCard(props: {
+  card: ThemeColorCard_v2
+  features: {button: boolean; selectable: boolean}
+}) {
+  const {card, features} = props
 
   // card.avatar
   // card.backdrop
@@ -56,27 +64,44 @@ function DebugCard(props: {card: ThemeColorCard_v2}) {
   return (
     <Box style={getStateVars(card)}>
       <DebugState />
-      <Stack padding={2} space={1}>
-        {THEME_COLOR_BUTTON_MODES.map((mode) => (
-          <Stack key={mode} space={1}>
-            {THEME_COLOR_STATE_TONES.map((stateTone) => (
-              <Flex key={stateTone} gap={1}>
-                {/* {mode} */}
-                {THEME_COLOR_STATES.map((state) => (
-                  <Box
-                    flex={1}
-                    key={state}
-                    style={getStateVars(card.button[mode][stateTone][state])}
-                  >
-                    <DebugState />
-                    {/* {state} */}
-                  </Box>
-                ))}
-              </Flex>
-            ))}
-          </Stack>
-        ))}
-      </Stack>
+
+      {features.button && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_BUTTON_MODES.map((mode) => (
+            <Stack key={mode} space={1}>
+              {THEME_COLOR_STATE_TONES.map((stateTone) => (
+                <Flex key={stateTone} gap={1}>
+                  {/* {mode} */}
+                  {THEME_COLOR_STATES.map((state) => (
+                    <Box
+                      flex={1}
+                      key={state}
+                      style={getStateVars(card.button[mode][stateTone][state])}
+                    >
+                      <DebugState />
+                    </Box>
+                  ))}
+                </Flex>
+              ))}
+            </Stack>
+          ))}
+        </Stack>
+      )}
+
+      {features.selectable && (
+        <Stack padding={2} space={1}>
+          {THEME_COLOR_STATE_TONES.map((stateTone) => (
+            <Flex key={stateTone} gap={1}>
+              {/* {mode} */}
+              {THEME_COLOR_STATES.map((state) => (
+                <Box flex={1} key={state} style={getStateVars(card.selectable[stateTone][state])}>
+                  <DebugState />
+                </Box>
+              ))}
+            </Flex>
+          ))}
+        </Stack>
+      )}
     </Box>
   )
 }
@@ -89,7 +114,12 @@ function DebugState() {
       space={3}
       style={{border: '1px solid var(--card-border-color)'}}
     >
-      <Text size={1}>Text</Text>
+      <Flex gap={3}>
+        <Text size={1}>Text</Text>
+        <Text size={1}>
+          <CropIcon />
+        </Text>
+      </Flex>
       <Text muted size={1}>
         Muted
       </Text>
@@ -116,13 +146,20 @@ function DebugState() {
 
 function getStateVars(state: ThemeColorState_v2) {
   return {
+    '--card-accent-fg-color': state.accent.fg,
+
+    '--card-code-bg-color': state.code.bg,
+    '--card-code-fg-color': state.code.fg,
+
     '--card-bg-color': state.bg,
+
     '--card-border-color': state.border,
+
     '--card-fg-color': state.fg,
-    '--card-accent-fg-color': state.accent.fg,
+
+    '--card-icon-color': state.icon,
+
     '--card-muted-fg-color': state.muted.fg,
-    '--card-code-bg-color': state.code.bg,
-    '--card-code-fg-color': state.code.fg,
 
     '--card-kbd-bg-color': state.kbd.bg,
     '--card-kbd-border-color': state.kbd.border,

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

@@ -65,7 +65,7 @@ test('buildColorTheme: base', () => {
     light: {
       transparent: {
         bg: 'gray/50',
-        fg: 'gray/600',
+        fg: 'gray/800',
       },
       default: {
         bg: 'white',
@@ -79,7 +79,7 @@ test('buildColorTheme: base', () => {
     dark: {
       transparent: {
         bg: 'black',
-        fg: 'gray/400',
+        fg: 'gray/200',
       },
       default: {
         bg: 'gray/950',