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

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

@@ -1,26 +1,25 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+import {AVATAR_COLORS, AVATAR_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.avatar': {
     [varNames.color.fg]: vars.color.avatar.fg,
 
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
+    backgroundColor: vars.color.avatar.bg,
+    position: 'relative',
+    boxSizing: 'border-box',
+    userSelect: 'none',
+    boxShadow: `0 0 0 1px ${vars.color.bg}`,
+    lineHeight: 0,
 
-    'width': vars.avatar.size,
-    'height': vars.avatar.size,
-    'borderRadius': vars.avatar.size,
+    width: vars.avatar.size,
+    height: vars.avatar.size,
+    borderRadius: vars.avatar.size,
 
-    '@nest': {
+    nest: {
       'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
@@ -33,8 +32,8 @@ const primitive: StyleRules = {
       },
 
       'button&:focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
+        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.avatar.focusRing.offset,
       },
 
       'button&:focus:not(:focus-visible)': {
@@ -46,7 +45,7 @@ const primitive: StyleRules = {
         [varNames.color.avatar.fg]: vars.color.bg,
       },
 
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
+      ...AVATAR_COLORS.reduce(
         (acc, color) => {
           return {
             ...acc,
@@ -62,18 +61,18 @@ const primitive: StyleRules = {
   },
 
   '.avatar-arrow': {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '@nest': {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    opacity: 0,
+    transition: 'all 0.2s linear',
+    transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+
+    nest: {
       '& > svg': {
         display: 'block',
         width: '11px',
@@ -102,7 +101,7 @@ const primitive: StyleRules = {
   },
 
   '.avatar-image': {
-    '@nest': {
+    nest: {
       '& > img': {
         display: 'block',
         position: 'absolute',
@@ -135,14 +134,14 @@ const primitive: StyleRules = {
   },
 
   '.avatar-counter': {
-    'color': vars.color.fg,
-    'backgroundColor': vars.color.bg,
-    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    'userSelect': 'none',
-    'borderRadius': vars.avatar.size,
-    'height': vars.avatar.size,
-
-    '@nest': {
+    color: vars.color.fg,
+    backgroundColor: vars.color.bg,
+    boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
+    userSelect: 'none',
+    borderRadius: vars.avatar.size,
+    height: vars.avatar.size,
+
+    nest: {
       '&&': {
         minWidth: vars.avatar.size,
       },
@@ -154,7 +153,7 @@ const primitive: StyleRules = {
   },
 
   '.avatar-stack': {
-    '@nest': {
+    nest: {
       '& > div + div': {
         marginLeft: vars.avatar.distance,
       },

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

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

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

@@ -1,9 +1,9 @@
-import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {AvatarColor, AvatarSize} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface AvatarStyleProps {
-  color: ThemeColorAvatarColorKey
+  color: AvatarColor
   size: ResponsiveProp<AvatarSize>
 }

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

@@ -1,8 +1,7 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
-import {Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.badge': {

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

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

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

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

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

@@ -1,12 +1,12 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.box': {
-    // todo: move to aspects
-    'minHeight': 0,
+    // TODO: move to aspects
+    minHeight: 0,
 
-    '@nest': {
+    nest: {
       'iframe&': {
         border: 'none',
       },
@@ -20,16 +20,6 @@ const primitive: StyleRules = {
       },
     },
   },
-
-  // sizing
-
-  '.box-content': {
-    boxSizing: 'content-box',
-  },
-
-  '.box-border': {
-    boxSizing: 'border-box',
-  },
 }
 
 export const boxStyle: Style = {layers: {primitive}}

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

@@ -1,7 +1,8 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {
   border,
+  boxSizing,
   display,
   flex,
   flexItem,
@@ -21,16 +22,14 @@ import {
   textAlign,
   width,
 } from '../../aspects'
-import {BoxStyleProps} from './types'
+import type {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return _comp(
-    'box',
-    props.muted && 'muted', // todo: consider this naming
-
-    _resp(`box`, props.sizing),
+  return _composeClassNames(
+    _scopeClassNames('box', props.muted && 'muted', props.outline && `outline-${props.outline}`),
     border(props),
+    boxSizing({boxSizing: props.sizing}),
     display(props),
     height(props),
     flex(props),
@@ -42,7 +41,6 @@ export function box(props: BoxStyleProps): string | undefined {
     margin(props),
     maxWidth(props),
     minWidth(props),
-    props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),
     pointerEvents(props),

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

@@ -1,5 +1,6 @@
-import {
+import type {
   BorderStyleProps,
+  BoxSizingStyleProps,
   DisplayStyleProps,
   FlexItemStyleProps,
   FlexStyleProps,
@@ -19,10 +20,6 @@ import {
   TextAlignStyleProps,
   WidthStyleProps,
 } from '../../aspects'
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export type BoxSizing = 'content' | 'border'
 
 /** @public */
 export interface BoxStyleProps
@@ -47,5 +44,5 @@ export interface BoxStyleProps
     WidthStyleProps {
   muted?: boolean
   outline?: 'none'
-  sizing?: ResponsiveProp<BoxSizing>
+  sizing?: BoxSizingStyleProps['boxSizing']
 }