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

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'
 

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

@@ -1,39 +1,37 @@
-import type {
-  AlignItemsStyleProps,
-  BorderStyleProps,
-  BoxSizingStyleProps,
-  DisplayStyleProps,
-  FlexDirectionStyleProps,
-  FlexStyleProps,
-  FlexWrapStyleProps,
-  GapStyleProps,
-  GridAutoColumnsStyleProps,
-  GridAutoFlowStyleProps,
-  GridAutoRowsStyleProps,
-  GridColumnEndStyleProps,
-  GridColumnStartStyleProps,
-  GridColumnStyleProps,
-  GridRowEndStyleProps,
-  GridRowStartStyleProps,
-  GridRowStyleProps,
-  GridTemplateColumnsStyleProps,
-  GridTemplateRowsStyleProps,
-  HeightStyleProps,
-  InsetStyleProps,
-  JustifyContentStyleProps,
-  MarginStyleProps,
-  MaxWidthStyleProps,
-  MinHeightStyleProps,
-  MinWidthStyleProps,
-  OverflowStyleProps,
-  PaddingStyleProps,
-  PointerEventsStyleProps,
-  PositionStyleProps,
-  RadiusStyleProps,
-  ShadowStyleProps,
-  TextAlignStyleProps,
-  WidthStyleProps,
-} from '../../props'
+import type {AlignItemsStyleProps} from '../../props/alignItems'
+import type {BorderStyleProps} from '../../props/border'
+import type {BoxSizingStyleProps} from '../../props/boxSizing'
+import type {DisplayStyleProps} from '../../props/display'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FlexDirectionStyleProps} from '../../props/flexDirection'
+import type {FlexWrapStyleProps} from '../../props/flexWrap'
+import type {GapStyleProps} from '../../props/gap'
+import type {GridAutoColumnsStyleProps} from '../../props/gridAutoColumns'
+import type {GridAutoFlowStyleProps} from '../../props/gridAutoFlow'
+import type {GridAutoRowsStyleProps} from '../../props/gridAutoRows'
+import type {GridColumnStyleProps} from '../../props/gridColumn'
+import type {GridColumnEndStyleProps} from '../../props/gridColumnEnd'
+import type {GridColumnStartStyleProps} from '../../props/gridColumnStart'
+import type {GridRowStyleProps} from '../../props/gridRow'
+import type {GridRowEndStyleProps} from '../../props/gridRowEnd'
+import type {GridRowStartStyleProps} from '../../props/gridRowStart'
+import type {GridTemplateColumnsStyleProps} from '../../props/gridTemplateColumns'
+import type {GridTemplateRowsStyleProps} from '../../props/gridTemplateRows'
+import type {HeightStyleProps} from '../../props/height'
+import type {InsetStyleProps} from '../../props/inset'
+import type {JustifyContentStyleProps} from '../../props/justifyContent'
+import type {MarginStyleProps} from '../../props/margin'
+import type {MaxWidthStyleProps} from '../../props/maxWidth'
+import type {MinHeightStyleProps} from '../../props/minHeight'
+import type {MinWidthStyleProps} from '../../props/minWidth'
+import type {OverflowStyleProps} from '../../props/overflow'
+import type {PaddingStyleProps} from '../../props/padding'
+import type {PointerEventsStyleProps} from '../../props/pointerEvents'
+import type {PositionStyleProps} from '../../props/position'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {ShadowStyleProps} from '../../props/shadow'
+import type {TextAlignStyleProps} from '../../props/textAlign'
+import type {WidthStyleProps} from '../../props/width'
 
 /** @public */
 export interface BoxStyleProps

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

