@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

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/skeleton/skeleton.style.ts

@@ -1,96 +0,0 @@
-import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const keyframes: StyleKeyframes = {
-  'skeleton-pulse': {
-    '0%': {
-      backgroundPosition: '100%',
-    },
-    '100%': {
-      backgroundPosition: '-100%',
-    },
-  },
-}
-
-const component: StyleRules = {
-  '.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',
-
-    '@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))`,
-  },
-}
-
-for (const size of FONT_CODE_SIZE) {
-  _responsiveRule(component, `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,
-  })
-}
-
-for (const size of FONT_HEADING_SIZE) {
-  _responsiveRule(component, `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,
-  })
-}
-
-for (const size of FONT_LABEL_SIZE) {
-  _responsiveRule(component, `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,
-  })
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(component, `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,
-  })
-}
-
-export const skeletonStyle: Style = {keyframes, layers: {component}}

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

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

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/toast/toast.style.ts

@@ -1,20 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const component: StyleRules = {
-  '.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'],
-  },
-}
-
-export const toastStyle: Style = {layers: {component}}

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

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

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/components/tree/tree.style.ts

@@ -1,55 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const component: StyleRules = {
-  '.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;
-      //   }
-      // }
-    },
-  },
-}
-
-export const treeStyle: Style = {layers: {component}}

package/src/css/composeClassNames.ts

@@ -1,17 +0,0 @@
-export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
-  return classNames
-    .map((n) => typeof n === 'string' && n.trim())
-    .filter(Boolean)
-    .join(' ')
-    .split(' ')
-}
-
-export function composeClassNames(
-  ...classNames: Array<string | false | undefined>
-): string | undefined {
-  return unique(getClassNames(...classNames)).join(' ') || undefined
-}
-
-function unique<T>(array: T[]): T[] {
-  return Array.from(new Set(array))
-}

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

@@ -1,73 +0,0 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.arrow': {
-    'position': 'absolute',
-
-    // todo: replace with vars?
-    'width': 'var(--arrow-size)',
-    'height': 'var(--arrow-size)',
-
-    '@nest': {
-      ':empty + &': {
-        display: 'none',
-      },
-
-      '& > svg': {
-        display: 'block',
-        transformOrigin: `calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)`,
-      },
-
-      // top
-
-      '[data-placement^="top"] > &': {
-        bottom: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="top"] > & svg': {
-        transform: 'rotate(0deg)',
-      },
-
-      // right
-
-      '[data-placement^="right"] > &': {
-        left: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="right"] > & svg': {
-        transform: 'rotate(90deg)',
-      },
-
-      // left
-
-      '[data-placement^="left"] > &': {
-        right: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="left"] > & svg': {
-        transform: 'rotate(-90deg)',
-      },
-
-      // bottom
-
-      '[data-placement^="bottom"] > &': {
-        top: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="bottom"] > & svg': {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-
-  '.arrow-stroke': {
-    stroke: vars.color.shadow.outline,
-  },
-
-  '.arrow-shape': {
-    fill: vars.color.bg,
-  },
-}
-
-export const _arrowStyle: Style = {layers: {primitive}}

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

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

package/src/css/primitives/_input/__workshop__/customInput.tsx

@@ -1,16 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import {_input, _inputElement, _inputPresentation} from '@sanity/ui/css'
-
-export default function CustomInputStory() {
-  return (
-    <Box padding={4}>
-      <Box className={_input({border: true, padding: 3, radius: 2})}>
-        <button className={_inputElement()} tabIndex={0}>
-          <Text>Input text</Text>
-        </button>
-
-        <Box className={_inputPresentation()} padding={3}></Box>
-      </Box>
-    </Box>
-  )
-}

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

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: './css/input',
-  title: 'Input',
-  stories: [
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./customInput')),
-    },
-  ],
-})