@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,78 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  position: 'relative',
-
-  selectors: {
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  },
-})
-
-export const input: string = _style(layers.primitives, {
-  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',
-})
-
-export const presentation: string = _style(layers.primitives, {
-  'display': 'block',
-  'position': 'relative',
-  'width': vars.input.radio.size,
-  'height': vars.input.radio.size,
-  'borderRadius': '9999px',
-  'backgroundColor': vars.color.input.radio.bg,
-  'boxShadow': `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.radio.border}`,
-
-  'vars': {
-    [vars.color.input.radio.fg]: vars.color.tinted.default.fg[0],
-    [vars.color.input.radio.bg]: vars.color.tinted.default.bg[0],
-    [vars.color.input.radio.border]: vars.color.tinted.default.border[1],
-  },
-
-  '::after': {
-    content: '""',
-    position: 'absolute',
-    top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
-    left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
-    width: vars.input.radio.markSize,
-    height: vars.input.radio.markSize,
-    backgroundColor: vars.color.input.radio.fg,
-    borderRadius: '9999px',
-    opacity: 0,
-  },
-
-  'selectors': {
-    // hovered
-    [`${input}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.radio.bg]: vars.color.tinted.default.bg[1],
-        [vars.color.input.radio.border]: vars.color.tinted.default.border[2],
-      },
-    },
-
-    // focused
-    [`${input}:not(:disabled):focus + &`]: {
-      vars: {
-        [vars.color.input.radio.border]: vars.color.tinted.default.border[2],
-      },
-    },
-
-    [`${input}:checked + &::after`]: {
-      opacity: 1,
-    },
-  },
-})

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

@@ -1,17 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {input, presentation, root} from './radio.css'
-
-/** @public */
-export function radio(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}
-
-/** @public */
-export function radioInput(): string | undefined {
-  return input
-}
-
-/** @public */
-export function radioPresentation(): string | undefined {
-  return presentation
-}

package/src/css/primitives/root/root.css.ts

@@ -1,20 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const _root: string = _style(layers.primitives, {
-  containerType: 'inline-size',
-  WebkitFontSmoothing: 'antialiased',
-  // minWidth: `${320 / 16}rem`, // 320px
-
-  selectors: {
-    'html.&': {
-      MozTextSizeAdjust: 'none',
-      WebkitTextSizeAdjust: 'none',
-      textSizeAdjust: 'none',
-    },
-
-    'div.&': {
-      position: 'relative',
-    },
-  },
-})

package/src/css/primitives/root/root.ts

@@ -1,17 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {height} from '../../props/height/height'
-import {themeClassName} from '../../theme/defaultTheme.css'
-import {card} from '../card/card'
-import {_root} from './root.css'
-import type {RootStyleProps} from './types'
-
-/** @public */
-export function root(props: RootStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    themeClassName,
-    _root,
-    card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'default'}),
-    height(props),
-  )
-}

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

@@ -1,10 +0,0 @@
-import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-
-import type {HeightStyleProps} from '../../props/height/types'
-
-/** @public */
-export interface RootStyleProps extends HeightStyleProps {
-  className?: string
-  scheme?: ColorScheme
-  tone?: CardTone
-}

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

@@ -1,24 +0,0 @@
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const root: string = _style(layers.primitives, {})
-
-export const input: string = _style(layers.primitives, {
-  ':disabled': {
-    opacity: 1,
-  },
-})
-
-export const presentation: string = _style(layers.primitives, {})
-
-globalStyle(`${presentation} > span`, {
-  '@layer': {
-    [layers.primitives]: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-    },
-  },
-})

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

@@ -1,14 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_input, _inputPresentation} from '../_input/input'
-import {presentation, root} from './select.css'
-import type {SelectStyleProps} from './types'
-
-/** @public */
-export function select(props: SelectStyleProps): string | undefined {
-  return _composeClassNames(root, _input(props))
-}
-
-/** @public */
-export function selectPresentation(): string | undefined {
-  return _composeClassNames(presentation, _inputPresentation())
-}

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

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

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

@@ -1,131 +0,0 @@
-import {ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  backgroundColor: vars.color.bg,
-  color: vars.color.fg,
-
-  selectors: {
-    'button.&': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      outline: 'none',
-      font: 'inherit',
-      textAlign: 'inherit',
-      border: 0,
-      // See https://caniuse.com/?search=width%3A%20stretch
-      width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-    },
-
-    'a.&': {
-      outline: 'none',
-      textDecoration: 'none',
-    },
-  },
-})
-
-export const tones: Record<ElementTone, string> = {
-  ..._fromEntries(
-    ELEMENT_TONES.map((t) => {
-      const tinted = vars.color.tinted[t]
-      const focused = vars.color.solid.primary
-      const disabled = vars.color.tinted.default
-
-      return [
-        t,
-        _style(layers.primitives, {
-          'vars': {
-            [vars.color.bg]: tinted.bg[0],
-            [vars.color.border]: tinted.border[1],
-            [vars.color.fg]: tinted.fg[2],
-          },
-
-          '@media': {
-            '(hover: hover)': {
-              selectors: {
-                '&:not([data-pressed]):not([data-selected]):not([data-focused]):not([data-disabled]):not(:active):not(:focus):hover':
-                  {
-                    vars: {
-                      [vars.color.bg]: tinted.bg[1],
-                      [vars.color.border]: tinted.border[2],
-                      [vars.color.fg]: tinted.fg[1],
-                    },
-                  },
-
-                // '&:not([data-disabled]):hover': {
-                //   vars: {
-                //     [vars.color.bg]: tinted.bg[1],
-                //     [vars.color.border]: tinted.border[3],
-                //     [vars.color.fg]: tinted.fg[1],
-                //     [vars.color.muted.bg]: tinted.bg[2],
-                //     [vars.color.muted.fg]: tinted.fg[4],
-                //   },
-                // },
-              },
-            },
-          },
-
-          'selectors': {
-            // selected
-            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-selected]':
-              {
-                vars: {
-                  [vars.color.bg]: tinted.bg[2],
-                  [vars.color.border]: tinted.border[4],
-                  [vars.color.fg]: tinted.fg[0],
-                  [vars.color.muted.bg]: tinted.bg[3],
-                  [vars.color.muted.fg]: tinted.fg[4],
-                },
-              },
-
-            // focused
-            '&:not([data-disabled]):focus': {
-              vars: {
-                [vars.color.bg]: focused.bg[0],
-                [vars.color.border]: focused.border[1],
-                [vars.color.fg]: focused.fg[0],
-                [vars.color.muted.bg]: focused.bg[1],
-                [vars.color.muted.fg]: focused.fg[3],
-              },
-            },
-            '&:not([data-disabled])[data-focused]': {
-              vars: {
-                [vars.color.bg]: focused.bg[0],
-                [vars.color.border]: focused.border[1],
-                [vars.color.fg]: focused.fg[0],
-                [vars.color.muted.bg]: focused.bg[1],
-                [vars.color.muted.fg]: focused.fg[3],
-              },
-            },
-
-            // // selected
-            // '&:not([data-disabled])[data-selected]': {
-            //   vars: {
-            //     [vars.color.bg]: focused.bg[0],
-            //     [vars.color.border]: focused.border[1],
-            //     [vars.color.fg]: focused.fg[0],
-            //     [vars.color.muted.bg]: focused.bg[1],
-            //     [vars.color.muted.fg]: focused.fg[3],
-            //   },
-            // },
-
-            // disabled
-            '&[data-disabled]': {
-              vars: {
-                [vars.color.bg]: disabled.bg[0],
-                [vars.color.border]: disabled.border[1],
-                [vars.color.fg]: disabled.border[4],
-                [vars.color.muted.bg]: disabled.bg[1],
-                [vars.color.muted.fg]: disabled.border[4],
-              },
-            },
-          },
-        }),
-      ]
-    }),
-  ),
-}

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

@@ -1,9 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {radius} from '../../props/radius/radius'
-import {root, tones} from './selectable.css'
-import type {SelectableStyleProps} from './types'
-
-/** @internal */
-export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, tones[props.tone ?? 'default'], radius(props))
-}

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

@@ -1,9 +0,0 @@
-import type {ElementTone} from '@sanity/ui/theme'
-
-import type {RadiusStyleProps} from '../../props/radius/types'
-
-/** @internal */
-export interface SelectableStyleProps extends RadiusStyleProps {
-  className?: string
-  tone?: ElementTone
-}

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

@@ -1,19 +0,0 @@
-import {keyframes} from '@vanilla-extract/css'
-
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-const spin = keyframes({
-  from: {
-    transform: 'rotate(0deg)',
-  },
-  to: {
-    transform: 'rotate(360deg)',
-  },
-})
-
-export const root: string = _style(layers.primitives, {})
-
-export const spinnerIcon: string = _style(layers.primitives, {
-  animation: `${spin} 500ms linear infinite`,
-})

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

@@ -1,13 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root, spinnerIcon} from './spinner.css'
-import type {SpinnerStyleProps} from './types'
-
-/** @public */
-export function spinner(props: SpinnerStyleProps): string | undefined {
-  return _composeClassNames(props.className, root)
-}
-
-/** @public */
-export function animatedSpinnerIcon(): string {
-  return spinnerIcon
-}

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

@@ -1,4 +0,0 @@
-/** @public */
-export interface SpinnerStyleProps {
-  className?: string
-}

package/src/css/primitives/srOnly/srOnly.css.ts

@@ -1,10 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const root: string = _style(layers.primitives, {
-  display: 'block',
-  width: 0,
-  height: 0,
-  position: 'absolute',
-  overflow: ['hidden', 'clip'],
-})

package/src/css/primitives/srOnly/srOnly.ts

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root} from './srOnly.css'
-
-/** @public */
-export function srOnly(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}

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

@@ -1,6 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-
-export const root: string = _style(layers.primitives, {
-  gridTemplateColumns: 'minmax(0, 1fr)',
-})

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

@@ -1,7 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {root} from './stack.css'
-
-/** @public */
-export function stack(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}

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

@@ -1,98 +0,0 @@
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {})
-
-export const input: string = _style(layers.primitives, {
-  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,
-})
-
-export const presentation: string = _style(layers.primitives, {
-  vars: {
-    [vars.color.input.switch.bg]: vars.color.tinted.default.border[2],
-    [vars.color.input.switch.fg]: vars.color.tinted.default.bg[0],
-    [vars.input.switch.thumb.offset]: '0',
-    [vars.input.switch.thumb.size]:
-      `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`,
-  },
-  display: 'block',
-  position: 'relative',
-  width: vars.input.switch.width,
-  height: vars.input.switch.height,
-  borderRadius: `calc(${vars.input.switch.height} / 2)`,
-  outlineOffset: vars.input.switch.focusRing.offset,
-
-  // Make sure it’s not possible to interact with the presentation element
-  pointerEvents: 'none',
-
-  selectors: {
-    [`${input}:not(:checked):hover + &`]: {
-      vars: {
-        [vars.color.input.switch.bg]: vars.color.tinted.default.border[4],
-      },
-    },
-
-    [`${input}:checked + &`]: {
-      vars: {
-        [vars.color.input.switch.bg]: vars.color.solid.default.bg[0],
-        [vars.color.input.switch.fg]: vars.color.solid.default.fg[0],
-        [vars.input.switch.thumb.offset]:
-          `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`,
-      },
-    },
-
-    [`${input}:indeterminate + &`]: {
-      vars: {
-        [vars.input.switch.thumb.offset]:
-          `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,
-      },
-    },
-
-    [`${input}:focus + &`]: {
-      outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`,
-    },
-
-    [`${input}:focus:not(:focus-visible) + &`]: {
-      outline: 'none',
-    },
-  },
-})
-
-export const track: string = _style(layers.primitives, {
-  display: 'block',
-  backgroundColor: vars.color.input.switch.bg,
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  borderRadius: 'inherit',
-  transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
-})
-
-export const thumb: string = _style(layers.primitives, {
-  display: 'block',
-  position: 'absolute',
-  left: vars.input.switch.padding,
-  top: vars.input.switch.padding,
-  width: vars.input.switch.thumb.size,
-  height: vars.input.switch.thumb.size,
-  backgroundColor: vars.color.input.switch.fg,
-  borderRadius: '9999px',
-  transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
-  transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
-})

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

@@ -1,27 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {input, presentation, root, thumb, track} from './switch.css'
-
-/** @public */
-export function _switch(props: {className?: string}): string | undefined {
-  return _composeClassNames(props.className, root)
-}
-
-/** @public */
-export function _switchElement(): string | undefined {
-  return input
-}
-
-/** @public */
-export function _switchPresentation(): string | undefined {
-  return presentation
-}
-
-/** @public */
-export function _switchThumb(): string | undefined {
-  return thumb
-}
-
-/** @public */
-export function _switchTrack(): string | undefined {
-  return track
-}

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

@@ -1,86 +0,0 @@
-import {FONT_TEXT_SIZE, type FontTextSize} from '@sanity/ui/theme'
-import {globalStyle} from '@vanilla-extract/css'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_responsiveStyle} from '../../_responsiveStyle.css'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import type {ResponsiveRuleOptions} from '../../types'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  vars: {
-    [vars.font.family]: vars.font.text.family,
-    [vars.font.featureSettings]: vars.font.text.featureSettings,
-
-    [vars.font.weight.regular]: vars.font.text.weight.regular,
-    [vars.font.weight.medium]: vars.font.text.weight.medium,
-    [vars.font.weight.semibold]: vars.font.text.weight.semibold,
-    [vars.font.weight.bold]: vars.font.text.weight.bold,
-  },
-
-  color: vars.color.fg,
-})
-
-globalStyle(`${root} a`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.link.fg,
-      textDecoration: 'none',
-    },
-  },
-})
-
-globalStyle(`${root} a:hover`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.fg,
-    },
-  },
-})
-
-globalStyle(`${root} code`, {
-  '@layer': {
-    [layers.primitives]: {
-      fontFamily: vars.font.code.family,
-      color: vars.color.code.fg,
-      backgroundColor: vars.color.code.bg,
-      borderRadius: vars.radius[2],
-    },
-  },
-})
-
-globalStyle(`${root} svg`, {
-  '@layer': {
-    [layers.primitives]: {
-      color: vars.color.muted.fg,
-    },
-  },
-})
-
-export const muted: string = _style(layers.primitives, {
-  color: vars.color.muted.fg,
-})
-
-export const sizes: ResponsiveRuleOptions<FontTextSize> = {
-  ..._fromEntries(
-    FONT_TEXT_SIZE.map((s) => {
-      const v = vars.font.text.scale[s]
-
-      return [
-        s,
-        _responsiveStyle(layers.primitives, {
-          vars: {
-            [vars.font.fontSize]: v.fontSize,
-            [vars.font.lineHeight]: v.lineHeight,
-            [vars.font.letterSpacing]: v.letterSpacing,
-            [vars.font.iconSize]: v.iconSize,
-            [vars.font.ascenderHeight]: v.ascenderHeight,
-            [vars.font.descenderHeight]: v.descenderHeight,
-            [vars.font.customIconSize]: v.customIconSize,
-          },
-        }),
-      ]
-    }),
-  ),
-}

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

@@ -1,24 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {_responsiveClassName} from '../../_responsiveClassName'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {font} from '../../props/font/font'
-import {maxWidth} from '../../props/maxWidth/maxWidth'
-import {textAlign} from '../../props/textAlign/textAlign'
-import {muted, root, sizes} from './text.css'
-import type {TextStyleProps} from './types'
-
-/** @public */
-export function text(props: TextStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    props.muted && muted,
-    _responsiveClassName(sizes, props.size ?? 1),
-    display({display: 'block'}),
-    flex(props),
-    font(props),
-    maxWidth(props),
-    textAlign({textAlign: props.align}),
-  )
-}