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

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

@@ -2,16 +2,11 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {FontStyleProps} from './types'
 
-const prefixes = {
-  align: 'text-align',
-  weight: 'font',
-} as const
-
 /** @public */
 export function font(props: FontStyleProps): string | undefined {
   return composeClassNames(
     'font',
-    props.weight && `${prefixes.weight}-${props.weight}`,
-    _resp(prefixes.align, props.align),
+    props.weight && `font-${props.weight}`,
+    _resp('text-align', props.align),
   )
 }

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

@@ -0,0 +1,21 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `g-${space}`, {gap: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `gx-${space}`, {columnGap: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `gy-${space}`, {rowGap: vars.space[space]})
+}
+
+export const gapStyle: Style = {layers: {util}}

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

@@ -5,9 +5,9 @@ import {GridStyleProps} from './types'
 export function grid(props: GridStyleProps): string | undefined {
   return composeClassNames(
     _resp('auto-cols', props.autoCols),
-    _resp('auto-rows', props.autoRows),
     _resp('auto-flow', props.autoFlow),
-    _resp('columns', props.columns),
+    _resp('auto-rows', props.autoRows),
+    _resp('cols', props.columns),
     _resp('rows', props.rows),
   )
 }

package/src/css/aspects/grid/gridAutoColumns.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'auto-cols-auto', {gridAutoColumns: 'auto'})
+_responsiveRule(util, 'auto-cols-min', {gridAutoColumns: 'min-content'})
+_responsiveRule(util, 'auto-cols-max', {gridAutoColumns: 'max-content'})
+_responsiveRule(util, 'auto-cols-fr', {gridAutoColumns: 'minmax(0, 1fr)'})
+
+export const gridAutoColumnsStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridAutoFlow.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'auto-flow-row', {gridAutoFlow: 'row'})
+_responsiveRule(util, 'auto-flow-column', {gridAutoFlow: 'column'})
+_responsiveRule(util, 'auto-flow-row-dense', {gridAutoFlow: 'row dense'})
+_responsiveRule(util, 'auto-flow-column-dense', {gridAutoFlow: 'column dense'})
+
+export const gridAutoFlowStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridAutoRows.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'auto-rows-auto', {gridAutoRows: 'auto'})
+_responsiveRule(util, 'auto-rows-min', {gridAutoRows: 'min-content'})
+_responsiveRule(util, 'auto-rows-max', {gridAutoRows: 'max-content'})
+_responsiveRule(util, 'auto-rows-fr', {gridAutoRows: 'minmax(0, 1fr)'})
+
+export const gridAutoRowsStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridColumns.style.ts

@@ -0,0 +1,18 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'cols-1', {gridTemplateColumns: 'repeat(1, 1fr)'})
+_responsiveRule(util, 'cols-2', {gridTemplateColumns: 'repeat(2, 1fr)'})
+_responsiveRule(util, 'cols-3', {gridTemplateColumns: 'repeat(3, 1fr)'})
+_responsiveRule(util, 'cols-4', {gridTemplateColumns: 'repeat(4, 1fr)'})
+_responsiveRule(util, 'cols-5', {gridTemplateColumns: 'repeat(5, 1fr)'})
+_responsiveRule(util, 'cols-6', {gridTemplateColumns: 'repeat(6, 1fr)'})
+_responsiveRule(util, 'cols-7', {gridTemplateColumns: 'repeat(7, 1fr)'})
+_responsiveRule(util, 'cols-8', {gridTemplateColumns: 'repeat(8, 1fr)'})
+_responsiveRule(util, 'cols-9', {gridTemplateColumns: 'repeat(9, 1fr)'})
+_responsiveRule(util, 'cols-10', {gridTemplateColumns: 'repeat(10, 1fr)'})
+_responsiveRule(util, 'cols-12', {gridTemplateColumns: 'repeat(12, 1fr)'})
+
+export const gridColumnsStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridRows.style.ts

