@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,175 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.avatar': {
-    '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,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
-      },
-
-      '&: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>,
-      ),
-    },
-  },
-
-  '.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': {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[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)',
-      },
-    },
-  },
-
-  '.avatar-image': {
-    '@nest': {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.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(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  '.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': {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  '.avatar-stack': {
-    '@nest': {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}
-
-for (const size of AVATAR_SIZE) {
-  _responsiveRule(primitive, `avatar-${size}`, {
-    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-    [varNames.avatar.size]: vars.avatar.sizes[size].size,
-  })
-}
-
-export const avatarStyle: Style = {layers: {primitive}}

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

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

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

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

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

@@ -1,176 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const avatarRules: Rules = {
-  'avatar': {
-    '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,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
-      },
-
-      '&: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>,
-      ),
-    },
-  },
-
-  ...(AVATAR_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`avatar-${size}`, {
-        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-        [varNames.avatar.size]: vars.avatar.sizes[size].size,
-      }),
-    }
-  }, {} as Rules) as Rules),
-
-  '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': {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[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)',
-      },
-    },
-  },
-
-  'avatar-image': {
-    '@nest': {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.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(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  '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': {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  'avatar-stack': {
-    '@nest': {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}

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

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

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

@@ -1,22 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.badge': {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    verticalAlign: 'top',
-  },
-}
-
-for (const tone of THEME_COLOR_STATE_TONES) {
-  primitive[`.badge-${tone}`] = {
-    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
-  }
-}
-
-export const badgeStyle: Style = {layers: {primitive}}

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

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

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

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

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

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

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

@@ -1,31 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.box': {
-    // todo: move to aspects
-    'minHeight': 0,
-
-    '@nest': {
-      '&:is(ul), &:is(ol)': {
-        listStyle: 'none',
-      },
-
-      '&.muted': {
-        backgroundColor: vars.color.muted.bg,
-      },
-    },
-  },
-
-  // 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,52 +0,0 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {
-  border,
-  display,
-  flex,
-  flexItem,
-  gap,
-  grid,
-  gridItem,
-  height,
-  inset,
-  margin,
-  maxWidth,
-  minWidth,
-  overflow,
-  padding,
-  pointerEvents,
-  position,
-  radius,
-  width,
-} from '../../aspects'
-import {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),
-    border(props),
-    display(props),
-    height(props),
-    flex(props),
-    flexItem(props),
-    grid(props),
-    gridItem(props),
-    gap(props),
-    inset(props),
-    margin(props),
-    maxWidth(props),
-    minWidth(props),
-    props.outline && `outline-${props.outline}`,
-    overflow(props),
-    padding(props),
-    pointerEvents(props),
-    position(props),
-    radius(props),
-    width(props),
-  )
-}

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

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

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

@@ -1,51 +0,0 @@
-import {
-  BorderStyleProps,
-  DisplayStyleProps,
-  FlexItemStyleProps,
-  FlexStyleProps,
-  GapStyleProps,
-  GridItemStyleProps,
-  GridStyleProps,
-  HeightStyleProps,
-  InsetStyleProps,
-  MarginStyleProps,
-  MaxWidthStyleProps,
-  MinWidthStyleProps,
-  OverflowStyleProps,
-  PaddingStyleProps,
-  PointerEventsStyleProps,
-  PositionStyleProps,
-  RadiusStyleProps,
-  WidthStyleProps,
-} from '../../aspects'
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/** @public */
-export interface BoxStyleProps
-  extends BorderStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    FlexItemStyleProps,
-    GapStyleProps,
-    GridStyleProps,
-    GridItemStyleProps,
-    HeightStyleProps,
-    InsetStyleProps,
-    MarginStyleProps,
-    MaxWidthStyleProps,
-    MinWidthStyleProps,
-    OverflowStyleProps,
-    PaddingStyleProps,
-    PointerEventsStyleProps,
-    PositionStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
-  muted?: boolean
-  outline?: 'none'
-  sizing?: ResponsiveProp<BoxSizing>
-}

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

@@ -1,17 +0,0 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
-  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