@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

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

@@ -0,0 +1,10 @@
+import {Rules} from '../../types'
+
+export const menuRules: Rules = {
+  'menu-divider': {
+    height: `1px`,
+    border: 0,
+    backgroundColor: 'var(--card-border-color)',
+    margin: 0,
+  },
+}

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

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

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

@@ -0,0 +1,106 @@
+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'
+
+export const skeletonRules: Rules = {
+  'skeleton': {
+    'backgroundColor': 'var(--card-skeleton-from-color)',
+    'backgroundPosition': '100%',
+    'backgroundSize': '200% 100%',
+    'backgroundAttachment': 'fixed',
+    'opacity': 0,
+    'transition': 'opacity 200ms ease-in',
+
+    '@keyframes': {
+      'skeleton-pulse': {
+        '0%': {
+          backgroundPosition: '100%',
+        },
+        '100%': {
+          backgroundPosition: '-100%',
+        },
+      },
+    },
+
+    '@nest': {
+      '&[data-animated]': {
+        backgroundImage: `linear-gradient(
+          to right,
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-to-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color)
+        )`,
+        animationName: 'skeleton-pulse',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDuration: '2000ms',
+      },
+
+      '&[data-visible]': {
+        opacity: 1,
+      },
+    },
+
+    '@media': {
+      'screen and (prefers-reduced-motion: no-preference)': {
+        backgroundColor: 'var(--card-skeleton-from-color)',
+      },
+    },
+  },
+
+  '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': `var(--font-code-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-code-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-code-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_HEADING_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`heading-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-heading-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-heading-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-heading-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_LABEL_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`label-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-label-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-label-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-label-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+
+  ...FONT_TEXT_SIZE.reduce((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-skeleton-${size}`, {
+        '--font-skeleton-line-height': `var(--font-text-${size}-line-height)`,
+        '--font-skeleton-ascender-height': `var(--font-text-${size}-ascender-height)`,
+        '--font-skeleton-descender-height': `var(--font-text-${size}-descender-height)`,
+      }),
+    }
+  }, {}),
+}

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

@@ -0,0 +1,31 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles/radius'
+import {
+  CodeSkeletonStyleProps,
+  HeadingSkeletonStyleProps,
+  LabelSkeletonStyleProps,
+  SkeletonStyleProps,
+  TextSkeletonStyleProps,
+} from './types'
+
+/** @beta */
+export function skeleton(props: SkeletonStyleProps): string {
+  return composeClassNames('skeleton', radius(props))
+}
+
+export function codeSkeleton(props: CodeSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('code-skeleton', props.size))
+}
+
+export function headingSkeleton(props: HeadingSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
+}
+
+export function labelSkeleton(props: LabelSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('label-skeleton', props.size))
+}
+
+export function textSkeleton(props: TextSkeletonStyleProps): string {
+  return composeClassNames('font-skeleton', _resp('text-skeleton', props.size))
+}

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

@@ -0,0 +1,24 @@
+import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
+import {RadiusStyleProps} from '../../styles/radius'
+import {ResponsiveProp} from '../../types'
+
+/** @beta */
+export interface SkeletonStyleProps extends RadiusStyleProps {
+  // visible?: boolean
+}
+
+export interface CodeSkeletonStyleProps {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+export interface HeadingSkeletonStyleProps {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+export interface LabelSkeletonStyleProps {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+export interface TextSkeletonStyleProps {
+  size?: ResponsiveProp<FontTextSize>
+}

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

@@ -0,0 +1,68 @@
+// import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
+// import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+// import {styled, keyframes, css} from '../../lib/styled'
+// import {Flex} from '../../primitives'
+// import {ThemeProps} from '../../styles'
+
+// const loadingAnimation = keyframes`
+//   0% {
+//     width: 0;
+//   }
+//   100% {
+//     width: 100%;
+//   }
+// `
+
+// const LOADING_BAR_HEIGHT = 2
+
+// export function rootStyles(
+//   props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {color} = getTheme_v2(props.theme)
+
+//   const loadingBarColor = color.button.default[props.tone].enabled.bg
+
+//   if (!props.$duration)
+//     return css`
+//       pointer-events: all;
+//       & > * {
+//         opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+//         will-change: opacity;
+//       }
+//     `
+
+//   return css`
+//     pointer-events: all;
+//     width: 100%;
+//     position: relative;
+//     overflow: hidden;
+//     overflow: clip;
+//     padding-bottom: ${LOADING_BAR_HEIGHT}px;
+//     &::before {
+//       content: '';
+//       position: absolute;
+//       bottom: 0px;
+//       height: ${LOADING_BAR_HEIGHT}px;
+//       background: ${loadingBarColor};
+//       animation-name: ${loadingAnimation};
+//       animation-duration: ${props.$duration}ms;
+//       animation-fill-mode: both;
+//     }
+
+//     & > * {
+//       opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+//       will-change: opacity;
+//     }
+//   `
+// }
+
+export {}
+
+// const ToastContainer = styled.div`
+//   box-sizing: border-box;
+//   position: absolute;
+//   right: 0;
+//   bottom: 0;
+//   max-width: 420px;
+//   width: 100%;
+// `

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

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

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

@@ -0,0 +1,167 @@
+import {Rules} from '../../types'
+
+export const treeRules: Rules = {
+  'tree-item': {
+    '@nest': {
+      '&[role="none"] > [role="treeitem"]': {
+        outline: 'none',
+        cursor: 'default',
+        borderRadius: '3px',
+
+        backgroundColor: '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: '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/components/tree/tree.ts

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function treeItem(): string {
+  return composeClassNames('tree-item')
+}

package/src/css/composeClassNames.ts

@@ -0,0 +1,3 @@
+export function composeClassNames(...classNames: Array<string | false | undefined>): string {
+  return classNames.filter(Boolean).join(' ')
+}

package/src/css/index.ts

@@ -0,0 +1,51 @@
+export * from './compile/compileSystem'
+export * from './compile/compileTheme'
+
+export * from './composeClassNames'
+
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/menu'
+export * from './components/skeleton'
+export * from './components/tree'
+
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/heading'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/select'
+export * from './primitives/selectable'
+export * from './primitives/spinner'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+// export * from './primitives/token'
+export * from './primitives/tooltip'
+
+export * from './styles/border/types'
+export * from './styles/gap/types'
+export * from './styles/flex/types'
+export * from './styles/flexItem/types'
+export * from './styles/font/types'
+export * from './styles/grid/types'
+export * from './styles/gridItem/types'
+export * from './styles/margin/types'
+export * from './styles/maxWidth/types'
+export * from './styles/overflow/types'
+export * from './styles/padding/types'
+export * from './styles/pointerEvents/types'
+export * from './styles/position/types'
+export * from './styles/radius/types'
+export * from './styles/width/types'
+
+export * from './types'

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

@@ -0,0 +1,32 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {AvatarStyleProps} from './types'
+
+export function avatar(props: AvatarStyleProps): string {
+  return composeClassNames(
+    'avatar',
+    `avatar-${props.color}`,
+    `avatar-arrow-${props.arrowPosition}`,
+    _resp('avatar', props.size),
+  )
+}
+
+export function avatarArrow(): string {
+  return composeClassNames('avatar-arrow')
+}
+
+export function avatarInitials(): string {
+  return composeClassNames('avatar-initials')
+}
+
+export function avatarBgStroke(): string {
+  return composeClassNames('avatar-bg-stroke')
+}
+
+export function avatarStroke(): string {
+  return composeClassNames('avatar-stroke')
+}
+
+export function avatarImage(): string {
+  return composeClassNames('avatar-image')
+}

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

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