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

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