@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/css/components/dialog/rules.ts

@@ -1,78 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const dialogRules: Rules = {
-  'dialog': {
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
-
-    'background': vars.color.backdrop,
-
-    // @ts-expect-error - TODO: fix this
-    '@keyframes': {
-      'dialog-zoom-in': {
-        from: {
-          opacity: 0,
-          transform: 'scale(0.95)',
-        },
-        to: {
-          opacity: 1,
-          transform: 'scale(1)',
-        },
-      },
-      'dialog-fade-in': {
-        from: {
-          opacity: 0,
-        },
-        to: {
-          opacity: 1,
-        },
-      },
-    },
-
-    '@nest': {
-      '&[data-animate]': {
-        animation: 'dialog-fade-in 200ms ease-out',
-      },
-
-      // Animates the dialog card.
-      '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: 'dialog-zoom-in 200ms ease-out',
-      },
-    },
-  },
-
-  'dialog-container': {
-    width: '100%',
-    height: '100%',
-  },
-
-  'dialog-card-root': {
-    width: '100%',
-    maxHeight: '100%',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-
-  'dialog-layout': {
-    width: '100%',
-  },
-
-  'dialog-header': {
-    zIndex: 2,
-  },
-
-  'dialog-content': {
-    zIndex: 1,
-    outline: 'none',
-  },
-
-  'dialog-footer': {
-    zIndex: 3,
-  },
-}

package/src/css/components/skeleton/rules.ts

@@ -1,113 +0,0 @@
-import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const skeletonRules: Rules = {
-  'skeleton': {
-    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
-
-    'backgroundColor': vars.color.skeleton.from,
-    'backgroundPosition': '100%',
-    'backgroundSize': '200% 100%',
-    'backgroundAttachment': 'fixed',
-    'opacity': 0,
-    'transition': 'opacity 200ms ease-in',
-
-    // @ts-expect-error - TODO: fix this
-    '@keyframes': {
-      'skeleton-pulse': {
-        '0%': {
-          backgroundPosition: '100%',
-        },
-        '100%': {
-          backgroundPosition: '-100%',
-        },
-      },
-    },
-
-    '@nest': {
-      '&[data-animated]': {
-        backgroundImage: [
-          `linear-gradient(to right`,
-          vars.color.skeleton.from,
-          vars.color.skeleton.to,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
-          vars.color.skeleton.from,
-          `)`,
-        ].join(', '),
-        animationName: 'skeleton-pulse',
-        animationTimingFunction: 'ease-in-out',
-        animationIterationCount: 'infinite',
-        animationDuration: '2000ms',
-      },
-
-      '&[data-visible]': {
-        opacity: 1,
-      },
-    },
-
-    '@media': {
-      'screen and (prefers-reduced-motion: no-preference)': {
-        backgroundColor: vars.color.skeleton.from,
-      },
-    },
-  },
-
-  'font-skeleton': {
-    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
-  },
-
-  // ...responsiveRules('text-skeleton-0', {
-  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
-  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
-  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
-  // }),
-
-  ...FONT_CODE_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`code-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_HEADING_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`heading-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_LABEL_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`label-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  ...FONT_TEXT_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-skeleton-${size}`, {
-        '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
-        '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-        '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-}

package/src/css/components/toast/rules.ts

@@ -1,18 +0,0 @@
-import {Rules} from '../../types'
-
-export const toastRules: Rules = {
-  'toast-layer': {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    maxWidth: '420px',
-    width: '100%',
-  },
-
-  'toast': {
-    pointerEvents: 'all',
-    // @ts-expect-error - TODO: fix this
-    overflow: ['hidden', 'clip'],
-  },
-}

package/src/css/components/tree/rules.ts

@@ -1,168 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const treeRules: Rules = {
-  'tree-item': {
-    '@nest': {
-      '&[role="none"] > [role="treeitem"]': {
-        outline: 'none',
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="none"] > [role="treeitem"]:focus': {
-        position: 'relative',
-      },
-
-      '&[role="treeitem"]': {
-        outline: 'none',
-      },
-
-      '&[role="treeitem"] > div': {
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="treeitem"]:focus > div': {
-        position: 'relative',
-      },
-
-      // &[role='treeitem'] {
-      //   outline: none;
-
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
-    },
-  },
-}
-
-// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-// const ToggleArrowText = styled(Text)`
-//   & > svg {
-//     transition: transform 100ms;
-//   }
-// `
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {css} from '../../lib/styled'
-// import {rem, ThemeProps} from '../../styles'
-// import {_cardColorStyle} from '../../styles/card'
-
-// export function treeItemRootStyle(): ReturnType<typeof css> {
-//   return css`
-//     &[role='none'] > [role='treeitem'] {
-//       outline: none;
-//       cursor: default;
-//       border-radius: 3px;
-
-//       background-color: var(--card-bg-color);
-//       color: var(--treeitem-fg-color);
-
-//       &:focus {
-//         position: relative;
-//       }
-//     }
-
-//     &[role='treeitem'] {
-//       outline: none;
-
-//       & > div {
-//         cursor: default;
-//         border-radius: 3px;
-
-//         background-color: var(--card-bg-color);
-//         color: var(--treeitem-fg-color);
-//       }
-
-//       &:focus > div {
-//         position: relative;
-//       }
-//     }
-//   `
-// }
-
-// export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-//   const $tone = 'default'
-//   const {color} = getTheme_v2(props.theme)
-//   const tone = color.selectable[$tone]
-
-//   return css`
-//     &[role='none'] {
-//       & > [role='treeitem'] {
-//         ${_cardColorStyle(color, tone.enabled)}
-//       }
-
-//       &[data-selected] > [role='treeitem'] {
-//         ${_cardColorStyle(color, tone.pressed)}
-//       }
-
-//       @media (hover: hover) {
-//         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-//           ${_cardColorStyle(color, tone.hovered)}
-//         }
-
-//         & > [role='treeitem']:focus {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-//       }
-//     }
-
-//     &[role='treeitem'] {
-//       & > [data-ui='TreeItem__box'] {
-//         ${_cardColorStyle(color, tone.enabled)}
-//       }
-
-//       &[data-selected] > [data-ui='TreeItem__box'] {
-//         ${_cardColorStyle(color, tone.pressed)}
-//       }
-
-//       @media (hover: hover) {
-//         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-//           ${_cardColorStyle(color, tone.hovered)}
-//         }
-
-//         &:focus > [data-ui='TreeItem__box'] {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-//       }
-//     }
-//   `
-// }
-
-// export interface TreeItemBoxStyleProps {
-//   $level: number
-// }
-
-// export function treeItemBoxStyle(
-//   props: TreeItemBoxStyleProps & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$level} = props
-//   const {space} = getTheme_v2(props.theme)
-
-//   return css`
-//     padding-left: ${rem(space[2] * $level)};
-
-//     &[data-as='a'] {
-//       text-decoration: none;
-//     }
-//   `
-// }

