@sanity/ui 0.36.13 → 0.36.16

package/src/styles/flex/types.ts

@@ -0,0 +1,24 @@
+import {FlexAlign, FlexDirection, FlexJustify, FlexWrap} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveFlexStyleProps {
+  $align?: FlexAlign | FlexAlign[]
+  $direction?: FlexDirection | FlexDirection[]
+  $gap?: number | number[]
+  $justify?: FlexJustify | FlexJustify[]
+  $wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveFlexItemStyleProps {
+  $flex?: number | number[]
+}
+
+/**
+ * @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,108 @@
+import {CSSObject} from 'styled-components'
+import {ThemeFontSize, ThemeFontKey} from '../../theme'
+import {getResponsiveProp, 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, horizontalOffset} = 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',
+    margin: 0,
+
+    '&:before': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '&:after': {
+      content: '""',
+      display: 'block',
+      height: 0,
+    },
+
+    '& > code, & > span': {
+      display: 'block',
+    },
+
+    '&:not([hidden])': {
+      display: 'block',
+    },
+  }
+
+  const resp = responsive(media, getResponsiveProp($size), (sizeIndex) =>
+    fontSize(sizes[sizeIndex] || defaultSize, horizontalOffset)
+  )
+
+  return [base, ...resp]
+}
+
+export function fontSize(size: ThemeFontSize, horizontalOffset?: number): 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',
+    },
+
+    '& > code, & > span': {
+      margin: horizontalOffset ? `0 calc(${rem(0 - horizontalOffset * fontSize)} - 1px)` : '0 -1px',
+    },
+
+    '& svg:not([data-sanity-icon])': {
+      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
+      margin: [
+        // top & bottom
+        rem(customIconOffset),
+        // left & right
+        horizontalOffset
+          ? `calc(${rem(customIconOffset)} + ${rem(horizontalOffset * fontSize)})`
+          : rem(customIconOffset),
+      ].join(' '),
+    },
+
+    '& [data-sanity-icon]': {
+      fontSize: `calc(${iconSize} / 16 * 1rem)`,
+      margin: [
+        // top & bottom
+        rem(iconOffset),
+        // left & right
+        horizontalOffset
+          ? `calc(${rem(iconOffset)} + ${rem(horizontalOffset * fontSize)})`
+          : rem(iconOffset),
+      ].join(' '),
+    },
+  }
+}

package/src/styles/font/textAlignStyle.ts

@@ -0,0 +1,18 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, 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, getResponsiveProp(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,33 @@
+import {ThemeFontWeightKey} from '../../theme'
+import {TextAlign} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontSizeStyleProps {
+  $size?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveTextAlignStyleProps {
+  $align?: TextAlign | TextAlign[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveFontStyleProps
+  extends FontWeightStyleProps,
+    ResponsiveFontSizeStyleProps {
+  $accent?: boolean
+  $muted?: boolean
+}

package/src/styles/grid/gridItemStyle.ts

@@ -0,0 +1,87 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, 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, getResponsiveProp(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, getResponsiveProp(props.$rowStart), (rowStart) => ({
+    gridRowStart: rowStart,
+  }))
+}
+
+function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$rowEnd), (rowEnd) => ({gridRowEnd: rowEnd}))
+}
+
+function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(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, getResponsiveProp(props.$columnStart), (columnStart) => ({
+    gridColumnStart: columnStart,
+  }))
+}
+
+function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$columnEnd), (columnEnd) => ({
+    gridColumnEnd: columnEnd,
+  }))
+}

package/src/styles/grid/gridStyle.ts

@@ -0,0 +1,115 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, 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, getResponsiveProp(props.$autoFlow), (autoFlow) => ({
+    gridAutoFlow: autoFlow,
+  }))
+}
+
+function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$autoRows), (autoRows) => ({
+    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+  }))
+}
+
+function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(props.$autoCols), (autoCols) => ({
+    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+  }))
+}
+
+function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {theme} = props
+  const {media} = theme.sanity
+
+  return responsive(media, getResponsiveProp(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, getResponsiveProp(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, getResponsiveProp(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, getResponsiveProp(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, getResponsiveProp(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 | GridAutoRows[]
+  $autoCols?: GridAutoCols | GridAutoCols[]
+  $autoFlow?: GridAutoFlow | GridAutoFlow[]
+  $columns?: number | number[]
+  $gap?: number | number[]
+  $gapX?: number | number[]
+  $gapY?: number | number[]
+  $rows?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export interface ResponsiveGridItemStyleProps {
+  $column?: GridItemColumn | GridItemColumn[]
+  $columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  $columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  $row?: GridItemRow | GridItemRow[]
+  $rowStart?: GridItemRowStart | GridItemRowStart[]
+  $rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}

package/src/styles/helpers.ts

@@ -0,0 +1,70 @@
+import {CSSObject} from 'styled-components'
+import {EMPTY_ARRAY} from '../constants'
+import {Theme} from '../theme'
+
+/**
+ * @internal
+ */
+export function fillCSSObject(propKeys: string[], value: unknown): CSSObject {
+  return propKeys.reduce((obj: CSSObject, propKey) => {
+    obj[propKey] = value as any
+
+    return obj
+  }, {})
+}
+
+/**
+ * @public
+ */
+export function rem(pixelValue: number): string | 0 {
+  if (pixelValue === 0) return 0
+
+  return `${pixelValue / 16}rem`
+}
+
+/**
+ * @internal
+ */
+export function responsive<T>(
+  media: number[],
+  values: T[],
+  callback: (value: T, index: number, array: T[]) => CSSObject
+): CSSObject[] {
+  const statements = values.map(callback)
+
+  return statements.map((statement, mediaIndex) => {
+    if (mediaIndex === 0) return statement
+
+    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
+  })
+}
+
+/**
+ * @internal
+ */
+export function getResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY
+
+  return Array.isArray(val) ? val : [val]
+}
+
+/**
+ * @internal
+ */
+export function getResponsiveSpace(
+  theme: Theme,
+  props: string[],
+  spaceIndexes: number[] = EMPTY_ARRAY
+): CSSObject[] | null {
+  if (!Array.isArray(spaceIndexes)) {
+    throw new Error('the property must be array of numbers')
+  }
+
+  if (spaceIndexes.length === 0) {
+    return null
+  }
+
+  return responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
+    fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+  )
+}

