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

package/src/css/primitives/_arrow/_arrow.ts

@@ -1,14 +1,14 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 /** @internal */
 export function _arrow(): string | undefined {
-  return _comp('arrow')
+  return composeClassNames('arrow')
 }
 
-export function _arrowStroke(): string | undefined {
-  return _comp('arrow-stroke')
+export function _arrowStroke(): string {
+  return 'arrow-stroke'
 }
 
-export function _arrowShape(): string | undefined {
-  return _comp('arrow-shape')
+export function _arrowShape(): string {
+  return 'arrow-shape'
 }

package/src/css/primitives/_arrow/{_arrow.style.ts → rules.ts}

@@ -1,8 +1,8 @@
-import {Style, StyleRules} from '../../types'
+import {Rules} from '../../types'
 import {vars} from '../../vars'
 
-const primitive: StyleRules = {
-  '.arrow': {
+export const _arrowRules: Rules = {
+  'arrow': {
     'position': 'absolute',
 
     // todo: replace with vars?
@@ -61,13 +61,11 @@ const primitive: StyleRules = {
     },
   },
 
-  '.arrow-stroke': {
+  'arrow-stroke': {
     stroke: vars.color.shadow.outline,
   },
 
-  '.arrow-shape': {
+  'arrow-shape': {
     fill: vars.color.bg,
   },
 }
-
-export const _arrowStyle: Style = {layers: {primitive}}

package/src/css/primitives/_input/input.ts

@@ -1,25 +1,25 @@
-import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {radius, width} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
+import {radius, width} from '../../styles'
 import {InputStyleProps} from './types'
 
 /** @internal */
 export function _input(props: InputStyleProps): string | undefined {
-  return _comp(
-    'input',
-    props.border ? 'input-b' : undefined,
-    _resp('input', props.fontSize),
-    _resp('input-p', props.padding),
-    _resp('input-g', props.gap),
+  return composeClassNames(
+    `input`,
+    _resp(`input`, props.fontSize),
+    props.border && `input-b`,
+    _resp(`input-p`, props.padding),
+    _resp(`input-g`, props.gap),
     radius(props),
     width(props),
   )
 }
 
-export function _inputElement(): string | undefined {
-  return _comp('input-element')
+export function _inputElement(): string {
+  return 'input-element'
 }
 
-export function _inputPresentation(): string | undefined {
-  return _comp('input-presentation')
+export function _inputPresentation(): string {
+  return 'input-presentation'
 }

package/src/css/primitives/_input/{_input.style.ts → rules.ts}

@@ -1,15 +1,16 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
-import {Style, StyleRules} from '../../types'
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
 
-const primitive: StyleRules = {
-  '.input': {
+export const _inputRules: Rules = {
+  'input': {
     position: 'relative',
   },
 
-  '.input-b': {
+  'input-b': {
     '@nest': {
       '& .input-presentation': {
         boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
@@ -17,7 +18,7 @@ const primitive: StyleRules = {
     },
   },
 
-  '.input-element': {
+  'input-element': {
     '--color-input-fg': vars.color.tinted.default.fg[2],
     '--color-input-placeholder': vars.color.tinted.default.border[4],
 
@@ -44,7 +45,6 @@ const primitive: StyleRules = {
     'display': 'block',
     'boxSizing': 'border-box',
     'resize': 'none',
-    // @ts-expect-error - TODO: fix this
     'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
 
     '@nest': {
@@ -74,7 +74,7 @@ const primitive: StyleRules = {
     },
   },
 
-  '.input-presentation': {
+  'input-presentation': {
     [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
     [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
     [varNames.color.input.border]: vars.color.tinted.default.border[1],
@@ -132,11 +132,10 @@ const primitive: StyleRules = {
   },
 }
 
-// todo: make responsive
 for (const textSize of FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[textSize]
 
-  primitive[`.input-${textSize}`] = {
+  _inputRules[`input-${textSize}`] = {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
@@ -145,18 +144,20 @@ for (const textSize of FONT_TEXT_SIZE) {
   }
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-p-${space}`] = {
-    [varNames.input.padding]: vars.space[space],
-  }
+  Object.assign(
+    _inputRules,
+    responsiveRules(`input-p-${space}`, {
+      [varNames.input.padding]: vars.space[space],
+    }),
+  )
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-g-${space}`] = {
-    [varNames.input.gap]: vars.space[space],
-  }
+  Object.assign(
+    _inputRules,
+    responsiveRules(`input-g-${space}`, {
+      [varNames.input.gap]: vars.space[space],
+    }),
+  )
 }
-
-export const _inputStyle: Style = {layers: {primitive}}

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

@@ -1,6 +1,6 @@
 import {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {RadiusStyleProps, WidthStyleProps} from '../../aspects'
+import {RadiusStyleProps, WidthStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/_selectable/_contants.ts

@@ -1,7 +1,7 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

package/src/css/primitives/_selectable/{_selectable.style.ts → rules.ts}

@@ -1,12 +1,12 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
-import {Properties, Style, StyleRules} from '../../types'
+import {Properties, Rules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
 import {toneMap} from './_contants'
 
-const primitive: StyleRules = {
-  '.selectable': {
+export const _selectableRules: Rules = {
+  selectable: {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
 
@@ -22,7 +22,6 @@ const primitive: StyleRules = {
         font: 'inherit',
         textAlign: 'inherit',
         border: 0,
-        // @ts-expect-error - TODO: fix this
         width: ['-moz-available', '-webkit-fill-available', 'stretch'],
       },
 
@@ -80,8 +79,6 @@ const primitive: StyleRules = {
   },
 }
 
-export const _selectableStyle: Style = {layers: {primitive}}
-
 function buildSelectableTones(): Record<string, Properties> {
   const rules: Record<string, Properties> = {}
 

package/src/css/primitives/_selectable/selectable.ts

@@ -1,9 +1,9 @@
-import {_comp} from '../../_comp'
-import {radius} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles'
 import {toneMap} from './_contants'
 import {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _comp('selectable', toneMap[props.tone ?? 'default'], radius(props))
+  return composeClassNames('selectable', toneMap[props.tone ?? 'default'], radius(props))
 }

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

@@ -1,6 +1,6 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../aspects'
+import {RadiusStyleProps} from '../../styles'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {

package/src/css/primitives/avatar/avatar.ts

@@ -1,27 +1,27 @@
-import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
 import {AvatarStyleProps} from './types'
 
 export function avatar(props: AvatarStyleProps): string | undefined {
-  return _comp('avatar', props.color || 'gray', _resp('avatar', props.size))
+  return composeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
 export function avatarArrow(): string | undefined {
-  return _comp('avatar-arrow')
+  return composeClassNames('avatar-arrow')
 }
 
 export function avatarInitials(): string | undefined {
-  return _comp('avatar-initials')
+  return composeClassNames('avatar-initials')
 }
 
 export function avatarImage(): string | undefined {
-  return _comp('avatar-image')
+  return composeClassNames('avatar-image')
 }
 
 export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return _comp('avatar-counter', _resp('avatar', props.size))
+  return composeClassNames('avatar-counter', _resp('avatar', props.size))
 }
 
 export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return _comp('avatar-stack', _resp('avatar', props.size))
+  return composeClassNames('avatar-stack', _resp('avatar', props.size))
 }

package/src/css/primitives/badge/badge.ts

@@ -1,8 +1,8 @@
-import {_comp} from '../../_comp'
-import {radius} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles'
 import {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return _comp('badge', props.tone && `badge-${props.tone}`, radius(props))
+  return composeClassNames('badge', props.tone && `badge-${props.tone}`, radius(props))
 }

package/src/css/primitives/badge/rules.ts

@@ -0,0 +1,22 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import type {Rules} from '../../types'
+
+const badgeToneRules: Rules = {}
+
+for (const tone of THEME_COLOR_STATE_TONES) {
+  badgeToneRules[`badge-${tone}`] = {
+    '--color-bg': `var(--color-tinted-${tone}-bg-4)`,
+    '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
+  }
+}
+
+export const badgeRules: Rules = {
+  badge: {
+    backgroundColor: 'var(--color-bg)',
+    color: 'var(--color-fg)',
+    verticalAlign: 'top',
+  },
+
+  ...badgeToneRules,
+}

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

@@ -1,6 +1,6 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../aspects'
+import {RadiusStyleProps} from '../../styles'
 
 /** @public */
 export interface BadgeStyleProps extends RadiusStyleProps {

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

@@ -1,5 +1,5 @@
-import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
 import {
   border,
   display,
@@ -8,30 +8,27 @@ import {
   gap,
   grid,
   gridItem,
-  height,
   inset,
   margin,
   maxWidth,
-  minWidth,
   overflow,
   padding,
   pointerEvents,
   position,
   radius,
   width,
-} from '../../aspects'
+} from '../../styles'
 import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return _comp(
+  return composeClassNames(
     'box',
-    props.muted && 'muted', // todo: consider this naming
-
-    _resp(`box`, props.sizing),
+    props.muted && 'muted',
     border(props),
     display(props),
-    height(props),
+    _resp(`h`, props.height),
+    _resp(`box`, props.sizing),
     flex(props),
     flexItem(props),
     grid(props),
@@ -40,7 +37,6 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
-    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),

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

@@ -0,0 +1,28 @@
+import type {Rules} from '../../types'
+
+export const boxRules: Rules = {
+  'box': {
+    'minWidth': 0,
+    'minHeight': 0,
+
+    '@nest': {
+      '&:is(ul), &:is(ol)': {
+        listStyle: 'none',
+      },
+
+      '&.muted': {
+        backgroundColor: 'var(--color-muted-bg)',
+      },
+    },
+  },
+
+  // sizing
+
+  'box-content': {
+    boxSizing: 'content-box',
+  },
+
+  'box-border': {
+    boxSizing: 'border-box',
+  },
+}

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

@@ -6,18 +6,16 @@ import {
   GapStyleProps,
   GridItemStyleProps,
   GridStyleProps,
-  HeightStyleProps,
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
-  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
   WidthStyleProps,
-} from '../../aspects'
+} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -25,6 +23,11 @@ import {ResponsiveProp} from '../../types'
  */
 export type BoxSizing = 'content' | 'border'
 
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
 /** @public */
 export interface BoxStyleProps
   extends BorderStyleProps,
@@ -34,17 +37,16 @@ export interface BoxStyleProps
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
-    HeightStyleProps,
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
-    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
     WidthStyleProps {
+  height?: ResponsiveProp<BoxHeight>
   muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>

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

@@ -1,7 +1,7 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -1,6 +1,6 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 import {
   display,
   DisplayStyleProps,
@@ -10,7 +10,7 @@ import {
   RadiusStyleProps,
   width,
   WidthStyleProps,
-} from '../../aspects'
+} from '../../styles'
 import {toneMap, variantMap} from './_constants'
 
 export interface ButtonStyleProps
@@ -25,7 +25,7 @@ export interface ButtonStyleProps
 export function button(props: ButtonStyleProps): string | undefined {
   const {mode, tone} = props
 
-  return _comp(
+  return composeClassNames(
     'button',
     variantMap[mode ?? 'default'],
     toneMap[tone ?? 'default'],

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

@@ -9,12 +9,11 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
   for (const tone of THEME_COLOR_STATE_TONES) {
     if (mode === 'default') {
       buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        // 'boxShadow': 'none',
+        'boxShadow': 'none',
         '--color-bg': `var(--color-solid-${tone}-bg-0)`,
         '--color-border': `var(--color-solid-${tone}-border-1)`,
         '--color-fg': `var(--color-solid-${tone}-fg-0)`,
         '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
-        '--button-box-shadow': 'none',
 
         '@nest': {
           '&:not([data-disabled]):hover': {
@@ -55,7 +54,6 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
         '--color-border': `var(--color-tinted-${tone}-border-1)`,
         '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
         '--color-muted-fg': `var(--color-tinted-${tone}-fg-4)`,
-        '--button-box-shadow': 'none',
 
         '@nest': {
           '&:not([data-disabled]):hover': {
@@ -91,34 +89,27 @@ for (const mode of THEME_COLOR_BUTTON_MODES) {
 
     if (mode === 'ghost') {
       buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        '--color-bg': `var(--color-tinted-${tone}-bg-0)`,
-        '--color-border': `var(--color-tinted-${tone}-border-1)`,
+        '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
+        '--color-border': `var(--color-tinted-${tone}-border-0)`,
         '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
-        '--button-box-shadow': [
-          `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-          `inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)`,
-        ].join(','),
 
         '@nest': {
           '&:not([data-disabled]):hover': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
-            '--color-border': `var(--color-tinted-${tone}-border-2)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
+            '--color-border': `var(--color-tinted-${tone}-border-1)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&:not([data-disabled]):active': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&:not([data-disabled])[data-selected]': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
+            '--color-bg': `var(--color-tinted-${tone}-bg-3)`,
+            '--color-border': `var(--color-tinted-${tone}-border-2)`,
             '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
           },
 
           '&[data-disabled]': {
@@ -150,7 +141,7 @@ export const buttonRules: Rules = {
     'verticalAlign': 'top',
     'backgroundColor': 'var(--color-bg)',
     'color': 'var(--color-fg)',
-    'boxShadow': 'var(--button-box-shadow)',
+    'boxShadow': 'inset 0 0 0 var(--button-border-width) var(--color-border)',
 
     '@nest': {
       '&::-moz-focus-inner': {

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

@@ -1,8 +1,8 @@
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'transparent',
-  default: 'default',
+  transparent: 'canvas',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -1,14 +1,16 @@
-import {_comp} from '../../_comp'
-import {shadow} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
+import {shadow} from '../../styles'
+import {box} from '../box'
 import {toneMap} from './_constants'
 import {CardStyleProps} from './types'
 
 export function card(props: CardStyleProps): string | undefined {
-  return _comp(
+  return composeClassNames(
     props.scheme,
-    toneMap[props.tone ?? 'default'],
+    toneMap[props.tone ?? 'inherit'],
     'card',
     props.checkered && 'card-checkered',
+    box(props),
     shadow(props),
   )
 }