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

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

@@ -1,33 +1,68 @@
-import {_resp} from '../../_resp'
-import {_scopeClassNames} from '../../_scopeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props'
+import {
+  arrow,
+  arrowSvg,
+  colors,
+  counter,
+  image,
+  imageOutline,
+  initials,
+  root,
+  scale,
+  stack,
+} from './avatar.css'
 import type {AvatarStyleProps} from './types'
 
 /** @public */
 export function avatar(props: AvatarStyleProps): string | undefined {
-  return _scopeClassNames('avatar', props.color || 'gray', _resp('avatar', props.size))
+  return _composeClassNames(
+    props.className,
+    root,
+    colors[props.color ?? 'gray'],
+    _responsiveClassName(scale, props.size ?? 1),
+    flex({flex: 'none'}),
+  )
 }
 
 /** @public */
 export function avatarArrow(): string | undefined {
-  return _scopeClassNames('avatar-arrow')
+  return arrow
+}
+
+/** @public */
+export function avatarArrowSvg(): string | undefined {
+  return arrowSvg
 }
 
 /** @public */
 export function avatarInitials(): string | undefined {
-  return _scopeClassNames('avatar-initials')
+  return initials
 }
 
 /** @public */
 export function avatarImage(): string | undefined {
-  return _scopeClassNames('avatar-image')
+  return image
+}
+
+/** @public */
+export function avatarImageOutline(): string | undefined {
+  return imageOutline
 }
 
 /** @public */
-export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return _scopeClassNames('avatar-counter', _resp('avatar', props.size))
+export function avatarCounter(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined {
+  return _composeClassNames(props.className, counter, _responsiveClassName(scale, props.size ?? 1))
 }
 
 /** @public */
-export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return _scopeClassNames('avatar-stack', _resp('avatar', props.size))
+export function avatarStack(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined {
+  return _composeClassNames(props.className, stack, _responsiveClassName(scale, props.size ?? 1))
 }

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

@@ -4,6 +4,7 @@ import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface AvatarStyleProps {
+  className?: string
   color: AvatarColor
   size: ResponsiveProp<AvatarSize>
 }

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

@@ -0,0 +1,26 @@
+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,
+  verticalAlign: 'top',
+})
+
+export const tones = {
+  ..._fromEntries(
+    THEME_COLOR_STATE_TONES.map((t) => [
+      t,
+      _style(layers.primitives, {
+        vars: {
+          [vars.color.bg]: vars.color.tinted[t].bg[2],
+          [vars.color.fg]: vars.color.tinted[t].fg[3],
+        },
+      }),
+    ]),
+  ),
+}

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

@@ -1,12 +1,8 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {radius} from '../../aspects'
+import {root, tones} from './badge.css'
 import type {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return _composeClassNames(
-    _scopeClassNames('badge', props.tone && `badge-${props.tone}`),
-    radius(props),
-  )
+  return _composeClassNames(props.className, root, tones[props.tone ?? 'default'])
 }

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

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

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

@@ -0,0 +1,19 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  selectors: {
+    'iframe.&': {
+      border: 'none',
+    },
+
+    'ul.&, ol.&': {
+      listStyle: 'none',
+    },
+  },
+})
+
+export const muted = _style(layers.primitives, {
+  backgroundColor: vars.color.muted.bg,
+})

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