package/src/styles/index.ts

@@ -0,0 +1,5 @@
+export * from './helpers'
+export * from './types'
+
+// beta
+export * from './font'

package/src/styles/input/index.ts

@@ -0,0 +1,2 @@
+export * from './responsiveInputPaddingStyle'
+export * from './textInputStyle'

package/src/styles/input/responsiveInputPaddingStyle.ts

@@ -0,0 +1,80 @@
+import {CSSObject} from 'styled-components'
+import {getResponsiveProp, rem, responsive} from '../helpers'
+import {ThemeProps} from '../types'
+
+export interface TextInputResponsivePaddingStyleProps {
+  $fontSize?: number | number[]
+  $iconLeft?: boolean
+  $iconRight?: boolean
+  $padding?: number | number[]
+  $space?: number | number[]
+}
+
+export function responsiveInputPaddingStyle(
+  props: TextInputResponsivePaddingStyleProps & ThemeProps
+): CSSObject[] {
+  const {$iconLeft, $iconRight, theme} = props
+  const {fonts, media, space: spaceScale} = theme.sanity
+  const padding = getResponsiveProp(props.$padding, [0])
+  const space = getResponsiveProp(props.$space, [0])
+  const size = getResponsiveProp(props.$fontSize, [0])
+  const len = Math.max(padding.length, space.length, size.length)
+  const _padding: number[] = []
+  const _space: number[] = []
+  const _size: number[] = []
+
+  for (let i = 0; i < len; i += 1) {
+    _padding[i] = padding[i] === undefined ? _padding[i - 1] : padding[i]
+    _space[i] = space[i] === undefined ? _space[i - 1] : space[i]
+    _size[i] = size[i] === undefined ? _size[i - 1] : size[i]
+  }
+
+  return responsive(media, _padding, (_, i) => {
+    const fontSize = fonts.text.sizes[_size[i]] || fonts.text.sizes[2]
+    const emSize = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
+    const p = spaceScale[_padding[i]]
+    const s = spaceScale[_space[i]]
+
+    const styles = {
+      paddingTop: rem(p - fontSize.ascenderHeight),
+      paddingRight: rem(p),
+      paddingBottom: rem(p - fontSize.descenderHeight),
+      paddingLeft: rem(p),
+    }
+
+    if ($iconRight) styles.paddingRight = rem(p + emSize + s)
+    if ($iconLeft) styles.paddingLeft = rem(p + emSize + s)
+
+    return styles
+  })
+}
+
+export function responsiveInputPaddingIconsStyle(
+  props: {
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
+}
+
+export function responsiveInputPaddingIconLeftStyle(
+  props: {
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconLeft: true})
+}
+
+export function responsiveInputPaddingIconRightStyle(
+  props: {
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
+  } & ThemeProps
+): CSSObject[] {
+  return responsiveInputPaddingStyle({...props, $iconRight: true})
+}