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

package/src/css/components/tree/tree.ts

@@ -1,5 +1,5 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function treeItem(): string | undefined {
-  return composeClassNames('tree-item')
+  return _comp('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,11 +1,15 @@
+export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+}
+
 export function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined {
-  const names =
-    unique(classNames.map((n) => typeof n === 'string' && n.trim()).filter(Boolean)).join(' ') ||
-    undefined
-
-  return names
+  return unique(getClassNames(...classNames)).join(' ') || undefined
 }
 
 function unique<T>(array: T[]): T[] {

package/src/css/constants.ts

@@ -0,0 +1 @@
+export const PREFIX = 's-'

package/src/css/index.ts

@@ -32,7 +32,8 @@ export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
-export * from './styles'
+export * from './scopeClassName'
+export * from './aspects'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'

package/src/css/primitives/_arrow/{rules.ts → _arrow.style.ts}

@@ -1,8 +1,8 @@
-import {Rules} from '../../types'
+import {Style, StyleRules} from '../../types'
 import {vars} from '../../vars'
 
-export const _arrowRules: Rules = {
-  'arrow': {
+const primitive: StyleRules = {
+  '.arrow': {
     'position': 'absolute',
 
     // todo: replace with vars?
@@ -61,11 +61,13 @@ export const _arrowRules: Rules = {
     },
   },
 
-  'arrow-stroke': {
+  '.arrow-stroke': {
     stroke: vars.color.shadow.outline,
   },
 
-  'arrow-shape': {
+  '.arrow-shape': {
     fill: vars.color.bg,
   },
 }
+
+export const _arrowStyle: Style = {layers: {primitive}}

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

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

package/src/css/primitives/_input/__workshop__/customInput.tsx

@@ -0,0 +1,16 @@
+import {Box, Text} from '@sanity/ui'
+import {_input, _inputElement, _inputPresentation} from '@sanity/ui/css'
+
+export default function CustomInputStory() {
+  return (
+    <Box padding={4}>
+      <Box className={_input({border: true, padding: 3, radius: 2})}>
+        <button className={_inputElement()} tabIndex={0}>
+          <Text>Input text</Text>
+        </button>
+
+        <Box className={_inputPresentation()} padding={3}></Box>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: './css/input',
+  title: 'Input',
+  stories: [
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./customInput')),
+    },
+  ],
+})

package/src/css/primitives/_input/{rules.ts → _input.style.ts}

@@ -1,16 +1,15 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
+import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
 
-export const _inputRules: Rules = {
-  'input': {
+const primitive: StyleRules = {
+  '.input': {
     position: 'relative',
   },
 
-  'input-b': {
+  '.input-b': {
     '@nest': {
       '& .input-presentation': {
         boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
@@ -18,7 +17,7 @@ export const _inputRules: Rules = {
     },
   },
 
-  'input-element': {
+  '.input-element': {
     '--color-input-fg': vars.color.tinted.default.fg[2],
     '--color-input-placeholder': vars.color.tinted.default.border[4],
 
@@ -45,6 +44,7 @@ export const _inputRules: Rules = {
     'display': 'block',
     'boxSizing': 'border-box',
     'resize': 'none',
+    // @ts-expect-error - TODO: fix this
     'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
 
     '@nest': {
@@ -74,7 +74,7 @@ export const _inputRules: Rules = {
     },
   },
 
-  'input-presentation': {
+  '.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],
@@ -132,10 +132,11 @@ export const _inputRules: Rules = {
   },
 }
 
+// todo: make responsive
 for (const textSize of FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[textSize]
 
-  _inputRules[`input-${textSize}`] = {
+  primitive[`.input-${textSize}`] = {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
@@ -144,20 +145,18 @@ for (const textSize of FONT_TEXT_SIZE) {
   }
 }
 
+// todo: make responsive
 for (const space of SPACE) {
-  Object.assign(
-    _inputRules,
-    responsiveRules(`input-p-${space}`, {
-      [varNames.input.padding]: vars.space[space],
-    }),
-  )
+  primitive[`.input-p-${space}`] = {
+    [varNames.input.padding]: vars.space[space],
+  }
 }
 
+// todo: make responsive
 for (const space of SPACE) {
-  Object.assign(
-    _inputRules,
-    responsiveRules(`input-g-${space}`, {
-      [varNames.input.gap]: vars.space[space],
-    }),
-  )
+  primitive[`.input-g-${space}`] = {
+    [varNames.input.gap]: vars.space[space],
+  }
 }
+
+export const _inputStyle: Style = {layers: {primitive}}

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

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

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

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

package/src/css/primitives/_selectable/{rules.ts → _selectable.style.ts}

@@ -1,12 +1,12 @@
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 
-import {Properties, Rules} from '../../types'
+import {Properties, Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
 import {toneMap} from './_contants'
 
-export const _selectableRules: Rules = {
-  selectable: {
+const primitive: StyleRules = {
+  '.selectable': {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
 
@@ -22,6 +22,7 @@ export const _selectableRules: Rules = {
         font: 'inherit',
         textAlign: 'inherit',
         border: 0,
+        // @ts-expect-error - TODO: fix this
         width: ['-moz-available', '-webkit-fill-available', 'stretch'],
       },
 
@@ -79,6 +80,8 @@ export const _selectableRules: Rules = {
   },
 }
 
+export const _selectableStyle: Style = {layers: {primitive}}
+
 function buildSelectableTones(): Record<string, Properties> {
   const rules: Record<string, Properties> = {}
 

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

@@ -1,9 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
+import {_comp} from '../../_comp'
+import {radius} from '../../aspects'
 import {toneMap} from './_contants'
 import {SelectableStyleProps} from './types'
 
 /** @internal */
 export function _selectable(props: SelectableStyleProps): string | undefined {
-  return composeClassNames('selectable', toneMap[props.tone ?? 'default'], radius(props))
+  return _comp('selectable', toneMap[props.tone ?? 'default'], radius(props))
 }

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

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

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

@@ -0,0 +1,175 @@
+import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Properties, Style, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.avatar': {
+    '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,
+
+    '@nest': {
+      '&[data-status="inactive"]': {
+        opacity: 0.5,
+      },
+
+      // &:is(button)
+      '&:is(button)': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        margin: 0,
+        padding: 0,
+        border: 0,
+        font: 'inherit',
+        color: 'inherit',
+        outline: 'none',
+      },
+
+      '&:is(button):focus': {
+        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
+        outlineOffset: 'var(--avatar-focus-ring-offset)',
+      },
+
+      '&:is(button):focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+
+      ':disabled &, [data-disabled] &': {
+        [varNames.color.avatar.bg]: vars.color.border,
+        [varNames.color.avatar.fg]: vars.color.bg,
+      },
+
+      ...THEME_COLOR_AVATAR_COLORS.reduce(
+        (acc, color) => {
+          return {
+            ...acc,
+            [`&.${color}`]: {
+              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
+            },
+          }
+        },
+        {} as Record<string, Properties>,
+      ),
+    },
+  },
+
+  '.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': {
+      '& > svg': {
+        display: 'block',
+        width: '11px',
+        height: '7px',
+        position: 'absolute',
+        top: '-5px',
+        left: '50%',
+        transform: 'translateX(-6px)',
+      },
+
+      '[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)',
+      },
+    },
+  },
+
+  '.avatar-image': {
+    '@nest': {
+      '& > img': {
+        display: 'block',
+        position: 'absolute',
+        width: vars.avatar.size,
+        height: vars.avatar.size,
+        borderRadius: vars.avatar.size,
+      },
+
+      '& > span': {
+        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(', '),
+      },
+
+      '[data-image-error] &': {
+        display: 'none',
+      },
+    },
+  },
+
+  '.avatar-initials': {
+    color: vars.color.avatar.fg,
+    borderRadius: vars.avatar.size,
+  },
+
+  '.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': {
+      '&&': {
+        minWidth: vars.avatar.size,
+      },
+
+      '[data-hide-inner-stroke] &': {
+        boxShadow: `0 0 0 1px ${vars.color.bg}`,
+      },
+    },
+  },
+
+  '.avatar-stack': {
+    '@nest': {
+      '& > div + div': {
+        marginLeft: vars.avatar.distance,
+      },
+    },
+  },
+}
+
+for (const size of AVATAR_SIZE) {
+  _responsiveRule(primitive, `avatar-${size}`, {
+    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
+    [varNames.avatar.size]: vars.avatar.sizes[size].size,
+  })
+}
+
+export const avatarStyle: Style = {layers: {primitive}}

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

@@ -1,27 +1,27 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
 import {AvatarStyleProps} from './types'
 
 export function avatar(props: AvatarStyleProps): string | undefined {
-  return composeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
+  return _comp('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
 export function avatarArrow(): string | undefined {
-  return composeClassNames('avatar-arrow')
+  return _comp('avatar-arrow')
 }
 
 export function avatarInitials(): string | undefined {
-  return composeClassNames('avatar-initials')
+  return _comp('avatar-initials')
 }
 
 export function avatarImage(): string | undefined {
-  return composeClassNames('avatar-image')
+  return _comp('avatar-image')
 }
 
 export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-counter', _resp('avatar', props.size))
+  return _comp('avatar-counter', _resp('avatar', props.size))
 }
 
 export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-stack', _resp('avatar', props.size))
+  return _comp('avatar-stack', _resp('avatar', props.size))
 }

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

@@ -0,0 +1,22 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import {Style, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.badge': {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    verticalAlign: 'top',
+  },
+}
+
+for (const tone of THEME_COLOR_STATE_TONES) {
+  primitive[`.badge-${tone}`] = {
+    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
+    [varNames.color.fg]: vars.color.tinted[tone].fg[1],
+  }
+}
+
+export const badgeStyle: Style = {layers: {primitive}}

package/src/css/primitives/badge/badge.ts

@@ -1,8 +1,8 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
+import {_comp} from '../../_comp'
+import {radius} from '../../aspects'
 import {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return composeClassNames('badge', props.tone && `badge-${props.tone}`, radius(props))
+  return _comp('badge', props.tone && `badge-${props.tone}`, radius(props))
 }

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

@@ -1,6 +1,6 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles'
+import {RadiusStyleProps} from '../../aspects'
 
 /** @public */
 export interface BadgeStyleProps extends RadiusStyleProps {

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

@@ -0,0 +1,31 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.box': {
+    'minWidth': 0,
+    'minHeight': 0,
+
+    '@nest': {
+      '&:is(ul), &:is(ol)': {
+        listStyle: 'none',
+      },
+
+      '&.muted': {
+        backgroundColor: vars.color.muted.bg,
+      },
+    },
+  },
+
+  // sizing
+
+  '.box-content': {
+    boxSizing: 'content-box',
+  },
+
+  '.box-border': {
+    boxSizing: 'border-box',
+  },
+}
+
+export const boxStyle: Style = {layers: {primitive}}

package/src/css/primitives/box/box.ts

@@ -1,5 +1,5 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
 import {
   border,
   display,
@@ -8,6 +8,7 @@ import {
   gap,
   grid,
   gridItem,
+  height,
   inset,
   margin,
   maxWidth,
@@ -17,18 +18,19 @@ import {
   position,
   radius,
   width,
-} from '../../styles'
+} from '../../aspects'
 import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return composeClassNames(
+  return _comp(
     'box',
-    props.muted && 'muted',
+    props.muted && 'muted', // todo: consider this naming
+
+    _resp(`box`, props.sizing),
     border(props),
     display(props),
-    _resp(`h`, props.height),
-    _resp(`box`, props.sizing),
+    height(props),
     flex(props),
     flexItem(props),
     grid(props),