@sanity/ui 3.0.2 → 4.0.0-static.2

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

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

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

@@ -0,0 +1,19 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const _root: string = _style(layers.primitives, {
+  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import type {FontTextSize} from '@sanity/ui/theme'
+
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {FontStyleProps} from '../../props/font/types'
+import type {MaxWidthStyleProps} from '../../props/maxWidth/types'
+import type {TextAlignStyleProps} from '../../props/textAlign/types'
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type TextSize = number
+
+/** @public */
+export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
+  muted?: boolean
+  size?: ResponsiveProp<FontTextSize>
+}