@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,7 +0,0 @@
-import {RadiusStyleProps} from '../../aspects'
-
-/** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface KBDStyleProps extends RadiusStyleProps {
-  //
-}

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

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

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

@@ -1,48 +0,0 @@
-import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.label': {
-    '--font-weight-regular': `var(--font-label-weight-regular)`,
-    '--font-weight-medium': `var(--font-label-weight-medium)`,
-    '--font-weight-semibold': `var(--font-label-weight-semibold)`,
-    '--font-weight-bold': `var(--font-label-weight-bold)`,
-
-    '--font-family': `var(--font-label-family)`,
-    '--font-feature-settings': `var(--font-label-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-    'textTransform': 'uppercase',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-    },
-  },
-
-  '.label-accent': {
-    '--color-fg': 'var(--color-accent-fg)',
-  },
-
-  '.label-muted': {
-    '--color-fg': 'var(--color-muted-fg)',
-  },
-}
-
-for (const size of FONT_LABEL_SIZE) {
-  _responsiveRule(primitive, `label-${size}`, {
-    '--font-size': `var(--font-label-${size}-size)`,
-    '--font-line-height': `var(--font-label-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-label-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-label-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-label-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-label-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
-  })
-}
-
-export const labelStyle: Style = {layers: {primitive}}

package/src/css/primitives/label/label.ts

@@ -1,16 +0,0 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {font} from '../../aspects'
-import {LabelStyleProps} from './types'
-
-/** @public */
-export function label(props: LabelStyleProps): string | undefined {
-  return _comp(
-    'label',
-    'block',
-    font(props),
-    props.accent && 'label-accent',
-    props.muted && 'label-muted',
-    _resp(`label`, props.size),
-  )
-}

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

