@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/core/primitives/types.ts

@@ -0,0 +1,146 @@
+import {
+  BoxDisplay,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexValue,
+  FlexWrap,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  GridItemColumn,
+  GridItemColumnEnd,
+  GridItemColumnStart,
+  GridItemRow,
+  GridItemRowEnd,
+  GridItemRowStart,
+  Radius,
+} from '../types'
+
+/**
+ * @public
+ */
+export interface ResponsiveBorderProps {
+  border?: boolean | boolean[]
+  borderTop?: boolean | boolean[]
+  borderRight?: boolean | boolean[]
+  borderBottom?: boolean | boolean[]
+  borderLeft?: boolean | boolean[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[]
+  height?: BoxHeight | BoxHeight[]
+  overflow?: BoxOverflow | BoxOverflow[]
+  sizing?: BoxSizing | BoxSizing[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[]
+  direction?: FlexDirection | FlexDirection[]
+  justify?: FlexJustify | FlexJustify[]
+  wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
+  flex?: FlexValue | FlexValue[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveGridProps {
+  autoRows?: GridAutoRows | GridAutoRows[]
+  autoCols?: GridAutoCols | GridAutoCols[]
+  autoFlow?: GridAutoFlow | GridAutoFlow[]
+  columns?: number | number[]
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
+  rows?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveGridItemProps {
+  column?: GridItemColumn | GridItemColumn[]
+  columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  row?: GridItemRow | GridItemRow[]
+  rowStart?: GridItemRowStart | GridItemRowStart[]
+  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
+  margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
+  marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
+  marginY?: number | number[]
+  marginTop?: number | number[]
+  marginRight?: number | number[]
+  marginBottom?: number | number[]
+  marginLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsivePaddingProps {
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  paddingTop?: number | number[]
+  paddingRight?: number | number[]
+  paddingBottom?: number | number[]
+  paddingLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveRadiusProps {
+  radius?: Radius | Radius[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveShadowProps {
+  shadow?: number | number[]
+}
+
+/**
+ * @public
+ */
+export interface ResponsiveWidthProps {
+  width?: number | 'auto' | (number | 'auto')[]
+}
+
+/**
+ * @public
+ */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

package/src/core/styles/border/borderStyle.ts

@@ -0,0 +1,55 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveBorderStyleProps} from './types'
+
+export function responsiveBorderStyle(): Array<
+  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [border, borderTop, borderRight, borderBottom, borderLeft]
+}
+
+function border(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$border, (value) =>
+    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
+  )
+}
+
+function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderTop, (value) =>
+    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
+  )
+}
+
+function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderRight, (value) =>
+    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
+  )
+}
+
+function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderBottom, (value) =>
+    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
+  )
+}
+
+function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderLeft, (value) =>
+    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
+  )
+}

package/src/core/styles/box/boxStyle.ts

@@ -0,0 +1,68 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {Property} from 'csstype'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveBoxStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: 'none',
+  },
+}
+
+const BOX_SIZING: {[key: string]: Property.BoxSizing} = {
+  content: 'content-box',
+  border: 'border-box',
+}
+
+const BOX_HEIGHT = {
+  stretch: 'stretch',
+  fill: '100%',
+}
+
+export function boxStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveBoxStyle(): Array<
+  (props: ResponsiveBoxStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveBoxSizingStyle,
+    responsiveBoxHeightStyle,
+    responsiveBoxOverflowStyle,
+    responsiveBoxDisplayStyle,
+  ]
+}
+
+function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$display, (display) => ({
+    '&:not([hidden])': {display},
+  }))
+}
+
+function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$sizing, (sizing) => ({
+    boxSizing: BOX_SIZING[sizing],
+  }))
+}
+
+function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$height, (height) => ({
+    height: BOX_HEIGHT[height],
+  }))
+}
+
+function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$overflow, (overflow) => ({
+    overflow,
+  }))
+}

package/src/core/styles/card/_cardColorStyle.ts

