@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,201 +0,0 @@
-import {AVATAR_COLORS, AVATAR_SIZE, type AvatarColor, type AvatarSize} from '@sanity/ui/theme'
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-
-export const stack: string = _style(layers.primitives, {})
-
-globalStyle(`${stack} > * + *`, {
-  '@layer': {
-    [layers.primitives]: {
-      marginLeft: vars.avatar.distance,
-    },
-  },
-})
-
-export const root: string = _style(layers.primitives, {
-  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,
-
-  vars: {
-    [vars.color.fg]: vars.color.avatar.fg,
-  },
-
-  selectors: {
-    '&:not([hidden])': {
-      display: 'block',
-    },
-
-    'button.&': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      margin: 0,
-      padding: 0,
-      border: 0,
-      font: 'inherit',
-      color: 'inherit',
-      outline: 'none',
-    },
-
-    'button.&:focus': {
-      outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
-      outlineOffset: vars.avatar.focusRing.offset,
-    },
-
-    'button.&:focus:not(:focus-visible)': {
-      boxShadow: 'none',
-    },
-
-    ':disabled &, [data-disabled] &': {
-      vars: {
-        [vars.color.avatar.bg]: vars.color.border,
-        [vars.color.avatar.fg]: vars.color.bg,
-      },
-    },
-  },
-})
-
-export const colors: Record<AvatarColor, string> = {
-  ..._fromEntries(
-    AVATAR_COLORS.map((c) => [
-      c,
-      _style(layers.primitives, {
-        vars: {
-          [vars.color.avatar.bg]: vars.color.avatar[c].bg,
-          [vars.color.avatar.fg]: vars.color.avatar[c].fg,
-        },
-      }),
-    ]),
-  ),
-}
-
-export const arrow: string = _style(layers.primitives, {
-  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,
-
-  selectors: {
-    '[data-arrow-position="inside"] > &': {
-      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-      opacity: 0,
-    },
-
-    '[data-arrow-position="top"] > &': {
-      opacity: 1,
-      transform: 'rotate(0deg)',
-    },
-
-    '[data-arrow-position="bottom"] > &': {
-      opacity: 1,
-      transform: 'rotate(-180deg)',
-    },
-  },
-})
-
-export const arrowSvg: string = _style(layers.primitives, {
-  display: 'block',
-  width: '11px',
-  height: '7px',
-  position: 'absolute',
-  top: '-5px',
-  left: '50%',
-  transform: 'translateX(-6px)',
-})
-
-export const image: string = _style(layers.primitives, {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: vars.avatar.size,
-  height: vars.avatar.size,
-  borderRadius: 'inherit',
-
-  selectors: {
-    '[data-image-error] &': {
-      display: 'none',
-    },
-  },
-})
-
-globalStyle(`${image} img`, {
-  '@layer': {
-    [layers.primitives]: {
-      display: 'block',
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-      borderRadius: 'inherit',
-    },
-  },
-})
-
-export const imageOutline: string = _style(layers.primitives, {
-  display: 'block',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: vars.avatar.size,
-  height: vars.avatar.size,
-  borderRadius: 'inherit',
-  boxShadow: [
-    `inset 0 0 0 1px ${vars.color.avatar.bg}`,
-    `inset 0 0 0 1.75px ${vars.color.bg}`,
-  ].join(', '),
-})
-
-export const initials: string = _style(layers.primitives, {
-  color: vars.color.avatar.fg,
-  borderRadius: 'inherit',
-})
-
-export const counter: string = _style(layers.primitives, {
-  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,
-
-  selectors: {
-    '&&': {
-      minWidth: vars.avatar.size,
-    },
-
-    '[data-hide-inner-stroke] &': {
-      boxShadow: `0 0 0 1px ${vars.color.bg}`,
-    },
-  },
-})
-
-export const scale: ResponsiveRuleOptions<AvatarSize> = {
-  ..._fromEntries(
-    AVATAR_SIZE.map((s) => [
-      s,
-      _responsiveStyle(layers.primitives, {
-        vars: {
-          [vars.avatar.distance]: vars.avatar.scale[s].distance,
-          [vars.avatar.size]: vars.avatar.scale[s].size,
-        },
-      }),
-    ]),
-  ),
-}

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

