@sanity/ui 3.0.0-static.10 → 3.0.0-static.2

package/src/css/styles/grid/rules.ts

@@ -0,0 +1,146 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const gridRules: Rules = {
+  // autoCols
+  ...responsiveRules('auto-cols-auto', {gridAutoColumns: 'auto'}),
+  ...responsiveRules('auto-cols-min', {gridAutoColumns: 'min'}),
+  ...responsiveRules('auto-cols-max', {gridAutoColumns: 'max'}),
+  ...responsiveRules('auto-cols-fr', {gridAutoColumns: 'fr'}),
+
+  // autoFlow
+  ...responsiveRules('auto-flow-row', {gridAutoFlow: 'row'}),
+  ...responsiveRules('auto-flow-column', {gridAutoFlow: 'column'}),
+  ...responsiveRules('auto-flow-row-dense', {gridAutoFlow: 'row dense'}),
+  ...responsiveRules('auto-flow-column-dense', {gridAutoFlow: 'column dense'}),
+
+  // autoRows
+  ...responsiveRules('auto-rows-auto', {gridAutoRows: 'auto'}),
+  ...responsiveRules('auto-rows-min', {gridAutoRows: 'min-content'}),
+  ...responsiveRules('auto-rows-max', {gridAutoRows: 'max-content'}),
+  ...responsiveRules('auto-rows-fr', {gridAutoRows: 'minmax(0, 1fr)'}),
+
+  // columns
+  ...responsiveRules('columns-1', {gridTemplateColumns: 'repeat(1, 1fr)'}),
+  ...responsiveRules('columns-2', {gridTemplateColumns: 'repeat(2, 1fr)'}),
+  ...responsiveRules('columns-3', {gridTemplateColumns: 'repeat(3, 1fr)'}),
+  ...responsiveRules('columns-4', {gridTemplateColumns: 'repeat(4, 1fr)'}),
+  ...responsiveRules('columns-5', {gridTemplateColumns: 'repeat(5, 1fr)'}),
+  ...responsiveRules('columns-6', {gridTemplateColumns: 'repeat(6, 1fr)'}),
+  ...responsiveRules('columns-7', {gridTemplateColumns: 'repeat(7, 1fr)'}),
+  ...responsiveRules('columns-8', {gridTemplateColumns: 'repeat(8, 1fr)'}),
+  ...responsiveRules('columns-9', {gridTemplateColumns: 'repeat(9, 1fr)'}),
+  ...responsiveRules('columns-10', {gridTemplateColumns: 'repeat(10, 1fr)'}),
+  ...responsiveRules('columns-12', {gridTemplateColumns: 'repeat(12, 1fr)'}),
+
+  // rows
+  ...responsiveRules('rows-1', {gridTemplateRows: 'repeat(1, 1fr)'}),
+  ...responsiveRules('rows-2', {gridTemplateRows: 'repeat(2, 1fr)'}),
+  ...responsiveRules('rows-3', {gridTemplateRows: 'repeat(3, 1fr)'}),
+  ...responsiveRules('rows-4', {gridTemplateRows: 'repeat(4, 1fr)'}),
+  ...responsiveRules('rows-5', {gridTemplateRows: 'repeat(5, 1fr)'}),
+  ...responsiveRules('rows-6', {gridTemplateRows: 'repeat(6, 1fr)'}),
+  ...responsiveRules('rows-7', {gridTemplateRows: 'repeat(7, 1fr)'}),
+  ...responsiveRules('rows-8', {gridTemplateRows: 'repeat(8, 1fr)'}),
+  ...responsiveRules('rows-9', {gridTemplateRows: 'repeat(9, 1fr)'}),
+  ...responsiveRules('rows-10', {gridTemplateRows: 'repeat(10, 1fr)'}),
+  ...responsiveRules('rows-12', {gridTemplateRows: 'repeat(12, 1fr)'}),
+}
+
+// import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+// import {rem, _responsive} from '../helpers'
+// import {ThemeProps} from '../types'
+// import {ResponsiveGridStyleProps} from './types'
+
+// const GRID_AUTO_COLUMS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// const GRID_AUTO_ROWS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// export function responsiveGridStyle(): Array<
+//   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+// > {
+//   return [
+//     responsiveGridAutoFlowStyle,
+//     responsiveGridAutoRowsStyle,
+//     responsiveGridAutoColsStyle,
+//     responsiveGridColumnsStyle,
+//     responsiveGridRowsStyle,
+//     responsiveGridGapStyle,
+//     responsiveGridGapXStyle,
+//     responsiveGridGapYStyle,
+//   ]
+// }
+
+// function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoFlow, (autoFlow) => ({
+//     gridAutoFlow: autoFlow,
+//   }))
+// }
+
+// function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoRows, (autoRows) => ({
+//     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+//   }))
+// }
+
+// function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoCols, (autoCols) => ({
+//     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+//   }))
+// }
+
+// function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$columns, (columns) => ({
+//     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$rows, (rows) => ({
+//     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gap, (gap) => ({
+//     gridGap: gap ? rem(space[gap]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapX, (gapX) => ({
+//     columnGap: gapX ? rem(space[gapX]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapY, (gapY) => ({
+//     rowGap: gapY ? rem(space[gapY]) : undefined,
+//   }))
+// }

