@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

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

@@ -0,0 +1,190 @@
+import {THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const avatarRules: Rules = {
+  'avatar': {
+    'backgroundColor': 'var(--avatar-bg-color)',
+    'position': 'relative',
+    'boxSizing': 'border-box',
+    'userSelect': 'none',
+    'boxShadow': '0 0 0 1px var(--card-bg-color)',
+
+    '@nest': {
+      '&[data-status="inactive"]': {
+        opacity: 0.5,
+      },
+
+      '& > svg:not([hidden])': {
+        display: 'block',
+      },
+
+      /* &:is(button) */
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        margin: 0,
+        padding: 0,
+        border: 0,
+        font: 'inherit',
+        color: 'inherit',
+        outline: 'none',
+      },
+
+      '&[data-as="button"]:focus': {
+        // boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
+      },
+
+      '&[data-as="button"]:focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+    },
+  },
+
+  ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
+    return {
+      ...acc,
+      [`avatar-${color}`]: {
+        '--avatar-bg-color': `var(--card-avatar-${color}-bg-color)`,
+        '--avatar-fg-color': `var(--card-avatar-${color}-fg-color)`,
+      },
+    }
+  }, {} as Rules),
+
+  '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': {
+        width: '11px',
+        height: '7px',
+        position: 'absolute',
+        top: '-5px',
+        left: '50%',
+        transform: 'translateX(-6px)',
+      },
+
+      '& > svg:not([hidden])': {
+        display: 'block',
+      },
+
+      '.arrow-position-inside > &': {
+        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+        opacity: 0,
+      },
+
+      '.arrow-position-top > &': {
+        opacity: 1,
+        transform: 'rotate(0deg)',
+      },
+
+      '.arrow-position-bottom > &': {
+        opacity: 1,
+        transform: 'rotate(-180deg)',
+      },
+    },
+  },
+
+  ...responsiveRules('avatar-0', {
+    'width': `var(--avatar-0-size)`,
+    'height': `var(--avatar-0-size)`,
+    'borderRadius': `var(--avatar-0-size)`,
+
+    '@nest': {
+      '& > svg': {
+        width: `var(--avatar-0-size)`,
+        height: `var(--avatar-0-size)`,
+        borderRadius: `var(--avatar-0-size)`,
+      },
+    },
+  }),
+
+  ...responsiveRules('avatar-1', {
+    'width': `var(--avatar-1-size)`,
+    'height': `var(--avatar-1-size)`,
+    'borderRadius': `var(--avatar-1-size)`,
+
+    '@nest': {
+      '& > svg': {
+        width: `var(--avatar-1-size)`,
+        height: `var(--avatar-1-size)`,
+        borderRadius: `var(--avatar-1-size)`,
+      },
+    },
+  }),
+
+  ...responsiveRules('avatar-2', {
+    'width': `var(--avatar-2-size)`,
+    'height': `var(--avatar-2-size)`,
+    'borderRadius': `var(--avatar-2-size)`,
+
+    '@nest': {
+      '& > svg': {
+        width: `var(--avatar-2-size)`,
+        height: `var(--avatar-2-size)`,
+        borderRadius: `var(--avatar-2-size)`,
+      },
+    },
+  }),
+
+  ...responsiveRules('avatar-3', {
+    'width': `var(--avatar-3-size)`,
+    'height': `var(--avatar-3-size)`,
+    'borderRadius': `var(--avatar-3-size)`,
+
+    '@nest': {
+      '& > svg': {
+        width: `var(--avatar-3-size)`,
+        height: `var(--avatar-3-size)`,
+        borderRadius: `var(--avatar-3-size)`,
+      },
+    },
+  }),
+
+  'avatar-initials': {
+    'width': '100%',
+    'height': '100%',
+    'color': 'var(--avatar-fg-color)',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'textTransform': 'uppercase',
+    'textAlign': 'center',
+    'borderRadius': '50%',
+
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'flex',
+      },
+    },
+  },
+
+  'avatar-bg-stroke': {
+    strokeWidth: '4px',
+    stroke: 'var(--card-bg-color)',
+  },
+
+  'avatar-stroke': {
+    'strokeWidth': '2px',
+    'stroke': 'var(--avatar-bg-color)',
+
+    '@nest': {
+      '[data-status="editing"] &': {
+        strokeDasharray: '2 4',
+        strokeLinecap: 'round',
+      },
+    },
+  },
+
+  'avatar-image': {
+    position: 'relative',
+  },
+}

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