@@ -1,44 +1,72 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
 import {
+  alignItems,
   border,
   boxSizing,
   display,
   flex,
-  flexItem,
+  flexDirection,
+  flexWrap,
   gap,
-  grid,
-  gridItem,
+  gridAutoColumns,
+  gridAutoFlow,
+  gridAutoRows,
+  gridColumn,
+  gridColumnEnd,
+  gridColumnStart,
+  gridRow,
+  gridRowEnd,
+  gridRowStart,
+  gridTemplateColumns,
+  gridTemplateRows,
   height,
   inset,
+  justifyContent,
   margin,
   maxWidth,
   minHeight,
   minWidth,
+  outline,
   overflow,
   padding,
   pointerEvents,
   position,
   radius,
+  shadow,
   textAlign,
   width,
-} from '../../aspects'
+} from '../../props'
+import {muted, root} from './box.css'
 import type {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
   return _composeClassNames(
-    _scopeClassNames('box', props.muted && 'muted', props.outline && `outline-${props.outline}`),
+    props.className,
+    root,
+    props.muted && muted,
+    alignItems(props),
     border(props),
     boxSizing({boxSizing: props.sizing}),
     display(props),
     height(props),
     flex(props),
-    flexItem(props),
-    grid(props),
-    gridItem(props),
+    flexDirection(props),
+    flexWrap(props),
     gap(props),
+    gridAutoColumns(props),
+    gridAutoFlow(props),
+    gridAutoRows(props),
+    gridColumn(props),
+    gridColumnEnd(props),
+    gridColumnStart(props),
+    gridRow(props),
+    gridRowEnd(props),
+    gridRowStart(props),
+    gridTemplateColumns(props),
+    gridTemplateRows(props),
     inset(props),
+    justifyContent(props),
     margin(props),
     maxWidth(props),
     minHeight(props),
@@ -47,7 +75,9 @@ export function box(props: BoxStyleProps): string | undefined {
     padding(props),
     pointerEvents(props),
     position(props),
+    outline(props),
     radius(props),
+    shadow(props),
     textAlign(props),
     width(props),
   )

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

@@ -1,14 +1,26 @@
 import type {
+  AlignItemsStyleProps,
   BorderStyleProps,
   BoxSizingStyleProps,
   DisplayStyleProps,
-  FlexItemStyleProps,
+  FlexDirectionStyleProps,
   FlexStyleProps,
+  FlexWrapStyleProps,
   GapStyleProps,
-  GridItemStyleProps,
-  GridStyleProps,
+  GridAutoColumnsStyleProps,
+  GridAutoFlowStyleProps,
+  GridAutoRowsStyleProps,
+  GridColumnEndStyleProps,
+  GridColumnStartStyleProps,
+  GridColumnStyleProps,
+  GridRowEndStyleProps,
+  GridRowStartStyleProps,
+  GridRowStyleProps,
+  GridTemplateColumnsStyleProps,
+  GridTemplateRowsStyleProps,
   HeightStyleProps,
   InsetStyleProps,
+  JustifyContentStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
   MinHeightStyleProps,
@@ -18,21 +30,34 @@ import type {
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  ShadowStyleProps,
   TextAlignStyleProps,
   WidthStyleProps,
-} from '../../aspects'
+} from '../../props'
 
 /** @public */
 export interface BoxStyleProps
-  extends BorderStyleProps,
+  extends AlignItemsStyleProps,
+    BorderStyleProps,
     DisplayStyleProps,
+    FlexDirectionStyleProps,
     FlexStyleProps,
-    FlexItemStyleProps,
+    FlexWrapStyleProps,
     GapStyleProps,
-    GridStyleProps,
-    GridItemStyleProps,
+    GridAutoColumnsStyleProps,
+    GridAutoFlowStyleProps,
+    GridAutoRowsStyleProps,
+    GridColumnEndStyleProps,
+    GridColumnStartStyleProps,
+    GridColumnStyleProps,
+    GridRowEndStyleProps,
+    GridRowStartStyleProps,
+    GridRowStyleProps,
+    GridTemplateColumnsStyleProps,
+    GridTemplateRowsStyleProps,
     HeightStyleProps,
     InsetStyleProps,
+    JustifyContentStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
     MinHeightStyleProps,
@@ -42,8 +67,10 @@ export interface BoxStyleProps
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    ShadowStyleProps,
     TextAlignStyleProps,
     WidthStyleProps {
+  className?: string
   muted?: boolean
   outline?: 'none'
   sizing?: BoxSizingStyleProps['boxSizing']

package/src/css/primitives/button/button.css.ts

@@ -0,0 +1,285 @@
+import {AVATAR_COLORS, 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, {
+  WebkitFontSmoothing: 'inherit',
+  alignItems: 'center',
+  appearance: 'none',
+  font: 'inherit',
+  outline: 'none',
+  userSelect: 'none',
+  textDecoration: 'none',
+  border: 0,
+  boxSizing: 'border-box',
+  padding: 0,
+  overflow: 'hidden',
+  margin: 0,
+  textAlign: 'left',
+  position: 'relative',
+  verticalAlign: 'top',
+  backgroundColor: vars.color.bg,
+  color: vars.color.fg,
+
+  selectors: {
+    '&::-moz-focus-inner': {
+      border: 0,
+      padding: 0,
+    },
+
+    '&:focus': {
+      outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
+      outlineOffset: vars.button.focusRing.offset,
+    },
+
+    '&:focus:not(:focus-visible)': {
+      outline: 'none',
+    },
+  },
+})
+
+export const modes = {
+  default: _style(layers.primitives, {}),
+  ghost: _style(layers.primitives, {boxShadow: vars.button.boxShadow}),
+  bleed: _style(layers.primitives, {}),
+}
+
+export const loadingBox = _style(layers.primitives, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: vars.color.bg,
+  borderRadius: 'inherit',
+  zIndex: 1,
+  opacity: 0.8,
+})
+
+// todo
+
+export const tones = {
+  ..._fromEntries(
+    THEME_COLOR_STATE_TONES.map((t) => {
+      const solid = vars.color.solid[t]
+      const tinted = vars.color.tinted[t]
+
+      return [
+        t,
+        _style(layers.primitives, {
+          selectors: {
+            // default
+
+            [`&.${modes.default}`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[0],
+                [vars.color.border]: solid.border[1],
+                [vars.color.code.bg]: solid.bg[1],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[1],
+                [vars.color.muted.fg]: solid.fg[4],
+                [vars.button.boxShadow]: 'none',
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[1],
+                [vars.color.border]: solid.border[2],
+                [vars.color.code.bg]: solid.bg[2],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[2],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[2],
+                [vars.color.border]: solid.border[3],
+                [vars.color.code.bg]: solid.bg[3],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[3],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: solid.bg[2],
+                [vars.color.border]: solid.border[3],
+                [vars.color.code.bg]: solid.bg[3],
+                [vars.color.code.fg]: solid.fg[4],
+                [vars.color.fg]: solid.fg[0],
+                [vars.color.muted.bg]: solid.bg[3],
+                [vars.color.muted.fg]: solid.fg[4],
+              },
+            },
+
+            [`&.${modes.default}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[3],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.border]: vars.color.tinted.default.border[1],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[2],
+                [vars.color.code.fg]: vars.color.tinted.default.border[4],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[4],
+              },
+            },
+
+            // ghost
+
+            [`&.${modes.ghost}`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[1],
+                [vars.color.border]: tinted.border[1],
+                [vars.color.fg]: tinted.fg[2],
+                [vars.color.code.bg]: tinted.bg[2],
+                [vars.color.code.fg]: tinted.fg[4],
+                [vars.color.muted.bg]: tinted.bg[2],
+                [vars.color.muted.fg]: tinted.fg[4],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[2],
+                [vars.color.code.bg]: tinted.bg[3],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[3],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.code.bg]: tinted.bg[4],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[4],
+                [vars.color.muted.fg]: tinted.fg[3],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[3],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.code.bg]: tinted.bg[4],
+                [vars.color.code.fg]: tinted.fg[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[4],
+                [vars.color.muted.fg]: tinted.fg[3],
+                [vars.button.boxShadow]:
+                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
+              },
+            },
+
+            [`&.${modes.ghost}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[2],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[0],
+                [vars.color.border]: vars.color.tinted.default.border[0],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.code.fg]: vars.color.tinted.default.border[3],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
+              },
+            },
+
+            // bleed
+
+            [`&.${modes.bleed}`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[0],
+                [vars.color.border]: tinted.border[1],
+                [vars.color.fg]: tinted.fg[2],
+                [vars.color.muted.bg]: tinted.bg[1],
+                [vars.color.muted.fg]: tinted.fg[4],
+                [vars.button.boxShadow]: 'none',
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled]):hover`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[1],
+                [vars.color.border]: tinted.border[2],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[2],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled]):active`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
+              vars: {
+                [vars.color.bg]: tinted.bg[2],
+                [vars.color.border]: tinted.border[3],
+                [vars.color.fg]: tinted.fg[1],
+                [vars.color.muted.bg]: tinted.bg[3],
+                [vars.color.muted.fg]: tinted.fg[3],
+              },
+            },
+
+            [`&.${modes.bleed}[data-disabled]`]: {
+              vars: {
+                ..._fromEntries(
+                  AVATAR_COLORS.map((c) => [
+                    vars.color.avatar[c].bg,
+                    vars.color.tinted.default.bg[2],
+                  ]),
+                ),
+
+                [vars.color.bg]: vars.color.tinted.default.bg[0],
+                [vars.color.border]: vars.color.tinted.default.border[0],
+                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.code.fg]: vars.color.tinted.default.border[3],
+                [vars.color.fg]: vars.color.tinted.default.border[4],
+                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
+                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
+              },
+            },
+          },
+        }),
+      ]
+    }),
+  ),
+}