package/src/css/primitives/_selectable/_contants.ts

@@ -1,11 +0,0 @@
-import {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

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

@@ -1,13 +0,0 @@
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
-
-export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'transparent',
-  default: 'default',
-  neutral: 'neutral',
-  suggest: 'suggest',
-  primary: 'accent',
-  positive: 'positive',
-  caution: 'caution',
-  critical: 'critical',
-  inherit: undefined,
-} as const

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

@@ -1,5 +0,0 @@
-import {Rules} from '../../types'
-
-export const popoverRules: Rules = {
-  //
-}

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

@@ -1,21 +0,0 @@
-import {Rules} from '../../types'
-
-export const spinnerRules: Rules = {
-  'spinner': {},
-
-  'animated-spinner-icon': {
-    'animation': 'spinner-rotate 500ms linear infinite',
-
-    // @ts-expect-error - TODO: fix this
-    '@keyframes': {
-      'spinner-rotate': {
-        from: {
-          transform: 'rotate(0deg)',
-        },
-        to: {
-          transform: 'rotate(360deg)',
-        },
-      },
-    },
-  },
-}

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

@@ -1,45 +0,0 @@
-import type {Rules} from '../../types'
-
-export const tokenRules: Rules = {
-  token: {
-    '@nest': {
-      '&.atrule': {color: 'var(--color-token-atrule)'},
-      '&.attr-name': {color: 'var(--color-token-attr-name)'},
-      '&.attr-value': {color: 'var(--color-token-attr-value)'},
-      '&.attribute': {color: 'var(--color-token-attribute)'},
-      '&.boolean': {color: 'var(--color-token-boolean)'},
-      '&.builtin': {color: 'var(--color-token-builtin)'},
-      '&.cdata': {color: 'var(--color-token-cdata)'},
-      '&.char': {color: 'var(--color-token-char)'},
-      '&.class': {color: 'var(--color-token-class)'},
-      '&.class-name': {color: 'var(--color-token-class-name)'},
-      '&.comment': {color: 'var(--color-token-comment)'},
-      '&.constant': {color: 'var(--color-token-constant)'},
-      '&.deleted': {color: 'var(--color-token-deleted)'},
-      '&.doctype': {color: 'var(--color-token-doctype)'},
-      '&.entity': {color: 'var(--color-token-entity)'},
-      '&.function': {color: 'var(--color-token-function)'},
-      '&.hexcode': {color: 'var(--color-token-hexcode)'},
-      '&.id': {color: 'var(--color-token-id)'},
-      '&.important': {color: 'var(--color-token-important)'},
-      '&.inserted': {color: 'var(--color-token-inserted)'},
-      '&.keyword': {color: 'var(--color-token-keyword)'},
-      '&.number': {color: 'var(--color-token-number)'},
-      '&.operator': {color: 'var(--color-token-operator)'},
-      '&.prolog': {color: 'var(--color-token-prolog)'},
-      '&.property': {color: 'var(--color-token-property)'},
-      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
-      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
-      '&.punctuation': {color: 'var(--color-token-punctuation)'},
-      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
-      '&.regex': {color: 'var(--color-token-regex)'},
-      '&.selector': {color: 'var(--color-token-selector)'},
-      '&.string': {color: 'var(--color-token-string)'},
-      '&.symbol': {color: 'var(--color-token-symbol)'},
-      '&.tag': {color: 'var(--color-token-tag)'},
-      '&.unit': {color: 'var(--color-token-unit)'},
-      '&.url': {color: 'var(--color-token-url)'},
-      '&.variable': {color: 'var(--color-token-variable)'},
-    },
-  },
-}

package/src/ui/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,23 +0,0 @@
-import {ReactNode} from 'react'
-
-/**
- * @internal
- * @deprecated this component will be removed in the next major release
- */
-export function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: ReactNode
-  condition: boolean
-  wrapper: (children: ReactNode) => ReactNode
-}): ReactNode {
-  if (!condition) {
-    return children
-  }
-
-  return wrapper(children)
-}
-
-ConditionalWrapper.displayName = 'ConditionalWrapper'

package/src/ui/utils/conditionalWrapper/index.ts

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