@sanity/ui 3.0.0-static.19 → 3.0.0-static.20

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -4,24 +4,23 @@ import {useState} from 'react'
 
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
 
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', 'Placeholder', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props') || undefined
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placeholder = useText('Placeholder', 'Placeholder')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
 
   const [value, setValue] = useState('')
 
@@ -41,6 +40,7 @@ export default function PlainStory() {
             TextArea
           </Text>
           <TextArea
+            __unstable_disableFocusRing={disableFocusRing}
             border={border}
             customValidity={customValidity}
             disabled={disabled}
@@ -53,7 +53,6 @@ export default function PlainStory() {
             readOnly={readOnly}
             rows={10}
             value={value}
-            weight={weight}
           />
         </Stack>
       </Container>

package/src/core/primitives/textArea/textArea.tsx

@@ -5,7 +5,7 @@ import {
   textArea,
   type TextAreaStyleProps,
 } from '@sanity/ui/css'
-import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
@@ -23,7 +23,6 @@ export type TextAreaOwnProps = TextAreaStyleProps & {
   customValidity?: string
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  weight?: ThemeFontWeightKey
 }
 
 /** @public */
@@ -45,7 +44,7 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
 ) {
   const {
     // TODO: fix this
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
@@ -58,9 +57,6 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     readOnly,
     ref: forwardedRef,
     space = 3,
-    // TODO: fix this
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    weight,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -75,7 +71,13 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
 
   return (
     <span
-      className={textArea({border, fontSize, padding, radius, gap: gap ?? space})}
+      className={textArea({
+        border,
+        fontSize,
+        padding,
+        radius,
+        gap: gap ?? space,
+      })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}
       data-ui="TextArea"
@@ -83,6 +85,7 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
       <Element
         {...rest}
         className={_inputElement()}
+        data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
         disabled={disabled}
         readOnly={readOnly}
         ref={ref}

package/src/core/primitives/textInput/__workshop__/customValidity.tsx

@@ -2,7 +2,7 @@ import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 
 export default function CustomValidityStory() {
-  const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined
+  const customValidity = useText('Custom validity', 'Invalid value') || undefined
 
   return (
     <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -1,5 +1,5 @@
 import {icons} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {Box, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
@@ -11,7 +11,7 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -50,20 +50,20 @@ export default function PlainStory() {
 
 function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const {inputRef: ref} = props
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube', 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const prefix = useBoolean('Prefix', false, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const suffix = useBoolean('Suffix', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placeholder = useText('Placeholder')
+  const prefix = useBoolean('Prefix', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
+  const suffix = useBoolean('Suffix', false)
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
 
@@ -86,11 +86,23 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
-      prefix={prefix && <Text>Prefix</Text>}
+      prefix={
+        prefix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Prefix</Text>
+          </Box>
+        )
+      }
       radius={radius}
       readOnly={readOnly}
       ref={ref}
-      suffix={suffix && <Text>Suffix</Text>}
+      suffix={
+        suffix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Suffix</Text>
+          </Box>
+        )
+      }
       value={value}
       weight={weight}
     />

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -2,7 +2,7 @@ import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function StatesStory() {
-  const invalid = useBoolean('Invalid', false, 'Props')
+  const invalid = useBoolean('Invalid', false)
   const onChange = useAction('onChange')
 
   return (

package/src/core/primitives/textInput/__workshop__/typed.tsx

@@ -2,10 +2,10 @@ import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory() {
-  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
 

package/src/core/primitives/textInput/textInput.tsx

@@ -6,6 +6,9 @@ import {
   type InputStyleProps,
   type ResponsiveProp,
   textInput,
+  textInputElement,
+  textInputPrefix,
+  textInputSuffix,
 } from '@sanity/ui/css'
 import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
@@ -176,7 +179,6 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
   return (
     <Box
       align="center"
-      as="span"
       className={_composeClassNames(
         className,
         textInput({
@@ -198,30 +200,25 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       display="flex"
     >
       {prefix && (
-        <Box as="span" className="text-input-prefix" sizing="border">
+        <Box className={textInputPrefix()} sizing="border">
           <span>{prefix}</span>
         </Box>
       )}
 
-      <Box as="span" flex={1} position="relative">
+      <Box className={textInputElement()} flex={1} position="relative">
         <Element
           {...rest}
           className={_inputElement()}
+          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
 
-        <Box
-          as="span"
-          // $unstableDisableFocusRing={__unstable_disableFocusRing}
-          className={_inputPresentation()}
-          data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-          position="absolute"
-        >
+        <Box className={_inputPresentation()} position="absolute">
           {IconComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
+            <Box padding={padding} position="absolute" style={{top: 0, left: 0}}>
               <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
@@ -230,7 +227,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
+            <Box padding={padding} position="absolute" style={{top: 0, right: 0}}>
               <Text size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
@@ -240,13 +237,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
         </Box>
 
         {!disabled && !readOnly && clearButton && (
-          <Box
-            as="span"
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={CLEAR_BUTTON_BOX_STYLE}
-            // tone={customValidity ? 'critical' : 'inherit'}
-          >
+          <Box padding={clearButtonBoxPadding} position="absolute" style={CLEAR_BUTTON_BOX_STYLE}>
             <Button
               aria-label="Clear"
               data-qa="clear-button"
@@ -265,7 +256,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       </Box>
 
       {suffix && (
-        <Box as="span" className="text-input-suffix" sizing="border">
+        <Box className={textInputSuffix()} sizing="border">
           <span>{suffix}</span>
         </Box>
       )}

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -12,7 +12,7 @@ import {
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useMemo, useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 const PORTAL_OPTIONS = {
   '(true)': true,
@@ -26,7 +26,7 @@ export default function CustomPortalStory() {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
+  const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
 
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
@@ -58,7 +58,7 @@ export default function CustomPortalStory() {
                 <Stack gap={2}>
                   <Tooltip
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
-                    content={<Text size={1}>{content}</Text>}
+                    content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
                     placement={placement}
                     portal={portal}

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -2,7 +2,7 @@ import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip}
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function OverflowingBoundaryStory() {
   const content = useText(

package/src/core/primitives/tooltip/__workshop__/props.tsx

@@ -6,16 +6,16 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PropsStory() {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
-  const openDelay = useNumber('Open Delay', 200) || 0
-  const closeDelay = useNumber('Close Delay', 200) || 0
+  const openDelay = useNumber('Open Delay', 200)
+  const closeDelay = useNumber('Close Delay', 200)
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -2,7 +2,7 @@ import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function ResizableBoundaryStory() {
   const content = useText(

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -1,4 +1,3 @@
-import {tooltipCard} from '@sanity/ui/css'
 import {motion, type MotionStyle} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
@@ -73,10 +72,9 @@ export function TooltipLayer(props: TooltipLayerProps) {
   return (
     // @ts-expect-error - TODO: fix this
     <Layer
-      data-ui="Tooltip__card"
+      data-ui="Tooltip__layer"
       {...rest}
       as={motion.div}
-      className={tooltipCard()}
       data-animate={animate ? '' : undefined}
       data-placement={placement}
       padding={padding}

package/src/css/_system.style.ts

@@ -24,6 +24,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 {minHeightStyle} from './aspects/minHeight/minHeight.style'
 import {minWidthStyle} from './aspects/minWidth/minWidth.style'
 import {outlineStyle} from './aspects/outline/outline.style'
 import {overflowStyle} from './aspects/overflow/overflow.style'
@@ -110,6 +111,7 @@ export const _systemStyle: Style = _mergeStyles([
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minHeightStyle,
   minWidthStyle,
   outlineStyle,
   overflowStyle,

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

@@ -14,9 +14,11 @@ export const primitive: StyleRules = {
     margin: '0',
 
     vars: {
-      [varNames.font.iconOffset]:
-        `calc(((${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - ${vars.font.iconSize}) / 2)`,
-      [varNames.font.fontWeight]: vars.font.weight.regular,
+      [varNames.font.capHeight]:
+        `calc(${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight})`,
+      [varNames.font.iconOffset]: `calc((${vars.font.capHeight} - ${vars.font.iconSize}) / 2)`,
+      [varNames.font.customIconOffset]:
+        `calc((${vars.font.capHeight} - ${vars.font.customIconSize}) / 2)`,
     },
 
     nest: {
@@ -40,11 +42,10 @@ export const primitive: StyleRules = {
         display: 'inline',
       },
 
-      // TODO
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
+      '& svg:not([data-sanity-icon])': {
+        fontSize: vars.font.customIconSize,
+        margin: vars.font.customIconOffset,
+      },
 
       '& [data-sanity-icon]': {
         fontSize: vars.font.iconSize,

package/src/css/aspects/index.ts

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

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

@@ -9,6 +9,7 @@ const util: StyleRules = {}
 for (const space of SPACE) {
   _responsiveRule(util, `m-${space}`, {margin: vars.space[space]})
 }
+_responsiveRule(util, `m-auto`, {margin: 'auto'})
 
 for (const space of SPACE) {
   _responsiveRule(util, `mx-${space}`, {
@@ -16,6 +17,10 @@ for (const space of SPACE) {
     marginRight: vars.space[space],
   })
 }
+_responsiveRule(util, `mx-auto`, {
+  marginLeft: 'auto',
+  marginRight: 'auto',
+})
 
 for (const space of SPACE) {
   _responsiveRule(util, `my-${space}`, {
@@ -23,21 +28,29 @@ for (const space of SPACE) {
     marginBottom: vars.space[space],
   })
 }
+_responsiveRule(util, `my-auto`, {
+  marginTop: 'auto',
+  marginBottom: 'auto',
+})
 
 for (const i of SPACE) {
   _responsiveRule(util, `mt-${i}`, {marginTop: vars.space[i]})
 }
+_responsiveRule(util, `mt-auto`, {marginTop: 'auto'})
 
 for (const i of SPACE) {
   _responsiveRule(util, `mr-${i}`, {marginRight: vars.space[i]})
 }
+_responsiveRule(util, `mr-auto`, {marginRight: 'auto'})
 
 for (const i of SPACE) {
   _responsiveRule(util, `mb-${i}`, {marginBottom: vars.space[i]})
 }
+_responsiveRule(util, `mb-auto`, {marginBottom: 'auto'})
 
 for (const i of SPACE) {
   _responsiveRule(util, `ml-${i}`, {marginLeft: vars.space[i]})
 }
+_responsiveRule(util, `ml-auto`, {marginLeft: 'auto'})
 
 export const marginStyle: Style = {layers: {util}}

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

@@ -1,12 +1,17 @@
+import type {Space} from '@sanity/ui/theme'
+
 import type {ResponsiveProp} from '../../types'
 
+/** @public */
+export type Margin = Space | 'auto'
+
 /** @public */
 export interface MarginStyleProps {
-  margin?: ResponsiveProp<number>
-  marginTop?: ResponsiveProp<number>
-  marginRight?: ResponsiveProp<number>
-  marginBottom?: ResponsiveProp<number>
-  marginLeft?: ResponsiveProp<number>
-  marginX?: ResponsiveProp<number>
-  marginY?: ResponsiveProp<number>
+  margin?: ResponsiveProp<Margin>
+  marginTop?: ResponsiveProp<Margin>
+  marginRight?: ResponsiveProp<Margin>
+  marginBottom?: ResponsiveProp<Margin>
+  marginLeft?: ResponsiveProp<Margin>
+  marginX?: ResponsiveProp<Margin>
+  marginY?: ResponsiveProp<Margin>
 }

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

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

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

@@ -0,0 +1,9 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'min-h-0', {minHeight: '0'})
+_responsiveRule(util, 'min-h-full', {minHeight: '100%'})
+
+export const minHeightStyle: Style = {layers: {util}}

package/src/css/aspects/minHeight/minHeight.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {MinHeightStyleProps} from './types'
+
+/** @internal */
+export function minHeight(props: MinHeightStyleProps): string | undefined {
+  return _scopeClassNames(_resp('min-h', props.minHeight) ?? '')
+}

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type MinHeight = 0 | 'full'
+
+/** @public */
+export interface MinHeightStyleProps {
+  minHeight?: ResponsiveProp<MinHeight>
+}

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

@@ -20,9 +20,6 @@ const keyframes: StyleKeyframes = {
 
 const component: StyleRules = {
   '.skeleton': {
-    [varNames.color.skeleton.from]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    [varNames.color.skeleton.to]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
-
     'backgroundColor': vars.color.skeleton.from,
     'backgroundPosition': '100%',
     'backgroundSize': '200% 100%',
@@ -33,14 +30,14 @@ const component: StyleRules = {
     'nest': {
       '&[data-animated]': {
         backgroundImage: [
-          `linear-gradient(to right`,
-          vars.color.skeleton.from,
-          vars.color.skeleton.to,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
+          `linear-gradient(to right,`,
+          `${vars.color.skeleton.from},`,
+          `${vars.color.skeleton.to},`,
+          `${vars.color.skeleton.from},`,
+          `${vars.color.skeleton.from},`,
+          `${vars.color.skeleton.from}`,
           `)`,
-        ].join(', '),
+        ].join(''),
         animationName: KEYFRAMES_PULSE,
         animationTimingFunction: 'ease-in-out',
         animationIterationCount: 'infinite',