@sanity/ui 3.0.0-static.6 → 3.0.0-static.8

package/src/theme/v3/defaults.ts

@@ -5,7 +5,48 @@ export const defaultTokens: PartialTokens<Tokens> = {
     '*': {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
-      focusRing: ['blue/500', 'blue/300'],
+      code: {
+        bg: ['950', '50'],
+        fg: ['300', '700'],
+        token: {
+          atrule: ['purple/300', 'purple/600'],
+          attrName: ['green/300', 'green/600'],
+          attrValue: ['yellow/300', 'yellow/600'],
+          attribute: ['yellow/300', 'yellow/600'],
+          boolean: ['purple/300', 'purple/600'],
+          builtin: ['purple/300', 'purple/600'],
+          cdata: ['yellow/300', 'yellow/600'],
+          char: ['yellow/300', 'yellow/600'],
+          class: ['orange/300', 'orange/600'],
+          className: ['cyan/300', 'cyan/600'],
+          comment: ['gray/600', 'gray/300'],
+          constant: ['purple/300', 'purple/600'],
+          deleted: ['red/300', 'red/600'],
+          entity: ['red/300', 'red/600'],
+          function: ['green/300', 'green/600'],
+          hexcode: ['blue/300', 'blue/600'],
+          id: ['purple/300', 'purple/600'],
+          important: ['purple/300', 'purple/600'],
+          inserted: ['green/300', 'green/600'],
+          keyword: ['magenta/300', 'magenta/600'],
+          number: ['purple/300', 'purple/600'],
+          operator: ['magenta/300', 'magenta/600'],
+          prolog: ['gray/300', 'gray/600'],
+          property: ['blue/300', 'blue/600'],
+          pseudoClass: ['yellow/300', 'yellow/600'],
+          pseudoElement: ['yellow/300', 'yellow/600'],
+          punctuation: ['gray/300', 'gray/600'],
+          regex: ['blue/300', 'blue/600'],
+          selector: ['red/300', 'red/600'],
+          string: ['yellow/300', 'yellow/600'],
+          symbol: ['purple/300', 'purple/600'],
+          tag: ['red/300', 'red/600'],
+          unit: ['orange/300', 'orange/600'],
+          url: ['red/300', 'red/600'],
+          variable: ['red/300', 'red/600'],
+        },
+      },
+      focusRing: ['blue/500', 'blue/500'],
       link: {
         fg: ['blue/400', 'blue/600'],
       },
@@ -15,53 +56,16 @@ export const defaultTokens: PartialTokens<Tokens> = {
         penumbra: ['black/0.14', '500/0.07'],
         ambient: ['black/0.12', '500/0.06'],
       },
-      token: {
-        atrule: ['purple/300', 'purple/600'],
-        attrName: ['green/300', 'green/600'],
-        attrValue: ['yellow/300', 'yellow/600'],
-        attribute: ['yellow/300', 'yellow/600'],
-        boolean: ['purple/300', 'purple/600'],
-        builtin: ['purple/300', 'purple/600'],
-        cdata: ['yellow/300', 'yellow/600'],
-        char: ['yellow/300', 'yellow/600'],
-        class: ['orange/300', 'orange/600'],
-        className: ['cyan/300', 'cyan/600'],
-        comment: ['gray/600', 'gray/300'],
-        constant: ['purple/300', 'purple/600'],
-        deleted: ['red/300', 'red/600'],
-        entity: ['red/300', 'red/600'],
-        function: ['green/300', 'green/600'],
-        hexcode: ['blue/300', 'blue/600'],
-        id: ['purple/300', 'purple/600'],
-        important: ['purple/300', 'purple/600'],
-        inserted: ['green/300', 'green/600'],
-        keyword: ['magenta/300', 'magenta/600'],
-        number: ['purple/300', 'purple/600'],
-        operator: ['magenta/300', 'magenta/600'],
-        prolog: ['gray/300', 'gray/600'],
-        property: ['blue/300', 'blue/600'],
-        pseudoClass: ['yellow/300', 'yellow/600'],
-        pseudoElement: ['yellow/300', 'yellow/600'],
-        punctuation: ['gray/300', 'gray/600'],
-        regex: ['blue/300', 'blue/600'],
-        selector: ['red/300', 'red/600'],
-        string: ['yellow/300', 'yellow/600'],
-        symbol: ['purple/300', 'purple/600'],
-        tag: ['red/300', 'red/600'],
-        unit: ['orange/300', 'orange/600'],
-        url: ['red/300', 'red/600'],
-        variable: ['red/300', 'red/600'],
-      },
       variant: {
         tinted: {
           '*': {
             bg: {
               0: ['950', '50'],
-              4: ['800', '100'],
+              4: ['800', '200'],
             },
             border: {
-              0: ['800', '100'],
-              4: ['600', '300'],
+              0: ['700', '100'],
+              4: ['500', '300'],
             },
             fg: {
               0: ['100', '900'],
@@ -87,8 +91,8 @@ export const defaultTokens: PartialTokens<Tokens> = {
         solid: {
           '*': {
             bg: {
-              0: ['300', '500'],
-              4: ['200', '600'],
+              0: ['400', '500'],
+              4: ['300', '600'],
             },
             border: {
               0: ['200', '400'],
@@ -136,12 +140,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
               4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '300 40%'],
-              4: ['700', '300'],
+              0: ['800', '300 40%'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['100', 'black'],
-              4: ['500', '600'],
+              4: ['400', '700'],
             },
           },
         },
@@ -152,7 +156,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['gray/950', 'white'],
+              0: ['950', 'white'],
               4: ['800', '200'],
             },
             border: {
@@ -167,6 +171,18 @@ export const defaultTokens: PartialTokens<Tokens> = {
         },
       },
     },
+    'neutral': {
+      variant: {
+        tinted: {
+          '*': {
+            bg: {
+              0: ['900', '50'],
+              4: ['700', '200'],
+            },
+          },
+        },
+      },
+    },
     'primary': {
       _hue: 'blue',
     },

package/src/theme/v3/resolveTokens.ts

@@ -97,6 +97,48 @@ function resolveCardColorTokens(
       },
     },
     backdrop: tokens?.backdrop ?? ['900', '100'],
+    code: {
+      bg: tokens?.code?.bg ?? ['950', '50'],
+      fg: tokens?.code?.fg ?? ['400', '600'],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ['400', '600'],
+        attribute: tokens?.code?.token?.attribute ?? ['400', '600'],
+        attrName: tokens?.code?.token?.attrName ?? ['400', '600'],
+        attrValue: tokens?.code?.token?.attrValue ?? ['400', '600'],
+        boolean: tokens?.code?.token?.boolean ?? ['400', '600'],
+        builtin: tokens?.code?.token?.builtin ?? ['400', '600'],
+        cdata: tokens?.code?.token?.cdata ?? ['400', '600'],
+        char: tokens?.code?.token?.char ?? ['400', '600'],
+        class: tokens?.code?.token?.class ?? ['400', '600'],
+        className: tokens?.code?.token?.className ?? ['400', '600'],
+        comment: tokens?.code?.token?.comment ?? ['600', '400'],
+        constant: tokens?.code?.token?.constant ?? ['400', '600'],
+        deleted: tokens?.code?.token?.deleted ?? ['400', '600'],
+        doctype: tokens?.code?.token?.doctype ?? ['400', '600'],
+        entity: tokens?.code?.token?.entity ?? ['400', '600'],
+        function: tokens?.code?.token?.function ?? ['400', '600'],
+        hexcode: tokens?.code?.token?.hexcode ?? ['400', '600'],
+        id: tokens?.code?.token?.id ?? ['400', '600'],
+        important: tokens?.code?.token?.important ?? ['400', '600'],
+        inserted: tokens?.code?.token?.inserted ?? ['400', '600'],
+        keyword: tokens?.code?.token?.keyword ?? ['400', '600'],
+        number: tokens?.code?.token?.number ?? ['400', '600'],
+        operator: tokens?.code?.token?.operator ?? ['400', '600'],
+        prolog: tokens?.code?.token?.prolog ?? ['400', '600'],
+        property: tokens?.code?.token?.property ?? ['400', '600'],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['400', '600'],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['400', '600'],
+        punctuation: tokens?.code?.token?.punctuation ?? ['400', '600'],
+        regex: tokens?.code?.token?.regex ?? ['400', '600'],
+        selector: tokens?.code?.token?.selector ?? ['400', '600'],
+        string: tokens?.code?.token?.string ?? ['400', '600'],
+        symbol: tokens?.code?.token?.symbol ?? ['400', '600'],
+        tag: tokens?.code?.token?.tag ?? ['400', '600'],
+        unit: tokens?.code?.token?.unit ?? ['400', '600'],
+        url: tokens?.code?.token?.url ?? ['400', '600'],
+        variable: tokens?.code?.token?.variable ?? ['400', '600'],
+      },
+    },
     focusRing: tokens?.focusRing ?? ['500', '500'],
     link: {
       fg: tokens?.link?.fg ?? ['400', '600'],
@@ -111,44 +153,7 @@ function resolveCardColorTokens(
       from: tokens?.skeleton?.from ?? ['900', '100'],
       to: tokens?.skeleton?.to ?? ['950', '50'],
     },
-    token: {
-      atrule: tokens?.token?.atrule ?? ['400', '600'],
-      attribute: tokens?.token?.attribute ?? ['400', '600'],
-      attrName: tokens?.token?.attrName ?? ['400', '600'],
-      attrValue: tokens?.token?.attrValue ?? ['400', '600'],
-      boolean: tokens?.token?.boolean ?? ['400', '600'],
-      builtin: tokens?.token?.builtin ?? ['400', '600'],
-      cdata: tokens?.token?.cdata ?? ['400', '600'],
-      char: tokens?.token?.char ?? ['400', '600'],
-      class: tokens?.token?.class ?? ['400', '600'],
-      className: tokens?.token?.className ?? ['400', '600'],
-      comment: tokens?.token?.comment ?? ['600', '400'],
-      constant: tokens?.token?.constant ?? ['400', '600'],
-      deleted: tokens?.token?.deleted ?? ['400', '600'],
-      doctype: tokens?.token?.doctype ?? ['400', '600'],
-      entity: tokens?.token?.entity ?? ['400', '600'],
-      function: tokens?.token?.function ?? ['400', '600'],
-      hexcode: tokens?.token?.hexcode ?? ['400', '600'],
-      id: tokens?.token?.id ?? ['400', '600'],
-      important: tokens?.token?.important ?? ['400', '600'],
-      inserted: tokens?.token?.inserted ?? ['400', '600'],
-      keyword: tokens?.token?.keyword ?? ['400', '600'],
-      number: tokens?.token?.number ?? ['400', '600'],
-      operator: tokens?.token?.operator ?? ['400', '600'],
-      prolog: tokens?.token?.prolog ?? ['400', '600'],
-      property: tokens?.token?.property ?? ['400', '600'],
-      pseudoClass: tokens?.token?.pseudoClass ?? ['400', '600'],
-      pseudoElement: tokens?.token?.pseudoElement ?? ['400', '600'],
-      punctuation: tokens?.token?.punctuation ?? ['400', '600'],
-      regex: tokens?.token?.regex ?? ['400', '600'],
-      selector: tokens?.token?.selector ?? ['400', '600'],
-      string: tokens?.token?.string ?? ['400', '600'],
-      symbol: tokens?.token?.symbol ?? ['400', '600'],
-      tag: tokens?.token?.tag ?? ['400', '600'],
-      unit: tokens?.token?.unit ?? ['400', '600'],
-      url: tokens?.token?.url ?? ['400', '600'],
-      variable: tokens?.token?.variable ?? ['400', '600'],
-    },
+
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),

package/src/theme/versioning/themeColor_v3_v2.ts

@@ -84,7 +84,7 @@ export function themeColor_v3_v2(options: {
       return tones
     }, {} as ThemeColorSelectable_v2),
     shadow: color.shadow,
-    syntax: color.token,
+    syntax: color.code.token,
   }
 }
 

package/src/ui/components/autocomplete/__workshop__/async.tsx

@@ -135,7 +135,6 @@ function AsyncOption(props: {
       disabled={disabled}
       padding={3}
       radius={1}
-      selectable
       selected={selected}
       tabIndex={tabIndex}
     >

package/src/ui/components/autocomplete/autocomplete.tsx

@@ -128,7 +128,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 1,
+    fontSize = 2,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -167,14 +167,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card
-        as="button"
-        // data-as="button"
-        padding={paddingProp}
-        radius={2}
-        selectable
-        // tone="inherit"
-      >
+      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -619,7 +612,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
                 {cloneElement(renderOption(option), {
                   disabled: loading,
                   selected: active,
-                  selectable: true,
                   tabIndex: listFocused && active ? 0 : -1,
                 })}
               </AutocompleteOption>
@@ -686,7 +678,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
-    radius,
     renderPopover,
   ])
 

package/src/ui/primitives/box/box.tsx

@@ -35,7 +35,7 @@ export const Box = forwardRef(function Box(
     autoCols,
     autoFlow,
     autoRows,
-    border,
+    border = false,
     borderTop,
     borderRight,
     borderBottom,
@@ -66,6 +66,7 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
+    minWidth = 0,
     overflow,
     padding = 0,
     paddingX,
@@ -82,7 +83,7 @@ export const Box = forwardRef(function Box(
     rows,
     rowStart,
     rowEnd,
-    sizing = 'border',
+    sizing = 'content',
     width,
     wrap,
     ...restProps
@@ -130,6 +131,7 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
+          minWidth,
           muted,
           padding,
           paddingX,
@@ -150,7 +152,6 @@ export const Box = forwardRef(function Box(
           wrap,
         }),
       )}
-      // data-gap={gap}
       ref={ref}
     >
       {props.children}

package/src/ui/primitives/card/card.tsx

@@ -1,4 +1,4 @@
-import {_selectable, card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
 import {createElement, ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 
@@ -46,7 +46,7 @@ export const Card = forwardRef(function Card(
     pressed,
     radius = 0,
     scheme: schemeProp,
-    selectable,
+    // selectable,
     selected,
     shadow,
     style,
@@ -78,15 +78,11 @@ export const Card = forwardRef(function Card(
           shadow,
           tone,
         }),
-        selectable && _selectable({radius}),
       )}
-      data-context-tone={context.tone}
-      data-context-scheme={context.scheme}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
       data-selected={selected ? '' : undefined}
-      data-tone={tone}
       radius={radius}
       ref={ref}
       style={style}

package/src/ui/primitives/kbd/kbd.tsx

@@ -28,7 +28,7 @@ export const KBD = forwardRef(function KBD(
     children,
     className,
     display = 'inline-block',
-    fontSize = 1,
+    fontSize = 0,
     padding = 1,
     radius = 2,
     ...restProps
@@ -45,7 +45,7 @@ export const KBD = forwardRef(function KBD(
       padding={padding}
       ref={ref}
     >
-      <Text as="span" muted size={fontSize}>
+      <Text as="span" muted size={fontSize} weight="semibold">
         {children}
       </Text>
     </Box>

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

@@ -1,11 +1,12 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {popoverCard} from '@sanity/ui/css'
 import {motion, MotionProps} from 'framer-motion'
 import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps} from '../card'
+import {Card, CardProps, CardProvider, useCard} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -69,6 +70,8 @@ export const PopoverCard = memo(
       ...restProps
     } = props
 
+    const card = useCard()
+
     const layer = useLayer()
 
     // Get margins: [top, right, bottom, left]
@@ -107,48 +110,51 @@ export const PopoverCard = memo(
     )
 
     return (
-      <MotionCard
-        className="popover-card"
-        data-ui="Popover"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        direction="column"
-        display="flex"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        style={rootStyle}
-        tone={tone}
-        variants={POPOVER_MOTION_PROPS.card}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
-      >
-        <Flex
-          data-ui="Popover__wrapper"
+      <CardProvider tone={card?.tone ?? 'transparent'} scheme={card?.scheme ?? 'light'}>
+        <MotionCard
+          className={popoverCard()}
+          data-ui="Popover"
+          {...(restProps as CardProps & MotionProps)}
+          data-context-tone={card?.tone ?? 'transparent'}
+          data-placement={placement}
           direction="column"
-          flex={1}
-          maxWidth={maxWidth}
-          overflow={overflow}
+          display="flex"
+          radius={radius}
+          ref={ref}
+          scheme={scheme}
+          shadow={shadow}
+          sizing="border"
+          style={rootStyle}
+          tone={tone}
+          variants={POPOVER_MOTION_PROPS.card}
+          transition={POPOVER_MOTION_PROPS.transition}
+          initial={animate ? ['hidden', 'initial'] : undefined}
+          animate={animate ? ['visible', 'scaleIn'] : undefined}
+          exit={animate ? ['hidden', 'scaleOut'] : undefined}
         >
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
+          <Flex
+            data-ui="Popover__wrapper"
+            direction="column"
+            flex={1}
+            maxWidth={maxWidth}
+            overflow={overflow}
+          >
+            <Flex direction="column" flex={1} padding={padding}>
+              {children}
+            </Flex>
           </Flex>
-        </Flex>
 
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_POPOVER_ARROW_WIDTH}
-            height={DEFAULT_POPOVER_ARROW_HEIGHT}
-            radius={DEFAULT_POPOVER_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
+          {arrow && (
+            <Arrow
+              ref={arrowRef}
+              style={arrowStyle}
+              width={DEFAULT_POPOVER_ARROW_WIDTH}
+              height={DEFAULT_POPOVER_ARROW_HEIGHT}
+              radius={DEFAULT_POPOVER_ARROW_RADIUS}
+            />
+          )}
+        </MotionCard>
+      </CardProvider>
     )
   }),
 )