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

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

@@ -1,27 +1,68 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {AvatarStyleProps} from './types'
+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 composeClassNames('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 composeClassNames('avatar-arrow')
+  return arrow
 }
 
+/** @public */
+export function avatarArrowSvg(): string | undefined {
+  return arrowSvg
+}
+
+/** @public */
 export function avatarInitials(): string | undefined {
-  return composeClassNames('avatar-initials')
+  return initials
 }
 
+/** @public */
 export function avatarImage(): string | undefined {
-  return composeClassNames('avatar-image')
+  return image
+}
+
+/** @public */
+export function avatarImageOutline(): string | undefined {
+  return imageOutline
 }
 
-export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-counter', _resp('avatar', props.size))
+/** @public */
+export function avatarCounter(props: {
+  className?: string
+  size?: AvatarStyleProps['size']
+}): string | undefined {
+  return _composeClassNames(props.className, counter, _responsiveClassName(scale, props.size ?? 1))
 }
 
-export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
-  return composeClassNames('avatar-stack', _resp('avatar', props.size))
+/** @public */
+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

@@ -1,8 +1,10 @@
-import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {AvatarColor, AvatarSize} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface AvatarStyleProps {
-  color: ThemeColorAvatarColorKey
+  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,8 +1,8 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
-import {BadgeStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {root, tones} from './badge.css'
+import type {BadgeStyleProps} from './types'
 
 /** @public */
 export function badge(props: BadgeStyleProps): string | undefined {
-  return composeClassNames('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 {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles'
+// 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,48 +1,84 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
 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 '../../styles'
-import {BoxStyleProps} from './types'
+} from '../../props'
+import {muted, root} from './box.css'
+import type {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  return composeClassNames(
-    'box',
-    props.muted && 'muted',
+  return _composeClassNames(
+    props.className,
+    root,
+    props.muted && muted,
+    alignItems(props),
     border(props),
+    boxSizing({boxSizing: props.sizing}),
     display(props),
-    _resp(`h`, props.height),
-    _resp(`box`, props.sizing),
+    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),
-    props.outline && `outline-${props.outline}`,
+    minHeight(props),
+    minWidth(props),
     overflow(props),
     padding(props),
     pointerEvents(props),
     position(props),
+    outline(props),
     radius(props),
+    shadow(props),
+    textAlign(props),
     width(props),
   )
 }

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

@@ -1,53 +1,77 @@
-import {
+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,
+  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  ShadowStyleProps,
+  TextAlignStyleProps,
   WidthStyleProps,
-} from '../../styles'
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type BoxSizing = 'content' | 'border'
-
-/**
- * @public
- */
-export type BoxHeight = 'stretch' | 'fill'
+} 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,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    ShadowStyleProps,
+    TextAlignStyleProps,
     WidthStyleProps {
-  height?: ResponsiveProp<BoxHeight>
+  className?: string
   muted?: boolean
   outline?: 'none'
-  sizing?: ResponsiveProp<BoxSizing>
+  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],
+              },
+            },
+          },
+        }),
+      ]
+    }),
+  ),
+}