@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

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

@@ -6,6 +6,7 @@ export const spinnerRules: Rules = {
   'animated-spinner-icon': {
     'animation': 'spinner-rotate 500ms linear infinite',
 
+    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'spinner-rotate': {
         from: {

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

@@ -0,0 +1,22 @@
+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 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function spinner(): string | undefined {
-  return composeClassNames('spinner')
+  return _comp('spinner')
 }
 
 export function animatedSpinnerIcon(): string | undefined {
-  return composeClassNames('animated-spinner-icon')
+  return _comp('animated-spinner-icon')
 }

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

@@ -0,0 +1,169 @@
+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 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);
+    //   `}
+    // `
+  },
+}
+
+export const switchStyle: Style = {layers: {primitive}}

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

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

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

@@ -0,0 +1,56 @@
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+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)',
+      },
+
+      // '& 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)',
+  },
+}
+
+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}}

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

@@ -1,11 +1,11 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {flexItem, font} from '../../styles'
+import {flexItem, font} from '../../aspects'
 import {TextStyleProps} from './types'
 
 /** @public */
 export function text(props: TextStyleProps): string | undefined {
-  return composeClassNames(
+  return _comp(
     'text',
     'block',
     flexItem(props),

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

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../styles'
+import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 export type TextSize = number

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

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.text-area': {
+    // todo
+  },
+}
+
+export const textAreaStyle: Style = {layers: {primitive}}

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

@@ -1,7 +1,8 @@
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextAreaStyleProps} from './types'
 
 export function textArea(props: TextAreaStyleProps): string | undefined {
-  return composeClassNames('text-area', _input(props))
+  return composeClassNames(_comp('text-area'), _input(props))
 }

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

@@ -0,0 +1,167 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.text-input': {
+    '--font-family': vars.font.text.family,
+
+    '@nest': {
+      '& > span': {
+        borderRadius: 'inherit',
+      },
+    },
+  },
+
+  '.text-input-prefix': {
+    'borderTop': '1px solid var(--color-border)',
+    'borderLeft': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopRightRadius': '0 !important',
+    'borderBottomRightRadius': '0 !important',
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  '.text-input-suffix': {
+    'borderTop': '1px solid var(--color-border)',
+    'borderRight': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopLeftRadius': '0 !important',
+    'borderBottomLeftRadius': '0 !important',
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  '.text-input-presentation': {
+    // position: 'absolute',
+    // top: 0,
+    // left: 0,
+    // right: 0,
+    // bottom: 0,
+    // display: 'block',
+    // pointerEvents: 'none',
+    // zIndex: 0,
+    // backgroundColor: 'var(--input-bg-color)',
+    // 'boxShadow': 'var(--input-box-shadow)',
+    // '--input-border-color': 'var(--color-input-default-enabled-border)',
+    // '--input-border-color': 'var(--color-tinted-default-border-1)',
+    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
+    // 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};
+    // '@nest': {
+    //   'input:hover + &': {
+    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
+    //   },
+    //   'input:focus + &': {
+    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
+    //   },
+    // },
+    // &[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,
+    //       })};
+    //     }
+    //   }
+    // }
+  },
+}
+
+export const textInputStyle: Style = {layers: {primitive}}

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

@@ -1,8 +1,8 @@
-// import {_resp} from '../../_resp'
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
 export function textInput(props: TextInputStyleProps): string | undefined {
-  return composeClassNames(_input(props), 'text-input')
+  return composeClassNames(_input(props), _comp('text-input'))
 }

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

@@ -0,0 +1,49 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.token': {
+    '_prefix': false,
+
+    '@nest': {
+      '&.atrule': {color: 'var(--color-token-atrule)'},
+      '&.attr-name': {color: 'var(--color-token-attr-name)'},
+      '&.attr-value': {color: 'var(--color-token-attr-value)'},
+      '&.attribute': {color: 'var(--color-token-attribute)'},
+      '&.boolean': {color: 'var(--color-token-boolean)'},
+      '&.builtin': {color: 'var(--color-token-builtin)'},
+      '&.cdata': {color: 'var(--color-token-cdata)'},
+      '&.char': {color: 'var(--color-token-char)'},
+      '&.class': {color: 'var(--color-token-class)'},
+      '&.class-name': {color: 'var(--color-token-class-name)'},
+      '&.comment': {color: 'var(--color-token-comment)'},
+      '&.constant': {color: 'var(--color-token-constant)'},
+      '&.deleted': {color: 'var(--color-token-deleted)'},
+      '&.doctype': {color: 'var(--color-token-doctype)'},
+      '&.entity': {color: 'var(--color-token-entity)'},
+      '&.function': {color: 'var(--color-token-function)'},
+      '&.hexcode': {color: 'var(--color-token-hexcode)'},
+      '&.id': {color: 'var(--color-token-id)'},
+      '&.important': {color: 'var(--color-token-important)'},
+      '&.inserted': {color: 'var(--color-token-inserted)'},
+      '&.keyword': {color: 'var(--color-token-keyword)'},
+      '&.number': {color: 'var(--color-token-number)'},
+      '&.operator': {color: 'var(--color-token-operator)'},
+      '&.prolog': {color: 'var(--color-token-prolog)'},
+      '&.property': {color: 'var(--color-token-property)'},
+      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
+      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
+      '&.punctuation': {color: 'var(--color-token-punctuation)'},
+      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
+      '&.regex': {color: 'var(--color-token-regex)'},
+      '&.selector': {color: 'var(--color-token-selector)'},
+      '&.string': {color: 'var(--color-token-string)'},
+      '&.symbol': {color: 'var(--color-token-symbol)'},
+      '&.tag': {color: 'var(--color-token-tag)'},
+      '&.unit': {color: 'var(--color-token-unit)'},
+      '&.url': {color: 'var(--color-token-url)'},
+      '&.variable': {color: 'var(--color-token-variable)'},
+    },
+  },
+}
+
+export const tokenStyle: Style = {layers: {primitive}}

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

@@ -0,0 +1,21 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.tooltip': {
+    pointerEvents: 'none',
+  },
+
+  '.tooltip-card': {
+    'willChange': 'transform',
+
+    '@nest': {
+      '&[data-animate] > *': {
+        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        opacity: `var(--motion-content-opacity, 1)`,
+        willChange: 'opacity',
+      },
+    },
+  },
+}
+
+export const tooltipStyle: Style = {layers: {primitive}}

package/src/css/primitives/tooltip/tooltip.ts

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

package/src/css/scopeClassName.ts

@@ -0,0 +1,6 @@
+import {PREFIX} from './constants'
+
+export function scopeClassName(className: string | undefined) {
+  if (className === undefined) return undefined
+  return `${PREFIX}${className.trim()}`
+}