@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/css/index.ts

@@ -1,41 +1,143 @@
-export * from '../theme/versioning/v3_v2'
-export * from './compile/compilePalette'
-export * from './compile/compileSystem'
-export * from './compile/compileTheme'
-export * from './components/breadcrumbs'
-export * from './components/dialog'
-export * from './components/menu'
-export * from './components/skeleton'
-export * from './components/toast'
-export * from './components/tree'
-export * from './composeClassNames'
-export * from './primitives/_arrow'
-export * from './primitives/_input'
-export * from './primitives/_selectable'
-export * from './primitives/avatar'
-export * from './primitives/badge'
-export * from './primitives/box'
-export * from './primitives/button'
-export * from './primitives/card'
-export * from './primitives/checkbox'
-export * from './primitives/code'
-export * from './primitives/container'
-export * from './primitives/heading'
-export * from './primitives/kbd'
-export * from './primitives/label'
-export * from './primitives/popover'
-export * from './primitives/radio'
-export * from './primitives/select'
-export * from './primitives/spinner'
-export * from './primitives/switch'
-export * from './primitives/text'
-export * from './primitives/textArea'
-export * from './primitives/textInput'
-export * from './primitives/tooltip'
-export * from './scopeClassName'
-export * from './aspects'
+/* eslint-disable simple-import-sort/exports */
+
+export * from './layers.css'
+export * from './vars.css'
+
+// theme
+export * from './defaultTheme.css'
+
+// props
+export * from './props/alignItems/alignItems'
+export * from './props/alignItems/types'
+export * from './props/border/border'
+export * from './props/border/types'
+export * from './props/boxSizing/boxSizing'
+export * from './props/boxSizing/types'
+export * from './props/display/display'
+export * from './props/display/types'
+export * from './props/flex/flex'
+export * from './props/flex/types'
+export * from './props/flexDirection/flexDirection'
+export * from './props/flexDirection/types'
+export * from './props/flexWrap/flexWrap'
+export * from './props/flexWrap/types'
+export * from './props/font/font'
+export * from './props/font/types'
+export * from './props/gap/gap'
+export * from './props/gap/types'
+export * from './props/gridAutoColumns/gridAutoColumns'
+export * from './props/gridAutoColumns/types'
+export * from './props/gridAutoFlow/gridAutoFlow'
+export * from './props/gridAutoFlow/types'
+export * from './props/gridAutoRows/gridAutoRows'
+export * from './props/gridAutoRows/types'
+export * from './props/gridColumn/gridColumn'
+export * from './props/gridColumn/types'
+export * from './props/gridColumnEnd/gridColumnEnd'
+export * from './props/gridColumnEnd/types'
+export * from './props/gridColumnStart/gridColumnStart'
+export * from './props/gridColumnStart/types'
+export * from './props/gridRow/gridRow'
+export * from './props/gridRow/types'
+export * from './props/gridRowEnd/gridRowEnd'
+export * from './props/gridRowEnd/types'
+export * from './props/gridRowStart/gridRowStart'
+export * from './props/gridRowStart/types'
+export * from './props/gridTemplateColumns/gridTemplateColumns'
+export * from './props/gridTemplateColumns/types'
+export * from './props/gridTemplateRows/gridTemplateRows'
+export * from './props/gridTemplateRows/types'
+export * from './props/height/height'
+export * from './props/height/types'
+export * from './props/inset/inset'
+export * from './props/inset/types'
+export * from './props/justifyContent/justifyContent'
+export * from './props/justifyContent/types'
+export * from './props/margin/margin'
+export * from './props/margin/types'
+export * from './props/maxWidth/maxWidth'
+export * from './props/maxWidth/types'
+export * from './props/minHeight/minHeight'
+export * from './props/minHeight/types'
+export * from './props/minWidth/minWidth'
+export * from './props/minWidth/types'
+export * from './props/outline/outline'
+export * from './props/outline/types'
+export * from './props/overflow/overflow'
+export * from './props/overflow/types'
+export * from './props/padding/padding'
+export * from './props/padding/types'
+export * from './props/pointerEvents/pointerEvents'
+export * from './props/pointerEvents/types'
+export * from './props/position/position'
+export * from './props/position/types'
+export * from './props/radius/radius'
+export * from './props/radius/types'
+export * from './props/shadow/shadow'
+export * from './props/shadow/types'
+export * from './props/textAlign/textAlign'
+export * from './props/textAlign/types'
+export * from './props/textOverflow/textOverflow'
+export * from './props/textOverflow/types'
+export * from './props/width/width'
+export * from './props/width/types'
+
+// primitives
+export * from './primitives/_arrow/_arrow'
+export * from './primitives/_input/input'
+export * from './primitives/_input/types'
+export * from './primitives/_selectable/selectable'
+export * from './primitives/_selectable/types'
+export * from './primitives/avatar/avatar'
+export * from './primitives/avatar/types'
+export * from './primitives/badge/badge'
+export * from './primitives/badge/types'
+export * from './primitives/box/box'
+export * from './primitives/box/types'
+export * from './primitives/button/button'
+export * from './primitives/button/types'
+export * from './primitives/card/card'
+export * from './primitives/card/types'
+export * from './primitives/checkbox/checkbox'
+export * from './primitives/code/code'
+export * from './primitives/code/types'
+export * from './primitives/container/container'
+export * from './primitives/container/types'
+export * from './primitives/heading/heading'
+export * from './primitives/heading/types'
+export * from './primitives/kbd/kbd'
+export * from './primitives/kbd/types'
+export * from './primitives/label/label'
+export * from './primitives/label/types'
+export * from './primitives/popover/popover'
+export * from './primitives/radio/radio'
+export * from './primitives/root/root'
+export * from './primitives/root/types'
+export * from './primitives/select/select'
+export * from './primitives/select/types'
+export * from './primitives/spinner/spinner'
+export * from './primitives/spinner/types'
+export * from './primitives/srOnly/srOnly'
+export * from './primitives/stack/stack'
+export * from './primitives/switch/switch'
+export * from './primitives/text/text'
+export * from './primitives/text/types'
+export * from './primitives/textArea/textArea'
+export * from './primitives/textArea/types'
+export * from './primitives/textInput/textInput'
+export * from './primitives/textInput/types'
+export * from './primitives/tooltip/tooltip'
+export * from './primitives/tooltip/types'
+
+// components
+export * from './components/breadcrumbs/breadcrumbs'
+export * from './components/dialog/dialog'
+export * from './components/menu/menu'
+export * from './components/skeleton/skeleton'
+export * from './components/skeleton/types'
+export * from './components/toast/toast'
+export * from './components/tree/tree'
+
+export * from './constants'
 export * from './types'
 export * from './util'
