@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -0,0 +1,29 @@
+import {Flex, Text, ThemeProps} from '@sanity/ui'
+import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+import styled, {css} from 'styled-components'
+import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
+
+const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((
+  props: {
+    $color?: ThemeColorAvatarColorKey
+  } & ThemeProps,
+) => {
+  const {color} = getTheme_v2(props.theme)
+
+  return css`
+    color: ${color.avatar[props.$color || 'gray'].bg};
+  `
+})
+
+export default function ColoredTextStory() {
+  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <ColoredText align="center" $color={color} size={4} weight="bold">
+        {color}
+      </ColoredText>
+    </Flex>
+  )
+}

package/src/{primitives → core/primitives}/text/styles.ts

@@ -1,37 +1,37 @@
+import {getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {cssVars} from '../../theme'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$accent, $muted, theme} = props
-  const {weights} = theme.sanity.fonts.text
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
 
   return css`
-    color: ${cssVars.mutable['fg-color']};
+    color: var(--card-fg-color);
 
     ${$accent &&
     css`
-      color: ${cssVars.default['text-accent']};
+      color: var(--card-accent-fg-color);
     `}
 
     ${$muted &&
     css`
-      color: ${cssVars.mutable['muted-fg-color']};
+      color: var(--card-muted-fg-color);
     `}
 
     & code {
-      font-family: ${theme.sanity.fonts.code.family};
+      font-family: ${font.code.family};
       border-radius: 1px;
-      background-color: ${cssVars.default['bg-tint-code']};
-      color: ${cssVars.default['text-code']};
+      background-color: var(--card-code-bg-color);
+      color: var(--card-code-fg-color);
     }
 
     & a {
       text-decoration: none;
       border-radius: 1px;
-      color: ${cssVars.default['text-link']};
+      color: var(--card-link-color);
       outline: none;
 
       @media (hover: hover) {
@@ -42,8 +42,8 @@ export function textBaseStyle(
 
       &:focus {
         box-shadow:
-          0 0 0 1px ${cssVars.mutable['bg-color']},
-          0 0 0 3px ${cssVars.positive['border-accent']};
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
       }
 
       &:focus:not(:focus-visible) {
@@ -52,7 +52,7 @@ export function textBaseStyle(
     }
 
     & strong {
-      font-weight: ${weights.bold};
+      font-weight: ${font.text.weights.bold};
     }
 
     & svg {
@@ -63,7 +63,11 @@ export function textBaseStyle(
 
     & [data-sanity-icon] {
       vertical-align: baseline;
-      color: ${cssVars.mutable['icon-color']};
+      color: var(--card-icon-color);
+
+      & path {
+        vector-effect: non-scaling-stroke !important;
+      }
     }
   `
 }

