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

package/src/css/primitives/checkbox/__styles.ts

@@ -1,127 +1,129 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../../core/lib/styled'
-import {rem, ThemeProps} from '../../../core/styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {css} from '../../../core/lib/styled'
+// import {rem, ThemeProps} from '../../../core/styles'
+// import {focusRingBorderStyle, focusRingStyle} from '../../../core/styles/internal'
 
-export function checkboxBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    display: inline-block;
-  `
-}
+// export function checkboxBaseStyles(): ReturnType<typeof css> {
+//   return css`
+//     position: relative;
+//     display: inline-block;
+//   `
+// }
 
-export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = getTheme_v2(props.theme)
-  const {focusRing} = input.checkbox
+// export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
+//   const {color, input, radius} = getTheme_v2(props.theme)
+//   const {focusRing} = input.checkbox
 
-  return css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    opacity: 0;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
+//   return css`
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     outline: none;
+//     opacity: 0;
+//     z-index: 1;
+//     padding: 0;
+//     margin: 0;
 
-    & + span {
-      position: relative;
-      display: block;
-      height: ${rem(input.checkbox.size)};
-      width: ${rem(input.checkbox.size)};
-      box-sizing: border-box;
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${color.input.default.enabled.bg};
+//     & + span {
+//       position: relative;
+//       display: block;
+//       height: ${rem(input.checkbox.size)};
+//       width: ${rem(input.checkbox.size)};
+//       box-sizing: border-box;
+//       box-shadow: ${focusRingBorderStyle({
+//         color: color.input.default.enabled.border,
+//         width: input.border.width,
+//       })};
+//       border-radius: ${rem(radius[2])};
+//       line-height: 1;
+//       background-color: ${color.input.default.enabled.bg};
 
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
+//       & > svg {
+//         display: block;
+//         position: absolute;
+//         opacity: 0;
+//         height: 100%;
+//         width: 100%;
 
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.5px !important;
-        }
-      }
-    }
+//         & > path {
+//           vector-effect: non-scaling-stroke;
+//           stroke-width: 1.5px !important;
+//         }
+//       }
+//     }
 
-    &:checked + span {
-      background: ${color.input.default.enabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.fg,
-        width: input.border.width,
-      })};
-      color: ${color.input.default.enabled.bg};
-    }
+//     &:checked + span {
+//       background: ${color.input.default.enabled.fg};
+//       box-shadow: ${focusRingBorderStyle({
+//         color: color.input.default.enabled.fg,
+//         width: input.border.width,
+//       })};
+//       color: ${color.input.default.enabled.bg};
+//     }
 
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({focusRing})};
-    }
+//     /* focus */
+//     &:not(:disabled):focus:focus-visible + span {
+//       box-shadow: ${focusRingStyle({focusRing})};
+//     }
 
-    /* focus when checked - uses a different offset */
-    &:not(:disabled):focus:focus-visible&:checked + span {
-      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
-    }
+//     /* focus when checked - uses a different offset */
+//     &:not(:disabled):focus:focus-visible&:checked + span {
+//       box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
+//     }
 
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.invalid.enabled.muted.bg,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${color.input.invalid.enabled.muted.bg};
-      color: ${color.input.default.enabled.bg};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        focusRing: {width: 1, offset: 1},
-      })};
-    }
+//     &[data-error] + span {
+//       background-color: ${color.input.invalid.enabled.border};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.invalid.enabled.muted.bg,
+//       })};
+//       color: ${color.input.default.disabled.fg};
+//     }
+//     &[data-error]&:checked + span {
+//       background-color: ${color.input.invalid.enabled.muted.bg};
+//       color: ${color.input.default.enabled.bg};
+//     }
+//     &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
+//       box-shadow: ${focusRingStyle({
+//         border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+//         focusRing: {width: 1, offset: 1},
+//       })};
+//     }
 
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.disabled.border,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &:disabled&:checked + span {
-      background-color: ${color.input.default.disabled.muted.bg};
-    }
+//     &:disabled + span {
+//       background-color: ${color.input.default.disabled.bg};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.default.disabled.border,
+//       })};
+//       color: ${color.input.default.disabled.fg};
+//     }
+//     &:disabled&:checked + span {
+//       background-color: ${color.input.default.disabled.muted.bg};
+//     }
 
-    &[data-read-only] + span {
-      background-color: ${color.input.default.readOnly.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.readOnly.border,
-      })};
-      color: ${color.input.default.readOnly.fg};
-    }
+//     &[data-read-only] + span {
+//       background-color: ${color.input.default.readOnly.bg};
+//       box-shadow: ${focusRingBorderStyle({
+//         width: input.border.width,
+//         color: color.input.default.readOnly.border,
+//       })};
+//       color: ${color.input.default.readOnly.fg};
+//     }
 
-    &[data-read-only]&:checked + span {
-      background-color: ${color.input.default.readOnly.muted.bg};
-    }
+//     &[data-read-only]&:checked + span {
+//       background-color: ${color.input.default.readOnly.muted.bg};
+//     }
 
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `
-}
+//     &:checked + span > svg:first-child {
+//       opacity: 1;
+//     }
+//     &:indeterminate + span > svg:last-child {
+//       opacity: 1;
+//     }
+//   `
+// }
+
+export {}

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

@@ -1,115 +1,117 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from '../../../core/lib/styled'
-import {ThemeProps} from '../../../core/styles'
-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}
-  `
-}
+// 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/spinner/rules.ts

@@ -1,7 +1,11 @@
 import {Rules} from '../../types'
 
 export const spinnerRules: Rules = {
-  spinner: {
+  'spinner': {},
+
+  'animated-spinner-icon': {
+    'animation': 'spinner-rotate 500ms linear infinite',
+
     '@keyframes': {
       'spinner-rotate': {
         from: {
@@ -12,11 +16,5 @@ export const spinnerRules: Rules = {
         },
       },
     },
-
-    '@nest': {
-      '& > span > svg': {
-        animation: 'spinner-rotate 500ms linear infinite',
-      },
-    },
   },
 }

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

@@ -3,3 +3,7 @@ import {composeClassNames} from '../../composeClassNames'
 export function spinner(): string {
   return composeClassNames('spinner')
 }
+
+export function animatedSpinnerIcon(): string {
+  return composeClassNames('animated-spinner-icon')
+}

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

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