@@ -0,0 +1,18 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'rows-1', {gridTemplateRows: 'repeat(1, 1fr)'})
+_responsiveRule(util, 'rows-2', {gridTemplateRows: 'repeat(2, 1fr)'})
+_responsiveRule(util, 'rows-3', {gridTemplateRows: 'repeat(3, 1fr)'})
+_responsiveRule(util, 'rows-4', {gridTemplateRows: 'repeat(4, 1fr)'})
+_responsiveRule(util, 'rows-5', {gridTemplateRows: 'repeat(5, 1fr)'})
+_responsiveRule(util, 'rows-6', {gridTemplateRows: 'repeat(6, 1fr)'})
+_responsiveRule(util, 'rows-7', {gridTemplateRows: 'repeat(7, 1fr)'})
+_responsiveRule(util, 'rows-8', {gridTemplateRows: 'repeat(8, 1fr)'})
+_responsiveRule(util, 'rows-9', {gridTemplateRows: 'repeat(9, 1fr)'})
+_responsiveRule(util, 'rows-10', {gridTemplateRows: 'repeat(10, 1fr)'})
+_responsiveRule(util, 'rows-12', {gridTemplateRows: 'repeat(12, 1fr)'})
+
+export const gridRowsStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridColumn.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'col-auto', {gridColumn: 'auto'})
+_responsiveRule(util, 'col-full', {gridColumn: '1 / -1'})
+_responsiveRule(util, 'col-1', {gridColumn: 'span 1 / span 1'})
+_responsiveRule(util, 'col-2', {gridColumn: 'span 2 / span 2'})
+_responsiveRule(util, 'col-3', {gridColumn: 'span 3 / span 3'})
+_responsiveRule(util, 'col-4', {gridColumn: 'span 4 / span 4'})
+_responsiveRule(util, 'col-5', {gridColumn: 'span 5 / span 5'})
+_responsiveRule(util, 'col-6', {gridColumn: 'span 6 / span 6'})
+_responsiveRule(util, 'col-7', {gridColumn: 'span 7 / span 7'})
+_responsiveRule(util, 'col-8', {gridColumn: 'span 8 / span 8'})
+_responsiveRule(util, 'col-9', {gridColumn: 'span 9 / span 9'})
+_responsiveRule(util, 'col-10', {gridColumn: 'span 10 / span 10'})
+_responsiveRule(util, 'col-12', {gridColumn: 'span 12 / span 12'})
+
+export const gridColumnStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridColumnEnd.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'col-end-auto', {gridColumnEnd: 'auto'})
+_responsiveRule(util, 'col-end-1', {gridColumnEnd: '1'})
+_responsiveRule(util, 'col-end-2', {gridColumnEnd: '2'})
+_responsiveRule(util, 'col-end-3', {gridColumnEnd: '3'})
+_responsiveRule(util, 'col-end-4', {gridColumnEnd: '4'})
+_responsiveRule(util, 'col-end-5', {gridColumnEnd: '5'})
+_responsiveRule(util, 'col-end-6', {gridColumnEnd: '6'})
+_responsiveRule(util, 'col-end-7', {gridColumnEnd: '7'})
+_responsiveRule(util, 'col-end-8', {gridColumnEnd: '8'})
+_responsiveRule(util, 'col-end-9', {gridColumnEnd: '9'})
+_responsiveRule(util, 'col-end-10', {gridColumnEnd: '10'})
+_responsiveRule(util, 'col-end-11', {gridColumnEnd: '11'})
+_responsiveRule(util, 'col-end-12', {gridColumnEnd: '12'})
+
+export const gridColumnEndStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridColumnStart.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'col-start-auto', {gridColumnStart: 'auto'})
+_responsiveRule(util, 'col-start-1', {gridColumnStart: '1'})
+_responsiveRule(util, 'col-start-2', {gridColumnStart: '2'})
+_responsiveRule(util, 'col-start-3', {gridColumnStart: '3'})
+_responsiveRule(util, 'col-start-4', {gridColumnStart: '4'})
+_responsiveRule(util, 'col-start-5', {gridColumnStart: '5'})
+_responsiveRule(util, 'col-start-6', {gridColumnStart: '6'})
+_responsiveRule(util, 'col-start-7', {gridColumnStart: '7'})
+_responsiveRule(util, 'col-start-8', {gridColumnStart: '8'})
+_responsiveRule(util, 'col-start-9', {gridColumnStart: '9'})
+_responsiveRule(util, 'col-start-10', {gridColumnStart: '10'})
+_responsiveRule(util, 'col-start-11', {gridColumnStart: '11'})
+_responsiveRule(util, 'col-start-12', {gridColumnStart: '12'})
+
+export const gridColumnStartStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridRow.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'row-auto', {gridRow: 'auto'})
+_responsiveRule(util, 'row-full', {gridRow: '1 / -1'})
+_responsiveRule(util, 'row-1', {gridRow: 'span 1 / span 1'})
+_responsiveRule(util, 'row-2', {gridRow: 'span 2 / span 2'})
+_responsiveRule(util, 'row-3', {gridRow: 'span 3 / span 3'})
+_responsiveRule(util, 'row-4', {gridRow: 'span 4 / span 4'})
+_responsiveRule(util, 'row-5', {gridRow: 'span 5 / span 5'})
+_responsiveRule(util, 'row-6', {gridRow: 'span 6 / span 6'})
+_responsiveRule(util, 'row-7', {gridRow: 'span 7 / span 7'})
+_responsiveRule(util, 'row-8', {gridRow: 'span 8 / span 8'})
+_responsiveRule(util, 'row-9', {gridRow: 'span 9 / span 9'})
+_responsiveRule(util, 'row-10', {gridRow: 'span 10 / span 10'})
+_responsiveRule(util, 'row-12', {gridRow: 'span 12 / span 12'})
+
+export const gridRowStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridRowEnd.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'row-end-auto', {gridRowEnd: 'auto'})
+_responsiveRule(util, 'row-end-1', {gridRowEnd: '1'})
+_responsiveRule(util, 'row-end-2', {gridRowEnd: '2'})
+_responsiveRule(util, 'row-end-3', {gridRowEnd: '3'})
+_responsiveRule(util, 'row-end-4', {gridRowEnd: '4'})
+_responsiveRule(util, 'row-end-5', {gridRowEnd: '5'})
+_responsiveRule(util, 'row-end-6', {gridRowEnd: '6'})
+_responsiveRule(util, 'row-end-7', {gridRowEnd: '7'})
+_responsiveRule(util, 'row-end-8', {gridRowEnd: '8'})
+_responsiveRule(util, 'row-end-9', {gridRowEnd: '9'})
+_responsiveRule(util, 'row-end-10', {gridRowEnd: '10'})
+_responsiveRule(util, 'row-end-11', {gridRowEnd: '11'})
+_responsiveRule(util, 'row-end-12', {gridRowEnd: '12'})
+
+export const gridRowEndStyle: Style = {layers: {util}}

