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

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

@@ -1,167 +0,0 @@
-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/primitives/badge/rules.ts

@@ -1,25 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import type {Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const badgeRules: Rules = {
-  badge: {
-    backgroundColor: vars.color.badge.bg,
-    color: vars.color.badge.fg,
-    verticalAlign: 'top',
-  },
-
-  ...THEME_COLOR_STATE_TONES.reduce(
-    (acc, tone) => ({
-      ...acc,
-      [`badge-${tone}`]: {
-        [varNames.color.badge.bg]: vars.color.badge[tone].bg,
-        [varNames.color.badge.dot]: vars.color.badge[tone].dot,
-        [varNames.color.badge.fg]: vars.color.badge[tone].fg,
-        [varNames.color.badge.icon]: vars.color.badge[tone].icon,
-      },
-    }),
-    {} as Rules,
-  ),
-}

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

@@ -1,25 +0,0 @@
-import type {Rules} from '../../types'
-
-export const boxRules: Rules = {
-  'box': {
-    'minWidth': 0,
-    'minHeight': 0,
-
-    '@nest': {
-      // 'ul.&, ol.&': {
-      '&[data-as="ul"], &[data-as="ol"]': {
-        listStyle: 'none',
-      },
-    },
-  },
-
-  // sizing
-
-  'box-content': {
-    boxSizing: 'content-box',
-  },
-
-  'box-border': {
-    boxSizing: 'border-box',
-  },
-}

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

@@ -1,241 +0,0 @@
-import {THEME_COLOR_AVATAR_COLORS, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {Properties, Rules} from '../../types'
-
-export const cardRules: Rules = {
-  card: {
-    'backgroundColor': 'var(--card-bg-color)',
-    'color': 'var(--card-fg-color)',
-
-    /* deprecated variables (kept for legacy) */
-    '--card-accent-fg-color': 'var(--color-accent-fg)',
-
-    ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
-      return {
-        ...acc,
-        [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
-        [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`,
-      }
-    }, {} as Properties),
-
-    '--card-backdrop-color': 'var(--color-backdrop)',
-
-    ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-      return {
-        ...acc,
-        [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
-        [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
-        [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
-        [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`,
-      }
-    }, {} as Properties),
-
-    '--card-bg-color': 'var(--color-bg)',
-    '--card-border-color': 'var(--color-border)',
-    '--card-code-bg-color': 'var(--color-code-bg)',
-    '--card-code-fg-color': 'var(--color-code-fg)',
-    '--card-fg-color': 'var(--color-fg)',
-    '--card-focus-ring-color': 'var(--color-focus-ring)',
-
-    '--card-icon-color': 'var(--color-icon)',
-
-    '--card-kbd-bg-color': 'var(--color-kbd-bg)',
-    '--card-kbd-border-color': 'var(--color-kbd-border)',
-    '--card-kbd-fg-color': 'var(--color-kbd-fg)',
-
-    '--card-link-fg-color': 'var(--color-link-fg)',
-
-    '--card-muted-bg-color': 'var(--color-muted-bg)',
-    '--card-muted-fg-color': 'var(--color-muted-fg)',
-
-    '--card-shadow-outline-color': 'var(--color-shadow-outline)',
-    '--card-shadow-umbra-color': 'var(--color-shadow-umbra)',
-    '--card-shadow-penumbra-color': 'var(--color-shadow-penumbra)',
-    '--card-shadow-ambient-color': 'var(--color-shadow-ambient)',
-
-    '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-
-    '--card-bg2-color': `var(--color-muted-bg)`,
-    '--card-link-color': `var(--color-link-fg)`,
-    '--card-hairline-soft-color': `var(--color-border)`,
-    '--card-hairline-hard-color': `var(--color-border)`,
-
-    '@nest': {
-      '&[data-checkered]': {
-        '--card-bg-image': `repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%)`,
-        'backgroundSize': `var(--space-3) var(--space-3)`,
-        'backgroundPosition': '50% 50%',
-        'backgroundImage': 'var(--card-bg-image)',
-      },
-
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-      },
-
-      '&[data-as="a"]': {
-        outline: 'none',
-        textDecoration: 'none',
-      },
-
-      '&[data-as="pre"]': {
-        font: 'inherit',
-      },
-    },
-  },
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {css} from '../../lib/styled'
-// // import {ThemeProps} from '../../styles'
-// // import {_cardColorStyle} from '../../styles/card'
-// // import {focusRingStyle} from '../../styles/focusRing'
-// import {CardStyleProps} from './types'
-// import {ThemeProps} from '../../_compat'
-// import {_cardColorStyle} from '../../_compat/styles/card'
-// import {focusRingStyle} from '../../_compat/styles/focusRing'
-
-// 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/css/primitives/popover/rules.ts

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

package/src/css/primitives/selectable/__style.ts

@@ -1,117 +0,0 @@
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../../core/_compat'
-// import {css} from '../../../core/lib/styled'
-// import {_cardColorStyle} from '../../../core/styles/card'
-// import {SelectableTone} from '../../../core/types'
-
-// /**
-//  * @internal
-//  * @deprecated
-//  */
-// 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}
-//   `
-// }
-
-export {}

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

@@ -1,27 +0,0 @@
-import {Rules} from '../../types'
-
-export const selectableRules: Rules = {
-  selectable: {
-    'backgroundColor': 'inherit',
-    'color': 'inherit',
-
-    '@nest': {
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        // width: '-moz-available',
-        // width: '-webkit-fill-available',
-        width: 'stretch',
-      },
-
-      /* &:is(a) */
-      '&[data-as="a"]': {
-        textDecoration: 'none',
-      },
-    },
-  },
-}

package/src/css/primitives/selectable/selectable.ts

@@ -1,9 +0,0 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles/radius'
-import {SelectableStyleProps} from './types'
-
-export function selectable(props: SelectableStyleProps): string {
-  const {tone = 'default'} = props
-
-  return composeClassNames('selectable', `selectable-tone-${tone}`, radius(props))
-}

package/src/css/primitives/selectable/types.ts

@@ -1,6 +0,0 @@
-import {SelectableTone} from '@sanity/ui'
-import {RadiusStyleProps} from '../../styles/radius'
-
-export interface SelectableStyleProps extends RadiusStyleProps {
-  tone?: SelectableTone
-}

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

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