@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

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

@@ -1,27 +1,25 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.arrow': {
-    'position': 'absolute',
+    position: 'absolute',
+    width: vars.arrow.size,
+    height: vars.arrow.size,
 
-    // todo: replace with vars?
-    'width': 'var(--arrow-size)',
-    'height': 'var(--arrow-size)',
-
-    '@nest': {
+    nest: {
       ':empty + &': {
         display: 'none',
       },
 
       '& > svg': {
         display: 'block',
-        transformOrigin: `calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)`,
+        transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`,
       },
 
       // top
       '[data-placement^="top"] > &': {
-        bottom: 'calc(0px - var(--arrow-size))',
+        bottom: `calc(0px - ${vars.arrow.size})`,
       },
       '[data-placement^="top"] > & svg': {
         transform: 'rotate(0deg)',
@@ -29,7 +27,7 @@ const primitive: StyleRules = {
 
       // right
       '[data-placement^="right"] > &': {
-        left: 'calc(0px - var(--arrow-size))',
+        left: `calc(0px - ${vars.arrow.size})`,
       },
       '[data-placement^="right"] > & svg': {
         transform: 'rotate(90deg)',
@@ -37,7 +35,7 @@ const primitive: StyleRules = {
 
       // left
       '[data-placement^="left"] > &': {
-        right: 'calc(0px - var(--arrow-size))',
+        right: `calc(0px - ${vars.arrow.size})`,
       },
       '[data-placement^="left"] > & svg': {
         transform: 'rotate(-90deg)',
@@ -45,7 +43,7 @@ const primitive: StyleRules = {
 
       // bottom
       '[data-placement^="bottom"] > &': {
-        top: 'calc(0px - var(--arrow-size))',
+        top: `calc(0px - ${vars.arrow.size})`,
       },
       '[data-placement^="bottom"] > & svg': {
         transform: 'rotate(180deg)',

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

@@ -1,21 +1,21 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @internal */
 export function _arrow(): string | undefined {
-  return _comp('arrow')
+  return _scopeClassNames('arrow')
 }
 
 /** @internal */
 export function _arrowStroke(): string | undefined {
-  return _comp('arrow-stroke')
+  return _scopeClassNames('arrow-stroke')
 }
 
 /** @internal */
 export function _arrowStrokeMask(): string | undefined {
-  return _comp('arrow-stroke-mask')
+  return _scopeClassNames('arrow-stroke-mask')
 }
 
 /** @internal */
 export function _arrowShape(): string | undefined {
-  return _comp('arrow-shape')
+  return _scopeClassNames('arrow-shape')
 }

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

@@ -1,9 +1,8 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.input': {
@@ -11,86 +10,113 @@ const primitive: StyleRules = {
   },
 
   '.input-b': {
-    '@nest': {
+    nest: {
       '& .input-presentation': {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
       },
     },
   },
 
   '.input-element': {
-    '--color-input-fg': vars.color.tinted.default.fg[2],
-    '--color-input-placeholder': vars.color.tinted.default.border[4],
-
-    'WebkitFontSmoothing': 'inherit',
-    'appearance': 'none',
-    'border': 0,
-    'outline': 'none',
-    'margin': 0,
-    'fontFamily': vars.font.text.family,
-    'fontSize': vars.input.fontSize,
-    'lineHeight': vars.input.lineHeight,
-    'letterSpacing': vars.input.letterSpacing,
-    'backgroundColor': 'transparent',
-    'color': vars.color.input.fg,
-    'padding': [
-      'calc(var(--input-padding) - var(--input-ascender-height))',
-      'var(--input-padding)',
-      'calc(var(--input-padding) - var(--input-descender-height))',
-      'var(--input-padding)',
+    WebkitFontSmoothing: 'inherit',
+    appearance: 'none',
+    border: 0,
+    outline: 'none',
+    margin: 0,
+    fontFamily: vars.font.text.family,
+    fontSize: vars.input.fontSize,
+    lineHeight: vars.input.lineHeight,
+    letterSpacing: vars.input.letterSpacing,
+    backgroundColor: 'transparent',
+    color: vars.color.input.text.fg,
+    padding: [
+      `calc(${vars.input.padding} - ${vars.input.ascenderHeight})`,
+      vars.input.padding,
+      `calc(${vars.input.padding} - ${vars.input.descenderHeight})`,
+      vars.input.padding,
     ].join(' '),
-    'borderRadius': 'inherit',
-    'position': 'relative',
-    'zIndex': 1,
-    'display': 'block',
-    'boxSizing': 'border-box',
-    'resize': 'none',
+    borderRadius: 'inherit',
+    position: 'relative',
+    zIndex: 1,
+    display: 'block',
+    boxSizing: 'border-box',
+    resize: 'none',
     // @ts-expect-error - TODO: fix this
-    'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
+    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
 
-    '@nest': {
+    nest: {
       '.input[data-icon-left] &': {
-        paddingLeft: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
+        paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`,
       },
 
       '.input[data-icon-right] &': {
-        paddingRight: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
+        paddingRight: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`,
+      },
+
+      '.input:not([data-invalid]) &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[4],
+        },
+      },
+
+      '.input:not([data-invalid]) &::placeholder': {
+        color: vars.color.input.text.placeholder,
+      },
+
+      '.input:not([data-invalid]) &:hover': {
+        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+      },
+
+      '.input:not([data-invalid]) &:focus': {
+        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+      },
+
+      '.input:not([data-invalid]) &:disabled': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[1],
+        },
+      },
+
+      '.input[data-invalid] &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[4],
+        },
       },
 
-      '&::placeholder': {
-        color: vars.color.input.placeholder,
+      '.input[data-invalid] &::placeholder': {
+        color: vars.color.input.text.placeholder,
       },
 
-      '&:hover': {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
+      '.input[data-invalid] &:hover': {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
       },
 
-      '&:focus': {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
+      '.input[data-invalid] &:focus': {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
       },
 
-      '&:disabled': {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[3],
+      '.input[data-invalid] &:disabled': {
+        [varNames.color.input.text.fg]: vars.color.tinted.critical.border[3],
       },
     },
   },
 
   '.input-presentation': {
-    [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
-    [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.input.border]: vars.color.tinted.default.border[1],
-
-    'borderRadius': 'inherit',
-    'position': 'absolute',
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'display': 'block',
-    'pointerEvents': 'none',
-    'zIndex': 0,
-
-    '@nest': {
+    backgroundColor: vars.color.input.text.bg,
+    borderRadius: 'inherit',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'block',
+    pointerEvents: 'none',
+    zIndex: 0,
+
+    nest: {
       '.input[data-prefix] &': {
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0,
@@ -101,22 +127,8 @@ const primitive: StyleRules = {
         borderBottomRightRadius: 0,
       },
 
-      '.input-element:placeholder-shown + &': {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[4],
-      },
-
-      '.input-element:hover + &': {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
-      },
-
       '.input-element:focus + &': {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
         outlineWidth: vars.input.text.focusRing.width,
         outlineStyle: 'solid',
         outlineColor: vars.color.focusRing,
@@ -124,11 +136,95 @@ const primitive: StyleRules = {
       },
 
       '.input-element:disabled + &': {
-        [varNames.color.input.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.input.border]: vars.color.tinted.default.border[0],
-
         opacity: 1,
       },
+
+      // valid
+
+      '.input:not([data-invalid]) &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[4],
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[1],
+        },
+      },
+
+      '.input:not([data-invalid])[data-read-only] .input-element + &': {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
+        },
+      },
+
+      '.input:not([data-invalid]) .input-element:placeholder-shown + &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
+        },
+      },
+
+      '.input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &': {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1],
+        },
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
+      },
+
+      '.input:not([data-invalid]) .input-element:focus + &': {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1],
+        },
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
+      },
+
+      '.input:not([data-invalid]) .input-element:disabled + &': {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
+
+          // icon
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
+        },
+      },
+
+      // invalid
+
+      '.input[data-invalid] &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[4],
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
+
+          [varNames.color.focusRing]: vars.color.solid.critical.bg[0],
+        },
+      },
+
+      '.input[data-invalid] .input-element:placeholder-shown + &': {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
+        },
+      },
+
+      '.input[data-invalid] .input-element:not(:disabled):hover + &': {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        },
+      },
+
+      '.input[data-invalid] .input-element:focus + &': {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        },
+      },
+
+      '.input[data-invalid] .input-element:disabled + &': {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[0],
+        },
+      },
     },
   },
 }

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

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

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

@@ -1,7 +1,7 @@
-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, WidthStyleProps} from '../../aspects'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {

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

@@ -1,8 +1,7 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
-import {Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.selectable': {
@@ -13,7 +12,7 @@ const primitive: StyleRules = {
     [varNames.color.border]: vars.color.tinted.border[2],
     [varNames.color.fg]: vars.color.tinted.fg[2],
 
-    '@nest': {
+    'nest': {
       '&:is(button)': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
@@ -36,9 +35,9 @@ const primitive: StyleRules = {
 
     '@media': {
       '(hover: hover)': {
-        '@nest': {
+        nest: {
           '&:not([data-disabled])': {
-            // cursor: 'pointer',
+            cursor: 'pointer',
           },
 
           '&:not([data-disabled]):hover': {

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

@@ -1,8 +1,9 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {radius} from '../../aspects'
-import {SelectableStyleProps} from './types'
+import type {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return _comp('selectable', props.tone ?? 'default', radius(props))
+  return _composeClassNames(_scopeClassNames('selectable', props.tone ?? 'default'), radius(props))
 }

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

@@ -1,6 +1,6 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../aspects'
+import type {RadiusStyleProps} from '../../aspects'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {

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

@@ -1,26 +1,25 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+import {AVATAR_COLORS, AVATAR_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Properties, Style, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Properties, Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.avatar': {
     [varNames.color.fg]: vars.color.avatar.fg,
 
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
+    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,
+    width: vars.avatar.size,
+    height: vars.avatar.size,
+    borderRadius: vars.avatar.size,
 
-    '@nest': {
+    nest: {
       'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
@@ -33,8 +32,8 @@ const primitive: StyleRules = {
       },
 
       'button&:focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
+        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.avatar.focusRing.offset,
       },
 
       'button&:focus:not(:focus-visible)': {
@@ -46,7 +45,7 @@ const primitive: StyleRules = {
         [varNames.color.avatar.fg]: vars.color.bg,
       },
 
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
+      ...AVATAR_COLORS.reduce(
         (acc, color) => {
           return {
             ...acc,
@@ -62,18 +61,18 @@ const primitive: StyleRules = {
   },
 
   '.avatar-arrow': {
-    '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,
-
-    '@nest': {
+    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,
+
+    nest: {
       '& > svg': {
         display: 'block',
         width: '11px',
@@ -102,7 +101,7 @@ const primitive: StyleRules = {
   },
 
   '.avatar-image': {
-    '@nest': {
+    nest: {
       '& > img': {
         display: 'block',
         position: 'absolute',
@@ -135,14 +134,14 @@ const primitive: StyleRules = {
   },
 
   '.avatar-counter': {
-    '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,
-
-    '@nest': {
+    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,
+
+    nest: {
       '&&': {
         minWidth: vars.avatar.size,
       },
@@ -154,7 +153,7 @@ const primitive: StyleRules = {
   },
 
   '.avatar-stack': {
-    '@nest': {
+    nest: {
       '& > div + div': {
         marginLeft: vars.avatar.distance,
       },