package/src/css/aspects/gridItem/gridRowStart.style.ts

@@ -0,0 +1,20 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'row-start-auto', {gridRowStart: 'auto'})
+_responsiveRule(util, 'row-start-1', {gridRowStart: '1'})
+_responsiveRule(util, 'row-start-2', {gridRowStart: '2'})
+_responsiveRule(util, 'row-start-3', {gridRowStart: '3'})
+_responsiveRule(util, 'row-start-4', {gridRowStart: '4'})
+_responsiveRule(util, 'row-start-5', {gridRowStart: '5'})
+_responsiveRule(util, 'row-start-6', {gridRowStart: '6'})
+_responsiveRule(util, 'row-start-7', {gridRowStart: '7'})
+_responsiveRule(util, 'row-start-8', {gridRowStart: '8'})
+_responsiveRule(util, 'row-start-9', {gridRowStart: '9'})
+_responsiveRule(util, 'row-start-10', {gridRowStart: '10'})
+_responsiveRule(util, 'row-start-11', {gridRowStart: '11'})
+_responsiveRule(util, 'row-start-12', {gridRowStart: '12'})
+
+export const gridRowStartStyle: Style = {layers: {util}}

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

@@ -0,0 +1,9 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'h-fill', {height: '100%'})
+_responsiveRule(util, 'h-stretch', {height: 'stretch'})
+
+export const heightStyle: Style = {layers: {util}}