package/src/{primitives → core/primitives}/text/text.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -6,7 +7,6 @@ import {
   responsiveTextAlignStyle,
   responsiveTextFont,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {textBaseStyle} from './styles'
 
@@ -17,6 +17,7 @@ export interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -43,6 +44,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 export const Text = forwardRef(function Text(

package/src/{primitives → core/primitives}/textArea/__workshop__/plain.tsx

@@ -26,7 +26,7 @@ export default function PlainStory() {
       <Container width={0}>
         <Card padding={3} tone={tone}>
           <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
               TextArea
             </Text>
             <TextArea

package/src/{primitives → core/primitives}/textArea/textArea.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
@@ -13,7 +14,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
+import {useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
@@ -25,7 +26,6 @@ export interface TextAreaProps extends ResponsiveRadiusProps {
   fontSize?: number | number[]
   padding?: number | number[]
   weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
 }
 
 const Root = styled.span(textInputRootStyle)
@@ -49,6 +49,9 @@ const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresenta
 )
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export const TextArea = forwardRef(function TextArea(
@@ -63,12 +66,13 @@ export const TextArea = forwardRef(function TextArea(
     padding = 3,
     radius = 2,
     weight,
-    tone = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
+  const rootTheme = useRootTheme()
+
   useCustomValidity(ref, customValidity)
 
   return (
@@ -76,21 +80,25 @@ export const TextArea = forwardRef(function TextArea(
       <InputRoot>
         <Input
           data-as="textarea"
-          data-tone={tone}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
           {...restProps}
           $fontSize={useArrayProp(fontSize)}
           $padding={useArrayProp(padding)}
+          $scheme={rootTheme.scheme}
           $space={useArrayProp(0)}
-          $tone={tone}
+          $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
           $radius={useArrayProp(radius)}
-          $tone={tone}
+          $scheme={rootTheme.scheme}
+          $tone={rootTheme.tone}
           data-border={border ? '' : undefined}
-          data-tone={tone}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
         />
       </InputRoot>
     </Root>

package/src/{primitives → core/primitives}/textInput/__workshop__/plain.tsx

@@ -35,7 +35,7 @@ export default function PlainStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
         <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
+          <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
             TextInput
           </Text>
           <Wrapper>

package/src/{primitives → core/primitives}/textInput/__workshop__/states.tsx

@@ -9,14 +9,14 @@ export default function StatesStory() {
       <Container width={1}>
         <Stack space={5}>
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
             <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
           </Stack>
 
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
             <TextInput
@@ -28,7 +28,7 @@ export default function StatesStory() {
           </Stack>
 
           <Stack space={3}>
-            <Text size={1} weight="semibold">
+            <Text size={1} weight="medium">
               <label htmlFor="read-only-example">Read-only</label>
             </Text>
             <TextInput

package/src/{primitives → core/primitives}/textInput/textInput.tsx

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -16,8 +17,7 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {useRootTheme} from '../../theme'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
@@ -51,6 +51,10 @@ export type TextInputType =
  * @public
  */
 export interface TextInputProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
   border?: boolean
   /**
    * @beta
@@ -71,7 +75,6 @@ export interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -142,6 +145,8 @@ const TextInputClearButton = styled(Button)({
 })
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export const TextInput = forwardRef(function TextInput(
@@ -149,6 +154,7 @@ export const TextInput = forwardRef(function TextInput(
   forwardedRef: React.Ref<HTMLInputElement>,
 ) {
   const {
+    __unstable_disableFocusRing,
     border = true,
     clearButton,
     disabled = false,
@@ -165,14 +171,12 @@ export const TextInput = forwardRef(function TextInput(
     customValidity,
     type = 'text',
     weight,
-    tone: toneProp = 'default',
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
-  const toneContext = useToneContext()
-  const tone = toneProp === 'default' ? toneContext.tone : toneProp
+  const rootTheme = useRootTheme()
 
   const fontSize = useArrayProp(fontSizeProp)
   const padding = useArrayProp(paddingProp)
@@ -223,11 +227,14 @@ export const TextInput = forwardRef(function TextInput(
     () => (
       <Presentation
         $hasPrefix={$hasPrefix}
+        $unstableDisableFocusRing={__unstable_disableFocusRing}
         $hasSuffix={$hasSuffix}
         $radius={radius}
-        $tone={tone}
+        $scheme={rootTheme.scheme}
+        $tone={rootTheme.tone}
         data-border={border ? '' : undefined}
-        data-tone={tone}
+        data-scheme={rootTheme.scheme}
+        data-tone={rootTheme.tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -249,16 +256,17 @@ export const TextInput = forwardRef(function TextInput(
       </Presentation>
     ),
     [
+      __unstable_disableFocusRing,
       border,
       fontSize,
       icon,
       iconRight,
       padding,
       radius,
+      rootTheme,
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
-      tone,
     ],
   )
 
@@ -341,20 +349,22 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput" tone={tone}>
+    <Root data-ui="TextInput" tone={rootTheme.tone}>
       {prefixNode}
 
       <InputRoot>
         <Input
           data-as="input"
-          data-tone={tone}
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
           {...restProps}
           $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
+          $scheme={rootTheme.scheme}
           $space={space}
-          $tone={tone}
+          $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           readOnly={readOnly}

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

@@ -0,0 +1,99 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Flex,
+  Portal,
+  PortalProvider,
+  Stack,
+  Text,
+  Tooltip,
+} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+const PORTAL_OPTIONS = {
+  '(true)': true,
+  '(false)': false,
+  portal1: 'portal1',
+}
+
+export default function CustomPortalStory() {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+      }}
+    >
+      <Flex align="center" height="fill" justify="center">
+        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+          <Card
+            border
+            padding={4}
+            ref={setBoundaryElement}
+            style={{
+              height: 'calc(100vh - 100px)',
+              position: 'relative',
+              width: '500px',
+            }}
+          >
+            <Text>Boundary element</Text>
+            <Flex align="center" height="fill" justify="center">
+              <Flex justify="center">
+                <Stack space={2}>
+                  <Tooltip
+                    boundaryElement={useBoundaryElement ? boundaryElement : null}
+                    content={<Text size={1}>{content}</Text>}
+                    padding={2}
+                    placement={placement}
+                    portal={portal}
+                  >
+                    <Button mode="bleed" text="Tooltip" />
+                  </Tooltip>
+                </Stack>
+              </Flex>
+            </Flex>
+          </Card>
+        </BoundaryElementProvider>
+      </Flex>
+
+      <Card
+        border
+        margin={4}
+        padding={4}
+        ref={setPortal1Element}
+        style={{
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '175px',
+        }}
+        tone="critical"
+      />
+
+      <Portal __unstable_name="portal1">
+        <Stack space={4}>
+          <Text size={1} weight="medium">
+            Portal 1 content
+          </Text>
+          <Text size={1}>
+            The tooltip's max-width should not exceed this container's width (minus padding) if it's
+            set to use this portal
+          </Text>
+        </Stack>
+      </Portal>
+    </PortalProvider>
+  )
+}

package/src/core/primitives/tooltip/__workshop__/index.ts

@@ -0,0 +1,29 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/tooltip',
+  title: 'Tooltip',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'resizableBoundary',
+      title: 'Resizable Boundary',
+      component: lazy(() => import('./resizableBoundary')),
+    },
+    {
+      name: 'overflowBoundary',
+      title: 'Overflowing Boundary',
+      component: lazy(() => import('./overflowingBoundary')),
+    },
+    {
+      name: 'customPortalStory',
+      title: 'Custom Portal',
+      component: lazy(() => import('./customPortal')),
+    },
+  ],
+})

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

@@ -0,0 +1,73 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function OverflowingBoundaryStory() {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', false)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonsVisible, setButtonsVisible] = useState(true)
+
+  const handleHideButtons = useCallback(() => {
+    setButtonsVisible(false)
+  }, [])
+
+  const handleShowButtons = useCallback(() => {
+    setButtonsVisible(true)
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Stack space={2}>
+                <Code size={1}>Placement: {placement}</Code>
+                <Button
+                  disabled={buttonsVisible}
+                  fontSize={1}
+                  onClick={handleShowButtons}
+                  text="Show buttons"
+                />
+              </Stack>
+            </Flex>
+          </Flex>
+
+          {buttonsVisible && (
+            <Tooltip
+              content={<Text size={1}>{content}</Text>}
+              padding={2}
+              placement={placement}
+              portal={portal}
+            >
+              <Button
+                mode="bleed"
+                onClick={handleHideButtons}
+                style={{position: 'absolute', top: 10, right: 10}}
+                text="Tooltip"
+              />
+            </Tooltip>
+          )}
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

package/src/{primitives → core/primitives}/tooltip/__workshop__/props.tsx

@@ -1,13 +1,4 @@
-import {
-  Button,
-  Card,
-  Flex,
-  Text,
-  Tooltip,
-  TooltipDelayGroupProvider,
-  Stack,
-  cssVars,
-} from '@sanity/ui'
+import {Button, Card, Flex, Text, Tooltip, TooltipDelayGroupProvider, Stack} from '@sanity/ui'
 import {useBoolean, useSelect, useText, useNumber} from '@sanity/ui-workshop'
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -37,11 +28,7 @@ export default function PropsStory() {
       >
         <Stack
           padding={4}
-          style={{
-            outline: `1px solid ${cssVars.default['border-base']}`,
-            width: '100%',
-            maxWidth: '640px',
-          }}
+          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
           space={4}
         >
           <Text align="center" size={3}>
@@ -65,11 +52,7 @@ export default function PropsStory() {
         </Stack>
         <Stack
           padding={4}
-          style={{
-            outline: `1px solid ${cssVars.default['border-base']}`,
-            width: '100%',
-            maxWidth: '640px',
-          }}
+          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
           space={4}
         >
           <Text align="center" size={3}>