package/src/css/{aspects → styles}/grid/types.ts

@@ -15,9 +15,9 @@ export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
  */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
 /** @public */
 export interface GridStyleProps {

package/src/css/styles/gridItem/rules.ts

@@ -0,0 +1,96 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const gridItemRules: Rules = {
+  // column
+  ...responsiveRules('col-auto', {gridColumn: `span 1 / span 1`}),
+  ...responsiveRules('col-full', {gridColumn: `1 / -1`}),
+  ...responsiveRules('col-1', {gridColumn: `span 1 / span 1`}),
+  ...responsiveRules('col-2', {gridColumn: `span 2 / span 2`}),
+  ...responsiveRules('col-3', {gridColumn: `span 3 / span 3`}),
+  ...responsiveRules('col-4', {gridColumn: `span 4 / span 4`}),
+  ...responsiveRules('col-5', {gridColumn: `span 5 / span 5`}),
+  ...responsiveRules('col-6', {gridColumn: `span 6 / span 6`}),
+  ...responsiveRules('col-7', {gridColumn: `span 7 / span 7`}),
+  ...responsiveRules('col-8', {gridColumn: `span 8 / span 8`}),
+  ...responsiveRules('col-9', {gridColumn: `span 9 / span 9`}),
+  ...responsiveRules('col-10', {gridColumn: `span 10 / span 10`}),
+  ...responsiveRules('col-11', {gridColumn: `span 11 / span 11`}),
+  ...responsiveRules('col-12', {gridColumn: `span 12 / span 12`}),
+
+  // columnStart
+  ...responsiveRules('col-start-auto', {gridColumnStart: 'auto'}),
+  ...responsiveRules('col-start-1', {gridColumnStart: '1'}),
+  ...responsiveRules('col-start-2', {gridColumnStart: '2'}),
+  ...responsiveRules('col-start-3', {gridColumnStart: '3'}),
+  ...responsiveRules('col-start-4', {gridColumnStart: '4'}),
+  ...responsiveRules('col-start-5', {gridColumnStart: '5'}),
+  ...responsiveRules('col-start-6', {gridColumnStart: '6'}),
+  ...responsiveRules('col-start-7', {gridColumnStart: '7'}),
+  ...responsiveRules('col-start-8', {gridColumnStart: '8'}),
+  ...responsiveRules('col-start-9', {gridColumnStart: '9'}),
+  ...responsiveRules('col-start-10', {gridColumnStart: '10'}),
+  ...responsiveRules('col-start-11', {gridColumnStart: '11'}),
+  ...responsiveRules('col-start-12', {gridColumnStart: '12'}),
+
+  // columnEnd
+  ...responsiveRules('col-end-auto', {gridColumnEnd: 'auto'}),
+  ...responsiveRules('col-end-1', {gridColumnEnd: '1'}),
+  ...responsiveRules('col-end-2', {gridColumnEnd: '2'}),
+  ...responsiveRules('col-end-3', {gridColumnEnd: '3'}),
+  ...responsiveRules('col-end-4', {gridColumnEnd: '4'}),
+  ...responsiveRules('col-end-5', {gridColumnEnd: '5'}),
+  ...responsiveRules('col-end-6', {gridColumnEnd: '6'}),
+  ...responsiveRules('col-end-7', {gridColumnEnd: '7'}),
+  ...responsiveRules('col-end-8', {gridColumnEnd: '8'}),
+  ...responsiveRules('col-end-9', {gridColumnEnd: '9'}),
+  ...responsiveRules('col-end-10', {gridColumnEnd: '10'}),
+  ...responsiveRules('col-end-11', {gridColumnEnd: '11'}),
+  ...responsiveRules('col-end-12', {gridColumnEnd: '12'}),
+
+  // row
+  ...responsiveRules('row-auto', {gridRow: `span 1 / span 1`}),
+  ...responsiveRules('row-full', {gridRow: `1 / -1`}),
+  ...responsiveRules('row-1', {gridRow: `span 1 / span 1`}),
+  ...responsiveRules('row-2', {gridRow: `span 2 / span 2`}),
+  ...responsiveRules('row-3', {gridRow: `span 3 / span 3`}),
+  ...responsiveRules('row-4', {gridRow: `span 4 / span 4`}),
+  ...responsiveRules('row-5', {gridRow: `span 5 / span 5`}),
+  ...responsiveRules('row-6', {gridRow: `span 6 / span 6`}),
+  ...responsiveRules('row-7', {gridRow: `span 7 / span 7`}),
+  ...responsiveRules('row-8', {gridRow: `span 8 / span 8`}),
+  ...responsiveRules('row-9', {gridRow: `span 9 / span 9`}),
+  ...responsiveRules('row-10', {gridRow: `span 10 / span 10`}),
+  ...responsiveRules('row-11', {gridRow: `span 11 / span 11`}),
+  ...responsiveRules('row-12', {gridRow: `span 12 / span 12`}),
+
+  // rowStart
+  ...responsiveRules('row-start-auto', {gridRowStart: 'auto'}),
+  ...responsiveRules('row-start-1', {gridRowStart: '1'}),
+  ...responsiveRules('row-start-2', {gridRowStart: '2'}),
+  ...responsiveRules('row-start-3', {gridRowStart: '3'}),
+  ...responsiveRules('row-start-4', {gridRowStart: '4'}),
+  ...responsiveRules('row-start-5', {gridRowStart: '5'}),
+  ...responsiveRules('row-start-6', {gridRowStart: '6'}),
+  ...responsiveRules('row-start-7', {gridRowStart: '7'}),
+  ...responsiveRules('row-start-8', {gridRowStart: '8'}),
+  ...responsiveRules('row-start-9', {gridRowStart: '9'}),
+  ...responsiveRules('row-start-10', {gridRowStart: '10'}),
+  ...responsiveRules('row-start-11', {gridRowStart: '11'}),
+  ...responsiveRules('row-start-12', {gridRowStart: '12'}),
+
+  // rowEnd
+  ...responsiveRules('row-end-auto', {gridRowEnd: 'auto'}),
+  ...responsiveRules('row-end-1', {gridRowEnd: '1'}),
+  ...responsiveRules('row-end-2', {gridRowEnd: '2'}),
+  ...responsiveRules('row-end-3', {gridRowEnd: '3'}),
+  ...responsiveRules('row-end-4', {gridRowEnd: '4'}),
+  ...responsiveRules('row-end-5', {gridRowEnd: '5'}),
+  ...responsiveRules('row-end-6', {gridRowEnd: '6'}),
+  ...responsiveRules('row-end-7', {gridRowEnd: '7'}),
+  ...responsiveRules('row-end-8', {gridRowEnd: '8'}),
+  ...responsiveRules('row-end-9', {gridRowEnd: '9'}),
+  ...responsiveRules('row-end-10', {gridRowEnd: '10'}),
+  ...responsiveRules('row-end-11', {gridRowEnd: '11'}),
+  ...responsiveRules('row-end-12', {gridRowEnd: '12'}),
+}

package/src/css/{aspects → styles}/index.ts

@@ -6,11 +6,9 @@ export * from './font'
 export * from './gap'
 export * from './grid'
 export * from './gridItem'
-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/styles/inset/rules.ts

@@ -0,0 +1,16 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const insetRules: Rules = {
+  ...responsiveRules('inset-0', {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  }),
+
+  ...responsiveRules('top-0', {top: 0}),
+  ...responsiveRules('right-0', {right: 0}),
+  ...responsiveRules('bottom-0', {bottom: 0}),
+  ...responsiveRules('left-0', {left: 0}),
+}

package/src/css/styles/margin/rules.ts

@@ -0,0 +1,64 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const marginRules: Rules = {
+  // NOTE: order matters
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`m-${space}`.replace('.', '_'), {margin: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mx-${space}`.replace('.', '_'), {
+        marginLeft: vars.space[space],
+        marginRight: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`my-${space}`.replace('.', '_'), {
+        marginTop: vars.space[space],
+        marginBottom: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mt-${space}`.replace('.', '_'), {marginTop: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mr-${space}`.replace('.', '_'), {marginRight: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`mb-${space}`.replace('.', '_'), {marginBottom: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`ml-${space}`.replace('.', '_'), {marginLeft: vars.space[space]}),
+    }
+  }, {}),
+}

package/src/css/styles/maxWidth/rules.ts

@@ -0,0 +1,13 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const maxWidthRules: Rules = {
+  ...responsiveRules('max-w-0', {maxWidth: `var(--container-0)`}),
+  ...responsiveRules('max-w-1', {maxWidth: `var(--container-1)`}),
+  ...responsiveRules('max-w-2', {maxWidth: `var(--container-2)`}),
+  ...responsiveRules('max-w-3', {maxWidth: `var(--container-3)`}),
+  ...responsiveRules('max-w-4', {maxWidth: `var(--container-4)`}),
+  ...responsiveRules('max-w-5', {maxWidth: `var(--container-5)`}),
+  ...responsiveRules('max-w-auto', {maxWidth: 'none'}),
+  ...responsiveRules('max-w-fill', {maxWidth: '100%'}),
+}

package/src/css/{aspects → styles}/maxWidth/types.ts

@@ -3,5 +3,5 @@ import {ContainerWidth} from '@sanity/ui/theme'
 import {ResponsiveProp} from '../../types'
 
 export interface MaxWidthStyleProps {
-  maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
+  maxWidth?: ResponsiveProp<ContainerWidth>
 }

package/src/css/styles/outline/rules.ts

@@ -0,0 +1,7 @@
+import {Rules} from '../../types'
+
+export const outlineRules: Rules = {
+  'outline-none': {
+    outline: 'none',
+  },
+}

package/src/css/styles/overflow/rules.ts

@@ -0,0 +1,9 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const overflowRules: Rules = {
+  ...responsiveRules('overflow-visible', {overflow: 'visible'}),
+  ...responsiveRules('overflow-hidden', {overflow: 'hidden'}),
+  ...responsiveRules('overflow-scroll', {overflow: 'scroll'}),
+  ...responsiveRules('overflow-auto', {overflow: 'auto'}),
+}

package/src/css/styles/padding/rules.ts

@@ -0,0 +1,62 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const paddingRules: Rules = {
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`p-${space}`.replace('.', '_'), {padding: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`px-${space}`.replace('.', '_'), {
+        paddingLeft: vars.space[space],
+        paddingRight: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`py-${space}`.replace('.', '_'), {
+        paddingTop: vars.space[space],
+        paddingBottom: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pt-${space}`.replace('.', '_'), {paddingTop: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pr-${space}`.replace('.', '_'), {paddingRight: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pb-${space}`.replace('.', '_'), {paddingBottom: vars.space[space]}),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`pl-${space}`.replace('.', '_'), {paddingLeft: vars.space[space]}),
+    }
+  }, {}),
+}