@@ -0,0 +1,101 @@
+import {ThemeColorState_v2, ThemeColorCard_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ */
+export function _cardColorStyle(
+  base: ThemeColorCard_v2,
+  color: ThemeColorState_v2,
+  checkered = false,
+): CSSObject {
+  return {
+    // from base
+
+    '--card-backdrop-color': base.backdrop,
+
+    '--card-focus-ring-color': base.focusRing,
+
+    '--card-shadow-outline-color': base.shadow.outline,
+    '--card-shadow-umbra-color': base.shadow.umbra,
+    '--card-shadow-penumbra-color': base.shadow.penumbra,
+    '--card-shadow-ambient-color': base.shadow.ambient,
+
+    // from state
+
+    '--card-accent-fg-color': color.accent.fg,
+
+    '--card-avatar-gray-bg-color': color.avatar.gray.bg,
+    '--card-avatar-gray-fg-color': color.avatar.gray.fg,
+    '--card-avatar-blue-bg-color': color.avatar.blue.bg,
+    '--card-avatar-blue-fg-color': color.avatar.blue.fg,
+    '--card-avatar-purple-bg-color': color.avatar.purple.bg,
+    '--card-avatar-purple-fg-color': color.avatar.purple.fg,
+    '--card-avatar-magenta-bg-color': color.avatar.magenta.bg,
+    '--card-avatar-magenta-fg-color': color.avatar.magenta.fg,
+    '--card-avatar-red-bg-color': color.avatar.red.bg,
+    '--card-avatar-red-fg-color': color.avatar.red.fg,
+    '--card-avatar-orange-bg-color': color.avatar.orange.bg,
+    '--card-avatar-orange-fg-color': color.avatar.orange.fg,
+    '--card-avatar-yellow-bg-color': color.avatar.yellow.bg,
+    '--card-avatar-yellow-fg-color': color.avatar.yellow.fg,
+    '--card-avatar-green-bg-color': color.avatar.green.bg,
+    '--card-avatar-green-fg-color': color.avatar.green.fg,
+    '--card-avatar-cyan-bg-color': color.avatar.cyan.bg,
+    '--card-avatar-cyan-fg-color': color.avatar.cyan.fg,
+
+    '--card-bg-color': color.bg,
+    '--card-bg-image': checkered
+      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
+      : undefined,
+
+    '--card-border-color': color.border,
+
+    '--card-badge-default-bg-color': color.badge.default.bg,
+    '--card-badge-default-dot-color': color.badge.default.dot,
+    '--card-badge-default-fg-color': color.badge.default.fg,
+    '--card-badge-default-icon-color': color.badge.default.icon,
+    '--card-badge-primary-bg-color': color.badge.primary.bg,
+    '--card-badge-primary-dot-color': color.badge.primary.dot,
+    '--card-badge-primary-fg-color': color.badge.primary.fg,
+    '--card-badge-primary-icon-color': color.badge.primary.icon,
+    '--card-badge-positive-bg-color': color.badge.positive.bg,
+    '--card-badge-positive-dot-color': color.badge.positive.dot,
+    '--card-badge-positive-fg-color': color.badge.positive.fg,
+    '--card-badge-positive-icon-color': color.badge.positive.icon,
+    '--card-badge-caution-bg-color': color.badge.caution.bg,
+    '--card-badge-caution-dot-color': color.badge.caution.dot,
+    '--card-badge-caution-fg-color': color.badge.caution.fg,
+    '--card-badge-caution-icon-color': color.badge.caution.icon,
+    '--card-badge-critical-bg-color': color.badge.critical.bg,
+    '--card-badge-critical-dot-color': color.badge.critical.dot,
+    '--card-badge-critical-fg-color': color.badge.critical.fg,
+    '--card-badge-critical-icon-color': color.badge.critical.icon,
+
+    '--card-code-bg-color': color.code.bg,
+    '--card-code-fg-color': color.code.fg,
+
+    '--card-fg-color': color.fg,
+
+    '--card-icon-color': color.icon,
+
+    '--card-kbd-bg-color': color.kbd.bg,
+    '--card-kbd-border-color': color.kbd.border,
+    '--card-kbd-fg-color': color.kbd.fg,
+
+    '--card-link-fg-color': color.link.fg,
+
+    '--card-muted-bg-color': color.muted.bg,
+    '--card-muted-fg-color': color.muted.fg,
+
+    '--card-skeleton-color-from': color.skeleton.from,
+    '--card-skeleton-color-to': color.skeleton.to,
+
+    // deprecated variables (kept for legacy)
+
+    '--card-bg2-color': color.muted.bg,
+    '--card-link-color': color.link.fg,
+    '--card-hairline-soft-color': color.border,
+    '--card-hairline-hard-color': color.border,
+  }
+}

package/src/core/styles/card/index.ts

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

package/src/core/styles/flex/flexItemStyle.ts

@@ -0,0 +1,26 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {EMPTY_ARRAY} from '../../constants'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFlexItemStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  minWidth: 0,
+  minHeight: 0,
+}
+
+export function flexItemStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexItemStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [BASE_STYLE, responsiveFlexItemStyle]
+}
+
+export function responsiveFlexItemStyle(
+  props: ResponsiveFlexItemStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  if (!props.$flex) return EMPTY_ARRAY
+
+  return _responsive(media, props.$flex, (flex) => ({flex}))
+}

package/src/core/styles/flex/flexStyle.ts

@@ -0,0 +1,69 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFlexStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  '&&:not([hidden])': {
+    display: 'flex',
+  },
+}
+
+export function responsiveFlexStyle(): Array<
+  CSSObject | ((props: ResponsiveFlexStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    BASE_STYLE,
+    responsiveFlexAlignStyle,
+    responsiveFlexGapStyle,
+    responsiveFlexWrapStyle,
+    responsiveFlexJustifyStyle,
+    responsiveFlexDirectionStyle,
+  ]
+}
+
+export function responsiveFlexAlignStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$align, (align) => {
+    return {alignItems: align}
+  })
+}
+
+function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gap, (gap) => ({
+    gap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$wrap, (wrap) => {
+    return {flexWrap: wrap}
+  })
+}
+
+export function responsiveFlexJustifyStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$justify, (justify) => {
+    return {justifyContent: justify}
+  })
+}
+
+export function responsiveFlexDirectionStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$direction, (direction) => {
+    return {flexDirection: direction}
+  })
+}