package/src/css/aspects/height/height.ts

@@ -0,0 +1,17 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+export interface HeightStyleProps {
+  height?: ResponsiveProp<BoxHeight>
+}
+
+/** @public */
+export function height(props: HeightStyleProps): string | undefined {
+  return composeClassNames(_resp(`h`, props.height))
+}

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

@@ -0,0 +1 @@
+export * from './height'

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

@@ -6,6 +6,7 @@ export * from './font'
 export * from './gap'
 export * from './grid'
 export * from './gridItem'
+export * from './height'
 export * from './inset'
 export * from './margin'
 export * from './maxWidth'

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

@@ -0,0 +1,12 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'inset-0', {top: 0, left: 0, right: 0, bottom: 0})
+_responsiveRule(util, 'top-0', {top: 0})
+_responsiveRule(util, 'right-0', {right: 0})
+_responsiveRule(util, 'bottom-0', {bottom: 0})
+_responsiveRule(util, 'left-0', {left: 0})
+
+export const insetStyle: Style = {layers: {util}}

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

@@ -0,0 +1,46 @@
+// import {type Style, type StyleRules, vars} from '@sanity/css'
+// import {SPACE} from '@sanity/theme'
+
+import {SPACE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `m-${space}`, {margin: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `mx-${space}`, {
+    marginLeft: vars.space[space],
+    marginRight: vars.space[space],
+  })
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `my-${space}`, {
+    marginTop: vars.space[space],
+    marginBottom: vars.space[space],
+  })
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `mt-${space}`, {marginTop: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `mr-${space}`, {marginRight: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `mb-${space}`, {marginBottom: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `ml-${space}`, {marginLeft: vars.space[space]})
+}
+
+export const marginStyle: Style = {layers: {util}}

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

@@ -0,0 +1,16 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'max-w-0', {maxWidth: vars.container[0]})
+_responsiveRule(util, 'max-w-1', {maxWidth: vars.container[1]})
+_responsiveRule(util, 'max-w-2', {maxWidth: vars.container[2]})
+_responsiveRule(util, 'max-w-3', {maxWidth: vars.container[3]})
+_responsiveRule(util, 'max-w-4', {maxWidth: vars.container[4]})
+_responsiveRule(util, 'max-w-5', {maxWidth: vars.container[5]})
+_responsiveRule(util, 'max-w-auto', {maxWidth: 'none'})
+_responsiveRule(util, 'max-w-fill', {maxWidth: '100%'})
+
+export const maxWidthStyle: Style = {layers: {util}}

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

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

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

@@ -0,0 +1,9 @@
+import type {Style, StyleRules} from '../../types'
+
+const rules: StyleRules = {
+  '.outline-none': {
+    outline: 'none',
+  },
+}
+
+export const outlineStyle: Style = {layers: {util: rules}}

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

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'overflow-visible', {overflow: 'visible'})
+_responsiveRule(util, 'overflow-hidden', {overflow: 'hidden'})
+_responsiveRule(util, 'overflow-scroll', {overflow: 'scroll'})
+_responsiveRule(util, 'overflow-auto', {overflow: 'auto'})
+
+export const overflowStyle: Style = {layers: {util}}

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