package/src/css/styles/pointerEvents/rules.ts

@@ -0,0 +1,11 @@
+import {Rules} from '../../types'
+
+export const pointerEventsRules: Rules = {
+  'pointer-events-none': {
+    pointerEvents: 'none',
+  },
+
+  'pointer-events-auto': {
+    pointerEvents: 'auto',
+  },
+}

package/src/css/{aspects → styles}/position/position.ts

@@ -3,5 +3,5 @@ import {composeClassNames} from '../../composeClassNames'
 import {PositionStyleProps} from './types'
 
 export function position(props: PositionStyleProps): string | undefined {
-  return composeClassNames(_resp('position', props.position))
+  return composeClassNames(_resp('pos', props.position))
 }

package/src/css/styles/position/rules.ts

@@ -0,0 +1,24 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const positionRules: Rules = {
+  ...responsiveRules('pos-absolute', {
+    position: 'absolute',
+  }),
+
+  ...responsiveRules('pos-fixed', {
+    position: 'fixed',
+  }),
+
+  ...responsiveRules('pos-relative', {
+    position: 'relative',
+  }),
+
+  ...responsiveRules('pos-static', {
+    position: 'static',
+  }),
+
+  ...responsiveRules('pos-sticky', {
+    position: 'sticky',
+  }),
+}

