@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

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

@@ -0,0 +1,52 @@
+import {Rules} from '../../types'
+
+export const treeRules: Rules = {
+  'tree-item': {
+    '@nest': {
+      '&[role="none"] > [role="treeitem"]': {
+        outline: 'none',
+        cursor: 'default',
+        borderRadius: '3px',
+
+        backgroundColor: 'var(--card-bg-color)',
+        color: 'var(--treeitem-fg-color)',
+      },
+
+      '&[role="none"] > [role="treeitem"]:focus': {
+        position: 'relative',
+      },
+
+      '&[role="treeitem"]': {
+        outline: 'none',
+      },
+
+      '&[role="treeitem"] > div': {
+        cursor: 'default',
+        borderRadius: '3px',
+
+        backgroundColor: 'var(--card-bg-color)',
+        color: 'var(--treeitem-fg-color)',
+      },
+
+      '&[role="treeitem"]:focus > div': {
+        position: 'relative',
+      },
+
+      // &[role='treeitem'] {
+      //   outline: none;
+
+      //   & > div {
+      //     cursor: default;
+      //     border-radius: 3px;
+
+      //     background-color: var(--card-bg-color);
+      //     color: var(--treeitem-fg-color);
+      //   }
+
+      //   &:focus > div {
+      //     position: relative;
+      //   }
+      // }
+    },
+  },
+}

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

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

package/src/css/composeClassNames.ts

@@ -0,0 +1,3 @@
+export function composeClassNames(...classNames: Array<string | false | undefined>): string {
+  return classNames.filter(Boolean).join(' ')
+}

package/src/css/index.ts

@@ -0,0 +1,47 @@
+export * from './compile/compileSystem'
+export * from './compile/compileTheme'
+
+export * from './composeClassNames'
+
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/tree'
+
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/heading'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/select'
+export * from './primitives/selectable'
+export * from './primitives/spinner'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+// export * from './primitives/token'
+export * from './primitives/tooltip'
+
+export * from './styles/border/types'
+export * from './styles/gap/types'
+export * from './styles/flex/types'
+export * from './styles/flexItem/types'
+export * from './styles/font/types'
+export * from './styles/gridItem/types'
+export * from './styles/margin/types'
+export * from './styles/maxWidth/types'
+export * from './styles/padding/types'
+export * from './styles/pointerEvents/types'
+export * from './styles/position/types'
+export * from './styles/radius/types'
+export * from './styles/width/types'
+
+export * from './types'

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

@@ -0,0 +1,32 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {AvatarStyleProps} from './types'
+
+export function avatar(props: AvatarStyleProps): string {
+  return composeClassNames(
+    'avatar',
+    `avatar-${props.color}`,
+    `avatar-arrow-${props.arrowPosition}`,
+    _resp('avatar', props.size),
+  )
+}
+
+export function avatarArrow(): string {
+  return composeClassNames('avatar-arrow')
+}
+
+export function avatarInitials(): string {
+  return composeClassNames('avatar-initials')
+}
+
+export function avatarBgStroke(): string {
+  return composeClassNames('avatar-bg-stroke')
+}
+
+export function avatarStroke(): string {
+  return composeClassNames('avatar-stroke')
+}
+
+export function avatarImage(): string {
+  return composeClassNames('avatar-image')
+}

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

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

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,34 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {flex} from '../../styles/flex'
+import {flexItem} from '../../styles/flexItem'
+import {gap} from '../../styles/gap'
+import {gridItem} from '../../styles/gridItem'
+import {margin} from '../../styles/margin'
+import {maxWidth} from '../../styles/maxWidth'
+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(`overflow`, props.overflow),
+    _resp(`box`, props.sizing),
+    flex(props),
+    flexItem(props),
+    gridItem(props),
+    gap(props),
+    margin(props),
+    maxWidth(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,49 @@
+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 {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 BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export type BoxOverflow = 'visible' | 'hidden' | 'auto'
+
+/** @public */
+export interface BoxStyleProps
+  extends FlexStyleProps,
+    FlexItemStyleProps,
+    GapStyleProps,
+    GridItemStyleProps,
+    MarginStyleProps,
+    MaxWidthStyleProps,
+    PaddingStyleProps,
+    PointerEventsStyleProps,
+    PositionStyleProps,
+    WidthStyleProps {
+  display?: ResponsiveProp<BoxDisplay>
+  height?: ResponsiveProp<BoxHeight>
+  overflow?: ResponsiveProp<BoxOverflow>
+  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'