@sanity/ui 3.0.0-static.27 → 3.0.0-static.29

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,22 +1,26 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
   [data-eq-min~='0'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.orange[600]}, ${vars.palette.orange[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
+      .palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.red[600]}, ${vars.palette.red[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
+      .red[400]});
   }
 
   [data-eq-min~='2'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.magenta[600]}, ${vars.palette.magenta[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
+      .palette.magenta[400]});
   }
 
   [data-eq-min~='3'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.purple[600]}, ${vars.palette.purple[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
+      .palette.purple[400]});
   }
 `
 

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,8 +1,8 @@
 import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useElementSize} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useElementSize} from '../../hooks/useElementSize'
+import type {ComponentType, Props} from '../../types/props'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */

package/src/core/utils/portal/portal.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider, useCard} from '../../primitives'
+import {CardProvider, useCard} from '../../primitives/card'
 import {usePortal} from './usePortal'
 
 /** @public */

package/src/css/components/dialog/dialog.css.ts

@@ -63,8 +63,33 @@ export const container = _style(layers.components, {
   height: '100%',
 })
 
-export const layout = _style(layers.components, {
+export const scroller = _style(layers.components, {
   width: '100%',
+  height: '100%',
+  // overflow: 'auto',
+  outline: 'none',
+})
+
+export const scrollerShadowTop = _style(layers.components, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
+})
+
+export const scrollerShadowBottom = _style(layers.components, {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
 })
 
 export const header = _style(layers.components, {

package/src/css/components/dialog/dialog.ts

@@ -1,6 +1,16 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {inset} from '../../props'
-import {card, container, content, footer, header, layout, root} from './dialog.css'
+import {inset} from '../../props/inset'
+import {
+  card,
+  container,
+  content,
+  footer,
+  header,
+  root,
+  scroller,
+  scrollerShadowBottom,
+  scrollerShadowTop,
+} from './dialog.css'
 
 /** @public */
 export function dialog(props: {className?: string}): string | undefined {
@@ -17,11 +27,6 @@ export function dialogContainer(): string | undefined {
   return container
 }
 
-/** @public */
-export function dialogLayout(): string | undefined {
-  return layout
-}
-
 /** @public */
 export function dialogHeader(): string | undefined {
   return header
@@ -32,6 +37,21 @@ export function dialogContent(): string | undefined {
   return content
 }
 
+/** @public */
+export function dialogScroller(): string | undefined {
+  return scroller
+}
+
+/** @public */
+export function dialogScrollerShadowTop(): string | undefined {
+  return scrollerShadowTop
+}
+
+/** @public */
+export function dialogScrollerShadowBottom(): string | undefined {
+  return scrollerShadowBottom
+}
+
 /** @public */
 export function dialogFooter(): string | undefined {
   return footer

package/src/css/components/skeleton/skeleton.ts

@@ -1,5 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex'
+import {margin} from '../../props/margin'
 import {radius} from '../../props/radius'
 import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
 import type {
@@ -12,7 +14,7 @@ import type {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, radius(props))
+  return _composeClassNames(props.className, root, flex(props), radius(props), margin(props))
 }
 
 /** @beta */

package/src/css/components/skeleton/types.ts

@@ -1,11 +1,13 @@
 import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
+import type {FlexStyleProps} from '../../props/flex'
+import type {MarginStyleProps} from '../../props/margin'
 import type {RadiusStyleProps} from '../../props/radius'
 import type {ResponsiveProp} from '../../types'
 
 /** @beta */
 
-export interface SkeletonStyleProps extends RadiusStyleProps {
+export interface SkeletonStyleProps extends FlexStyleProps, MarginStyleProps, RadiusStyleProps {
   className?: string
 }
 

package/src/css/components/toast/toast.css.ts

@@ -6,6 +6,7 @@ export const layer = _style(layers.components, {
   right: 0,
   bottom: 0,
   pointerEvents: 'none',
+  minWidth: `${320 / 16}rem`, // 320px
   maxWidth: `${420 / 16}rem`, // 420px
   width: '100%',
 })

package/src/css/defaultTheme.css.ts

@@ -25,7 +25,7 @@ import {
   type ThemeColorVariantKey,
   TINTS,
 } from '@sanity/ui/theme'
-import {createTheme} from '@vanilla-extract/css'
+import {createTheme, globalFontFace} from '@vanilla-extract/css'
 
 import {_fromEntries} from './_fromEntries'
 import {layers} from './layers.css'
@@ -33,6 +33,59 @@ import type {CSSTheme, CSSThemeColorCard} from './types'
 import {px, toBoxShadow} from './util'
 import {paletteVars, themeVars} from './vars.css'
 
+const fontDisplay: FontDisplay = 'auto'
+
+globalFontFace('Inter', [
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '700',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '700',
+  },
+])
+
 const theme = buildTheme_v3()
 
 const themeValue: CSSTheme = {
@@ -253,7 +306,7 @@ const themeValue: CSSTheme = {
 } as const
 
 /** @public */
-export const defaultTheme = createTheme(themeVars, themeValue)
+export const themeClassName = createTheme(themeVars, themeValue)
 
 function renderColorScheme(options: {scheme: ThemeColorSchemeKey}) {
   const {scheme} = options

package/src/css/index.ts

@@ -1,14 +1,86 @@
-/* eslint-disable */
+/* eslint-disable simple-import-sort/exports */
 
 export * from './layers.css'
 export * from './vars.css'
-export * from './props'
-export * from './utils'
-export * from './primitives'
-export * from './components'
 
+// theme
 export * from './defaultTheme.css'
 
+// props
+export * from './props/alignItems'
+export * from './props/border'
+export * from './props/boxSizing'
+export * from './props/display'
+export * from './props/flex'
+export * from './props/flexDirection'
+export * from './props/flexWrap'
+export * from './props/font'
+export * from './props/gap'
+export * from './props/gridAutoColumns'
+export * from './props/gridAutoFlow'
+export * from './props/gridAutoRows'
+export * from './props/gridColumn'
+export * from './props/gridColumnEnd'
+export * from './props/gridColumnStart'
+export * from './props/gridRow'
+export * from './props/gridRowEnd'
+export * from './props/gridRowStart'
+export * from './props/gridTemplateColumns'
+export * from './props/gridTemplateRows'
+export * from './props/height'
+export * from './props/inset'
+export * from './props/justifyContent'
+export * from './props/margin'
+export * from './props/maxWidth'
+export * from './props/minHeight'
+export * from './props/minWidth'
+export * from './props/outline'
+export * from './props/overflow'
+export * from './props/padding'
+export * from './props/pointerEvents'
+export * from './props/position'
+export * from './props/radius'
+export * from './props/shadow'
+export * from './props/textAlign'
+export * from './props/textOverflow'
+export * from './props/width'
+
+// primitives
+export * from './primitives/_arrow'
+export * from './primitives/_input'
+export * from './primitives/_selectable'
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/heading'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/root'
+export * from './primitives/select'
+export * from './primitives/spinner'
+export * from './primitives/srOnly'
+export * from './primitives/stack'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+export * from './primitives/tooltip'
+
+// components
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/menu'
+export * from './components/skeleton'
+export * from './components/toast'
+export * from './components/tree'
+
 export * from './constants'
 export * from './types'
 export * from './util'

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

@@ -1,6 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {radius, width} from '../../props'
+import {radius} from '../../props/radius'
+import {width} from '../../props/width'
 import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
 import type {InputStyleProps} from './types'
 

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

@@ -1,6 +1,7 @@
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps, WidthStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {WidthStyleProps} from '../../props/width'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/_selectable/_selectable.css.ts

@@ -46,33 +46,32 @@ export const tones = {
 
           '@media': {
             '(hover: hover)': {
-              ':hover': {
-                vars: {
-                  [vars.color.bg]: tinted.bg[1],
-                },
-              },
-
-              'selectors': {
-                '&:not([data-disabled])': {
-                  cursor: 'pointer',
-                },
-
-                '&: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],
+              selectors: {
+                '&:not([data-pressed]):not([data-selected]):not([data-focused]):not([data-disabled]):not(:active):not(:focus):hover':
+                  {
+                    vars: {
+                      [vars.color.bg]: tinted.bg[1],
+                      [vars.color.border]: tinted.border[1],
+                      [vars.color.fg]: tinted.fg[1],
+                    },
                   },
-                },
+
+                // '&: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],
+                //   },
+                // },
               },
             },
           },
 
           'selectors': {
-            // pressed
-            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
+            // selected
+            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-selected]':
               {
                 vars: {
                   [vars.color.bg]: tinted.bg[2],
@@ -93,9 +92,7 @@ export const tones = {
                 [vars.color.muted.fg]: focused.fg[3],
               },
             },
-
-            // selected
-            '&:not([data-disabled])[data-selected]': {
+            '&:not([data-disabled])[data-focused]': {
               vars: {
                 [vars.color.bg]: focused.bg[0],
                 [vars.color.border]: focused.border[1],
@@ -105,6 +102,17 @@ export const tones = {
               },
             },
 
+            // // 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/_selectable/selectable.ts

@@ -1,5 +1,5 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {radius} from '../../props'
+import {radius} from '../../props/radius'
 import {root, tones} from './_selectable.css'
 import type {SelectableStyleProps} from './types'
 

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

@@ -1,6 +1,6 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {

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

@@ -10,6 +10,14 @@ import {vars} from '../../vars.css'
 
 export const stack = _style(layers.primitives, {})
 
+globalStyle(`${stack} > * + *`, {
+  '@layer': {
+    [layers.primitives]: {
+      marginLeft: vars.avatar.distance,
+    },
+  },
+})
+
 export const root = _style(layers.primitives, {
   // display: 'block',
   backgroundColor: vars.color.avatar.bg,
@@ -31,10 +39,6 @@ export const root = _style(layers.primitives, {
       display: 'block',
     },
 
-    [`${stack} > & + &`]: {
-      marginLeft: vars.avatar.distance,
-    },
-
     'button.&': {
       WebkitFontSmoothing: 'inherit',
       appearance: 'none',

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

@@ -1,6 +1,6 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {flex} from '../../props'
+import {flex} from '../../props/flex'
 import {
   arrow,
   arrowSvg,

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

@@ -1,7 +1,5 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-// import type {RadiusStyleProps} from '../../props'
-
 /** @public */
 export interface BadgeStyleProps {
   className?: string

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

@@ -1,41 +1,39 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {
-  alignItems,
-  border,
-  boxSizing,
-  display,
-  flex,
-  flexDirection,
-  flexWrap,
-  gap,
-  gridAutoColumns,
-  gridAutoFlow,
-  gridAutoRows,
-  gridColumn,
-  gridColumnEnd,
-  gridColumnStart,
-  gridRow,
-  gridRowEnd,
-  gridRowStart,
-  gridTemplateColumns,
-  gridTemplateRows,
-  height,
-  inset,
-  justifyContent,
-  margin,
-  maxWidth,
-  minHeight,
-  minWidth,
-  outline,
-  overflow,
-  padding,
-  pointerEvents,
-  position,
-  radius,
-  shadow,
-  textAlign,
-  width,
-} from '../../props'
+import {alignItems} from '../../props/alignItems'
+import {border} from '../../props/border'
+import {boxSizing} from '../../props/boxSizing'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {flexDirection} from '../../props/flexDirection'
+import {flexWrap} from '../../props/flexWrap'
+import {gap} from '../../props/gap'
+import {gridAutoColumns} from '../../props/gridAutoColumns'
+import {gridAutoFlow} from '../../props/gridAutoFlow'
+import {gridAutoRows} from '../../props/gridAutoRows'
+import {gridColumn} from '../../props/gridColumn'
+import {gridColumnEnd} from '../../props/gridColumnEnd'
+import {gridColumnStart} from '../../props/gridColumnStart'
+import {gridRow} from '../../props/gridRow'
+import {gridRowEnd} from '../../props/gridRowEnd'
+import {gridRowStart} from '../../props/gridRowStart'
+import {gridTemplateColumns} from '../../props/gridTemplateColumns'
+import {gridTemplateRows} from '../../props/gridTemplateRows'
+import {height} from '../../props/height'
+import {inset} from '../../props/inset'
+import {justifyContent} from '../../props/justifyContent'
+import {margin} from '../../props/margin'
+import {maxWidth} from '../../props/maxWidth'
+import {minHeight} from '../../props/minHeight'
+import {minWidth} from '../../props/minWidth'
+import {outline} from '../../props/outline'
+import {overflow} from '../../props/overflow'
+import {padding} from '../../props/padding'
+import {pointerEvents} from '../../props/pointerEvents'
+import {position} from '../../props/position'
+import {radius} from '../../props/radius'
+import {shadow} from '../../props/shadow'
+import {textAlign} from '../../props/textAlign'
+import {width} from '../../props/width'
 import {muted, root} from './box.css'
 import type {BoxStyleProps} from './types'