@sanity/ui 1.0.0-beta.26 → 1.0.0-beta.28

package/src/styles/colorVars/colorVarsStyle.ts

@@ -0,0 +1,41 @@
+import {CSSObject} from 'styled-components'
+import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+
+/**
+ * @internal
+ */
+export function _colorVarsStyle(
+  base: ThemeColorBase,
+  color: ThemeColorGenericState,
+  checkered = false
+): CSSObject {
+  return {
+    // Base
+    // @todo: rename to "--base-"?
+    '--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,
+    '--card-focus-ring-color': base.focusRing,
+
+    // Card
+    '--card-bg-color': color.bg,
+    '--card-bg-image': checkered
+      ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.bg2 || color.bg} 0% 50%)`
+      : undefined,
+    '--card-fg-color': color.fg,
+    '--card-border-color': color.border,
+    '--card-muted-fg-color': color.muted?.fg,
+    '--card-accent-fg-color': color.accent?.fg,
+    '--card-link-fg-color': color.link?.fg,
+    '--card-code-bg-color': color.code?.bg,
+    '--card-code-fg-color': color.code?.fg,
+    '--card-skeleton-color-from': color.skeleton?.from,
+    '--card-skeleton-color-to': color.skeleton?.to,
+
+    // @todo: deprecate
+    '--card-link-color': color.link?.fg,
+    '--card-hairline-soft-color': color.border,
+    '--card-hairline-hard-color': color.border,
+  }
+}

package/src/styles/colorVars/index.ts

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

package/src/styles/flex/flexItemStyle.ts

@@ -0,0 +1,27 @@
+import {CSSObject} from 'styled-components'
+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 {theme} = props
+  const {media} = theme.sanity
+
+  if (!props.$flex) return EMPTY_ARRAY
+
+  return _responsive(media, props.$flex, (flex) => ({flex}))
+}

package/src/styles/flex/flexStyle.ts

@@ -0,0 +1,74 @@
+import {CSSObject} from 'styled-components'
+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 {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$align, (align) => {
+    return {alignItems: align}
+  })
+}
+
+function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gap, (gap) => ({
+    gap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$wrap, (wrap) => {
+    return {flexWrap: wrap}
+  })
+}
+
+export function responsiveFlexJustifyStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$justify, (justify) => {
+    return {justifyContent: justify}
+  })
+}
+
+export function responsiveFlexDirectionStyle(
+  props: ResponsiveFlexStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$direction, (direction) => {
+    return {flexDirection: direction}
+  })
+}

package/src/styles/flex/index.ts

@@ -0,0 +1,3 @@
+export * from './flexStyle'
+export * from './flexItemStyle'
+export * from './types'

package/src/styles/flex/types.ts

@@ -0,0 +1,24 @@
+import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveFlexStyleProps {
+  $align: FlexAlign[]
+  $direction: FlexDirection[]
+  $gap: number[]
+  $justify: FlexJustify[]
+  $wrap: FlexWrap[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveFlexItemStyleProps {
+  $flex: FlexValue[]
+}
+
+/**
+ * @internal
+ */
+export interface FlexItemStyleProps extends ResponsiveFlexItemStyleProps {}

package/src/styles/focusRing/index.ts

@@ -0,0 +1,23 @@
+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: {offset: number; width: number}
+}): 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/styles/font/codeFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from 'styled-components'
+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/styles/font/headingFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from 'styled-components'
+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/styles/font/index.ts

@@ -0,0 +1,6 @@
+export * from './codeFontStyle'
+export * from './headingFontStyle'
+export * from './labelFontStyle'
+export * from './textAlignStyle'
+export * from './textFontStyle'
+export * from './types'

package/src/styles/font/labelFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from 'styled-components'
+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/styles/font/responsiveFont.ts

@@ -0,0 +1,101 @@
+import {CSSObject} from 'styled-components'
+import {ThemeFontSize, ThemeFontKey} from '../../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, theme} = props
+  const {fonts, media} = theme.sanity
+  const {family, sizes, weights} = fonts[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/styles/font/textAlignStyle.ts

@@ -0,0 +1,18 @@
+import {CSSObject} from 'styled-components'
+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 {theme} = props
+
+  return _responsive(theme.sanity.media, props.$align, (textAlign) => {
+    return {textAlign}
+  })
+}

package/src/styles/font/textFontStyle.ts

@@ -0,0 +1,12 @@
+import {CSSObject} from 'styled-components'
+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)
+}

package/src/styles/font/types.ts

@@ -0,0 +1,34 @@
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontSizeStyleProps {
+  $size: number[]
+}
+
+/**
+ * @internal
+ */
+export interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveTextAlignStyleProps {
+  $align: TextAlign[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontStyleProps
+  extends FontWeightStyleProps,
+    ResponsiveFontSizeStyleProps,
+    ResponsiveTextAlignStyleProps {
+  $accent?: boolean
+  $muted?: boolean
+}

package/src/styles/grid/gridItemStyle.ts

@@ -0,0 +1,87 @@
+import {CSSObject} from 'styled-components'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveGridItemStyleProps} from './types'
+
+export function responsiveGridItemStyle(): Array<
+  (props: ResponsiveGridItemStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [
+    responsiveGridItemRowStyle,
+    responsiveGridItemRowStartStyle,
+    responsiveGridItemRowEndStyle,
+    responsiveGridItemColumnStyle,
+    responsiveGridItemColumnStartStyle,
+    responsiveGridItemColumnEndStyle,
+  ]
+}
+
+const GRID_ITEM_ROW = {
+  auto: 'auto',
+  full: '1 / -1',
+}
+
+const GRID_ITEM_COLUMN = {
+  auto: 'auto',
+  full: '1 / -1',
+}
+
+function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$row, (row) => {
+    if (typeof row === 'number') {
+      return {gridRow: `span ${row} / span ${row}`}
+    }
+
+    return {gridRow: GRID_ITEM_ROW[row]}
+  })
+}
+
+function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rowStart, (rowStart) => ({
+    gridRowStart: rowStart,
+  }))
+}
+
+function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
+}
+
+function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$column, (column) => {
+    if (typeof column === 'number') {
+      return {gridColumn: `span ${column} / span ${column}`}
+    }
+
+    return {gridColumn: GRID_ITEM_COLUMN[column]}
+  })
+}
+
+function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columnStart, (columnStart) => ({
+    gridColumnStart: columnStart,
+  }))
+}
+
+function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columnEnd, (columnEnd) => ({
+    gridColumnEnd: columnEnd,
+  }))
+}

package/src/styles/grid/gridStyle.ts

@@ -0,0 +1,115 @@
+import {CSSObject} from 'styled-components'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveGridStyleProps} from './types'
+
+const GRID_CSS = {
+  '&&:not([hidden])': {
+    display: 'grid',
+  },
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: 'none',
+  },
+}
+
+const GRID_AUTO_COLUMS = {
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fr: 'minmax(0, 1fr)',
+}
+
+const GRID_AUTO_ROWS = {
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fr: 'minmax(0, 1fr)',
+}
+
+export function responsiveGridStyle(): Array<
+  CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+> {
+  return [
+    GRID_CSS,
+    responsiveGridAutoFlowStyle,
+    responsiveGridAutoRowsStyle,
+    responsiveGridAutoColsStyle,
+    responsiveGridColumnsStyle,
+    responsiveGridRowsStyle,
+    responsiveGridGapStyle,
+    responsiveGridGapXStyle,
+    responsiveGridGapYStyle,
+  ]
+}
+
+function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoFlow, (autoFlow) => ({
+    gridAutoFlow: autoFlow,
+  }))
+}
+
+function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoRows, (autoRows) => ({
+    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+  }))
+}
+
+function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$autoCols, (autoCols) => ({
+    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+  }))
+}
+
+function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$columns, (columns) => ({
+    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return _responsive(media, props.$rows, (rows) => ({
+    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gap, (gap) => ({
+    gridGap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gapX, (gapX) => ({
+    columnGap: gapX ? rem(space[gapX]) : undefined,
+  }))
+}
+
+function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media, space} = theme.sanity
+
+  return _responsive(media, props.$gapY, (gapY) => ({
+    rowGap: gapY ? rem(space[gapY]) : undefined,
+  }))
+}

package/src/styles/grid/index.ts

@@ -0,0 +1,3 @@
+export * from './gridStyle'
+export * from './gridItemStyle'
+export * from './types'

package/src/styles/grid/types.ts

@@ -0,0 +1,37 @@
+import {
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  GridItemColumn,
+  GridItemColumnEnd,
+  GridItemColumnStart,
+  GridItemRow,
+  GridItemRowEnd,
+  GridItemRowStart,
+} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveGridStyleProps {
+  $autoRows: GridAutoRows[]
+  $autoCols: GridAutoCols[]
+  $autoFlow: GridAutoFlow[]
+  $columns: number[]
+  $gap: number[]
+  $gapX: number[]
+  $gapY: number[]
+  $rows: number[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveGridItemStyleProps {
+  $column: GridItemColumn[]
+  $columnStart: GridItemColumnStart[]
+  $columnEnd: GridItemColumnEnd[]
+  $row: GridItemRow[]
+  $rowStart: GridItemRowStart[]
+  $rowEnd: GridItemRowEnd[]
+}