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

package/src/styles/font/textAlignStyle.ts

@@ -1,18 +0,0 @@
-import {CSSObject} from '../../types/styled'
-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

@@ -1,12 +0,0 @@
-import {CSSObject} from '../../types/styled'
-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,34 +0,0 @@
-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

@@ -1,87 +0,0 @@
-import {CSSObject} from '../../types/styled'
-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

@@ -1,115 +0,0 @@
-import {CSSObject} from '../../types/styled'
-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/helpers.ts

@@ -1,70 +0,0 @@
-import {EMPTY_ARRAY} from '../constants'
-import {Theme} from '../theme'
-import {CSSObject} from '../types/styled'
-
-/**
- * @internal
- */
-export function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {
-  return keys.reduce<CSSObject>((style, key) => {
-    style[key] = value
-
-    return style
-  }, {})
-}
-
-/**
- * @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 _getArrayProp<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/input/responsiveInputPaddingStyle.ts

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

package/src/styles/input/textInputStyle.ts

@@ -1,214 +0,0 @@
-import {css} from 'styled-components'
-import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-import {CSSObject} from '../../types/styled'
-import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
-import {rem, _responsive} from '../helpers'
-import {ThemeProps} from '../types'
-
-/**
- * @internal
- */
-export interface TextInputInputStyleProps {
-  $fontSize: number[]
-  $tone: ThemeColorToneKey
-  $weight?: ThemeFontWeightKey
-}
-
-/**
- * @internal
- */
-export interface TextInputRepresentationStyleProps {
-  $hasPrefix?: boolean
-  $hasSuffix?: boolean
-  $tone: ThemeColorToneKey
-}
-
-const ROOT_STYLE = css`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  align-items: center;
-`
-
-export function textInputRootStyle(): ReturnType<typeof css> {
-  return ROOT_STYLE
-}
-
-export function textInputBaseStyle(
-  props: TextInputInputStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {theme, $tone, $weight} = props
-  const font = theme.sanity.fonts.text
-
-  return css`
-    appearance: none;
-    background: none;
-    border: 0;
-    border-radius: 0;
-    outline: none;
-    width: 100%;
-    box-sizing: border-box;
-    font-family: ${font.family};
-    font-weight: ${($weight && font.weights[$weight]) || font.weights.regular};
-    margin: 0;
-    position: relative;
-    z-index: 1;
-    display: block;
-
-    /* NOTE: This is a hack to disable Chrome’s autofill styles */
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--input-fg-color) !important;
-      transition: background-color 5000s;
-      transition-delay: 86400s /* 24h */;
-    }
-
-    /* &:is(textarea) */
-    &[data-as='textarea'] {
-      resize: none;
-    }
-
-    color: var(--input-fg-color);
-
-    &::placeholder {
-      color: var(--input-placeholder-color);
-    }
-
-    --input-fg-color: ${cssVars[$tone]['text-primary']};
-    --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
-
-    /* enabled */
-    &:not(:invalid):not(:disabled):not(:read-only) {
-      --input-fg-color: ${cssVars[$tone]['text-primary']};
-      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
-    }
-
-    /* disabled */
-    &:not(:invalid):disabled {
-      --input-fg-color: ${cssVars[$tone]['text-primary']};
-      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
-    }
-
-    /* invalid */
-    &:invalid {
-      --input-fg-color: ${cssVars.critical['text-primary']};
-      --input-placeholder-color: ${cssVars.critical['text-inactive']};
-    }
-
-    /* readOnly */
-    &:read-only {
-      --input-fg-color: ${cssVars[$tone]['text-primary']};
-      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
-    }
-  `
-}
-
-export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {fonts, media} = theme.sanity
-
-  return _responsive(media, props.$fontSize, (sizeIndex) => {
-    const size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2]
-
-    return {
-      fontSize: rem(size.fontSize),
-      lineHeight: size.lineHeight / size.fontSize,
-    }
-  })
-}
-
-export function textInputRepresentationStyle(
-  props: TextInputRepresentationStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $tone, theme} = props
-  const {input} = theme.sanity
-  const {focusRing} = input.text
-
-  return css`
-    --input-box-shadow: none;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: block;
-    pointer-events: none;
-    z-index: 0;
-
-    background-color: ${cssVars.mutable['bg-color']};
-    box-shadow: var(--input-box-shadow);
-
-    border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-
-    ${mutableCardVariables['bg-color']}: ${cssVars[$tone]['bg-base']};
-    ${mutableCardVariables['fg-color']}: ${cssVars[$tone]['text-primary']};
-
-    /* enabled */
-    &[data-border] {
-      --input-box-shadow: ${focusRingBorderStyle({
-        color: cssVars[$tone]['border-base'],
-        width: input.border.width,
-      })};
-    }
-
-    /* invalid */
-    *:not(:disabled):invalid + & {
-      ${mutableCardVariables['bg-color']}: ${cssVars.critical['bg-tint']};
-      ${mutableCardVariables['fg-color']}: ${cssVars.critical['text-primary']};
-
-      &[data-border] {
-        --input-box-shadow: ${focusRingBorderStyle({
-          color: cssVars.critical['border-base'],
-          width: input.border.width,
-        })};
-      }
-    }
-
-    /* focused */
-    *:not(:disabled):focus + & {
-      &[data-border] {
-        --input-box-shadow: ${focusRingStyle({
-          border: {color: cssVars[$tone]['border-base'], width: input.border.width},
-          focusRing,
-        })};
-      }
-
-      &:not([data-border]) {
-        --input-box-shadow: ${focusRingStyle({focusRing})};
-      }
-    }
-
-    /* disabled */
-    *:disabled + & {
-      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
-     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
-    }
-
-    /* readOnly */
-    *:read-only + & {
-      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
-     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
-    }
-
-    /* hovered */
-    @media (hover: hover) {
-
-      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-        --input-box-shadow: ${focusRingBorderStyle({
-          color: cssVars.default['border-base-hover'],
-          width: input.border.width,
-        })};
-      }
-    }
-    }
-  `
-}

