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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.6",
+  "version": "3.0.0-static.7",
   "keywords": [
     "sanity",
     "ui",

package/src/css/aspects/index.ts

@@ -10,6 +10,7 @@ export * from './height'
 export * from './inset'
 export * from './margin'
 export * from './maxWidth'
+export * from './minWidth'
 export * from './overflow'
 export * from './padding'
 export * from './pointerEvents'

package/src/css/aspects/minWidth/index.ts

@@ -0,0 +1,2 @@
+export * from './minWidth'
+export * from './types'

package/src/css/aspects/minWidth/minWidth.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'min-w-0', {minWidth: '0'})
+_responsiveRule(util, 'min-w-auto', {minWidth: 'auto'})
+_responsiveRule(util, 'min-w-full', {minWidth: '100%'})
+_responsiveRule(util, 'min-w-min', {minWidth: 'min-content'})
+_responsiveRule(util, 'min-w-max', {minWidth: 'max-content'})
+_responsiveRule(util, 'min-w-fit', {minWidth: 'fit-content'})
+
+export const minWidthStyle: Style = {layers: {util}}

package/src/css/aspects/minWidth/minWidth.ts

@@ -0,0 +1,6 @@
+import {_resp} from '../../_resp'
+import {MinWidthStyleProps} from './types'
+
+export function minWidth(props: MinWidthStyleProps): string {
+  return _resp('min-w', props.minWidth) ?? ''
+}

package/src/css/aspects/minWidth/types.ts

@@ -0,0 +1,7 @@
+import {ResponsiveProp} from '../../types'
+
+export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+export interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}

package/src/css/compile/compileRule.ts

@@ -2,6 +2,7 @@ import {PREFIX} from '../constants'
 import {type Properties} from '../types'
 import {CompileRulesContext} from './types'
 