package/src/css/styles/radius/rules.ts

@@ -0,0 +1,13 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const radiusRules: Rules = {
+  ...responsiveRules('r-0', {borderRadius: 'var(--radius-0)'}),
+  ...responsiveRules('r-1', {borderRadius: 'var(--radius-1)'}),
+  ...responsiveRules('r-2', {borderRadius: 'var(--radius-2)'}),
+  ...responsiveRules('r-3', {borderRadius: 'var(--radius-3)'}),
+  ...responsiveRules('r-4', {borderRadius: 'var(--radius-4)'}),
+  ...responsiveRules('r-5', {borderRadius: 'var(--radius-5)'}),
+  ...responsiveRules('r-6', {borderRadius: 'var(--radius-6)'}),
+  ...responsiveRules('r-full', {borderRadius: '9999px'}),
+}

package/src/css/{aspects → styles}/radius/types.ts

@@ -4,5 +4,5 @@ import {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface RadiusStyleProps {
-  radius?: ResponsiveProp<Radius | 'full'>
+  radius?: ResponsiveProp<Radius>
 }

package/src/css/styles/shadow/rules.ts

@@ -0,0 +1,53 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const shadowRules: Rules = {
+  ...responsiveRules('shadow-0', {
+    boxShadow: 'none',
+  }),
+
+  ...responsiveRules('shadow-1', {
+    boxShadow: [
+      `var(--shadow-outline) var(--color-shadow-outline)`,
+      `var(--shadow-1-umbra) var(--color-shadow-umbra)`,
+      `var(--shadow-1-penumbra) var(--color-shadow-penumbra)`,
+      `var(--shadow-1-ambient) var(--color-shadow-ambient)`,
+    ].join(', '),
+  }),
+
+  ...responsiveRules('shadow-2', {
+    boxShadow: [
+      `var(--shadow-outline) var(--color-shadow-outline)`,
+      `var(--shadow-2-umbra) var(--color-shadow-umbra)`,
+      `var(--shadow-2-penumbra) var(--color-shadow-penumbra)`,
+      `var(--shadow-2-ambient) var(--color-shadow-ambient)`,
+    ].join(', '),
+  }),
+
+  ...responsiveRules('shadow-3', {
+    boxShadow: [
+      `var(--shadow-outline) var(--color-shadow-outline)`,
+      `var(--shadow-3-umbra) var(--color-shadow-umbra)`,
+      `var(--shadow-3-penumbra) var(--color-shadow-penumbra)`,
+      `var(--shadow-3-ambient) var(--color-shadow-ambient)`,
+    ].join(', '),
+  }),
+
+  ...responsiveRules('shadow-4', {
+    boxShadow: [
+      `var(--shadow-outline) var(--color-shadow-outline)`,
+      `var(--shadow-4-umbra) var(--color-shadow-umbra)`,
+      `var(--shadow-4-penumbra) var(--color-shadow-penumbra)`,
+      `var(--shadow-4-ambient) var(--color-shadow-ambient)`,
+    ].join(', '),
+  }),
+
+  ...responsiveRules('shadow-5', {
+    boxShadow: [
+      `var(--shadow-outline) var(--color-shadow-outline)`,
+      `var(--shadow-5-umbra) var(--color-shadow-umbra)`,
+      `var(--shadow-5-penumbra) var(--color-shadow-penumbra)`,
+      `var(--shadow-5-ambient) var(--color-shadow-ambient)`,
+    ].join(', '),
+  }),
+}

package/src/css/styles/textOverflow/rules.ts

@@ -0,0 +1,17 @@
+import {Rules} from '../../types'
+
+export const textOverflowRules: Rules = {
+  'text-overflow-ellipsis': {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: ['hidden', 'clip'],
+  },
+
+  'text-overflow-clip': {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'clip',
+    overflow: ['hidden', 'clip'],
+  },
+}

package/src/css/styles/textOverflow/textOverflow.ts

@@ -0,0 +1,6 @@
+import {composeClassNames} from '../../composeClassNames'
+import {TextOverflowStyleProps} from './types'
+
+export function textOverflow(props: TextOverflowStyleProps): string | undefined {
+  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`)
+}

package/src/css/{aspects → styles}/width/rules.ts

@@ -2,7 +2,6 @@ import {Rules} from '../../types'
 
 export const widthRules: Rules = {
   'w-fill': {
-    // @ts-expect-error - TODO: fix this
     width: ['-moz-available', '-webkit-fill-available', 'stretch'],
   },
 }

package/src/css/{aspects → styles}/width/types.ts

@@ -2,7 +2,7 @@ import {ContainerWidth} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
-export type Width = ContainerWidth | 'fill'
+export type Width = ContainerWidth
 
 export interface WidthStyleProps {
   width?: ResponsiveProp<Width>