@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

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

@@ -1,261 +0,0 @@
-import {FONT_TEXT_SIZE, type FontTextSize, SPACE, type Space} from '@sanity/ui/theme'
-
-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 root: string = _style(layers.primitives, {
-  position: 'relative',
-})
-
-export const border: string = _style(layers.primitives, {})
-
-export const element: string = _style(layers.primitives, {
-  WebkitFontSmoothing: 'inherit',
-  appearance: 'none',
-  border: 0,
-  outline: 'none',
-  margin: 0,
-  fontFamily: vars.font.text.family,
-  fontSize: vars.input.text.fontSize,
-  lineHeight: vars.input.text.lineHeight,
-  letterSpacing: vars.input.text.letterSpacing,
-  backgroundColor: 'transparent',
-  color: vars.color.input.text.fg,
-  padding: [
-    `calc(${vars.input.text.padding} - ${vars.input.text.ascenderHeight})`,
-    vars.input.text.padding,
-    `calc(${vars.input.text.padding} - ${vars.input.text.descenderHeight})`,
-    vars.input.text.padding,
-  ].join(' '),
-  borderRadius: 'inherit',
-  position: 'relative',
-  zIndex: 1,
-  display: 'block',
-  boxSizing: 'border-box',
-  resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-
-  selectors: {
-    '&::placeholder': {
-      color: vars.color.input.text.placeholder,
-      opacity: 1,
-    },
-
-    [`${root}[data-icon-left] &`]: {
-      paddingLeft: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
-    },
-
-    [`${root}[data-icon-right] &`]: {
-      paddingRight: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
-    },
-
-    [`${root}:not([data-invalid]) &`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[4],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:hover`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:focus`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
-      },
-    },
-
-    [`${root}:not([data-invalid]) &:disabled`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.default.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[1],
-      },
-    },
-
-    [`${root}[data-invalid] &`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] &:hover`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-      },
-    },
-
-    [`${root}[data-invalid] &:focus`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
-      },
-    },
-
-    [`${root}[data-invalid] &:disabled`]: {
-      vars: {
-        [vars.color.input.text.fg]: vars.color.tinted.critical.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
-      },
-    },
-  },
-})
-
-export const presentation: string = _style(layers.primitives, {
-  backgroundColor: vars.color.input.text.bg,
-  borderRadius: 'inherit',
-  boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'block',
-  pointerEvents: 'none',
-  zIndex: 0,
-
-  selectors: {
-    [`${root}[data-prefix] &`]: {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-
-    [`${root}[data-suffix] &`]: {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-
-    // focus ring
-    [`${element}:not([data-no-focus-ring]):focus + &`]: {
-      outlineWidth: vars.input.text.focusRing.width,
-      outlineStyle: 'solid',
-      outlineColor: vars.color.focusRing,
-      outlineOffset: vars.input.text.focusRing.offset,
-    },
-
-    // valid
-
-    [`${root}:not([data-invalid]) &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[0],
-        [vars.color.input.text.border]: vars.color.tinted.default.border[1],
-      },
-    },
-
-    [`${root}:not([data-invalid])[data-read-only] ${element} + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
-      },
-    },
-
-    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
-      },
-    },
-
-    [`${root}:not([data-invalid]) ${element}:focus + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
-        [vars.color.input.text.fg]: vars.color.tinted.default.fg[1],
-      },
-    },
-
-    [`${root}:not([data-invalid]) ${element}:disabled + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.default.border[0],
-        [vars.color.muted.fg]: vars.color.tinted.default.border[4],
-      },
-    },
-
-    // invalid
-
-    [`${root}[data-invalid] &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[1],
-        [vars.color.muted.fg]: vars.color.tinted.critical.fg[4],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:focus + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
-      },
-    },
-
-    [`${root}[data-invalid] ${element}:disabled + &`]: {
-      vars: {
-        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
-        [vars.color.input.text.border]: vars.color.tinted.critical.border[0],
-      },
-    },
-
-    [`${root}:not(${border}) &`]: {
-      vars: {
-        [vars.color.input.text.border]: 'transparent',
-      },
-    },
-  },
-})
-
-export const fontSize: ResponsiveRuleOptions<FontTextSize> = {
-  ..._fromEntries(
-    FONT_TEXT_SIZE.map((s) => {
-      const source = vars.font.text.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.input.text.fontSize]: source.fontSize,
-            [vars.input.text.lineHeight]: source.lineHeight,
-            [vars.input.text.letterSpacing]: source.letterSpacing,
-            [vars.input.text.ascenderHeight]: source.ascenderHeight,
-            [vars.input.text.descenderHeight]: source.descenderHeight,
-          },
-        }),
-      ]
-    }),
-  ),
-}
-
-export const padding: ResponsiveRuleOptions<Space> = {
-  ..._fromEntries(
-    SPACE.map((s) => [
-      s,
-      _responsiveStyle(layers.primitives, {
-        vars: {
-          [vars.input.text.padding]: vars.space[s],
-        },
-      }),
-    ]),
-  ),
-}
-
-export const gap: ResponsiveRuleOptions<Space> = {
-  ..._fromEntries(
-    SPACE.map((s) => [
-      s,
-      _responsiveStyle(layers.primitives, {
-        vars: {
-          [vars.input.text.gap]: vars.space[s],
-        },
-      }),
-    ]),
-  ),
-}

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

@@ -1,29 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {radius} from '../../props/radius/radius'
-import {width} from '../../props/width/width'
-import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
-import type {InputStyleProps} from './types'
-
-/** @internal */
-export function _input(props: InputStyleProps): string | undefined {
-  return _composeClassNames(
-    root,
-    props.border && border,
-    _responsiveClassName(fontSize, props.fontSize ?? 2),
-    _responsiveClassName(padding, props.padding ?? 3),
-    _responsiveClassName(gap, props.gap ?? 3),
-    radius(props),
-    width(props),
-  )
-}
-
-/** @internal */
-export function _inputElement(): string | undefined {
-  return element
-}
-
-/** @internal */
-export function _inputPresentation(): string | undefined {
-  return presentation
-}

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

@@ -1,13 +0,0 @@
-import type {FontTextSize, Space} from '@sanity/ui/theme'
-
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {WidthStyleProps} from '../../props/width/types'
-import type {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
-  border?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  gap?: ResponsiveProp<Space>
-  padding?: ResponsiveProp<Space>
-}

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,
-})