-export * from './utils/srOnly'
-export * from './varNames'
-export * from './vars'

package/src/css/layers.css.ts

@@ -0,0 +1,9 @@
+import {layer} from '@vanilla-extract/css'
+
+/** @public */
+export const layers = {
+  theme: layer('theme'),
+  props: layer('props'),
+  primitives: layer('primitives'),
+  components: layer('components'),
+}

package/src/css/primitives/_arrow/_arrow.css.ts

@@ -0,0 +1,68 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  position: 'absolute',
+  width: vars.arrow.size,
+  height: vars.arrow.size,
+
+  selectors: {
+    ':empty + &': {
+      display: 'none',
+    },
+
+    '[data-placement^="top"] &': {
+      bottom: `calc(0px - ${vars.arrow.size})`,
+    },
+
+    '[data-placement^="right"] &': {
+      left: `calc(0px - ${vars.arrow.size})`,
+    },
+
+    '[data-placement^="left"] &': {
+      right: `calc(0px - ${vars.arrow.size})`,
+    },
+
+    '[data-placement^="bottom"] &': {
+      top: `calc(0px - ${vars.arrow.size})`,
+    },
+  },
+})
+
+export const svg = _style(layers.primitives, {
+  display: 'block',
+  transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`,
+
+  selectors: {
+    '[data-placement^="top"] &': {
+      transform: 'rotate(0deg)',
+    },
+
+    '[data-placement^="right"] &': {
+      transform: 'rotate(90deg)',
+    },
+
+    '[data-placement^="left"] &': {
+      transform: 'rotate(-90deg)',
+    },
+
+    '[data-placement^="bottom"] &': {
+      transform: 'rotate(180deg)',
+    },
+  },
+})
+
+export const strokeMask = _style(layers.primitives, {
+  // @ts-expect-error `y` is not a valid property in 'csstype'
+  y: vars.shadow.outline,
+})
+
+export const stroke = _style(layers.primitives, {
+  stroke: vars.color.shadow.outline,
+  strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
+})
+
+export const fill = _style(layers.primitives, {
+  fill: vars.color.bg,
+})

package/src/css/primitives/_arrow/_arrow.ts

@@ -1,14 +1,26 @@
-import {_comp} from '../../_comp'
+import {fill, root, stroke, strokeMask, svg} from './_arrow.css'
 
 /** @internal */
 export function _arrow(): string | undefined {
-  return _comp('arrow')
+  return root
 }
 
+/** @internal */
+export function _arrowSvg(): string | undefined {
+  return svg
+}
+
+/** @internal */
 export function _arrowStroke(): string | undefined {
-  return _comp('arrow-stroke')
+  return stroke
 }
 
+/** @internal */
+export function _arrowStrokeMask(): string | undefined {
+  return strokeMask
+}
+
+/** @internal */
 export function _arrowShape(): string | undefined {
-  return _comp('arrow-shape')
+  return fill
 }

package/src/css/primitives/_input/_input.css.ts

@@ -0,0 +1,261 @@
+import {FONT_TEXT_SIZE, type FontTextSize, SPACE, type Space} from '@sanity/ui/theme'
+
+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 = _style(layers.primitives, {
+  position: 'relative',
+})
+
+export const border = _style(layers.primitives, {})
+
+export const element = _style(layers.primitives, {
+  WebkitFontSmoothing: 'inherit',
+  appearance: 'none',
+  border: 0,
+  outline: 'none',
+  margin: 0,
+  fontFamily: vars.font.text.family,
+  fontSize: vars.input.text.fontSize,
+  lineHeight: vars.input.text.lineHeight,
+  letterSpacing: vars.input.text.letterSpacing,
+  backgroundColor: 'transparent',
+  color: vars.color.input.text.fg,
+  padding: [
+    `calc(${vars.input.text.padding} - ${vars.input.text.ascenderHeight})`,
+    vars.input.text.padding,
+    `calc(${vars.input.text.padding} - ${vars.input.text.descenderHeight})`,
+    vars.input.text.padding,
+  ].join(' '),
+  borderRadius: 'inherit',
+  position: 'relative',
+  zIndex: 1,
+  display: 'block',
+  boxSizing: 'border-box',
+  resize: 'none',
+  // See https://caniuse.com/?search=width%3A%20stretch
+  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+
+  selectors: {
+    '&::placeholder': {
+      color: vars.color.input.text.placeholder,
+      opacity: 1,
+    },
+
+    [`${root}[data-icon-left] &`]: {
+      paddingLeft: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
+    },
+
+    [`${root}[data-icon-right] &`]: {
+      paddingRight: `calc(${vars.input.text.padding} + calc(${vars.input.text.lineHeight} - ${vars.input.text.ascenderHeight} - ${vars.input.text.descenderHeight}) + ${vars.input.text.gap})`,
+    },
+
+    [`${root}:not([data-invalid]) &`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.default.fg[2],
+        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[4],
+      },
+    },
+
+    [`${root}:not([data-invalid]) &:hover`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
+      },
+    },
+
+    [`${root}:not([data-invalid]) &:focus`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.default.fg[0],
+      },
+    },
+
+    [`${root}:not([data-invalid]) &:disabled`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.default.border[4],
+        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[1],
+      },
+    },
+
+    [`${root}[data-invalid] &`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[2],
+        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
+      },
+    },
+
+    [`${root}[data-invalid] &:hover`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+      },
+    },
+
+    [`${root}[data-invalid] &:focus`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+      },
+    },
+
+    [`${root}[data-invalid] &:disabled`]: {
+      vars: {
+        [vars.color.input.text.fg]: vars.color.tinted.critical.border[4],
+        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
+      },
+    },
+  },
+})
+
+export const presentation = _style(layers.primitives, {
+  backgroundColor: vars.color.input.text.bg,
+  borderRadius: 'inherit',
+  boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'block',
+  pointerEvents: 'none',
+  zIndex: 0,
+
+  selectors: {
+    [`${root}[data-prefix] &`]: {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+
+    [`${root}[data-suffix] &`]: {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+
+    // focus ring
+    [`${element}:not([data-no-focus-ring]):focus + &`]: {
+      outlineWidth: vars.input.text.focusRing.width,
+      outlineStyle: 'solid',
+      outlineColor: vars.color.focusRing,
+      outlineOffset: vars.input.text.focusRing.offset,
+    },
+
+    // valid
+
+    [`${root}:not([data-invalid]) &`]: {
+      vars: {
+        [vars.color.input.text.bg]: vars.color.tinted.default.bg[0],
+        [vars.color.input.text.border]: vars.color.tinted.default.border[1],
+      },
+    },
+
+    [`${root}:not([data-invalid])[data-read-only] ${element} + &`]: {
+      vars: {
+        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
+      },
+    },
+
+    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
+      vars: {
+        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+      },
+    },
+
+    [`${root}:not([data-invalid]) ${element}:focus + &`]: {
+      vars: {
+        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+        [vars.color.input.text.fg]: vars.color.tinted.default.fg[1],
+      },
+    },
+
+    [`${root}:not([data-invalid]) ${element}:disabled + &`]: {
+      vars: {
+        [vars.color.input.text.bg]: vars.color.tinted.default.bg[1],
+        [vars.color.input.text.border]: vars.color.tinted.default.border[0],
+        [vars.color.muted.fg]: vars.color.tinted.default.border[4],
+      },
+    },
+
+    // invalid
+
+    [`${root}[data-invalid] &`]: {
+      vars: {
+        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+        [vars.color.input.text.border]: vars.color.tinted.critical.border[1],
+        [vars.color.muted.fg]: vars.color.tinted.critical.fg[4],
+      },
+    },
+
+    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
+      vars: {
+        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
+      },
+    },
+
+    [`${root}[data-invalid] ${element}:focus + &`]: {
+      vars: {
+        [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
+      },
+    },
+
+    [`${root}[data-invalid] ${element}:disabled + &`]: {
+      vars: {
+        [vars.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+        [vars.color.input.text.border]: vars.color.tinted.critical.border[0],
+      },
+    },
+
+    [`${root}:not(${border}) &`]: {
+      vars: {
+        [vars.color.input.text.border]: 'transparent',
+      },
+    },
+  },
+})
+
+export const fontSize: ResponsiveRuleOptions<FontTextSize> = {
+  ..._fromEntries(
+    FONT_TEXT_SIZE.map((s) => {
+      const source = vars.font.text.scale[s]
+
+      return [
+        s,
+        _responsiveStyle(layers.primitives, {
+          vars: {
+            [vars.input.text.fontSize]: source.fontSize,
+            [vars.input.text.lineHeight]: source.lineHeight,
+            [vars.input.text.letterSpacing]: source.letterSpacing,
+            [vars.input.text.ascenderHeight]: source.ascenderHeight,
+            [vars.input.text.descenderHeight]: source.descenderHeight,
+          },
+        }),
+      ]
+    }),
+  ),
+}
+
+export const padding: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((s) => [
+      s,
+      _responsiveStyle(layers.primitives, {
+        vars: {
+          [vars.input.text.padding]: vars.space[s],
+        },
+      }),
+    ]),
+  ),
+}
+
+export const gap: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((s) => [
+      s,
+      _responsiveStyle(layers.primitives, {
+        vars: {
+          [vars.input.text.gap]: vars.space[s],
+        },
+      }),
+    ]),
+  ),
+}

package/src/css/primitives/_input/input.ts

@@ -1,25 +1,29 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {radius, width} from '../../aspects'
-import {InputStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {radius} from '../../props/radius/radius'
+import {width} from '../../props/width/width'
+import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
+import type {InputStyleProps} from './types'
 
 /** @internal */
 export function _input(props: InputStyleProps): string | undefined {
-  return _comp(
-    'input',
-    props.border ? 'input-b' : undefined,
-    _resp('input', props.fontSize),
-    _resp('input-p', props.padding),
-    _resp('input-g', props.gap),
+  return _composeClassNames(
+    root,
+    props.border && border,
+    _responsiveClassName(fontSize, props.fontSize ?? 2),
+    _responsiveClassName(padding, props.padding ?? 3),
+    _responsiveClassName(gap, props.gap ?? 3),
     radius(props),
     width(props),
   )
 }
 
+/** @internal */
 export function _inputElement(): string | undefined {
-  return _comp('input-element')
+  return element
 }
 
+/** @internal */
 export function _inputPresentation(): string | undefined {
-  return _comp('input-presentation')
+  return presentation
 }

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

@@ -1,7 +1,8 @@
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {RadiusStyleProps, WidthStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {RadiusStyleProps} from '../../props/radius/types'
+import type {WidthStyleProps} from '../../props/width/types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {