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

package/src/css/_system.style.ts

@@ -1,5 +1,6 @@
 import {_mergeStyles} from './_mergeStyles'
 import {borderStyle} from './aspects/border/border.style'
+import {boxSizingStyle} from './aspects/boxSizing/boxSizing.style'
 import {displayStyle} from './aspects/display/display.style'
 import {flexAlignStyle} from './aspects/flex/flexAlign.style'
 import {flexDirectionStyle} from './aspects/flex/flexDirection.style'
@@ -85,6 +86,7 @@ export const _systemStyle: Style = _mergeStyles([
 
   // aspects
   borderStyle,
+  boxSizingStyle,
   displayStyle,
   flexStyle,
   flexAlignStyle,

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

@@ -1,6 +1,6 @@
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

package/src/css/aspects/border/border.ts

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {BorderStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {BorderStyleProps} from './types'
 
 /** @public */
 export function border(props: BorderStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('border', props.border),
     _resp('border-t', props.borderTop),
     _resp('border-r', props.borderRight),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface BorderStyleProps {

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

@@ -0,0 +1,10 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'box-border', {boxSizing: 'border-box'})
+
+_responsiveRule(util, 'box-content', {boxSizing: 'content-box'})
+
+export const boxSizingStyle: Style = {layers: {util}}

package/src/css/aspects/boxSizing/boxSizing.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {BoxSizingStyleProps} from './types'
+
+/** @internal */
+export function boxSizing(props: BoxSizingStyleProps): string | undefined {
+  return _scopeClassNames(_resp('box', props.boxSizing))
+}

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

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

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type BoxSizing = 'content' | 'border'
+
+/** @public */
+export interface BoxSizingStyleProps {
+  boxSizing?: ResponsiveProp<BoxSizing>
+}

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

@@ -1,34 +1,34 @@
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 
 _responsiveRule(util, 'block', {
-  '@nest': {'&:not([hidden])': {display: 'block'}},
+  nest: {'&:not([hidden])': {display: 'block'}},
 })
 
 _responsiveRule(util, 'flex', {
-  '@nest': {'&:not([hidden])': {display: 'flex'}},
+  nest: {'&:not([hidden])': {display: 'flex'}},
 })
 
 _responsiveRule(util, 'grid', {
-  '@nest': {'&:not([hidden])': {display: 'grid'}},
+  nest: {'&:not([hidden])': {display: 'grid'}},
 })
 
 _responsiveRule(util, 'inline-block', {
-  '@nest': {'&:not([hidden])': {display: 'inline-block'}},
+  nest: {'&:not([hidden])': {display: 'inline-block'}},
 })
 
 _responsiveRule(util, 'inline-flex', {
-  '@nest': {'&:not([hidden])': {display: 'inline-flex'}},
+  nest: {'&:not([hidden])': {display: 'inline-flex'}},
 })
 
 _responsiveRule(util, 'inline-grid', {
-  '@nest': {'&:not([hidden])': {display: 'inline-grid'}},
+  nest: {'&:not([hidden])': {display: 'inline-grid'}},
 })
 
 _responsiveRule(util, 'none', {
-  '@nest': {'&:not([hidden])': {display: 'none'}},
+  nest: {'&:not([hidden])': {display: 'none'}},
 })
 
 export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/display/display.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {DisplayStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {DisplayStyleProps} from './types'
 
 /** @internal */
 export function display(props: DisplayStyleProps): string | undefined {
-  return composeClassNames(_resp(undefined, props.display))
+  return _scopeClassNames(_resp(undefined, props.display))
 }

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Display =

package/src/css/aspects/flex/flex.ts

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FlexStyleProps} from './types'
 
 /** @public */
 export function flex(props: FlexStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('flex-align', props.align),
     _resp('f', props.direction),
     _resp('flex-justify', props.justify),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'

package/src/css/aspects/flexItem/flex.style.ts

@@ -1,5 +1,5 @@
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

package/src/css/aspects/flexItem/flexItem.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexItemStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FlexItemStyleProps} from './types'
 
 /** @public */
 export function flexItem(props: FlexItemStyleProps): string | undefined {
-  return composeClassNames(_resp(`f`, props.flex))
+  return _scopeClassNames(_resp(`f`, props.flex))
 }

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type FlexValue =

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

@@ -1,27 +1,30 @@
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 export const primitive: StyleRules = {
   '.font': {
-    'fontFamily': 'var(--font-family)',
-    'fontFeatureSettings': 'var(--font-feature-settings)',
-    'fontSize': 'var(--font-size)',
-    'lineHeight': 'var(--font-line-height)',
-    'letterSpacing': 'var(--font-letter-spacing)',
-    'fontWeight': 'var(--font-weight)',
-    'transform': `translateY(var(--font-descender-height))`,
-    'padding': '1px 0',
-    'margin': '0',
+    fontFamily: vars.font.family,
+    fontFeatureSettings: vars.font.featureSettings,
+    fontSize: vars.font.fontSize,
+    lineHeight: vars.font.lineHeight,
+    letterSpacing: vars.font.letterSpacing,
+    fontWeight: vars.font.fontWeight,
+    transform: `translateY(${vars.font.descenderHeight})`,
+    padding: '1px 0',
+    margin: '0',
 
-    '--font-icon-offset':
-      'calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)',
-    '--font-weight': 'var(--font-weight-regular)',
+    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,
+    },
 
-    '@nest': {
+    nest: {
       '&:before': {
         content: '""',
         display: 'block',
         height: 0,
-        marginTop: `calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)`,
+        marginTop: `calc((0px - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - 1px)`,
       },
 
       '&:after': {
@@ -37,34 +40,42 @@ export const primitive: StyleRules = {
         display: 'inline',
       },
 
-      // todo
+      // TODO
       // '& svg:not([data-sanity-icon])': {
       //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
       //   margin: 'var(--custom-icon-offset)',
       // },
 
       '& [data-sanity-icon]': {
-        fontSize: 'var(--font-icon-size)',
-        margin: 'var(--font-icon-offset)',
+        fontSize: vars.font.iconSize,
+        margin: vars.font.iconOffset,
         vectorEffect: 'non-scaling-stroke',
       },
     },
   },
 
   '.font-regular': {
-    '--font-weight': 'var(--font-weight-regular)',
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.regular,
+    },
   },
 
   '.font-medium': {
-    '--font-weight': 'var(--font-weight-medium)',
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.medium,
+    },
   },
 
   '.font-semibold': {
-    '--font-weight': 'var(--font-weight-semibold)',
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.semibold,
+    },
   },
 
   '.font-bold': {
-    '--font-weight': 'var(--font-weight-bold)',
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.bold,
+    },
   },
 }
 

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

@@ -1,7 +1,7 @@
-import {composeClassNames} from '../../composeClassNames'
-import {FontStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FontStyleProps} from './types'
 
 /** @public */
 export function font(props: FontStyleProps): string | undefined {
-  return composeClassNames('font', props.weight && `font-${props.weight}`)
+  return _scopeClassNames('font', props.weight && `font-${props.weight}`)
 }

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

@@ -1,4 +1,4 @@
-import {FontWeight} from '@sanity/ui/theme'
+import type {FontWeight} from '@sanity/ui/theme'
 
 /** @public */
 export interface FontStyleProps {

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

@@ -1,8 +1,8 @@
 import {SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

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

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {GapStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {GapStyleProps} from './types'
 
 /** @public */
 export function gap(props: GapStyleProps): string | undefined {
-  return composeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
+  return _scopeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
 }

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

@@ -1,6 +1,6 @@
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface GapStyleProps {

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {GridStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {GridStyleProps} from './types'
 
 /** @internal */
 export function grid(props: GridStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('auto-cols', props.autoCols),
     _resp('auto-flow', props.autoFlow),
     _resp('auto-rows', props.autoRows),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {GridItemStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {GridItemStyleProps} from './types'
 
 /** @internal */
 export function gridItem(props: GridItemStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp(`col`, props.column),
     _resp(`col-start`, props.columnStart),
     _resp(`col-end`, props.columnEnd),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type GridItemColumn = 'auto' | 'full' | number

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

@@ -1,6 +1,6 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {ResponsiveProp} from '../../types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type BoxHeight = 'stretch' | 'fill'
@@ -12,5 +12,5 @@ export interface HeightStyleProps {
 
 /** @internal */
 export function height(props: HeightStyleProps): string | undefined {
-  return composeClassNames(_resp(`h`, props.height))
+  return _scopeClassNames(_resp(`h`, props.height))
 }

package/src/css/aspects/index.ts

@@ -1,4 +1,5 @@
 export * from './border'
+export * from './boxSizing'
 export * from './display'
 export * from './flex'
 export * from './flexItem'

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {InsetStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {InsetStyleProps} from './types'
 
 /** @internal */
 export function inset(props: InsetStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('inset', props.inset),
     _resp('top', props.insetTop),
     _resp('right', props.insetRight),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Inset = 0

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

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

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {MarginStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {MarginStyleProps} from './types'
 
 /** @internal */
 export function margin(props: MarginStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('m', props.margin),
     _resp('mx', props.marginX),
     _resp('my', props.marginY),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface MarginStyleProps {

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

@@ -1,6 +1,6 @@
 import {_responsiveRule} from '../../_responsiveRule'
+import {vars} from '../../theme'
 import type {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
 
 const util: StyleRules = {}
 

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

@@ -1,7 +1,8 @@
 import {_resp} from '../../_resp'
-import {MaxWidthStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {MaxWidthStyleProps} from './types'
 
 /** @internal */
-export function maxWidth(props: MaxWidthStyleProps): string {
-  return _resp('max-w', props.maxWidth) ?? ''
+export function maxWidth(props: MaxWidthStyleProps): string | undefined {
+  return _scopeClassNames(_resp('max-w', props.maxWidth) ?? '')
 }

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

@@ -1,6 +1,6 @@
-import {ContainerWidth} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface MaxWidthStyleProps {

package/src/css/aspects/minWidth/minWidth.ts

@@ -1,7 +1,8 @@
 import {_resp} from '../../_resp'
-import {MinWidthStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {MinWidthStyleProps} from './types'
 
 /** @internal */
-export function minWidth(props: MinWidthStyleProps): string {
-  return _resp('min-w', props.minWidth) ?? ''
+export function minWidth(props: MinWidthStyleProps): string | undefined {
+  return _scopeClassNames(_resp('min-w', props.minWidth) ?? '')
 }

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {OverflowStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {OverflowStyleProps} from './types'
 
 /** @internal */
 export function overflow(props: OverflowStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp(`overflow`, props.overflow),
     _resp(`overflow-x`, props.overflowX),
     _resp(`overflow-y`, props.overflowY),

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type BoxOverflow = 'visible' | 'hidden' | 'auto'

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

@@ -1,11 +1,8 @@
-// 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'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

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

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {PaddingStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {PaddingStyleProps} from './types'
 
 /** @internal */
 export function padding(props: PaddingStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('p', props.padding),
     _resp('px', props.paddingX),
     _resp('py', props.paddingY),

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

@@ -1,6 +1,6 @@
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface PaddingStyleProps {

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

@@ -1,7 +1,7 @@
-import {composeClassNames} from '../../composeClassNames'
-import {PointerEventsStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {PointerEventsStyleProps} from './types'
 
 /** @internal */
 export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
+  return _scopeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
 }