package/src/css/primitives/button/button.ts

@@ -1,20 +1,23 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {_scopeClassNames} from '../../_scopeClassNames'
-import {display, flexItem, radius, width} from '../../aspects'
+import {display, flex, radius, width} from '../../props'
+import {loadingBox, modes, root, tones} from './button.css'
 import type {ButtonStyleProps} from './types'
 
 /** @public */
-export function button(props: ButtonStyleProps): string | undefined {
+export function button(props: ButtonStyleProps) {
   return _composeClassNames(
-    _scopeClassNames('button'),
+    props.className,
+    root,
+    modes[props.mode ?? 'default'],
+    tones[props.tone ?? 'default'],
     display(props),
-    flexItem(props),
+    flex(props),
     radius(props),
     width(props),
   )
 }
 
 /** @public */
-export function buttonLoadingBox(): string | undefined {
-  return _scopeClassNames('button-loading-box')
+export function buttonLoadingBox() {
+  return loadingBox
 }

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

@@ -1,13 +1,19 @@
+import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
 import type {
   DisplayStyleProps,
-  FlexItemStyleProps,
+  FlexStyleProps,
   RadiusStyleProps,
   WidthStyleProps,
-} from '../../aspects'
+} from '../../props'
 
 /** @public */
 export interface ButtonStyleProps
   extends DisplayStyleProps,
-    FlexItemStyleProps,
+    FlexStyleProps,
     RadiusStyleProps,
-    WidthStyleProps {}
+    WidthStyleProps {
+  className?: string
+  mode?: ThemeColorButtonModeKey
+  tone?: ThemeColorStateToneKey
+}