@@ -1,68 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {flex} from '../../props/flex/flex'
-import {
-  arrow,
-  arrowSvg,
-  colors,
-  counter,
-  image,
-  imageOutline,
-  initials,
-  root,
-  scale,
-  stack,
-} from './avatar.css'
-import type {AvatarStyleProps} from './types'
-
-/** @public */
-export function avatar(props: AvatarStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    colors[props.color ?? 'gray'],
-    _responsiveClassName(scale, props.size ?? 1),
-    flex({flex: 'none'}),
-  )
-}
-
-/** @public */
-export function avatarArrow(): string | undefined {
-  return arrow
-}
-
-/** @public */
-export function avatarArrowSvg(): string | undefined {
-  return arrowSvg
-}
-
-/** @public */
-export function avatarInitials(): string | undefined {
-  return initials
-}
-
-/** @public */
-export function avatarImage(): string | undefined {
-  return image
-}
-
-/** @public */
-export function avatarImageOutline(): string | undefined {
-  return imageOutline
-}
-
-/** @public */
-export function avatarCounter(props: {
-  className?: string
-  size?: AvatarStyleProps['size']
-}): string | undefined {
-  return _composeClassNames(props.className, counter, _responsiveClassName(scale, props.size ?? 1))
-}
-
-/** @public */
-export function avatarStack(props: {
-  className?: string
-  size?: AvatarStyleProps['size']
-}): string | undefined {
-  return _composeClassNames(props.className, stack, _responsiveClassName(scale, props.size ?? 1))
-}

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

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

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

@@ -1,27 +0,0 @@
-import {ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  backgroundColor: vars.color.bg,
-  color: vars.color.fg,
-  whiteSpace: 'nowrap',
-})
-
-export const tones: Record<ElementTone, string> = {
-  ..._fromEntries(
-    ELEMENT_TONES.map((t) => [
-      t,
-      _style(layers.primitives, {
-        vars: {
-          [vars.color.bg]: vars.color.tinted[t].bg[2],
-          [vars.color.border]: vars.color.tinted[t].border[2],
-          [vars.color.fg]: vars.color.tinted[t].fg[3],
-        },
-      }),
-    ]),
-  ),
-}

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

@@ -1,8 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root, tones} from './badge.css'
-import type {BadgeStyleProps} from './types'
-
-/** @public */
-export function badge(props: BadgeStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, tones[props.tone ?? 'default'])
-}

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

@@ -1,13 +0,0 @@
-import type {ElementTone, FontTextSize} from '@sanity/ui/theme'
-
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export type BadgeTone = ElementTone
-
-/** @public */
-export interface BadgeStyleProps {
-  className?: string
-  fontSize?: ResponsiveProp<FontTextSize>
-  tone?: BadgeTone
-}

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

@@ -1,19 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  selectors: {
-    'iframe.&': {
-      border: 'none',
-    },
-
-    'ul.&, ol.&': {
-      listStyle: 'none',
-    },
-  },
-})
-
-export const muted: string = _style(layers.primitives, {
-  backgroundColor: vars.color.muted.bg,
-})

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

@@ -1,82 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {alignItems} from '../../props/alignItems/alignItems'
-import {border} from '../../props/border/border'
-import {boxSizing} from '../../props/boxSizing/boxSizing'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {flexDirection} from '../../props/flexDirection/flexDirection'
-import {flexWrap} from '../../props/flexWrap/flexWrap'
-import {gap} from '../../props/gap/gap'
-import {gridAutoColumns} from '../../props/gridAutoColumns/gridAutoColumns'
-import {gridAutoFlow} from '../../props/gridAutoFlow/gridAutoFlow'
-import {gridAutoRows} from '../../props/gridAutoRows/gridAutoRows'
-import {gridColumn} from '../../props/gridColumn/gridColumn'
-import {gridColumnEnd} from '../../props/gridColumnEnd/gridColumnEnd'
-import {gridColumnStart} from '../../props/gridColumnStart/gridColumnStart'
-import {gridRow} from '../../props/gridRow/gridRow'
-import {gridRowEnd} from '../../props/gridRowEnd/gridRowEnd'
-import {gridRowStart} from '../../props/gridRowStart/gridRowStart'
-import {gridTemplateColumns} from '../../props/gridTemplateColumns/gridTemplateColumns'
-import {gridTemplateRows} from '../../props/gridTemplateRows/gridTemplateRows'
-import {height} from '../../props/height/height'
-import {inset} from '../../props/inset/inset'
-import {justifyContent} from '../../props/justifyContent/justifyContent'
-import {margin} from '../../props/margin/margin'
-import {maxWidth} from '../../props/maxWidth/maxWidth'
-import {minHeight} from '../../props/minHeight/minHeight'
-import {minWidth} from '../../props/minWidth/minWidth'
-import {outline} from '../../props/outline/outline'
-import {overflow} from '../../props/overflow/overflow'
-import {padding} from '../../props/padding/padding'
-import {pointerEvents} from '../../props/pointerEvents/pointerEvents'
-import {position} from '../../props/position/position'
-import {radius} from '../../props/radius/radius'
-import {shadow} from '../../props/shadow/shadow'
-import {textAlign} from '../../props/textAlign/textAlign'
-import {width} from '../../props/width/width'
-import {muted, root} from './box.css'
-import type {BoxStyleProps} from './types'
-
-/** @public */
-export function box(props: BoxStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    props.muted && muted,
-    alignItems(props),
-    border(props),
-    boxSizing({boxSizing: props.sizing}),
-    display(props),
-    height(props),
-    flex(props),
-    flexDirection(props),
-    flexWrap(props),
-    gap(props),
-    gridAutoColumns(props),
-    gridAutoFlow(props),
-    gridAutoRows(props),
-    gridColumn(props),
-    gridColumnEnd(props),
-    gridColumnStart(props),
-    gridRow(props),
-    gridRowEnd(props),
-    gridRowStart(props),
-    gridTemplateColumns(props),
-    gridTemplateRows(props),
-    inset(props),
-    justifyContent(props),
-    margin(props),
-    maxWidth(props),
-    minHeight(props),
-    minWidth(props),
-    overflow(props),
-    padding(props),
-    pointerEvents(props),
-    position(props),
-    outline(props),
-    radius(props),
-    shadow(props),
-    textAlign(props),
-    width(props),
-  )
-}

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

