@sanity/ui 0.37.2 → 0.37.3

package/src/styles/flex/types.ts

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/src/styles/font/labelFontStyle.ts

@@ -1,12 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

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

package/src/styles/grid/types.ts

@@ -1,37 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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

package/src/styles/input/index.ts

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

package/src/styles/input/responsiveInputPaddingStyle.ts

@@ -1,80 +0,0 @@
-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})
-}