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

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

@@ -0,0 +1,258 @@
+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',
+  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.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,19 +1,17 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {radius, width} from '../../aspects'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {radius, width} from '../../props'
+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 _composeClassNames(
-    _scopeClassNames(
-      'input',
-      props.border ? 'input-b' : undefined,
-      _resp('input', props.fontSize),
-      _resp('input-p', props.padding),
-      _resp('input-g', props.gap),
-    ),
+    root,
+    props.border && border,
+    _responsiveClassName(fontSize, props.fontSize ?? 2),
+    _responsiveClassName(padding, props.padding ?? 3),
+    _responsiveClassName(gap, props.gap ?? 3),
     radius(props),
     width(props),
   )
@@ -21,10 +19,10 @@ export function _input(props: InputStyleProps): string | undefined {
 
 /** @internal */
 export function _inputElement(): string | undefined {
-  return _scopeClassNames('input-element')
+  return element
 }
 
 /** @internal */
 export function _inputPresentation(): string | undefined {
-  return _scopeClassNames('input-presentation')
+  return presentation
 }

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

@@ -1,6 +1,6 @@
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps, WidthStyleProps} from '../../aspects'
+import type {RadiusStyleProps, WidthStyleProps} from '../../props'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/_selectable/_selectable.css.ts

@@ -0,0 +1,121 @@
+import {THEME_COLOR_STATE_TONES} 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 = _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 = {
+  ..._fromEntries(
+    THEME_COLOR_STATE_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[2],
+            [vars.color.fg]: tinted.fg[2],
+          },
+
+          '@media': {
+            '(hover: hover)': {
+              ':hover': {
+                vars: {
+                  [vars.color.bg]: tinted.bg[1],
+                },
+              },
+
+              'selectors': {
+                '&:not([data-disabled])': {
+                  cursor: 'pointer',
+                },
+
+                '&:not([data-disabled]):hover': {
+                  [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': {
+            // pressed
+            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
+              {
+                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],
+              },
+            },
+
+            // 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 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {radius} from '../../aspects'
+import {radius} from '../../props'
+import {root, tones} from './_selectable.css'
 import type {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _composeClassNames(_scopeClassNames('selectable', props.tone ?? 'default'), radius(props))
+  return _composeClassNames(props.className, root, tones[props.tone ?? 'default'], radius(props))
 }

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

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

package/src/css/primitives/avatar/avatar.css.ts

@@ -0,0 +1,175 @@
+import {AVATAR_COLORS, AVATAR_SIZE, type AvatarSize} 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 stack = _style(layers.primitives, {})
+
+export const root = _style(layers.primitives, {
+  backgroundColor: vars.color.avatar.bg,
+  position: 'relative',
+  boxSizing: 'border-box',
+  userSelect: 'none',
+  boxShadow: `0 0 0 1px ${vars.color.bg}`,
+  lineHeight: 0,
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: vars.avatar.size,
+
+  vars: {
+    [vars.color.fg]: vars.color.avatar.fg,
+  },
+
+  selectors: {
+    [`${stack} > & + &`]: {
+      marginLeft: vars.avatar.distance,
+    },
+
+    'button.&': {
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: 'inherit',
+      color: 'inherit',
+      outline: 'none',
+    },
+
+    'button.&:focus': {
+      outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.avatar.focusRing.offset,
+    },
+
+    'button.&:focus:not(:focus-visible)': {
+      boxShadow: 'none',
+    },
+
+    ':disabled &, [data-disabled] &': {
+      [vars.color.avatar.bg]: vars.color.border,
+      [vars.color.avatar.fg]: vars.color.bg,
+    },
+  },
+})
+
+export const colors = {
+  ..._fromEntries(
+    AVATAR_COLORS.map((c) => [
+      c,
+      _style(layers.primitives, {
+        vars: {
+          [vars.color.avatar.bg]: vars.color.avatar[c].bg,
+          [vars.color.avatar.fg]: vars.color.avatar[c].fg,
+        },
+      }),
+    ]),
+  ),
+}
+
+export const arrow = _style(layers.primitives, {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  zIndex: 0,
+  opacity: 0,
+  transition: 'all 0.2s linear',
+  transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+
+  selectors: {
+    '[data-arrow-position="inside"] > &': {
+      transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+      opacity: 0,
+    },
+
+    '[data-arrow-position="top"] > &': {
+      opacity: 1,
+      transform: 'rotate(0deg)',
+    },
+
+    '[data-arrow-position="bottom"] > &': {
+      opacity: 1,
+      transform: 'rotate(-180deg)',
+    },
+  },
+})
+
+export const arrowSvg = _style(layers.primitives, {
+  display: 'block',
+  width: '11px',
+  height: '7px',
+  position: 'absolute',
+  top: '-5px',
+  left: '50%',
+  transform: 'translateX(-6px)',
+})
+
+export const image = _style(layers.primitives, {
+  display: 'block',
+  position: 'absolute',
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: vars.avatar.size,
+
+  selectors: {
+    '[data-image-error] &': {
+      display: 'none',
+    },
+  },
+})
+
+export const imageOutline = _style(layers.primitives, {
+  display: 'block',
+  position: 'absolute',
+  width: vars.avatar.size,
+  height: vars.avatar.size,
+  borderRadius: vars.avatar.size,
+  boxShadow: [
+    `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+    `inset 0 0 0 1.75px ${vars.color.bg}`,
+  ].join(', '),
+})
+
+export const initials = _style(layers.primitives, {
+  color: vars.color.avatar.fg,
+  borderRadius: vars.avatar.size,
+})
+
+export const counter = _style(layers.primitives, {
+  color: vars.color.fg,
+  backgroundColor: vars.color.bg,
+  boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
+  userSelect: 'none',
+  borderRadius: vars.avatar.size,
+  height: vars.avatar.size,
+
+  selectors: {
+    '&&': {
+      minWidth: vars.avatar.size,
+    },
+
+    '[data-hide-inner-stroke] &': {
+      boxShadow: `0 0 0 1px ${vars.color.bg}`,
+    },
+  },
+})
+
+export const scale: ResponsiveRuleOptions<AvatarSize> = {
+  ..._fromEntries(
+    AVATAR_SIZE.map((s) => [
+      s,
+      _responsiveStyle(layers.primitives, {
+        vars: {
+          [vars.avatar.distance]: vars.avatar.scale[s].distance,
+          [vars.avatar.size]: vars.avatar.scale[s].size,
+        },
+      }),
+    ]),
+  ),
+}