@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,340 +0,0 @@
-import {Rules} from '../../types'
-
-export const switchRules: Rules = {
-  'switch': {},
-
-  'switch-element': {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    opacity: 0,
-    height: '100%',
-    width: '100%',
-    outline: 'none',
-    padding: 0,
-    margin: 0,
-
-    /* Place the input element above the representation element */
-    zIndex: 1,
-  },
-
-  'switch-presentation': {
-    '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
-    '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
-    '--switch-thumb-offset': '0',
-    '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
-    'display': 'block',
-    // &:not([hidden]) {
-    //   display: block;
-    // }
-    'position': 'relative',
-    'width': 'var(--input-switch-width)',
-    'height': 'var(--input-switch-height)',
-    'borderRadius': 'calc(var(--input-switch-height) / 2)',
-    'outlineOffset': 'var(--input-switch-focus-ring-offset)',
-
-    // Make sure it’s not possible to interact with the presentation element
-    'pointerEvents': 'none',
-
-    '@nest': {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
-      '.switch-element:focus + &': {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-        outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
-      },
-      'input:focus:not(:focus-visible) + &': {
-        outline: 'none',
-      },
-      'input:checked + &': {
-        '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
-        '--switch-fg-color': 'var(--color-solid-default-fg-0)',
-      },
-      // input:not([data-read-only]):disabled + && {
-      //   --switch-bg-color: ${color.input.default.disabled.border};
-      //   --switch-fg-color: ${color.input.default.disabled.bg};
-      // }
-      // input[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.border};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
-      // input:checked[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.fg};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
-
-      '.switch-element:checked + &': {
-        '--switch-thumb-offset':
-          'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
-      },
-    },
-
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
-  },
-
-  'switch-track': {
-    display: 'block',
-    backgroundColor: 'var(--switch-bg-color)',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: 'inherit',
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
-
-    transition:
-      'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-  },
-
-  'switch-thumb': {
-    // '--switch-thumb-offset': '0',
-
-    display: 'block',
-    position: 'absolute',
-    left: 'var(--input-switch-padding)',
-    top: 'var(--input-switch-padding)',
-    width: 'var(--switch-thumb-size)',
-    height: 'var(--switch-thumb-size)',
-    backgroundColor: 'var(--switch-fg-color)',
-    borderRadius: '9999px',
-    boxShadow: '0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)',
-    transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
-    transition:
-      'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
-  },
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {rem, ThemeProps} from '../../_compat'
-// import {focusRingStyle} from '../../_compat/styles/internal'
-// import {css} from '../../lib/styled'
-
-// /* Root */
-// // export function switchBaseStyles(): ReturnType<typeof css> {
-// //   return css`
-// //     position: relative;
-// //     &:not([hidden]) {
-// //       display: inline-block;
-// //     }
-// //   `
-// // }
-
-// /* Input */
-// export function switchInputStyles(): ReturnType<typeof css> {
-//   // Visually hide the input element while keeping it interactive
-//   return css`
-//     position: absolute;
-//     top: 0;
-//     right: 0;
-//     bottom: 0;
-//     left: 0;
-//     opacity: 0;
-//     height: 100%;
-//     width: 100%;
-//     outline: none;
-//     padding: 0;
-//     margin: 0;
-
-//     /* Place the input element above the representation element */
-//     z-index: 1;
-//   `
-// }
-
-// /* Representation */
-// export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-//   const {color, input} = getTheme_v2(props.theme)
-
-//   return css`
-//     --switch-bg-color: ${color.input.default.enabled.border};
-//     --switch-fg-color: ${color.input.default.enabled.bg};
-//     --switch-box-shadow: none;
-
-//     &:not([hidden]) {
-//       display: block;
-//     }
-//     position: relative;
-//     width: ${rem(input.switch.width)};
-//     height: ${rem(input.switch.height)};
-//     border-radius: ${rem(input.switch.height / 2)};
-
-//     /* Make sure it’s not possible to interact with the wrapper element */
-//     pointer-events: none;
-
-//     &:after {
-//       content: '';
-//       display: block;
-//       position: absolute;
-//       top: 0;
-//       left: 0;
-//       right: 0;
-//       bottom: 0;
-//       z-index: 1;
-//       box-shadow: var(--switch-box-shadow);
-//       border-radius: inherit;
-//     }
-
-//     /* Focus styles */
-//     input:focus + && {
-//       --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-//     }
-
-//     input:focus:not(:focus-visible) + && {
-//       --switch-box-shadow: none;
-//     }
-
-//     input:checked + && {
-//       --switch-bg-color: ${color.input.default.enabled.fg};
-//       --switch-fg-color: ${color.input.default.enabled.bg};
-//     }
-
-//     @media (hover: hover) {
-//       input:not(:disabled):hover + && {
-//         --switch-bg-color: ${color.input.default.hovered.border};
-//         --switch-fg-color: ${color.input.default.hovered.bg};
-//       }
-
-//       input:not(:disabled):checked:hover + && {
-//         --switch-bg-color: ${color.input.default.enabled.fg};
-//         --switch-fg-color: ${color.input.default.enabled.bg};
-//       }
-//     }
-
-//     input:not([data-read-only]):disabled + && {
-//       --switch-bg-color: ${color.input.default.disabled.border};
-//       --switch-fg-color: ${color.input.default.disabled.bg};
-//     }
-
-//     input[data-read-only]:disabled + && {
-//       --switch-bg-color: ${color.input.default.readOnly.border};
-//       --switch-fg-color: ${color.input.default.readOnly.bg};
-//     }
-
-//     input:checked[data-read-only]:disabled + && {
-//       --switch-bg-color: ${color.input.default.readOnly.fg};
-//       --switch-fg-color: ${color.input.default.readOnly.bg};
-//     }
-//   `
-// }
-
-// /* Track */
-// export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-//   const {input} = getTheme_v2(props.theme)
-
-//   return css`
-//     &:not([hidden]) {
-//       display: block;
-//     }
-//     background-color: var(--switch-bg-color);
-//     position: absolute;
-//     left: 0;
-//     top: 0;
-//     width: ${rem(input.switch.width)};
-//     height: ${rem(input.switch.height)};
-//     border-radius: ${rem(input.switch.height / 2)};
-//   `
-// }
-
-// /* Thumb */
-// export function switchThumbStyles(
-//   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$indeterminate} = props
-//   const {input} = getTheme_v2(props.theme)
-//   const trackWidth = input.switch.width
-//   const trackHeight = input.switch.height
-//   const trackPadding = input.switch.padding
-//   const size = trackHeight - input.switch.padding * 2
-//   const checkedOffset = trackWidth - trackPadding * 2 - size
-//   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-//   const checked = $indeterminate !== true && props.$checked === true
-
-//   return css`
-//     &:not([hidden]) {
-//       display: block;
-//     }
-//     position: absolute;
-//     left: ${rem(trackPadding)};
-//     top: ${rem(trackPadding)};
-//     height: ${rem(size)};
-//     width: ${rem(size)};
-//     border-radius: ${rem(size / 2)};
-//     transition-property: transform;
-//     transition-duration: ${input.switch.transitionDurationMs}ms;
-//     transition-timing-function: ${input.switch.transitionTimingFunction};
-//     background: var(--switch-fg-color);
-//     transform: translate3d(0, 0, 0);
-//     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-
-//     ${checked &&
-//     css`
-//       transform: translate3d(${checkedOffset}px, 0, 0);
-//     `}
-
-//     ${$indeterminate &&
-//     css`
-//       transform: translate3d(${indeterminateOffset}px, 0, 0);
-//     `}
-//   `
-// }

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

@@ -1,94 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.switch': {},
-
-  '.switch-element': {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    opacity: 0,
-    height: '100%',
-    width: '100%',
-    outline: 'none',
-    padding: 0,
-    margin: 0,
-
-    // place the input element on top of the representation element
-    zIndex: 1,
-  },
-
-  '.switch-presentation': {
-    '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    '--switch-thumb-offset': '0',
-    '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
-    'display': 'block',
-    'position': 'relative',
-    'width': 'var(--input-switch-width)',
-    'height': 'var(--input-switch-height)',
-    'borderRadius': 'calc(var(--input-switch-height) / 2)',
-    'outlineOffset': 'var(--input-switch-focus-ring-offset)',
-
-    // Make sure it’s not possible to interact with the presentation element
-    'pointerEvents': 'none',
-
-    '@nest': {
-      '.switch-element:focus + &': {
-        outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
-      },
-
-      'input:focus:not(:focus-visible) + &': {
-        outline: 'none',
-      },
-
-      'input:checked + &': {
-        '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        '--switch-fg-color': 'var(--color-solid-default-fg-0)',
-      },
-
-      '.switch-element:checked + &': {
-        '--switch-thumb-offset':
-          'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
-      },
-
-      '[data-indeterminate] > .switch-element + &': {
-        '--switch-thumb-offset':
-          'calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))',
-      },
-    },
-  },
-
-  '.switch-track': {
-    display: 'block',
-    backgroundColor: 'var(--switch-bg-color)',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: 'inherit',
-
-    transition:
-      'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-  },
-
-  '.switch-thumb': {
-    display: 'block',
-    position: 'absolute',
-    left: 'var(--input-switch-padding)',
-    top: 'var(--input-switch-padding)',
-    width: 'var(--switch-thumb-size)',
-    height: 'var(--switch-thumb-size)',
-    backgroundColor: 'var(--switch-fg-color)',
-    borderRadius: '9999px',
-    boxShadow: '0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)',
-    transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
-    transition:
-      'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-  },
-}
-
-export const switchStyle: Style = {layers: {primitive}}

package/src/css/primitives/switch/switch.ts

@@ -1,21 +0,0 @@
-import {_comp} from '../../_comp'
-
-export function _switch(): string | undefined {
-  return _comp('switch')
-}
-
-export function _switchElement(): string | undefined {
-  return _comp('switch-element')
-}
-
-export function _switchPresentation(): string | undefined {
-  return _comp('switch-presentation')
-}
-
-export function _switchThumb(): string | undefined {
-  return _comp('switch-thumb')
-}
-
-export function _switchTrack(): string | undefined {
-  return _comp('switch-track')
-}

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

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

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

@@ -1,164 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const textRules: Rules = {
-  'text': {
-    '--font-weight-regular': `var(--font-text-weight-regular)`,
-    '--font-weight-medium': `var(--font-text-weight-medium)`,
-    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
-    '--font-weight-bold': `var(--font-text-weight-bold)`,
-
-    '--font-family': `var(--font-text-family)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'var(--color-fg)',
-      },
-
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
-    },
-  },
-
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  'text-muted': {
-    color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-
-  ...responsiveRules('text-0', {
-    '--font-size': 'var(--font-text-0-size)',
-    '--font-line-height': 'var(--font-text-0-line-height)',
-    '--font-letter-spacing': 'var(--font-text-0-letter-spacing)',
-    '--font-icon-size': 'var(--font-text-0-icon-size)',
-    '--font-ascender-height': 'var(--font-text-0-ascender-height)',
-    '--font-descender-height': 'var(--font-text-0-descender-height)',
-    // '--font-cap-height': 'var(--font-text-0-cap-height)',
-  }),
-
-  ...responsiveRules('text-1', {
-    '--font-size': 'var(--font-text-1-size)',
-    '--font-line-height': 'var(--font-text-1-line-height)',
-    '--font-letter-spacing': 'var(--font-text-1-letter-spacing)',
-    '--font-icon-size': 'var(--font-text-1-icon-size)',
-    '--font-ascender-height': 'var(--font-text-1-ascender-height)',
-    '--font-descender-height': 'var(--font-text-1-descender-height)',
-    // '--font-cap-height': 'var(--font-text-1-cap-height)',
-  }),
-
-  ...responsiveRules('text-2', {
-    '--font-size': 'var(--font-text-2-size)',
-    '--font-line-height': 'var(--font-text-2-line-height)',
-    '--font-letter-spacing': 'var(--font-text-2-letter-spacing)',
-    '--font-icon-size': 'var(--font-text-2-icon-size)',
-    '--font-ascender-height': 'var(--font-text-2-ascender-height)',
-    '--font-descender-height': 'var(--font-text-2-descender-height)',
-    // '--font-cap-height': 'var(--font-text-2-cap-height)',
-  }),
-
-  ...responsiveRules('text-3', {
-    '--font-size': 'var(--font-text-3-size)',
-    '--font-line-height': 'var(--font-text-3-line-height)',
-    '--font-letter-spacing': 'var(--font-text-3-letter-spacing)',
-    '--font-icon-size': 'var(--font-text-3-icon-size)',
-    '--font-ascender-height': 'var(--font-text-3-ascender-height)',
-    '--font-descender-height': 'var(--font-text-3-descender-height)',
-    // '--font-cap-height': 'var(--font-text-3-cap-height)',
-  }),
-
-  ...responsiveRules('text-4', {
-    '--font-size': 'var(--font-text-4-size)',
-    '--font-line-height': 'var(--font-text-4-line-height)',
-    '--font-letter-spacing': 'var(--font-text-4-letter-spacing)',
-    '--font-icon-size': 'var(--font-text-4-icon-size)',
-    '--font-ascender-height': 'var(--font-text-4-ascender-height)',
-    '--font-descender-height': 'var(--font-text-4-descender-height)',
-    // '--font-cap-height': 'var(--font-text-4-cap-height)',
-  }),
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../_compat'
-// import {css} from '../../lib/styled'
-
-// export function textBaseStyle(
-//   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$accent, $muted} = props
-//   const {font} = getTheme_v2(props.theme)
-
-//   return css`
-//     color: var(--card-fg-color);
-
-//     ${$accent &&
-//     css`
-//       color: var(--card-accent-fg-color);
-//     `}
-
-//     ${$muted &&
-//     css`
-//       color: var(--card-muted-fg-color);
-//     `}
-
-//     & code {
-//       font-family: ${font.code.family};
-//       border-radius: 1px;
-//       background-color: var(--card-code-bg-color);
-//       color: var(--card-code-fg-color);
-//     }
-
-//     & a {
-//       text-decoration: none;
-//       border-radius: 1px;
-//       color: var(--card-link-color);
-//       outline: none;
-
-//       @media (hover: hover) {
-//         &:hover {
-//           text-decoration: underline;
-//         }
-//       }
-
-//       &:focus {
-//         box-shadow:
-//           0 0 0 1px var(--card-bg-color),
-//           0 0 0 3px var(--card-focus-ring-color);
-//       }
-
-//       &:focus:not(:focus-visible) {
-//         box-shadow: none;
-//       }
-//     }
-
-//     & strong {
-//       font-weight: ${font.text.weights.bold};
-//     }
-
-//     & svg {
-//       /* Certain popular CSS libraries changes the defaults for SVG display */
-//       /* Make sure SVGs are rendered as inline elements */
-//       display: inline;
-//     }
-
-//     & [data-sanity-icon] {
-//       vertical-align: baseline;
-//       color: var(--card-icon-color);
-
-//       & path {
-//         vector-effect: non-scaling-stroke !important;
-//       }
-//     }
-//   `
-// }

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

@@ -1,64 +0,0 @@
-import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const primitive: StyleRules = {
-  '.text': {
-    '--font-weight-regular': `var(--font-text-weight-regular)`,
-    '--font-weight-medium': `var(--font-text-weight-medium)`,
-    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
-    '--font-weight-bold': `var(--font-text-weight-bold)`,
-
-    '--font-family': `var(--font-text-family)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-
-      '& a:hover': {
-        color: 'var(--color-fg)',
-      },
-
-      '& code': {
-        fontFamily: vars.font.code.family,
-        color: 'var(--color-code-fg)',
-        backgroundColor: 'var(--color-muted-bg)',
-        borderRadius: vars.radius[2],
-      },
-
-      '& svg': {
-        color: 'var(--color-muted-fg)',
-      },
-    },
-  },
-
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  '.text-muted': {
-    color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-}
-
-for (const size of FONT_TEXT_SIZE) {
-  _responsiveRule(primitive, `text-${size}`, {
-    '--font-size': `var(--font-text-${size}-size)`,
-    '--font-line-height': `var(--font-text-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-text-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-text-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-text-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-text-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
-  })
-}
-
-export const textStyle: Style = {layers: {primitive}}