@@ -1,137 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const labelRules: Rules = {
-  'label': {
-    '--font-weight-regular': `var(--font-label-weight-regular)`,
-    '--font-weight-medium': `var(--font-label-weight-medium)`,
-    '--font-weight-semibold': `var(--font-label-weight-semibold)`,
-    '--font-weight-bold': `var(--font-label-weight-bold)`,
-
-    '--font-family': `var(--font-label-family)`,
-    '--font-feature-settings': `var(--font-label-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-    'textTransform': 'uppercase',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-    },
-  },
-
-  'label-accent': {
-    '--color-fg': 'var(--color-accent-fg)',
-  },
-
-  'label-muted': {
-    '--color-fg': 'var(--color-muted-fg)',
-  },
-
-  ...responsiveRules('label-0', {
-    '--font-size': 'var(--font-label-0-size)',
-    '--font-line-height': 'var(--font-label-0-line-height)',
-    '--font-letter-spacing': 'var(--font-label-0-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-0-icon-size)',
-    '--font-ascender-height': 'var(--font-label-0-ascender-height)',
-    '--font-descender-height': 'var(--font-label-0-descender-height)',
-    // '--font-cap-height': 'var(--font-label-0-cap-height)',
-  }),
-
-  ...responsiveRules('label-1', {
-    '--font-size': 'var(--font-label-1-size)',
-    '--font-line-height': 'var(--font-label-1-line-height)',
-    '--font-letter-spacing': 'var(--font-label-1-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-1-icon-size)',
-    '--font-ascender-height': 'var(--font-label-1-ascender-height)',
-    '--font-descender-height': 'var(--font-label-1-descender-height)',
-    // '--font-cap-height': 'var(--font-label-1-cap-height)',
-  }),
-
-  ...responsiveRules('label-2', {
-    '--font-size': 'var(--font-label-2-size)',
-    '--font-line-height': 'var(--font-label-2-line-height)',
-    '--font-letter-spacing': 'var(--font-label-2-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-2-icon-size)',
-    '--font-ascender-height': 'var(--font-label-2-ascender-height)',
-    '--font-descender-height': 'var(--font-label-2-descender-height)',
-    // '--font-cap-height': 'var(--font-label-2-cap-height)',
-  }),
-
-  ...responsiveRules('label-3', {
-    '--font-size': 'var(--font-label-3-size)',
-    '--font-line-height': 'var(--font-label-3-line-height)',
-    '--font-letter-spacing': 'var(--font-label-3-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-3-icon-size)',
-    '--font-ascender-height': 'var(--font-label-3-ascender-height)',
-    '--font-descender-height': 'var(--font-label-3-descender-height)',
-    // '--font-cap-height': 'var(--font-label-3-cap-height)',
-  }),
-
-  ...responsiveRules('label-4', {
-    '--font-size': 'var(--font-label-4-size)',
-    '--font-line-height': 'var(--font-label-4-line-height)',
-    '--font-letter-spacing': 'var(--font-label-4-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-4-icon-size)',
-    '--font-ascender-height': 'var(--font-label-4-ascender-height)',
-    '--font-descender-height': 'var(--font-label-4-descender-height)',
-    // '--font-cap-height': 'var(--font-label-4-cap-height)',
-  }),
-
-  ...responsiveRules('label-5', {
-    '--font-size': 'var(--font-label-5-size)',
-    '--font-line-height': 'var(--font-label-5-line-height)',
-    '--font-letter-spacing': 'var(--font-label-5-letter-spacing)',
-    '--font-icon-size': 'var(--font-label-5-icon-size)',
-    '--font-ascender-height': 'var(--font-label-5-ascender-height)',
-    '--font-descender-height': 'var(--font-label-5-descender-height)',
-    // '--font-cap-height': 'var(--font-label-5-cap-height)',
-  }),
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../_compat'
-// import {css} from '../../lib/styled'
-
-// export function labelBaseStyle(
-//   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$accent, $muted} = props
-//   const {font} = getTheme_v2(props.theme)
-
-//   return css`
-//     text-transform: uppercase;
-
-//     ${$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;
-//     }
-
-//     & a {
-//       text-decoration: none;
-//       border-radius: 1px;
-//     }
-
-//     & 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;
-//     }
-//   `
-// }

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

@@ -1,12 +0,0 @@
-import {FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export type LabelSize = number
-
-/** @public */
-export interface LabelStyleProps extends FontStyleProps {
-  accent?: boolean
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
-}

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

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

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

@@ -1,5 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {}
-
-export const popoverStyle: Style = {layers: {primitive}}

package/src/css/primitives/popover/popover.ts

@@ -1,9 +0,0 @@
-import {_comp} from '../../_comp'
-
-export function popover(): string | undefined {
-  return _comp('popover')
-}
-
-export function popoverCard(): string | undefined {
-  return _comp('popover-card')
-}

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

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

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

@@ -1,123 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.radio': {
-    'position': 'relative',
-
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-
-      '& input': {
-        appearance: 'none',
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        opacity: '0',
-        height: '100%',
-        width: '100%',
-        outline: 'none',
-        zIndex: '1',
-        padding: '0',
-        margin: '0',
-        borderRadius: '9999px',
-        border: 'none',
-      },
-
-      /* enabled */
-      '& > input + span': {
-        'display': 'block',
-        'position': 'relative',
-        'width': 'var(--input-radio-size)',
-        'height': 'var(--input-radio-size)',
-        'borderRadius': '9999px',
-        'backgroundColor': 'var(--color-input-bg)',
-        'boxShadow': 'inset 0 0 0 1px var(--color-input-border)',
-        // border-radius: ${rem(input.radio.size / 2)};
-        // background: ${color.input.default.enabled.bg};
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-
-        '--color-input-fg': 'var(--color-tinted-default-fg-0)',
-        '--color-input-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-input-border': 'var(--color-tinted-default-border-1)',
-      },
-
-      '& > input + span::after': {
-        content: '""',
-        position: 'absolute',
-        top: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        left: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        width: 'var(--input-radio-mark-size)',
-        height: 'var(--input-radio-mark-size)',
-        backgroundColor: 'var(--color-input-fg)',
-        borderRadius: '9999px',
-        opacity: 0,
-      },
-
-      /* hovered */
-      '& > input:not(:disabled):hover + span': {
-        '--color-input-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
-      },
-
-      /* focused */
-      '& > input:not(:disabled):focus + span': {
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.default.enabled.border},
-        //   focusRing: input.radio.focusRing,
-        // })};
-      },
-
-      '& > input:not(:disabled):focus:not(:focus-visible) + span': {
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-      },
-
-      '& > input:checked + span::after': {
-        opacity: 1,
-      },
-
-      //   /* customValidity */
-      //   &[data-error] + span {
-      //     background-color: ${color.input.invalid.enabled.border};
-      //     box-shadow: ${focusRingBorderStyle({
-      //       width: input.border.width,
-      //       color: color.input.invalid.enabled.muted.bg,
-      //     })};
-      //     &::after {
-      //       background: ${color.input.invalid.enabled.muted.bg};
-      //     }
-      //   }
-
-      //   /* read only */
-      //   &[data-read-only] + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      //     background: ${color.input.default.readOnly.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.readOnly.border};
-      //     }
-      //   }
-
-      //   /* disabled */
-      //   &:not([data-read-only]):disabled + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      //     background: ${color.input.default.disabled.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.disabled.border};
-      //     }
-      //   }
-      // `
-    },
-  },
-}
-
-export const radioStyle: Style = {layers: {primitive}}

package/src/css/primitives/radio/radio.ts

@@ -1,5 +0,0 @@
-import {_comp} from '../../_comp'
-
-export function radio(): string | undefined {
-  return _comp('radio')
-}

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