@@ -24,6 +24,10 @@ export const root = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
+  //
+  transition:
+    'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
+
   selectors: {
     '&::-moz-focus-inner': {
       border: 0,

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

@@ -1,5 +1,8 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {display, flex, radius, width} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {radius} from '../../props/radius'
+import {width} from '../../props/width'
 import {loadingBox, modes, root, tones} from './button.css'
 import type {ButtonStyleProps} from './types'
 
@@ -10,7 +13,7 @@ export function button(props: ButtonStyleProps) {
     root,
     modes[props.mode ?? 'default'],
     tones[props.tone ?? 'default'],
-    display(props),
+    display({display: 'flex'}),
     flex(props),
     radius(props),
     width(props),

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

@@ -1,18 +1,11 @@
 import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {
-  DisplayStyleProps,
-  FlexStyleProps,
-  RadiusStyleProps,
-  WidthStyleProps,
-} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {WidthStyleProps} from '../../props/width'
 
 /** @public */
-export interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
+export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
   className?: string
   mode?: ThemeColorButtonModeKey
   tone?: ThemeColorStateToneKey

package/src/css/primitives/card/__workshop__/color.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import {Box, Card, Code} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {
+  COLOR_VARIANTS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+  type ThemeColorVariantKey,
+} from '@sanity/ui/theme'
+import {useState} from 'react'
+
+interface ColorRecordNode extends Record<string, ColorNode> {}
+
+type ColorNode = string | ColorRecordNode
+
+export default function ColorStory() {
+  return (
+    <Box display="flex" flexDirection="column" gap={4} padding={4}>
+      {Object.entries(vars.color).map(([key, value]) => {
+        if (key === 'palette') {
+          return null
+        }
+
+        if (THEME_COLOR_SCHEMES.includes(key as ThemeColorSchemeKey)) {
+          return null
+        }
+
+        if (THEME_COLOR_CARD_TONES.includes(key as ThemeColorCardToneKey)) {
+          return null
+        }
+
+        if (COLOR_VARIANTS.includes(key as ThemeColorVariantKey)) {
+          // return null
+        }
+
+        return <ColorBox key={key} node={{key, value}} />
+      })}
+    </Box>
+  )
+}
+
+function ColorBox({node}: {node: {key: string; value: ColorNode}}) {
+  const {key, value} = node
+  const [open, setOpen] = useState(true)
+
+  if (typeof value === 'string') {
+    return (
+      <Box radius={2} padding={3} style={{backgroundColor: value}}>
+        <Code size={1}>{key}</Code>
+      </Box>
+    )
+  }
+
+  return (
+    <Box overflow="hidden" radius={3} shadow={1}>
+      <Card as="button" onClick={() => setOpen(!open)} padding={3}>
+        <Code size={1}>{`${key} +`}</Code>
+      </Card>
+
+      <Box display="flex" flexDirection="column" gap={3} hidden={!open} padding={3}>
+        {Object.entries(value).map(([key, value]) => (
+          <ColorBox key={key} node={{key, value}} />
+        ))}
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'css/card',
+  title: 'Card',
+  stories: [
+    {
+      name: 'color',
+      title: 'Color',
+      component: lazy(() => import('./color')),
+    },
+  ],
+})

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

@@ -19,6 +19,10 @@ export const root = _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',
+
   vars: {
     [vars.color.bg]: vars.color.tinted.default.bg[0],
     [vars.color.border]: vars.color.tinted.default.border[1],

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

@@ -1,6 +1,8 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
 import {root, scale} from './code.css'
 import type {CodeStyleProps} from './types'
 

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

@@ -1,4 +1,5 @@
-import type {FlexStyleProps, FontStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/container/container.ts

@@ -1,5 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {margin, maxWidth, width} from '../../props'
+import {margin} from '../../props/margin'
+import {maxWidth} from '../../props/maxWidth'
+import {width} from '../../props/width'
 import {root} from './container.css'
 import type {ContainerStyleProps} from './types'
 

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

@@ -1,6 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font, textAlign} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
+import {textAlign} from '../../props/textAlign'
 import {muted, root, sizes} from './heading.css'
 import type {HeadingStyleProps} from './types'
 

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

@@ -1,4 +1,6 @@
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/kbd/kbd.ts

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

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

@@ -1,4 +1,4 @@
-import type {RadiusStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
 
 /** @public */
 export interface KBDStyleProps extends RadiusStyleProps {

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

@@ -1,6 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font, textAlign} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
+import {textAlign} from '../../props/textAlign'
 import {muted, root, sizes} from './label.css'
 import type {LabelStyleProps} from './types'
 

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

@@ -1,6 +1,8 @@
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /**

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

@@ -55,7 +55,7 @@ export const presentation = _style(layers.primitives, {
       },
     },
 
-    [`${input}[data-indeterminate] &`]: {
+    [`${input}:indeterminate + &`]: {
       vars: {
         [vars.input.switch.thumb.offset]:
           `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,

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

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

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

@@ -1,11 +1,14 @@
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {MaxWidthStyleProps} from '../../props/maxWidth'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FlexStyleProps, FontStyleProps {
+export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
   /**
    * @deprecated Will be removed in next major version
    */

package/src/theme/v3/defaultFonts.ts

@@ -40,7 +40,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 7,
         descenderHeight: 7,
-        fontSize: 19,
+        fontSize: 18.75,
         iconSize: 29,
         lineHeight: 27,
         letterSpacing: 0,
@@ -49,7 +49,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 22,
+        fontSize: 21.5,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,
@@ -203,7 +203,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 4,
         descenderHeight: 4,
-        fontSize: 10,
+        fontSize: 9.75,
         iconSize: 17,
         lineHeight: 15,
         letterSpacing: 0,
@@ -212,7 +212,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 5,
         descenderHeight: 5,
-        fontSize: 13,
+        fontSize: 12.5,
         iconSize: 21,
         lineHeight: 19,
         letterSpacing: 0,
@@ -221,7 +221,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 6,
         descenderHeight: 6,
-        fontSize: 15,
+        fontSize: 15.25,
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
@@ -239,7 +239,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 21,
+        fontSize: 20.75,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,