@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

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/{core/primitives/_selectable/style.ts → css/primitives/selectable/__style.ts}

@@ -1,11 +1,12 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
+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

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,22 @@
+import {Rules} from '../../types'
+
+export const spinnerRules: Rules = {
+  spinner: {
+    '@keyframes': {
+      'spinner-rotate': {
+        from: {
+          transform: 'rotate(0deg)',
+        },
+        to: {
+          transform: 'rotate(360deg)',
+        },
+      },
+    },
+
+    '@nest': {
+      '& > span > svg': {
+        animation: 'spinner-rotate 500ms linear infinite',
+      },
+    },
+  },
+}

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

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

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'

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

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

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

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

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

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

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

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

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

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

package/src/css/primitives/textArea/textArea.ts

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

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

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

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

@@ -0,0 +1,226 @@
+import {Rules} from '../../types'
+
+export const textInputRules: Rules = {
+  'text-input': {
+    //
+  },
+
+  'text-input-wrapper': {
+    '@nest': {
+      '& > input': {
+        'appearance': 'none',
+        'background': 'none',
+        'border': 0,
+        'borderRadius': 0,
+        'outline': 'none',
+        'width': '100%',
+        'boxSizing': 'border-box',
+        'fontFamily': 'var(--font-family)',
+        'fontSize': 'var(--font-size)',
+        /* font-family: ${font.text.family}, */
+        /* font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular}, */
+        'margin': 0,
+        'position': 'relative',
+        'zIndex': 1,
+        'display': 'block',
+        'color': 'var(--input-fg-color)',
+
+        '@nest': {
+          // NOTE: This is a hack to disable Chrome’s autofill styles
+          '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
+            {
+              WebkitTextFillColor: 'var(--input-fg-color) !important',
+              transition: 'background-color 5000s',
+              transitionDelay: '86400s', // 24h
+            },
+
+          // /* &:is(textarea) */
+          // &[data-as='textarea'] {
+          //   resize: none;
+          // }
+          // &::placeholder {
+          //   color: var(--input-placeholder-color);
+          // }
+          // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+          //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
+          //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+          //   /* enabled */
+          //   &:not(:invalid):not(:disabled):not(:read-only) {
+          //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
+          //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+          //   }
+          //   /* disabled */
+          //   &:not(:invalid):disabled {
+          //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
+          //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
+          //   }
+          //   /* invalid */
+          //   &:invalid {
+          //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
+          //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
+          //   }
+          //   /* readOnly */
+          //   &:read-only {
+          //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
+          //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
+          //   }
+          // }
+        },
+      },
+    },
+  },
+
+  'text-input-prefix': {
+    'borderTopRightRadius': 0,
+    'borderBottomRightRadius': 0,
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  'text-input-suffix': {
+    'borderTopRightRadius': 0,
+    'borderBottomRightRadius': 0,
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  'text-input-presentation': {
+    '--input-box-shadow': 'none',
+
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'right': 0,
+    'bottom': 0,
+    'display': 'block',
+    'pointerEvents': 'none',
+    'zIndex': 0,
+
+    'backgroundColor': 'var(--card-bg-color)',
+    'boxShadow': 'var(--input-box-shadow)',
+
+    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
+
+    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+    //   --card-bg-color: ${color.input.default.enabled.bg};
+    //   --card-fg-color: ${color.input.default.enabled.fg};
+
+    //   /* enabled */
+    //   *:not(:disabled) + &[data-border] {
+    //     --input-box-shadow: ${focusRingBorderStyle({
+    //       color: color.input.default.enabled.border,
+    //       width: input.border.width,
+    //     })};
+    //   }
+
+    //   /* invalid */
+    //   *:not(:disabled):invalid + & {
+    //     --card-bg-color: ${color.input.invalid.enabled.bg};
+    //     --card-fg-color: ${color.input.invalid.enabled.fg};
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.enabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   /* focused */
+    //   *:not(:disabled):focus + & {
+    //     &[data-border] {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({
+    //             border: {color: color.input.default.enabled.border, width: input.border.width},
+    //             focusRing: input.text.focusRing,
+    //           })};
+    //     }
+
+    //     &:not([data-border]) {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({focusRing: input.text.focusRing})};
+    //     }
+    //   }
+
+    //   /* disabled */
+    //   *:not(:invalid):disabled + & {
+    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   *:invalid:disabled + & {
+    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+
+    //   /* readOnly */
+    //   *:not(:invalid):read-only + & {
+    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
+    //   }
+
+    //   *:invalid:read-only + & {
+    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+    //   }
+
+    //   /* hovered */
+    //   @media (hover: hover) {
+    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+    //       --card-bg-color: ${color.input.default.hovered.bg};
+    //       --card-fg-color: ${color.input.default.hovered.fg};
+    //     }
+
+    //     *:invalid:not(:disabled):not(:read-only):hover + & {
+    //       --card-bg-color: ${color.input.invalid.hovered.bg};
+    //       --card-fg-color: ${color.input.invalid.hovered.fg};
+    //     }
+
+    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+
+    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    // }
+  },
+}

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

@@ -0,0 +1,7 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {ResponsiveProp} from '../../types'
+
+export function textInput(props: {size: ResponsiveProp<number>}): string {
+  return composeClassNames('text-input', _resp('text-input', props.size))
+}