@@ -0,0 +1,9 @@
+import {AvatarPosition} from '@sanity/ui'
+import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ResponsiveProp} from '../../types'
+
+export interface AvatarStyleProps {
+  color: ThemeColorAvatarColorKey
+  size: ResponsiveProp<AvatarSize>
+  arrowPosition?: AvatarPosition
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from './badge'
+export * from './types'

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

@@ -0,0 +1,25 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import type {Rules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+
+export const badgeRules: Rules = {
+  badge: {
+    backgroundColor: vars.color.badge.bg,
+    color: vars.color.badge.fg,
+    verticalAlign: 'top',
+  },
+
+  ...THEME_COLOR_STATE_TONES.reduce(
+    (acc, tone) => ({
+      ...acc,
+      [`badge-${tone}`]: {
+        [varNames.color.badge.bg]: vars.color.badge[tone].bg,
+        [varNames.color.badge.dot]: vars.color.badge[tone].dot,
+        [varNames.color.badge.fg]: vars.color.badge[tone].fg,
+        [varNames.color.badge.icon]: vars.color.badge[tone].icon,
+      },
+    }),
+    {} as Rules,
+  ),
+}

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

@@ -0,0 +1,8 @@
+// import {BadgeTone} from '@sanity/ui'
+import {RadiusStyleProps} from '@sanity/ui/css'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/** @public */
+export interface BadgeStyleProps extends RadiusStyleProps {
+  tone: ThemeColorStateToneKey
+}

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

@@ -0,0 +1,38 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {flex} from '../../styles/flex'
+import {flexItem} from '../../styles/flexItem'
+import {gap} from '../../styles/gap'
+import {grid} from '../../styles/grid'
+import {gridItem} from '../../styles/gridItem'
+import {margin} from '../../styles/margin'
+import {maxWidth} from '../../styles/maxWidth'
+import {overflow} from '../../styles/overflow'
+import {padding} from '../../styles/padding'
+import {pointerEvents} from '../../styles/pointerEvents'
+import {position} from '../../styles/position'
+import {width} from '../../styles/width'
+import {BoxStyleProps} from './types'
+
+/** @public */
+export function box(props: BoxStyleProps): string {
+  return composeClassNames(
+    'box',
+    _resp(undefined, props.display),
+    _resp(`h`, props.height),
+    _resp(`box`, props.sizing),
+    flex(props),
+    flexItem(props),
+    grid(props),
+    gridItem(props),
+    gap(props),
+    margin(props),
+    maxWidth(props),
+    props.outline && `outline-${props.outline}`,
+    overflow(props),
+    padding(props),
+    pointerEvents(props),
+    position(props),
+    width(props),
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './box'
+export * from './types'

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

@@ -0,0 +1,25 @@
+import type {Rules} from '../../types'
+
+export const boxRules: Rules = {
+  'box': {
+    'minWidth': 0,
+    'minHeight': 0,
+
+    '@nest': {
+      // 'ul.&, ol.&': {
+      '&[data-as="ul"], &[data-as="ol"]': {
+        listStyle: 'none',
+      },
+    },
+  },
+
+  // sizing
+
+  'box-content': {
+    boxSizing: 'content-box',
+  },
+
+  'box-border': {
+    boxSizing: 'border-box',
+  },
+}

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

@@ -0,0 +1,48 @@
+import {GridStyleProps} from '@sanity/ui/css'
+import {FlexStyleProps} from '../../styles/flex'
+import {FlexItemStyleProps} from '../../styles/flexItem'
+import {GapStyleProps} from '../../styles/gap'
+import {GridItemStyleProps} from '../../styles/gridItem'
+import {MarginStyleProps} from '../../styles/margin'
+import {MaxWidthStyleProps} from '../../styles/maxWidth'
+import {OverflowStyleProps} from '../../styles/overflow'
+import {PaddingStyleProps} from '../../styles/padding'
+import {PointerEventsStyleProps} from '../../styles/pointerEvents'
+import {PositionStyleProps} from '../../styles/position'
+import {WidthStyleProps} from '../../styles/width'
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type BoxSizing = 'content' | 'border'
+
+/**
+ * @public
+ */
+export type Display = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+/** @public */
+export interface BoxStyleProps
+  extends FlexStyleProps,
+    FlexItemStyleProps,
+    GapStyleProps,
+    GridStyleProps,
+    GridItemStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps,
+    OverflowStyleProps,
+    PaddingStyleProps,
+    PointerEventsStyleProps,
+    PositionStyleProps,
+    WidthStyleProps {
+  display?: ResponsiveProp<Display>
+  height?: ResponsiveProp<BoxHeight>
+  outline?: 'none'
+  sizing?: ResponsiveProp<BoxSizing>
+}

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

@@ -0,0 +1,26 @@
+import {ButtonMode, ButtonTone} from '@sanity/ui'
+import {WidthStyleProps} from '@sanity/ui/css'
+import {composeClassNames} from '../../composeClassNames'
+import {radius, RadiusStyleProps} from '../../styles/radius'
+import {width} from '../../styles/width'
+
+export interface ButtonStyleProps extends RadiusStyleProps, WidthStyleProps {
+  mode?: ButtonMode
+  tone?: ButtonTone
+}
+
+export function button(props: ButtonStyleProps): string {
+  const {mode = 'default', tone = 'default'} = props
+
+  return composeClassNames(
+    'button',
+    `button-mode-${mode}`,
+    `button-tone-${tone}`,
+    radius(props),
+    width(props),
+  )
+}
+
+export function buttonLoadingBox(): string {
+  return 'button-loading-box'
+}

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

@@ -0,0 +1 @@
+export * from './button'

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

@@ -0,0 +1,58 @@
+import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {Rules} from '../../types'
+
+export const buttonRules: Rules = {
+  'button': {
+    WebkitFontSmoothing: 'inherit',
+    appearance: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    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: 'var(--card-bg-color)',
+    color: 'var(--card-fg-color)',
+  },
+
+  // variants
+  ...THEME_COLOR_BUTTON_MODES.reduce((acc, mode) => {
+    return {
+      ...acc,
+      [`button-mode-${mode}`]: {
+        '@nest': THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+          return {
+            ...acc,
+            [`&.button-tone-${tone}`]: {
+              '--card-bg-color': `var(--card-button-${mode}-${tone}-enabled-bg-color, rgba(127, 127, 127, 0.1))`,
+              '--card-fg-color': `var(--card-button-${mode}-${tone}-enabled-fg-color, currentColor)`,
+            },
+          }
+        }, {} as Rules),
+      },
+    }
+  }, {} as Rules),
+
+  'button-loading-box': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // display: 'flex',
+    // alignItems: 'center',
+    // justifyContent: 'center',
+    backgroundColor: 'var(--card-bg-color)',
+    borderRadius: 'inherit',
+    zIndex: 1,
+    // boxShadow: 'inherit',
+  },
+}

package/src/css/primitives/card/card.ts

@@ -0,0 +1,21 @@
+import {composeClassNames} from '../../composeClassNames'
+import {border, BorderStyleProps} from '../../styles/border'
+import {radius, RadiusStyleProps} from '../../styles/radius'
+import {ResponsiveProp} from '../../types'
+import {box, BoxStyleProps} from '../box'
+
+export interface CardStyleProps extends BoxStyleProps, BorderStyleProps, RadiusStyleProps {
+  checkered?: boolean
+  shadow?: ResponsiveProp<number>
+}
+
+export function card(props: CardStyleProps): string {
+  return composeClassNames(
+    'card',
+    props.checkered && 'card-checkered',
+    box(props),
+    border(props),
+    radius(props),
+    props.shadow === undefined ? undefined : `shadow-${props.shadow}`,
+  )
+}

package/src/css/primitives/card/index.ts

@@ -0,0 +1 @@
+export * from './card'