@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

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

@@ -1,11 +1,12 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {card, root} from './popover.css'
 
 /** @public */
-export function popover(): string | undefined {
-  return _scopeClassNames('popover')
+export function popover(props: {className?: string}) {
+  return _composeClassNames(props.className, root)
 }
 
 /** @public */
-export function popoverCard(): string | undefined {
-  return _scopeClassNames('popover-card')
+export function popoverCard() {
+  return _composeClassNames(card)
 }

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 = _style(layers.primitives, {
+  position: 'relative',
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  },
+})
+
+export const input = _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 = _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 1px ${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,6 +1,17 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {input, presentation, root} from './radio.css'
 
 /** @public */
-export function radio(): string | undefined {
-  return _scopeClassNames('radio')
+export function radio(props: {className?: string}) {
+  return _composeClassNames(props.className, root)
+}
+
+/** @public */
+export function radioInput() {
+  return input
+}
+
+/** @public */
+export function radioPresentation() {
+  return presentation
 }

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 = _style(layers.primitives, {})
+
+export const input = _style(layers.primitives, {
+  ':disabled': {
+    opacity: 1,
+  },
+})
+
+export const presentation = _style(layers.primitives, {})
+
+globalStyle(`${presentation} > span`, {
+  '@layer': {
+    [layers.primitives]: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+    },
+  },
+})

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

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

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

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

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

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

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

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

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

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

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 = _style(layers.primitives, {
+  gridTemplateColumns: 'minmax(0, 1fr)',
+})

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

@@ -1,6 +1,7 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {root} from './stack.css'
 
 /** @public */
-export function stack(): string | undefined {
-  return _scopeClassNames('stack')
+export function stack(props: {className?: string}) {
+  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 = _style(layers.primitives, {})
+
+export const input = _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 = _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}[data-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 = _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 = _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,26 +1,27 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {input, presentation, root, thumb, track} from './switch.css'
 
 /** @public */
-export function _switch(): string | undefined {
-  return _scopeClassNames('switch')
+export function _switch(props: {className?: string}): string | undefined {
+  return _composeClassNames(props.className, root)
 }
 
 /** @public */
 export function _switchElement(): string | undefined {
-  return _scopeClassNames('switch-element')
+  return input
 }
 
 /** @public */
 export function _switchPresentation(): string | undefined {
-  return _scopeClassNames('switch-presentation')
+  return presentation
 }
 
 /** @public */
 export function _switchThumb(): string | undefined {
-  return _scopeClassNames('switch-thumb')
+  return thumb
 }
 
 /** @public */
 export function _switchTrack(): string | undefined {
-  return _scopeClassNames('switch-track')
+  return track
 }

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

@@ -0,0 +1,85 @@
+import {FONT_TEXT_SIZE} 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 {vars} from '../../vars.css'
+
+export const root = _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 = _style(layers.primitives, {
+  color: vars.color.muted.fg,
+})
+
+export const sizes = {
+  ..._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,14 +1,18 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {flexItem, font, textAlign} from '../../aspects'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display, flex, font, textAlign} from '../../props'
+import {muted, root, sizes} from './text.css'
 import type {TextStyleProps} from './types'
 
 /** @public */
 export function text(props: TextStyleProps): string | undefined {
   return _composeClassNames(
-    _scopeClassNames('text', 'block', props.muted && 'text-muted', _resp(`text`, props.size)),
-    flexItem(props),
+    props.className,
+    root,
+    props.muted && muted,
+    _responsiveClassName(sizes, props.size ?? 1),
+    display({display: 'block'}),
+    flex(props),
     font(props),
     textAlign({textAlign: props.align}),
   )

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

@@ -1,16 +1,17 @@
-import type {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
+import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+export interface TextStyleProps extends FlexStyleProps, FontStyleProps {
   /**
    * @deprecated Will be removed in next major version
    */
   accent?: boolean
   align?: TextAlignStyleProps['textAlign']
+  className?: string
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }

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

@@ -0,0 +1,4 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const root = _style(layers.primitives, {})

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

@@ -1,9 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
+import {root} from './textArea.css'
 import type {TextAreaStyleProps} from './types'
 
 /** @public */
 export function textArea(props: TextAreaStyleProps): string | undefined {
-  return _composeClassNames(_scopeClassNames('text-area'), _input(props))
+  return _composeClassNames(props.className, root, _input(props))
 }

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

@@ -1,5 +1,7 @@
 import type {InputStyleProps} from '../_input'
 
 /** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TextAreaStyleProps extends InputStyleProps {}
+
+export interface TextAreaStyleProps extends InputStyleProps {
+  className?: string
+}

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

@@ -0,0 +1,41 @@
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {})
+
+export const prefix = _style(layers.primitives, {
+  borderTop: `1px solid ${vars.color.border}`,
+  borderLeft: `1px solid ${vars.color.border}`,
+  borderBottom: `1px solid ${vars.color.border}`,
+  borderTopLeftRadius: 'inherit',
+  borderBottomLeftRadius: 'inherit',
+})
+
+globalStyle(`${prefix} > span`, {
+  [`@layer ${layers.primitives}`]: {
+    display: 'block',
+    margin: '-1px',
+  },
+})
+
+export const element = _style(layers.primitives, {
+  borderRadius: 'inherit',
+})
+
+export const suffix = _style(layers.primitives, {
+  borderTop: `1px solid ${vars.color.border}`,
+  borderRight: `1px solid ${vars.color.border}`,
+  borderBottom: `1px solid ${vars.color.border}`,
+  borderTopRightRadius: 'inherit',
+  borderBottomRightRadius: 'inherit',
+})
+
+globalStyle(`${suffix} > span`, {
+  [`@layer ${layers.primitives}`]: {
+    display: 'block',
+    margin: '-1px',
+  },
+})

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

@@ -1,24 +1,24 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
+import {element, prefix, root, suffix} from './textInput.css'
 import type {TextInputStyleProps} from './types'
 
 /** @public */
 export function textInput(props: TextInputStyleProps): string | undefined {
-  return _composeClassNames(_scopeClassNames('text-input'), _input(props))
+  return _composeClassNames(props.className, root, _input(props))
 }
 
 /** @public */
 export function textInputPrefix(): string | undefined {
-  return _scopeClassNames('text-input-prefix')
+  return prefix
 }
 
 /** @public */
 export function textInputElement(): string | undefined {
-  return _scopeClassNames('text-input-element')
+  return element
 }
 
 /** @public */
 export function textInputSuffix(): string | undefined {
-  return _scopeClassNames('text-input-suffix')
+  return suffix
 }

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

@@ -1,5 +1,7 @@
 import type {InputStyleProps} from '../_input'
 
 /** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TextInputStyleProps extends InputStyleProps {}
+
+export interface TextInputStyleProps extends InputStyleProps {
+  className?: string
+}

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

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

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

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

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

@@ -1,6 +1,10 @@
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+// import {_scopeClassNames} from '../../_scopeClassNames'
+import {root} from './tooltip.css'
+import type {TooltipStyleProps} from './types'
 
 /** @public */
-export function tooltip(): string | undefined {
-  return _scopeClassNames('tooltip')
+export function tooltip(props: TooltipStyleProps): string | undefined {
+  // return _scopeClassNames('tooltip')
+  return _composeClassNames(props.className, root)
 }

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

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

package/src/css/props/alignItems/alignItems.css.ts

@@ -0,0 +1,22 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {AlignItems} from './types'
+
+export const options: ResponsiveRuleOptions<AlignItems> = {
+  'baseline': _responsiveStyle(layers.utils, {
+    alignItems: 'baseline',
+  }),
+  'center': _responsiveStyle(layers.utils, {
+    alignItems: 'center',
+  }),
+  'flex-end': _responsiveStyle(layers.utils, {
+    alignItems: 'flex-end',
+  }),
+  'flex-start': _responsiveStyle(layers.utils, {
+    alignItems: 'flex-start',
+  }),
+  'stretch': _responsiveStyle(layers.utils, {
+    alignItems: 'stretch',
+  }),
+}