@@ -1,121 +0,0 @@
-import {Rules} from '../../types'
-
-export const radioRules: Rules = {
-  radio: {
-    'position': 'relative',
-
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-
-      '& input': {
-        appearance: 'none',
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        opacity: '0',
-        height: '100%',
-        width: '100%',
-        outline: 'none',
-        zIndex: '1',
-        padding: '0',
-        margin: '0',
-        borderRadius: '9999px',
-        border: 'none',
-      },
-
-      /* enabled */
-      '& > input + span': {
-        'display': 'block',
-        'position': 'relative',
-        'width': 'var(--input-radio-size)',
-        'height': 'var(--input-radio-size)',
-        'borderRadius': '9999px',
-        'backgroundColor': 'var(--color-input-bg)',
-        'boxShadow': 'inset 0 0 0 1px var(--color-input-border)',
-        // border-radius: ${rem(input.radio.size / 2)};
-        // background: ${color.input.default.enabled.bg};
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-
-        '--color-input-fg': 'var(--color-tinted-default-fg-0)',
-        '--color-input-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-input-border': 'var(--color-tinted-default-border-1)',
-      },
-
-      '& > input + span::after': {
-        content: '""',
-        position: 'absolute',
-        top: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        left: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        width: 'var(--input-radio-mark-size)',
-        height: 'var(--input-radio-mark-size)',
-        backgroundColor: 'var(--color-input-fg)',
-        borderRadius: '9999px',
-        opacity: 0,
-      },
-
-      /* hovered */
-      '& > input:not(:disabled):hover + span': {
-        '--color-input-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
-      },
-
-      /* focused */
-      '& > input:not(:disabled):focus + span': {
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.default.enabled.border},
-        //   focusRing: input.radio.focusRing,
-        // })};
-      },
-
-      '& > input:not(:disabled):focus:not(:focus-visible) + span': {
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-      },
-
-      '& > input:checked + span::after': {
-        opacity: 1,
-      },
-
-      //   /* customValidity */
-      //   &[data-error] + span {
-      //     background-color: ${color.input.invalid.enabled.border};
-      //     box-shadow: ${focusRingBorderStyle({
-      //       width: input.border.width,
-      //       color: color.input.invalid.enabled.muted.bg,
-      //     })};
-      //     &::after {
-      //       background: ${color.input.invalid.enabled.muted.bg};
-      //     }
-      //   }
-
-      //   /* read only */
-      //   &[data-read-only] + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      //     background: ${color.input.default.readOnly.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.readOnly.border};
-      //     }
-      //   }
-
-      //   /* disabled */
-      //   &:not([data-read-only]):disabled + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      //     background: ${color.input.default.disabled.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.disabled.border};
-      //     }
-      //   }
-      // `
-    },
-  },
-}

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

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

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

@@ -1,22 +0,0 @@
-import {Rules} from '../../types'
-
-export const selectRules: Rules = {
-  'select': {
-    '@nest': {
-      '& > select:disabled': {
-        opacity: 1,
-      },
-    },
-  },
-
-  'select-presentation': {
-    '@nest': {
-      '& > span': {
-        // place icon to the right
-        position: 'absolute',
-        top: 0,
-        right: 0,
-      },
-    },
-  },
-}

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

@@ -1,24 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.select': {
-    '@nest': {
-      '& > select:disabled': {
-        opacity: 1,
-      },
-    },
-  },
-
-  '.select-presentation': {
-    '@nest': {
-      '& > span': {
-        // place icon to the right
-        position: 'absolute',
-        top: 0,
-        right: 0,
-      },
-    },
-  },
-}
-
-export const selectStyle: Style = {layers: {primitive}}

package/src/css/primitives/select/select.ts

@@ -1,12 +0,0 @@
-import {_comp} from '../../_comp'
-import {composeClassNames} from '../../composeClassNames'
-import {_input, _inputPresentation} from '../_input'
-import {SelectStyleProps} from './types'
-
-export function select(props: SelectStyleProps): string | undefined {
-  return composeClassNames(_comp('select'), _input(props))
-}
-
-export function selectPresentation(): string | undefined {
-  return composeClassNames(_comp('select-presentation'), _inputPresentation())
-}

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

@@ -1,5 +0,0 @@
-import {InputStyleProps} from '../_input'
-
-/** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SelectStyleProps extends InputStyleProps {}

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

@@ -1,22 +0,0 @@
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-
-const keyframes: StyleKeyframes = {
-  'spinner-rotate': {
-    from: {
-      transform: 'rotate(0deg)',
-    },
-    to: {
-      transform: 'rotate(360deg)',
-    },
-  },
-}
-
-const primitive: StyleRules = {
-  '.spinner': {},
-
-  '.animated-spinner-icon': {
-    animation: 'spinner-rotate 500ms linear infinite',
-  },
-}
-
-export const spinnerStyle: Style = {keyframes, layers: {primitive}}

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

@@ -1,9 +0,0 @@
-import {_comp} from '../../_comp'
-
-export function spinner(): string | undefined {
-  return _comp('spinner')
-}
-
-export function animatedSpinnerIcon(): string | undefined {
-  return _comp('animated-spinner-icon')
-}

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

@@ -1,9 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.stack': {
-    gridTemplateColumns: 'minmax(0, 1fr)',
-  },
-}
-
-export const stackStyle: Style = {layers: {primitive}}

package/src/css/primitives/stack/stack.ts

@@ -1,6 +0,0 @@
-import {_comp} from '../../_comp'
-
-/** @public */
-export function stack(): string | undefined {
-  return _comp('stack')
-}