+// TODO: remove this
 export function compileRule(
   selector: string,
   props: Properties,

package/src/css/compile/compileStyle.ts

@@ -112,7 +112,7 @@ function compileStyleRule(_selector: string, properties: Properties): string {
         ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
         : _nestedSelector
 
-      css += `${nestedSelector.replace('&', selector)} {\n`
+      css += `${nestedSelector.replace(/&/g, selector)} {\n`
       css += compileProperties(nestedProperties)
       css += '}\n\n'
     }

package/src/css/primitives/box/box.style.ts

@@ -3,7 +3,7 @@ import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.box': {
-    'minWidth': 0,
+    // todo: move to aspects
     'minHeight': 0,
 
     '@nest': {

package/src/css/primitives/box/box.ts

@@ -12,6 +12,7 @@ import {
   inset,
   margin,
   maxWidth,
+  minWidth,
   overflow,
   padding,
   pointerEvents,
@@ -23,9 +24,6 @@ import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  // props.align
-  // props.autoCols
-
   return _comp(
     'box',
     props.muted && 'muted', // todo: consider this naming
@@ -42,6 +40,7 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
+    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),

package/src/css/primitives/box/types.ts

@@ -10,6 +10,7 @@ import {
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
+  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
@@ -37,6 +38,7 @@ export interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,

package/src/css/primitives/card/card.style.ts

@@ -22,7 +22,7 @@ const primitive: StyleRules = {
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
 
     '@nest': {
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         outline: 'none',
@@ -33,15 +33,81 @@ const primitive: StyleRules = {
         width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
       },
 
-      '&:is(a)': {
+      'a&': {
         outline: 'none',
         textDecoration: 'none',
       },
 
-      '&:is(pre)': {
+      'pre&': {
         font: 'inherit',
         whiteSpace: 'inherit',
       },
+
+      'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.fg[1],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
+        {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+
+      'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: vars.color.solid.primary.bg[0],
+        [varNames.color.border]: vars.color.solid.primary.border[1],
+        [varNames.color.fg]: vars.color.solid.primary.fg[0],
+        [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+      },
+
+      // '&:not([data-disabled]):focus': {
+      //   '--color-bg': vars.color.solid.bg[0],
+      //   '--color-border': vars.color.solid.border[1],
+      //   '--color-fg': vars.color.solid.fg[1],
+      //   '--color-muted-bg': vars.color.solid.bg[1],
+      //   '--color-muted-fg': vars.color.solid.fg[3],
+      // },
+
+      'a&[data-disabled]), button&[data-disabled]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // '&[data-disabled]': {
+      //   '--color-bg': vars.color.tinted.bg[0],
+      //   '--color-border': vars.color.tinted.border[1],
+      //   '--color-fg': vars.color.tinted.border[4],
+      //   '--color-muted-bg': vars.color.tinted.bg[1],
+      //   '--color-muted-fg': vars.color.tinted.border[4],
+      // },
     },
   },
 }

package/src/css/primitives/card/types.ts

@@ -5,7 +5,6 @@ import {BoxStyleProps} from '../box'
 
 export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  selectable?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }

package/src/css/primitives/popover/popover.ts

@@ -3,3 +3,7 @@ import {_comp} from '../../_comp'
 export function popover(): string | undefined {
   return _comp('popover')
 }
+
+export function popoverCard(): string | undefined {
+  return _comp('popover-card')
+}

package/src/css/primitives/switch/switch.style.ts

@@ -16,22 +16,16 @@ const primitive: StyleRules = {
     padding: 0,
     margin: 0,
 
-    /* Place the input element above the representation element */
+    // place the input element on top of the representation element
     zIndex: 1,
   },
 
   '.switch-presentation': {
     '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
     '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
     '--switch-thumb-offset': '0',
     '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
     'display': 'block',
-    // &:not([hidden]) {
-    //   display: block;
-    // }
     'position': 'relative',
     'width': 'var(--input-switch-width)',
     'height': 'var(--input-switch-height)',
@@ -42,59 +36,29 @@ const primitive: StyleRules = {
     'pointerEvents': 'none',
 
     '@nest': {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
       '.switch-element:focus + &': {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
         outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
       },
+
       'input:focus:not(:focus-visible) + &': {
         outline: 'none',
       },
+
       'input:checked + &': {
         '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
         '--switch-fg-color': 'var(--color-solid-default-fg-0)',
       },
-      // input:not([data-read-only]):disabled + && {
-      //   --switch-bg-color: ${color.input.default.disabled.border};
-      //   --switch-fg-color: ${color.input.default.disabled.bg};
-      // }
-      // input[data-read-only]:disabled + && {
-      //   --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};
-      // }
 
       '.switch-element:checked + &': {
         '--switch-thumb-offset':
           'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
       },
-    },
 
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
+      '[data-indeterminate] > .switch-element + &': {
+        '--switch-thumb-offset':
+          'calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))',
+      },
+    },
   },
 
   '.switch-track': {
@@ -106,15 +70,12 @@ const primitive: StyleRules = {
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
 
     transition:
       'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
   },
 
   '.switch-thumb': {
-    // '--switch-thumb-offset': '0',
-
     display: 'block',
     position: 'absolute',
     left: 'var(--input-switch-padding)',
@@ -127,42 +88,6 @@ const primitive: StyleRules = {
     transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
     transition:
       'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
   },
 }
 

package/src/css/system.style.ts

@@ -23,6 +23,7 @@ import {heightStyle} from './aspects/height/height.style'
 import {insetStyle} from './aspects/inset/inset.style'
 import {marginStyle} from './aspects/margin/margin.style'
 import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
+import {minWidthStyle} from './aspects/minWidth/minWidth.style'
 import {outlineStyle} from './aspects/outline/outline.style'
 import {overflowStyle} from './aspects/overflow/overflow.style'
 import {paddingStyle} from './aspects/padding/padding.style'
@@ -104,6 +105,7 @@ export const systemStyle: Style = _mergeStyles([
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,

package/src/theme/v3/defaults.ts

@@ -5,7 +5,7 @@ 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'],
+      focusRing: ['blue/500', 'blue/500'],
       link: {
         fg: ['blue/400', 'blue/600'],
       },

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

@@ -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>
     )
   }),
 )