@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

package/src/css/primitives/_input/_input.css.ts

@@ -37,8 +37,7 @@ export const element: string = _style(layers.primitives, {
   display: 'block',
   boxSizing: 'border-box',
   resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+  inlineSize: 'stretch',
 
   selectors: {
     '&::placeholder': {
@@ -112,12 +111,12 @@ export const presentation: string = _style(layers.primitives, {
   backgroundColor: vars.color.input.text.bg,
   borderRadius: 'inherit',
   boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
+  display: 'block',
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  display: 'block',
   pointerEvents: 'none',
   zIndex: 0,
 

package/src/css/primitives/_input/input.ts

@@ -1,5 +1,6 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex/flex'
 import {radius} from '../../props/radius/radius'
 import {width} from '../../props/width/width'
 import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
@@ -13,6 +14,7 @@ export function _input(props: InputStyleProps): string | undefined {
     _responsiveClassName(fontSize, props.fontSize ?? 2),
     _responsiveClassName(padding, props.padding ?? 3),
     _responsiveClassName(gap, props.gap ?? 3),
+    flex(props),
     radius(props),
     width(props),
   )

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

@@ -1,11 +1,12 @@
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
+import type {FlexStyleProps} from '../../props/flex/types'
 import type {RadiusStyleProps} from '../../props/radius/types'
 import type {WidthStyleProps} from '../../props/width/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+export interface InputStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
   border?: boolean
   fontSize?: ResponsiveProp<FontTextSize>
   gap?: ResponsiveProp<Space>

package/src/css/primitives/avatar/avatar.css.ts

@@ -162,6 +162,14 @@ export const imageOutline: string = _style(layers.primitives, {
   ].join(', '),
 })
 
+globalStyle(`${root}[data-hide-inner-stroke] ${imageOutline}`, {
+  '@layer': {
+    [layers.primitives]: {
+      boxShadow: `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+    },
+  },
+})
+
 export const initials: string = _style(layers.primitives, {
   color: vars.color.avatar.fg,
   borderRadius: 'inherit',

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

@@ -4,6 +4,16 @@ import {vars} from '../../vars.css'
 
 export const root: string = _style(layers.primitives, {
   selectors: {
+    'button.&': {
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      outline: 'none',
+      font: 'inherit',
+      textAlign: 'inherit',
+      border: 'none',
+      inlineSize: 'stretch',
+    },
+
     'iframe.&': {
       border: 'none',
     },
@@ -15,5 +25,15 @@ export const root: string = _style(layers.primitives, {
 })
 
 export const muted: string = _style(layers.primitives, {
-  backgroundColor: vars.color.muted.bg,
+  backgroundColor: vars.color.bg,
+
+  transition: 'background-color 100ms ease-in-out',
+
+  selectors: {
+    '&&': {
+      vars: {
+        [vars.color.bg]: vars.color.muted.bg,
+      },
+    },
+  },
 })

package/src/css/primitives/button/button.css.ts

@@ -23,6 +23,7 @@ export const root: string = _style(layers.primitives, {
   verticalAlign: 'top',
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
+  inlineSize: 'max-content',
 
   //
   transition:

package/src/css/primitives/card/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'color',
       title: 'Color',
-      component: lazy(() => import('./color')),
+      component: lazy(() => import('./Color')),
     },
   ],
 }

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

@@ -19,7 +19,6 @@ export const root: string = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
-  //
   transition:
     'background-color 100ms ease-in-out, border-color 100ms, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
 
@@ -33,17 +32,6 @@ export const root: string = _style(layers.primitives, {
   },
 
   selectors: {
-    'button.&': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      outline: 'none',
-      font: 'inherit',
-      textAlign: 'inherit',
-      border: 'none',
-      // See https://caniuse.com/?search=width%3A%20stretch
-      width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-    },
-
     'a.&': {
       outline: 'none',
       textDecoration: 'none',
@@ -343,54 +331,6 @@ function buildToneRule(tone: CardTone): StyleRule {
     }
   }
 
-  // assign legacy vars
-  // todo: remove before release?
-  _assign(toneVars, {
-    '--card-accent-fg-color': vars.color.tinted.suggest.fg[4],
-  })
-  for (const color of AVATAR_COLORS) {
-    _assign(toneVars, {
-      [`--card-avatar-${color}-bg-color`]: vars.color.avatar[color].bg,
-      [`--card-avatar-${color}-fg-color`]: vars.color.avatar[color].fg,
-    })
-  }
-  _assign(toneVars, {
-    '--card-backdrop-color': vars.color.backdrop,
-  })
-  for (const tone of ELEMENT_TONES) {
-    _assign(toneVars, {
-      [`--card-badge-${tone}-bg-color`]: vars.color.tinted[tone].bg[1],
-      [`--card-badge-${tone}-dot-color`]: vars.color.tinted[tone].fg[4],
-      [`--card-badge-${tone}-fg-color`]: vars.color.tinted[tone].fg[2],
-      [`--card-badge-${tone}-icon-color`]: vars.color.tinted[tone].fg[4],
-    })
-  }
-  _assign(toneVars, {
-    '--card-bg-color': vars.color.bg,
-    '--card-bg2-color': vars.color.muted.bg,
-    '--card-border-color': vars.color.border,
-    '--card-code-bg-color': vars.color.code.bg,
-    '--card-code-fg-color': vars.color.code.fg,
-    '--card-fg-color': vars.color.fg,
-    '--card-focus-ring-color': vars.color.focusRing,
-    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
-    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
-    '--card-icon-color': vars.color.fg,
-    '--card-kbd-bg-color': vars.color.muted.bg,
-    '--card-kbd-border-color': vars.color.tinted.default.border[1],
-    '--card-kbd-fg-color': vars.color.muted.fg,
-    '--card-link-color': vars.color.link.fg,
-    '--card-link-fg-color': vars.color.link.fg,
-    '--card-muted-bg-color': vars.color.muted.bg,
-    '--card-muted-fg-color': vars.color.muted.fg,
-    '--card-shadow-outline-color': vars.color.shadow.outline,
-    '--card-shadow-umbra-color': vars.color.shadow.umbra,
-    '--card-shadow-penumbra-color': vars.color.shadow.penumbra,
-    '--card-shadow-ambient-color': vars.color.shadow.ambient,
-    '--card-skeleton-from-color': vars.color.skeleton.from,
-    '--card-skeleton-to-color': vars.color.skeleton.to,
-  })
-
   return {
     vars: toneVars,
   }

package/src/css/primitives/checkbox/checkbox.css.ts

@@ -6,6 +6,7 @@ import {vars} from '../../vars.css'
 
 export const root: string = _style(layers.primitives, {
   position: 'relative',
+  flex: 'none',
 
   selectors: {
     '&:not([hidden])': {

package/src/css/primitives/code/code.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {root, scale} from './code.css'
 import type {CodeStyleProps} from './types'
 
@@ -15,5 +17,7 @@ export function code(props: CodeStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
   )
 }

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

@@ -2,10 +2,16 @@ import type {FontCodeSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
+export interface CodeStyleProps
+  extends FlexStyleProps,
+    Omit<FontStyleProps, 'align'>,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   className?: string
   size?: ResponsiveProp<FontCodeSize>
 }

package/src/css/primitives/heading/heading.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {textAlign} from '../../props/textAlign/textAlign'
 import {muted, root, sizes} from './heading.css'
 import type {HeadingStyleProps} from './types'
@@ -17,6 +19,8 @@ export function heading(props: HeadingStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
     textAlign({textAlign: props.align}),
   )
 }

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

@@ -2,11 +2,17 @@ import type {FontHeadingSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
+export interface HeadingStyleProps
+  extends FontStyleProps,
+    FlexStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/label/label.ts

@@ -3,6 +3,8 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {textAlign} from '../../props/textAlign/textAlign'
 import {muted, root, sizes} from './label.css'
 import type {LabelStyleProps} from './types'
@@ -17,6 +19,8 @@ export function label(props: LabelStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
+    maxWidth(props),
     textAlign({textAlign: props.align}),
   )
 }

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

@@ -2,11 +2,17 @@ import type {FontLabelSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
+export interface LabelStyleProps
+  extends FlexStyleProps,
+    FontStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/radio/radio.css.ts

@@ -7,7 +7,7 @@ export const root: string = _style(layers.primitives, {
 
   selectors: {
     '&:not([hidden])': {
-      display: 'inline-block',
+      display: 'block',
     },
   },
 })

package/src/css/primitives/root/root.css.ts

@@ -2,8 +2,8 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const _root: string = _style(layers.primitives, {
+  containerType: 'inline-size',
   WebkitFontSmoothing: 'antialiased',
-  // minWidth: `${320 / 16}rem`, // 320px
 
   selectors: {
     'html.&': {

package/src/css/primitives/select/select.css.ts

@@ -3,7 +3,13 @@ import {globalStyle} from '@vanilla-extract/css'
 import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
-export const root: string = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  },
+})
 
 export const input: string = _style(layers.primitives, {
   ':disabled': {

package/src/css/primitives/selectable/selectable.css.ts

@@ -42,6 +42,8 @@ export const tones: Record<ElementTone, string> = {
             [vars.color.bg]: tinted.bg[0],
             [vars.color.border]: tinted.border[1],
             [vars.color.fg]: tinted.fg[2],
+            [vars.color.muted.bg]: tinted.bg[1],
+            [vars.color.muted.fg]: tinted.fg[3],
           },
 
           '@media': {
@@ -53,18 +55,10 @@ export const tones: Record<ElementTone, string> = {
                       [vars.color.bg]: tinted.bg[1],
                       [vars.color.border]: tinted.border[2],
                       [vars.color.fg]: tinted.fg[1],
+                      [vars.color.muted.bg]: tinted.bg[2],
+                      [vars.color.muted.fg]: tinted.fg[4],
                     },
                   },
-
-                // '&:not([data-disabled]):hover': {
-                //   vars: {
-                //     [vars.color.bg]: tinted.bg[1],
-                //     [vars.color.border]: tinted.border[3],
-                //     [vars.color.fg]: tinted.fg[1],
-                //     [vars.color.muted.bg]: tinted.bg[2],
-                //     [vars.color.muted.fg]: tinted.fg[4],
-                //   },
-                // },
               },
             },
           },
@@ -83,16 +77,7 @@ export const tones: Record<ElementTone, string> = {
               },
 
             // focused
-            '&:not([data-disabled]):focus': {
-              vars: {
-                [vars.color.bg]: focused.bg[0],
-                [vars.color.border]: focused.border[1],
-                [vars.color.fg]: focused.fg[0],
-                [vars.color.muted.bg]: focused.bg[1],
-                [vars.color.muted.fg]: focused.fg[3],
-              },
-            },
-            '&:not([data-disabled])[data-focused]': {
+            '&:not([data-disabled]):focus, &:not([data-disabled])[data-focused]': {
               vars: {
                 [vars.color.bg]: focused.bg[0],
                 [vars.color.border]: focused.border[1],
@@ -102,17 +87,6 @@ export const tones: Record<ElementTone, string> = {
               },
             },
 
-            // // selected
-            // '&:not([data-disabled])[data-selected]': {
-            //   vars: {
-            //     [vars.color.bg]: focused.bg[0],
-            //     [vars.color.border]: focused.border[1],
-            //     [vars.color.fg]: focused.fg[0],
-            //     [vars.color.muted.bg]: focused.bg[1],
-            //     [vars.color.muted.fg]: focused.fg[3],
-            //   },
-            // },
-
             // disabled
             '&[data-disabled]': {
               vars: {

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

@@ -2,7 +2,16 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root: string = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {
+  flex: 'none',
+  position: 'relative',
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  },
+})
 
 export const input: string = _style(layers.primitives, {
   position: 'absolute',

package/src/css/primitives/text/text.ts

@@ -3,6 +3,7 @@ import {_responsiveClassName} from '../../_responsiveClassName'
 import {display} from '../../props/display/display'
 import {flex} from '../../props/flex/flex'
 import {font} from '../../props/font/font'
+import {margin} from '../../props/margin/margin'
 import {maxWidth} from '../../props/maxWidth/maxWidth'
 import {textAlign} from '../../props/textAlign/textAlign'
 import {muted, root, sizes} from './text.css'
@@ -18,6 +19,7 @@ export function text(props: TextStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    margin(props),
     maxWidth(props),
     textAlign({textAlign: props.align}),
   )

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

@@ -2,6 +2,7 @@ import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {FlexStyleProps} from '../../props/flex/types'
 import type {FontStyleProps} from '../../props/font/types'
+import type {MarginStyleProps} from '../../props/margin/types'
 import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
 import type {TextAlignStyleProps} from '../../props/textAlign/types'
 import type {ResponsiveProp} from '../../types'
@@ -10,7 +11,11 @@ import type {ResponsiveProp} from '../../types'
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
+export interface TextStyleProps
+  extends FlexStyleProps,
+    FontStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps {
   align?: TextAlignStyleProps['textAlign']
   className?: string
   muted?: boolean

package/src/css/primitives/textInput/textInput.css.ts

@@ -4,7 +4,13 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root: string = _style(layers.primitives, {})
+export const root: string = _style(layers.primitives, {
+  selectors: {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+  },
+})
 
 export const prefix: string = _style(layers.primitives, {
   borderTop: `${vars.input.border.width} solid ${vars.color.border}`,
@@ -12,18 +18,23 @@ export const prefix: string = _style(layers.primitives, {
   borderBottom: `${vars.input.border.width} solid ${vars.color.border}`,
   borderTopLeftRadius: 'inherit',
   borderBottomLeftRadius: 'inherit',
+  flex: 'none',
 })
 
 globalStyle(`${prefix} > span`, {
   [`@layer ${layers.primitives}`]: {
     display: 'block',
-    margin: `calc(0 - ${vars.input.border.width})`,
+    margin: `calc(0px - ${vars.input.border.width})`,
     marginRight: 0,
   },
 })
 
 export const element: string = _style(layers.primitives, {
+  display: 'block',
   borderRadius: 'inherit',
+  flex: 1,
+  position: 'relative',
+  width: 'stretch',
 })
 
 export const suffix: string = _style(layers.primitives, {
@@ -32,12 +43,13 @@ export const suffix: string = _style(layers.primitives, {
   borderBottom: `${vars.input.border.width}solid ${vars.color.border}`,
   borderTopRightRadius: 'inherit',
   borderBottomRightRadius: 'inherit',
+  flex: 'none',
 })
 
 globalStyle(`${suffix} > span`, {
   [`@layer ${layers.primitives}`]: {
     display: 'block',
-    margin: `calc(0 - ${vars.input.border.width})`,
+    margin: `calc(0px - ${vars.input.border.width})`,
     marginLeft: 0,
   },
 })

package/src/css/props/width/types.ts

@@ -3,7 +3,7 @@ import type {ContainerWidth} from '@sanity/ui/theme'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
+export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min' | 'max'
 
 /** @public */
 export interface WidthStyleProps {

package/src/css/props/width/width.css.ts

@@ -14,11 +14,14 @@ export const options: ResponsiveRuleOptions<Width> = {
   fill: _responsiveStyle(layers.props, {
     width: '100%',
   }),
+  stretch: _responsiveStyle(layers.props, {
+    width: 'stretch',
+  }),
   min: _responsiveStyle(layers.props, {
     width: 'min-content',
   }),
-  stretch: _responsiveStyle(layers.props, {
-    width: 'stretch',
+  max: _responsiveStyle(layers.props, {
+    width: 'max-content',
   }),
   ..._fromEntries(
     CONTAINER_SCALE.map((index) => [

package/src/core/primitives/popover/helpers.ts

@@ -1,32 +0,0 @@
-import type {ContainerWidth} from '@sanity/ui/theme'
-
-import {DEFAULT_POPOVER_PADDING} from './constants'
-
-export function calcCurrentWidth(params: {
-  mediaIndex: number
-  container: number[]
-  width: (ContainerWidth | 'fill' | null | undefined)[]
-}): number | undefined {
-  const {container, mediaIndex, width} = params
-
-  const w = width[mediaIndex]
-  const currentWidth = w === undefined ? width[width.length - 1] : w
-
-  return typeof currentWidth === 'number' ? container[currentWidth] : undefined
-}
-
-export function calcMaxWidth(params: {
-  boundaryWidth: number | undefined
-  currentWidth: number | undefined
-}): number | undefined {
-  const {boundaryWidth, currentWidth} = params
-
-  if (currentWidth === undefined && boundaryWidth === undefined) {
-    return undefined
-  }
-
-  return Math.min(
-    currentWidth ?? Infinity,
-    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2,
-  )
-}

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

@@ -1,4 +0,0 @@
-export * from './tooltipDelayGroupContext'
-export * from './tooltipDelayGroupProvider'
-export * from './types'
-export * from './useTooltipDelayGroup'