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

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

@@ -0,0 +1,84 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const headingRules: Rules = {
+  'heading': {
+    '--font-weight-regular': `var(--font-heading-weight-regular)`,
+    '--font-weight-medium': `var(--font-heading-weight-medium)`,
+    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
+    '--font-weight-bold': `var(--font-heading-weight-bold)`,
+
+    '--font-family': `var(--font-heading-family)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  'heading-accent': {
+    '--fg-color': 'var(--color-accent-fg)',
+  },
+
+  'heading-muted': {
+    '--fg-color': 'var(--color-muted-fg)',
+  },
+
+  ...responsiveRules('heading-0', {
+    '--font-size': 'var(--font-heading-0-size)',
+    '--font-line-height': 'var(--font-heading-0-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-0-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-0-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-0-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-0-descender-height)',
+  }),
+
+  ...responsiveRules('heading-1', {
+    '--font-size': 'var(--font-heading-1-size)',
+    '--font-line-height': 'var(--font-heading-1-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-1-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-1-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-1-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-1-descender-height)',
+  }),
+
+  ...responsiveRules('heading-2', {
+    '--font-size': 'var(--font-heading-2-size)',
+    '--font-line-height': 'var(--font-heading-2-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-2-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-2-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-2-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-2-descender-height)',
+  }),
+
+  ...responsiveRules('heading-3', {
+    '--font-size': 'var(--font-heading-3-size)',
+    '--font-line-height': 'var(--font-heading-3-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-3-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-3-icon-size)',
+    '--font-ascender-height': 'var(--font-label-3-ascender-height)',
+    '--font-descender-height': 'var(--font-label-3-descender-height)',
+  }),
+
+  ...responsiveRules('heading-4', {
+    '--font-size': 'var(--font-heading-4-size)',
+    '--font-line-height': 'var(--font-heading-4-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-4-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-4-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-4-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-4-descender-height)',
+  }),
+
+  ...responsiveRules('heading-5', {
+    '--font-size': 'var(--font-heading-5-size)',
+    '--font-line-height': 'var(--font-heading-5-line-height)',
+    '--font-letter-spacing': 'var(--font-heading-5-letter-spacing)',
+    '--font-icon-size': 'var(--font-heading-5-icon-size)',
+    '--font-ascender-height': 'var(--font-heading-5-ascender-height)',
+    '--font-descender-height': 'var(--font-heading-5-descender-height)',
+  }),
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles/radius'
+import {KBDStyleProps} from './types'
+
+export function kbd(props: KBDStyleProps): string {
+  return composeClassNames('kbd', radius(props))
+}

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

@@ -0,0 +1,20 @@
+import {Rules} from '../../types'
+
+export const kbdRules: Rules = {
+  kbd: {
+    '--card-bg-color': 'var(--card-kbd-bg-color)',
+    '--card-border-color': 'var(--card-kbd-border-color)',
+    '--card-fg-color': 'var(--card-kbd-fg-color)',
+
+    'boxShadow': 'inset 0 0 0 1px var(--card-border-color)',
+    'background': 'var(--card-bg-color)',
+    'font': 'inherit',
+    'verticalAlign': 'top',
+
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,5 @@
+import {RadiusStyleProps} from '../../styles/radius'
+
+export interface KBDStyleProps extends RadiusStyleProps {
+  //
+}

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

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

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

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

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

@@ -0,0 +1,85 @@
+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)`,
+
+    'color': 'var(--color-fg)',
+    'textTransform': 'uppercase',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  'label-accent': {
+    '--fg-color': 'var(--color-accent-fg)',
+  },
+
+  'label-muted': {
+    '--fg-color': '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)',
+  }),
+
+  ...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)',
+  }),
+
+  ...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)',
+  }),
+
+  ...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)',
+  }),
+
+  ...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)',
+  }),
+
+  ...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)',
+  }),
+}

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

@@ -0,0 +1,12 @@
+import {FontStyleProps} from '@sanity/ui/css'
+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

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

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

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function popover(): string {
+  return composeClassNames('popover')
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function select(): string {
+  return composeClassNames('select')
+}

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

@@ -0,0 +1,117 @@
+// 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/index.ts

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,9 @@
+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

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

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

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

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

@@ -0,0 +1,20 @@
+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)',
+        },
+      },
+    },
+  },
+}

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

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

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

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

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

@@ -0,0 +1,132 @@
+import {Rules} from '../../types'
+
+export const switchRules: Rules = {
+  'switch': {},
+
+  'switch-input': {
+    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: ${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};
+    // }
+  },
+
+  'switch-track': {
+    // &: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)};
+  },
+
+  'switch-thumb': {
+    // 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.ts

@@ -0,0 +1,5 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function _switch(): string {
+  return composeClassNames('switch')
+}

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

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