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

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

@@ -2,31 +2,26 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {AvatarStyleProps} from './types'
 
-export function avatar(props: AvatarStyleProps): string {
-  return composeClassNames(
-    'avatar',
-    `avatar-${props.color}`,
-    `avatar-arrow-${props.arrowPosition}`,
-    _resp('avatar', props.size),
-  )
+export function avatar(props: AvatarStyleProps): string | undefined {
+  return composeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
-export function avatarArrow(): string {
+export function avatarArrow(): string | undefined {
   return composeClassNames('avatar-arrow')
 }
 
-export function avatarInitials(): string {
+export function avatarInitials(): string | undefined {
   return composeClassNames('avatar-initials')
 }
 
-export function avatarBgStroke(): string {
-  return composeClassNames('avatar-bg-stroke')
+export function avatarImage(): string | undefined {
+  return composeClassNames('avatar-image')
 }
 
-export function avatarStroke(): string {
-  return composeClassNames('avatar-stroke')
+export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
+  return composeClassNames('avatar-counter', _resp('avatar', props.size))
 }
 
-export function avatarImage(): string {
-  return composeClassNames('avatar-image')
+export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
+  return composeClassNames('avatar-stack', _resp('avatar', props.size))
 }

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

@@ -1,26 +1,30 @@
-import {THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+
 import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
+import {Properties, Rules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
 
 export const avatarRules: Rules = {
   'avatar': {
-    'backgroundColor': 'var(--avatar-bg-color)',
+    'backgroundColor': vars.color.avatar.bg,
     'position': 'relative',
     'boxSizing': 'border-box',
     'userSelect': 'none',
-    'boxShadow': '0 0 0 1px var(--card-bg-color)',
+    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
+    'lineHeight': 0,
+
+    'width': vars.avatar.size,
+    'height': vars.avatar.size,
+    'borderRadius': vars.avatar.size,
 
     '@nest': {
       '&[data-status="inactive"]': {
         opacity: 0.5,
       },
 
-      '& > svg:not([hidden])': {
-        display: 'block',
-      },
-
-      /* &:is(button) */
-      '&[data-as="button"]': {
+      // &:is(button)
+      '&:is(button)': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         margin: 0,
@@ -31,25 +35,44 @@ export const avatarRules: Rules = {
         outline: 'none',
       },
 
-      '&[data-as="button"]:focus': {
-        // boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
+      '&:is(button):focus': {
+        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
+        outlineOffset: 'var(--avatar-focus-ring-offset)',
       },
 
-      '&[data-as="button"]:focus:not(:focus-visible)': {
+      '&:is(button):focus:not(:focus-visible)': {
         boxShadow: 'none',
       },
+
+      ':disabled &, [data-disabled] &': {
+        [varNames.color.avatar.bg]: vars.color.border,
+        [varNames.color.avatar.fg]: vars.color.bg,
+      },
+
+      ...THEME_COLOR_AVATAR_COLORS.reduce(
+        (acc, color) => {
+          return {
+            ...acc,
+            [`&.${color}`]: {
+              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
+            },
+          }
+        },
+        {} as Record<string, Properties>,
+      ),
     },
   },
 
-  ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
+  ...(AVATAR_SIZE.reduce((acc, size) => {
     return {
       ...acc,
-      [`avatar-${color}`]: {
-        '--avatar-bg-color': `var(--card-avatar-${color}-bg-color)`,
-        '--avatar-fg-color': `var(--card-avatar-${color}-fg-color)`,
-      },
+      ...responsiveRules(`avatar-${size}`, {
+        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
+        [varNames.avatar.size]: vars.avatar.sizes[size].size,
+      }),
     }
-  }, {} as Rules),
+  }, {} as Rules) as Rules),
 
   'avatar-arrow': {
     'position': 'absolute',
@@ -65,6 +88,7 @@ export const avatarRules: Rules = {
 
     '@nest': {
       '& > svg': {
+        display: 'block',
         width: '11px',
         height: '7px',
         position: 'absolute',
@@ -73,118 +97,80 @@ export const avatarRules: Rules = {
         transform: 'translateX(-6px)',
       },
 
-      '& > svg:not([hidden])': {
-        display: 'block',
-      },
-
-      '.arrow-position-inside > &': {
+      '[data-arrow-position="inside"] > &': {
         transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
         opacity: 0,
       },
 
-      '.arrow-position-top > &': {
+      '[data-arrow-position="top"] > &': {
         opacity: 1,
         transform: 'rotate(0deg)',
       },
 
-      '.arrow-position-bottom > &': {
+      '[data-arrow-position="bottom"] > &': {
         opacity: 1,
         transform: 'rotate(-180deg)',
       },
     },
   },
 
-  ...responsiveRules('avatar-0', {
-    'width': `var(--avatar-0-size)`,
-    'height': `var(--avatar-0-size)`,
-    'borderRadius': `var(--avatar-0-size)`,
-
+  'avatar-image': {
     '@nest': {
-      '& > svg': {
-        width: `var(--avatar-0-size)`,
-        height: `var(--avatar-0-size)`,
-        borderRadius: `var(--avatar-0-size)`,
+      '& > img': {
+        display: 'block',
+        position: 'absolute',
+        width: vars.avatar.size,
+        height: vars.avatar.size,
+        borderRadius: vars.avatar.size,
       },
-    },
-  }),
-
-  ...responsiveRules('avatar-1', {
-    'width': `var(--avatar-1-size)`,
-    'height': `var(--avatar-1-size)`,
-    'borderRadius': `var(--avatar-1-size)`,
 
-    '@nest': {
-      '& > svg': {
-        width: `var(--avatar-1-size)`,
-        height: `var(--avatar-1-size)`,
-        borderRadius: `var(--avatar-1-size)`,
+      '& > span': {
+        display: 'block',
+        position: 'absolute',
+        width: vars.avatar.size,
+        height: vars.avatar.size,
+        borderRadius: vars.avatar.size,
+        boxShadow: [
+          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+          `inset 0 0 0 1.75px ${vars.color.bg}`,
+        ].join(', '),
       },
-    },
-  }),
 
-  ...responsiveRules('avatar-2', {
-    'width': `var(--avatar-2-size)`,
-    'height': `var(--avatar-2-size)`,
-    'borderRadius': `var(--avatar-2-size)`,
-
-    '@nest': {
-      '& > svg': {
-        width: `var(--avatar-2-size)`,
-        height: `var(--avatar-2-size)`,
-        borderRadius: `var(--avatar-2-size)`,
+      '[data-image-error] &': {
+        display: 'none',
       },
     },
-  }),
+  },
 
-  ...responsiveRules('avatar-3', {
-    'width': `var(--avatar-3-size)`,
-    'height': `var(--avatar-3-size)`,
-    'borderRadius': `var(--avatar-3-size)`,
+  'avatar-initials': {
+    color: vars.color.avatar.fg,
+    borderRadius: vars.avatar.size,
+  },
+
+  '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': {
-      '& > svg': {
-        width: `var(--avatar-3-size)`,
-        height: `var(--avatar-3-size)`,
-        borderRadius: `var(--avatar-3-size)`,
+      '&&': {
+        minWidth: vars.avatar.size,
       },
-    },
-  }),
-
-  'avatar-initials': {
-    'width': '100%',
-    'height': '100%',
-    'color': 'var(--avatar-fg-color)',
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'textTransform': 'uppercase',
-    'textAlign': 'center',
-    'borderRadius': '50%',
 
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'flex',
+      '[data-hide-inner-stroke] &': {
+        boxShadow: `0 0 0 1px ${vars.color.bg}`,
       },
     },
   },
 
-  'avatar-bg-stroke': {
-    strokeWidth: '4px',
-    stroke: 'var(--card-bg-color)',
-  },
-
-  'avatar-stroke': {
-    'strokeWidth': '2px',
-    'stroke': 'var(--avatar-bg-color)',
-
+  'avatar-stack': {
     '@nest': {
-      '[data-status="editing"] &': {
-        strokeDasharray: '2 4',
-        strokeLinecap: 'round',
+      '& > div + div': {
+        marginLeft: vars.avatar.distance,
       },
     },
   },
-
-  'avatar-image': {
-    position: 'relative',
-  },
 }

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

@@ -1,9 +1,8 @@
-import {AvatarPosition} from '@sanity/ui'
 import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+
 import {ResponsiveProp} from '../../types'
 
 export interface AvatarStyleProps {
   color: ThemeColorAvatarColorKey
   size: ResponsiveProp<AvatarSize>
-  arrowPosition?: AvatarPosition
 }

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

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

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

@@ -1,25 +1,22 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
 import type {Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+
+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: vars.color.badge.bg,
-    color: vars.color.badge.fg,
+    backgroundColor: 'var(--color-bg)',
+    color: 'var(--color-fg)',
     verticalAlign: 'top',
   },
 
-  ...THEME_COLOR_STATE_TONES.reduce(
-    (acc, tone) => ({
-      ...acc,
-      [`badge-${tone}`]: {
-        [varNames.color.badge.bg]: vars.color.badge[tone].bg,
-        [varNames.color.badge.dot]: vars.color.badge[tone].dot,
-        [varNames.color.badge.fg]: vars.color.badge[tone].fg,
-        [varNames.color.badge.icon]: vars.color.badge[tone].icon,
-      },
-    }),
-    {} as Rules,
-  ),
+  ...badgeToneRules,
 }

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

@@ -1,7 +1,7 @@
-// import {BadgeTone} from '@sanity/ui'
-import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
+import {RadiusStyleProps} from '../../styles'
+
 /** @public */
 export interface BadgeStyleProps extends RadiusStyleProps {
   tone: ThemeColorStateToneKey

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

@@ -1,24 +1,32 @@
 import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
-import {flex} from '../../styles/flex'
-import {flexItem} from '../../styles/flexItem'
-import {gap} from '../../styles/gap'
-import {grid} from '../../styles/grid'
-import {gridItem} from '../../styles/gridItem'
-import {margin} from '../../styles/margin'
-import {maxWidth} from '../../styles/maxWidth'
-import {overflow} from '../../styles/overflow'
-import {padding} from '../../styles/padding'
-import {pointerEvents} from '../../styles/pointerEvents'
-import {position} from '../../styles/position'
-import {width} from '../../styles/width'
+import {
+  border,
+  display,
+  flex,
+  flexItem,
+  gap,
+  grid,
+  gridItem,
+  inset,
+  margin,
+  maxWidth,
+  overflow,
+  padding,
+  pointerEvents,
+  position,
+  radius,
+  width,
+} from '../../styles'
 import {BoxStyleProps} from './types'
 
 /** @public */
-export function box(props: BoxStyleProps): string {
+export function box(props: BoxStyleProps): string | undefined {
   return composeClassNames(
     'box',
-    _resp(undefined, props.display),
+    props.muted && 'muted',
+    border(props),
+    display(props),
     _resp(`h`, props.height),
     _resp(`box`, props.sizing),
     flex(props),
@@ -26,6 +34,7 @@ export function box(props: BoxStyleProps): string {
     grid(props),
     gridItem(props),
     gap(props),
+    inset(props),
     margin(props),
     maxWidth(props),
     props.outline && `outline-${props.outline}`,
@@ -33,6 +42,7 @@ export function box(props: BoxStyleProps): string {
     padding(props),
     pointerEvents(props),
     position(props),
+    radius(props),
     width(props),
   )
 }

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

@@ -6,10 +6,13 @@ export const boxRules: Rules = {
     'minHeight': 0,
 
     '@nest': {
-      // 'ul.&, ol.&': {
-      '&[data-as="ul"], &[data-as="ol"]': {
+      '&:is(ul), &:is(ol)': {
         listStyle: 'none',
       },
+
+      '&.muted': {
+        backgroundColor: 'var(--color-muted-bg)',
+      },
     },
   },
 

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

@@ -1,15 +1,21 @@
-import {GridStyleProps} from '@sanity/ui/css'
-import {FlexStyleProps} from '../../styles/flex'
-import {FlexItemStyleProps} from '../../styles/flexItem'
-import {GapStyleProps} from '../../styles/gap'
-import {GridItemStyleProps} from '../../styles/gridItem'
-import {MarginStyleProps} from '../../styles/margin'
-import {MaxWidthStyleProps} from '../../styles/maxWidth'
-import {OverflowStyleProps} from '../../styles/overflow'
-import {PaddingStyleProps} from '../../styles/padding'
-import {PointerEventsStyleProps} from '../../styles/pointerEvents'
-import {PositionStyleProps} from '../../styles/position'
-import {WidthStyleProps} from '../../styles/width'
+import {
+  BorderStyleProps,
+  DisplayStyleProps,
+  FlexItemStyleProps,
+  FlexStyleProps,
+  GapStyleProps,
+  GridItemStyleProps,
+  GridStyleProps,
+  InsetStyleProps,
+  MarginStyleProps,
+  MaxWidthStyleProps,
+  OverflowStyleProps,
+  PaddingStyleProps,
+  PointerEventsStyleProps,
+  PositionStyleProps,
+  RadiusStyleProps,
+  WidthStyleProps,
+} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -17,11 +23,6 @@ import {ResponsiveProp} from '../../types'
  */
 export type BoxSizing = 'content' | 'border'
 
-/**
- * @public
- */
-export type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
 /**
  * @public
  */
@@ -29,20 +30,24 @@ export type BoxHeight = 'stretch' | 'fill'
 
 /** @public */
 export interface BoxStyleProps
-  extends FlexStyleProps,
+  extends BorderStyleProps,
+    DisplayStyleProps,
+    FlexStyleProps,
     FlexItemStyleProps,
     GapStyleProps,
     GridStyleProps,
     GridItemStyleProps,
+    InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
+    RadiusStyleProps,
     WidthStyleProps {
-  display?: ResponsiveProp<Display>
   height?: ResponsiveProp<BoxHeight>
+  muted?: boolean
   outline?: 'none'
   sizing?: ResponsiveProp<BoxSizing>
 }

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

@@ -0,0 +1,17 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
+  default: 'surface',
+  neutral: 'neutral',
+  suggest: 'suggest',
+  primary: 'accent',
+  positive: 'positive',
+  caution: 'caution',
+  critical: 'critical',
+} as const
+
+export const variantMap: Record<ThemeColorButtonModeKey, string | undefined> = {
+  default: 'solid',
+  ghost: 'ghost',
+  bleed: 'tinted',
+} as const

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

@@ -1,26 +1,41 @@
-import {ButtonMode, ButtonTone} from '@sanity/ui'
-import {WidthStyleProps} from '@sanity/ui/css'
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
 import {composeClassNames} from '../../composeClassNames'
-import {radius, RadiusStyleProps} from '../../styles/radius'
-import {width} from '../../styles/width'
+import {
+  display,
+  DisplayStyleProps,
+  flexItem,
+  FlexItemStyleProps,
+  radius,
+  RadiusStyleProps,
+  width,
+  WidthStyleProps,
+} from '../../styles'
+import {toneMap, variantMap} from './_constants'
 
-export interface ButtonStyleProps extends RadiusStyleProps, WidthStyleProps {
-  mode?: ButtonMode
-  tone?: ButtonTone
+export interface ButtonStyleProps
+  extends DisplayStyleProps,
+    FlexItemStyleProps,
+    RadiusStyleProps,
+    WidthStyleProps {
+  mode?: ThemeColorButtonModeKey
+  tone?: ThemeColorStateToneKey
 }
 
-export function button(props: ButtonStyleProps): string {
-  const {mode = 'default', tone = 'default'} = props
+export function button(props: ButtonStyleProps): string | undefined {
+  const {mode, tone} = props
 
   return composeClassNames(
     'button',
-    `button-mode-${mode}`,
-    `button-tone-${tone}`,
+    variantMap[mode ?? 'default'],
+    toneMap[tone ?? 'default'],
+    display(props),
+    flexItem(props),
     radius(props),
     width(props),
   )
 }
 
-export function buttonLoadingBox(): string {
+export function buttonLoadingBox(): string | undefined {
   return 'button-loading-box'
 }