package/src/styles/margin/marginStyle.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from '../../types/styled'
-import {_getResponsiveSpace} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveMarginStyleProps} from './types'
-
-export function responsiveMarginStyle(
-  props: ResponsiveMarginStyleProps & ThemeProps,
-): CSSObject[][] {
-  const {theme} = props
-
-  return [
-    _getResponsiveSpace(theme, ['margin'], props.$margin),
-    _getResponsiveSpace(theme, ['marginLeft', 'marginRight'], props.$marginX),
-    _getResponsiveSpace(theme, ['marginTop', 'marginBottom'], props.$marginY),
-    _getResponsiveSpace(theme, ['marginTop'], props.$marginTop),
-    _getResponsiveSpace(theme, ['marginRight'], props.$marginRight),
-    _getResponsiveSpace(theme, ['marginBottom'], props.$marginBottom),
-    _getResponsiveSpace(theme, ['marginLeft'], props.$marginLeft),
-  ].filter(Boolean) as CSSObject[][]
-}

package/src/styles/margin/marginsStyle.test.ts

@@ -1,32 +0,0 @@
-/** @jest-environment jsdom */
-
-import {studioTheme, Theme} from '../../theme'
-import {responsiveMarginStyle} from './marginStyle'
-
-const theme: Theme = {sanity: studioTheme}
-
-describe('styles/margin', () => {
-  it('should 1', () => {
-    const styles = responsiveMarginStyle({$margin: [0], theme})
-
-    expect(styles).toEqual([[{margin: 0}]])
-  })
-
-  it('should 2', () => {
-    const styles = responsiveMarginStyle({$margin: [0, 1, 2], theme})
-
-    expect(styles).toEqual([
-      [
-        {
-          margin: 0,
-        },
-        {
-          '@media screen and (min-width: 360px)': {margin: '0.25rem'},
-        },
-        {
-          '@media screen and (min-width: 600px)': {margin: '0.5rem'},
-        },
-      ],
-    ])
-  })
-})