@@ -0,0 +1,46 @@
+// import {type Style, type StyleRules, vars} from '@sanity/css'
+// import {SPACE} from '@sanity/theme'
+
+import {SPACE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `p-${space}`, {padding: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `px-${space}`, {
+    paddingLeft: vars.space[space],
+    paddingRight: vars.space[space],
+  })
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `py-${space}`, {
+    paddingTop: vars.space[space],
+    paddingBottom: vars.space[space],
+  })
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `pt-${space}`, {paddingTop: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `pr-${space}`, {paddingRight: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `pb-${space}`, {paddingBottom: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `pl-${space}`, {paddingLeft: vars.space[space]})
+}
+
+export const paddingStyle: Style = {layers: {util}}

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

@@ -0,0 +1,13 @@
+import type {Style, StyleRules} from '../../types'
+
+const rules: StyleRules = {
+  '.pointer-events-none': {
+    pointerEvents: 'none',
+  },
+
+  '.pointer-events-auto': {
+    pointerEvents: 'auto',
+  },
+}
+
+export const pointerEventsStyle: Style = {layers: {util: rules}}

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

@@ -0,0 +1,12 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'position-absolute', {position: 'absolute'})
+_responsiveRule(util, 'position-fixed', {position: 'fixed'})
+_responsiveRule(util, 'position-relative', {position: 'relative'})
+_responsiveRule(util, 'position-static', {position: 'static'})
+_responsiveRule(util, 'position-sticky', {position: 'sticky'})
+
+export const positionStyle: Style = {layers: {util}}

package/src/css/{styles → aspects}/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('pos', props.position))
+  return composeClassNames(_resp('position', props.position))
 }

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

@@ -0,0 +1,16 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'r-0', {borderRadius: vars.radius[0]})
+_responsiveRule(util, 'r-1', {borderRadius: vars.radius[1]})
+_responsiveRule(util, 'r-2', {borderRadius: vars.radius[2]})
+_responsiveRule(util, 'r-3', {borderRadius: vars.radius[3]})
+_responsiveRule(util, 'r-4', {borderRadius: vars.radius[4]})
+_responsiveRule(util, 'r-5', {borderRadius: vars.radius[5]})
+_responsiveRule(util, 'r-6', {borderRadius: vars.radius[6]})
+_responsiveRule(util, 'r-full', {borderRadius: '9999px'})
+
+export const radiusStyle: Style = {layers: {util}}

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

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

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

@@ -0,0 +1,49 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
+_responsiveRule(util, 'shadow-1', {
+  boxShadow: [
+    `var(--shadow-outline) ${vars.color.shadow.outline}`,
+    `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`,
+    `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`,
+    `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`,
+  ].join(', '),
+})
+_responsiveRule(util, 'shadow-2', {
+  boxShadow: [
+    `var(--shadow-outline) ${vars.color.shadow.outline}`,
+    `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`,
+    `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`,
+    `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`,
+  ].join(', '),
+})
+_responsiveRule(util, 'shadow-3', {
+  boxShadow: [
+    `var(--shadow-outline) ${vars.color.shadow.outline}`,
+    `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`,
+    `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`,
+    `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`,
+  ].join(', '),
+})
+_responsiveRule(util, 'shadow-4', {
+  boxShadow: [
+    `var(--shadow-outline) ${vars.color.shadow.outline}`,
+    `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`,
+    `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`,
+    `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`,
+  ].join(', '),
+})
+_responsiveRule(util, 'shadow-5', {
+  boxShadow: [
+    `var(--shadow-outline) ${vars.color.shadow.outline}`,
+    `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`,
+    `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`,
+    `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`,
+  ].join(', '),
+})
+
+export const shadowStyle: Style = {layers: {util}}

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

@@ -0,0 +1,21 @@
+import type {Style, StyleRules} from '../../types'
+
+const rules: StyleRules = {
+  '.text-overflow-ellipsis': {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+
+  '.text-overflow-clip': {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    textOverflow: 'clip',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+}
+
+export const textOverflowStyle: Style = {layers: {util: rules}}

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

@@ -2,6 +2,7 @@ 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/{styles → aspects}/width/types.ts

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

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

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, `w-fill`, {
+  // @ts-expect-error - TODO: fix this
+  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+})
+
+export const widthStyle: Style = {layers: {util}}