package/src/core/styles/focusRing/index.ts

@@ -0,0 +1,25 @@
+import {ThemeFocusRing} from '@sanity/ui/theme'
+
+export function focusRingBorderStyle(border: {color: string; width: number}): string {
+  return `inset 0 0 0 ${border.width}px ${border.color}`
+}
+
+export function focusRingStyle(opts: {
+  base?: {bg: string}
+  border?: {color: string; width: number}
+  focusRing: ThemeFocusRing
+}): string {
+  const {base, border, focusRing} = opts
+  const focusRingOutsetWidth = focusRing.offset + focusRing.width
+  const focusRingInsetWidth = 0 - focusRing.offset
+  const bgColor = base ? base.bg : 'var(--card-bg-color)'
+
+  return [
+    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+    border && focusRingBorderStyle(border),
+    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
+    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`,
+  ]
+    .filter(Boolean)
+    .join(',')
+}

package/src/core/styles/font/codeFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../types'
+import {responsiveFont} from './responsiveFont'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * Get responsive CSS for the `code` font style.
+ * @internal
+ */
+export function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
+  return responsiveFont('code', props)
+}

package/src/core/styles/font/headingFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../types'
+import {responsiveFont} from './responsiveFont'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * Get responsive CSS for the `heading` font style.
+ * @internal
+ */
+export function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
+  return responsiveFont('heading', props)
+}

package/src/core/styles/font/labelFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../types'
+import {responsiveFont} from './responsiveFont'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * Get responsive CSS for the `label` font style.
+ * @internal
+ */
+export function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
+  return responsiveFont('label', props)
+}

package/src/core/styles/font/responsiveFont.ts

@@ -0,0 +1,101 @@
+import {ThemeFontSize, ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * A utility function getting responsive font styles.
+ * @internal
+ */
+export function responsiveFont(
+  fontKey: ThemeFontKey,
+  props: ResponsiveFontStyleProps & ThemeProps,
+): CSSObject[] {
+  const {$size, $weight} = props
+  const {font, media} = getTheme_v2(props.theme)
+  const {family, sizes, weights} = font[fontKey]
+  const fontWeight = ($weight && weights[$weight]) || weights.regular
+
+  // @todo: make this configurable
+  const defaultSize = sizes[2]
+
+  const base: CSSObject = {
+    position: 'relative',
+    fontFamily: family,
+    fontWeight,
+    padding: '1px 0',
+    margin: 0,
+
+    '&:before': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '&:after': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '& > code, & > span': {
+      display: 'block',
+    },
+
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  }
+
+  // @TODO fix the real condition that is causing $size to be undefined sometimes
+  if (!$size) {
+    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+    if (!responsiveFont.warned) {
+      // eslint-disable-next-line no-console
+      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
+      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+      responsiveFont.warned = true
+    }
+
+    return [base]
+  }
+
+  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
+
+  return [base, ...resp]
+}
+
+export function fontSize(size: ThemeFontSize): CSSObject {
+  const {ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight} = size
+  const negHeight = ascenderHeight + descenderHeight
+  const capHeight = lineHeight - negHeight
+  const iconOffset = (capHeight - iconSize) / 2
+  const customIconSize = Math.floor((fontSize * 1.125) / 2) * 2 + 1
+  const customIconOffset = (capHeight - customIconSize) / 2
+
+  return {
+    fontSize: rem(fontSize),
+    lineHeight: `calc(${lineHeight} / ${fontSize})`,
+    letterSpacing: rem(letterSpacing),
+    transform: `translateY(${rem(descenderHeight)})`,
+
+    '&:before': {
+      marginTop: `calc(${rem(0 - negHeight)} - 1px)`,
+    },
+
+    '&:after': {
+      marginBottom: '-1px',
+    },
+
+    '& svg:not([data-sanity-icon])': {
+      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
+      margin: rem(customIconOffset),
+    },
+
+    '& [data-sanity-icon]': {
+      fontSize: `calc(${iconSize} / 16 * 1rem)`,
+      margin: rem(iconOffset),
+    },
+  }
+}

package/src/core/styles/font/textAlignStyle.ts

@@ -0,0 +1,18 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveTextAlignStyleProps} from './types'
+
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+export function responsiveTextAlignStyle(
+  props: ResponsiveTextAlignStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$align, (textAlign) => {
+    return {textAlign}
+  })
+}

package/src/core/styles/font/textFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from '@sanity/ui/theme'
+import {ThemeProps} from '../types'
+import {responsiveFont} from './responsiveFont'
+import {ResponsiveFontStyleProps} from './types'
+
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+export function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[] {
+  return responsiveFont('text', props)
+}