@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/observers/index.ts

@@ -1,2 +0,0 @@
-export * from './elementSizeObserver'
-export * from './resizeObserver'

package/src/core/primitives/_selectable/index.ts

@@ -1 +0,0 @@
-export * from './selectable'

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,15 +0,0 @@
-import {styled} from 'styled-components'
-
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle,
-)
-Selectable.displayName = 'Selectable'

package/src/core/primitives/_selectable/style.ts

@@ -1,115 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
-
-/**
- * @internal
- */
-export interface SelectableStyleProps {
-  $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): ReturnType<typeof css> {
-  return css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}
-
-export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$tone} = props
-  const {color, style} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    ${_cardColorStyle(color, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

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

@@ -1,4 +0,0 @@
-export * from './avatar'
-export * from './avatarCounter'
-export * from './avatarStack'
-export * from './types'

package/src/core/primitives/avatar/styles.ts

@@ -1,167 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
-import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
-
-export const avatarStyle = {
-  root: avatarRootStyle,
-  arrow: avatarArrowStyle,
-  bgStroke: avatarBgStrokeStyle,
-  stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle,
-  image: avatarImageStyle,
-}
-
-function avatarArrowStyle(): CSSObject {
-  return {
-    '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,
-
-    '& > svg': {
-      'width': '11px',
-      'height': '7px',
-      'position': 'absolute',
-      'top': '-5px',
-      'left': '50%',
-      'transform': 'translateX(-6px)',
-
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-
-    "[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 function avatarRootStyle(props: AvatarRootStyleProps & ThemeProps): CSSObject {
-  const {$color} = props
-  const {avatar} = getTheme_v2(props.theme)
-
-  return {
-    '--avatar-bg-color': `var(--card-avatar-${$color}-bg-color)`,
-    '--avatar-fg-color': `var(--card-avatar-${$color}-fg-color)`,
-
-    'backgroundColor': 'var(--avatar-bg-color)',
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': '0 0 0 1px var(--card-bg-color)',
-
-    '&[data-status="inactive"]': {
-      opacity: 0.5,
-    },
-
-    '&>svg': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-
-    /* &:is(button) */
-    '&[data-as="button"]': {
-      'WebkitFontSmoothing': 'inherit',
-      'appearance': 'none',
-      'margin': 0,
-      'padding': 0,
-      'border': 0,
-      'font': 'inherit',
-      'color': 'inherit',
-      'outline': 'none',
-
-      '&:focus': {
-        boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
-      },
-
-      '&:focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-    },
-  }
-}
-
-export function responsiveAvatarSizeStyle(
-  props: ResponsiveAvatarSizeStyleProps & ThemeProps,
-): CSSObject[] {
-  const {avatar, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size] || avatar.sizes[0]
-
-    return {
-      'width': rem(avatarSize.size),
-      'height': rem(avatarSize.size),
-      'borderRadius': rem(avatarSize.size / 2),
-
-      '&>svg': {
-        width: rem(avatarSize.size),
-        height: rem(avatarSize.size),
-        borderRadius: rem(avatarSize.size / 2),
-      },
-    }
-  })
-}
-
-export function avatarImageStyle(): CSSObject {
-  return {
-    position: 'relative',
-  }
-}
-
-export function avatarInitialsStyle(): CSSObject {
-  return {
-    'width': '100%',
-    'height': '100%',
-    'color': 'var(--avatar-fg-color)',
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'textTransform': 'uppercase',
-    'textAlign': 'center',
-    'borderRadius': '50%',
-
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-  }
-}
-
-function avatarBgStrokeStyle(): CSSObject {
-  return {
-    strokeWidth: '4px',
-    stroke: 'var(--card-bg-color)',
-  }
-}
-
-function avatarStrokeStyle(): CSSObject {
-  return {
-    'strokeWidth': '2px',
-    'stroke': 'var(--avatar-bg-color)',
-
-    '[data-status="editing"] &': {
-      strokeDasharray: '2 4',
-      strokeLinecap: 'round',
-    },
-  }
-}

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

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

package/src/core/primitives/badge/styles.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$tone} = props
-
-  return {
-    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
-    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
-
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-      verticalAlign: 'top',
-    },
-  }
-}

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

@@ -1,8 +0,0 @@
-import {BadgeTone} from '../../types'
-
-/**
- * @internal
- */
-export interface BadgeStyleProps {
-  $tone: BadgeTone
-}

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

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

package/src/core/primitives/button/index.ts

@@ -1 +0,0 @@
-export * from './button'

package/src/core/primitives/button/styles.ts

@@ -1,117 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(
-  props: {$width?: ButtonWidth} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$width} = props
-  const {style} = getTheme_v2(props.theme)
-
-  return css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === 'fill' &&
-    css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `
-}
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-  return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
-  const {$mode} = props
-  const {button, color: baseColor, style} = getTheme_v2(props.theme)
-  const shadow = props.$mode === 'ghost'
-  const mode = baseColor.button[$mode] || baseColor.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {
-    width: button.border.width,
-    color: 'var(--card-border-color)',
-  }
-  // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
-  const defaultBoxShadow = undefined
-
-  return [
-    _cardColorStyle(baseColor, color.enabled),
-    {
-      'backgroundColor': 'var(--card-bg-color)',
-      'color': 'var(--card-fg-color)',
-      'boxShadow': focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-      "&:not([data-disabled='true'])": {
-        'boxShadow': combineBoxShadow(
-          focusRingBorderStyle(border),
-          shadow ? defaultBoxShadow : undefined,
-        ),
-        '&:focus': {
-          boxShadow: focusRingStyle({
-            base: baseColor,
-            border: {width: 2, color: baseColor.bg},
-            focusRing: button.focusRing,
-          }),
-        },
-        '&:focus:not(:focus-visible)': {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border),
-            shadow ? defaultBoxShadow : undefined,
-          ),
-        },
-        '@media (hover: hover)': {
-          '&:hover': _cardColorStyle(baseColor, color.hovered),
-          '&:active': _cardColorStyle(baseColor, color.pressed),
-          '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
-        },
-        '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
-      },
-    },
-    style?.button?.root,
-  ].filter(Boolean) as CSSObject[]
-}

package/src/core/primitives/card/__workshop__/allTones.tsx

@@ -1,25 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
-
-export default function AllTonesStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          {THEME_COLOR_CARD_TONES.map((tone) => (
-            <Card
-              key={tone}
-              padding={3}
-              radius={2}
-              shadow={2}
-              style={{textAlign: 'center'}}
-              tone={tone}
-            >
-              <Text size={1}>{tone}</Text>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/card/index.ts

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

package/src/core/primitives/card/styles.ts

@@ -1,147 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingStyle} from '../../styles/focusRing'
-import {CardStyleProps} from './types'
-
-export function cardStyle(
-  props: CardStyleProps & ThemeProps,
-): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
-  return [cardBaseStyle(props), cardColorStyle(props)]
-}
-
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    ${$checkered &&
-    css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
-    }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
-    }
-  `
-}
-
-export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, $muted} = props
-  const {card, color, style} = getTheme_v2(props.theme)
-  const border = {width: card.border.width, color: 'var(--card-border-color)'}
-
-  return css`
-    color-scheme: ${color._dark ? 'dark' : 'light'};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

package/src/core/primitives/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './checkbox'