@@ -1,75 +0,0 @@
-import type {AlignItemsStyleProps} from '../../props/alignItems/types'
-import type {BorderStyleProps} from '../../props/border/types'
-import type {BoxSizingStyleProps} from '../../props/boxSizing/types'
-import type {DisplayStyleProps} from '../../props/display/types'
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {FlexDirectionStyleProps} from '../../props/flexDirection/types'
-import type {FlexWrapStyleProps} from '../../props/flexWrap/types'
-import type {GapStyleProps} from '../../props/gap/types'
-import type {GridAutoColumnsStyleProps} from '../../props/gridAutoColumns/types'
-import type {GridAutoFlowStyleProps} from '../../props/gridAutoFlow/types'
-import type {GridAutoRowsStyleProps} from '../../props/gridAutoRows/types'
-import type {GridColumnStyleProps} from '../../props/gridColumn/types'
-import type {GridColumnEndStyleProps} from '../../props/gridColumnEnd/types'
-import type {GridColumnStartStyleProps} from '../../props/gridColumnStart/types'
-import type {GridRowStyleProps} from '../../props/gridRow/types'
-import type {GridRowEndStyleProps} from '../../props/gridRowEnd/types'
-import type {GridRowStartStyleProps} from '../../props/gridRowStart/types'
-import type {GridTemplateColumnsStyleProps} from '../../props/gridTemplateColumns/types'
-import type {GridTemplateRowsStyleProps} from '../../props/gridTemplateRows/types'
-import type {HeightStyleProps} from '../../props/height/types'
-import type {InsetStyleProps} from '../../props/inset/types'
-import type {JustifyContentStyleProps} from '../../props/justifyContent/types'
-import type {MarginStyleProps} from '../../props/margin/types'
-import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
-import type {MinHeightStyleProps} from '../../props/minHeight/types'
-import type {MinWidthStyleProps} from '../../props/minWidth/types'
-import type {OverflowStyleProps} from '../../props/overflow/types'
-import type {PaddingStyleProps} from '../../props/padding/types'
-import type {PointerEventsStyleProps} from '../../props/pointerEvents/types'
-import type {PositionStyleProps} from '../../props/position/types'
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {ShadowStyleProps} from '../../props/shadow/types'
-import type {TextAlignStyleProps} from '../../props/textAlign/types'
-import type {WidthStyleProps} from '../../props/width/types'
-
-/** @public */
-export interface BoxStyleProps
-  extends AlignItemsStyleProps,
-    BorderStyleProps,
-    DisplayStyleProps,
-    FlexDirectionStyleProps,
-    FlexStyleProps,
-    FlexWrapStyleProps,
-    GapStyleProps,
-    GridAutoColumnsStyleProps,
-    GridAutoFlowStyleProps,
-    GridAutoRowsStyleProps,
-    GridColumnEndStyleProps,
-    GridColumnStartStyleProps,
-    GridColumnStyleProps,
-    GridRowEndStyleProps,
-    GridRowStartStyleProps,
-    GridRowStyleProps,
-    GridTemplateColumnsStyleProps,
-    GridTemplateRowsStyleProps,
-    HeightStyleProps,
-    InsetStyleProps,
-    JustifyContentStyleProps,
-    MarginStyleProps,
-    MaxWidthStyleProps,
-    MinHeightStyleProps,
-    MinWidthStyleProps,
-    OverflowStyleProps,
-    PaddingStyleProps,
-    PointerEventsStyleProps,
-    PositionStyleProps,
-    RadiusStyleProps,
-    ShadowStyleProps,
-    TextAlignStyleProps,
-    WidthStyleProps {
-  className?: string
-  muted?: boolean
-  outline?: 'none'
-  sizing?: BoxSizingStyleProps['boxSizing']
-}