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

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

@@ -0,0 +1,34 @@
+import {ThemeFontWeightKey} from '@sanity/ui/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/core/styles/grid/gridItemStyle.ts

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

package/src/core/styles/grid/gridStyle.ts

@@ -0,0 +1,107 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+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 {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$autoFlow, (autoFlow) => ({
+    gridAutoFlow: autoFlow,
+  }))
+}
+
+function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$autoRows, (autoRows) => ({
+    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+  }))
+}
+
+function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$autoCols, (autoCols) => ({
+    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+  }))
+}
+
+function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$columns, (columns) => ({
+    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$rows, (rows) => ({
+    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+  }))
+}
+
+function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gap, (gap) => ({
+    gridGap: gap ? rem(space[gap]) : undefined,
+  }))
+}
+
+function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gapX, (gapX) => ({
+    columnGap: gapX ? rem(space[gapX]) : undefined,
+  }))
+}
+
+function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gapY, (gapY) => ({
+    rowGap: gapY ? rem(space[gapY]) : undefined,
+  }))
+}

package/src/core/styles/helpers.ts

@@ -0,0 +1,72 @@
+import {Theme, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {EMPTY_ARRAY} from '../constants'
+
+/**
+ * @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
+  }
+
+  const {media, space} = getTheme_v2(theme)
+
+  return _responsive(media, spaceIndexes, (spaceIndex) =>
+    _fillCSSObject(props, rem(space[spaceIndex])),
+  )
+}

package/src/core/styles/input/responsiveInputPaddingStyle.ts

@@ -0,0 +1,77 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+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} = props
+  const {font, media, space} = getTheme_v2(props.theme)
+  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 = font.text.sizes[_fontSize[i]] || font.text.sizes[2]
+    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight
+    const p = space[_padding[i]]
+    const s = space[_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/core/styles/input/textInputStyle.ts

@@ -0,0 +1,232 @@
+import {ThemeColorSchemeKey, ThemeFontWeightKey, getTheme_v2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {CardTone} from '../../types'
+import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
+import {rem, _responsive} from '../helpers'
+import {ThemeProps} from '../types'
+
+/**
+ * @internal
+ */
+export interface TextInputInputStyleProps {
+  $fontSize: number[]
+  $scheme: ThemeColorSchemeKey
+  $tone: CardTone
+  $weight?: ThemeFontWeightKey
+}
+
+/**
+ * @internal
+ */
+export interface TextInputRepresentationStyleProps {
+  $hasPrefix?: boolean
+  $hasSuffix?: boolean
+  $scheme: ThemeColorSchemeKey
+  $tone: CardTone
+  $unstableDisableFocusRing?: boolean
+}
+
+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 {$scheme, $tone, $weight} = props
+  const {color, font} = getTheme_v2(props.theme)
+
+  return css`
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: ${font.text.family};
+    font-weight: ${($weight && font.text.weights[$weight]) || font.text.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);
+    }
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --input-fg-color: ${color.input.default.enabled.fg};
+      --input-placeholder-color: ${color.input.default.enabled.placeholder};
+
+      /* enabled */
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${color.input.default.enabled.fg};
+        --input-placeholder-color: ${color.input.default.enabled.placeholder};
+      }
+
+      /* disabled */
+      &:not(:invalid):disabled {
+        --input-fg-color: ${color.input.default.disabled.fg};
+        --input-placeholder-color: ${color.input.default.disabled.placeholder};
+      }
+
+      /* invalid */
+      &:invalid {
+        --input-fg-color: ${color.input.invalid.enabled.fg};
+        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
+      }
+
+      /* readOnly */
+      &:read-only {
+        --input-fg-color: ${color.input.default.readOnly.fg};
+        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
+      }
+    }
+  `
+}
+
+export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
+  const {font, media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$fontSize, (sizeIndex) => {
+    const size = font.text.sizes[sizeIndex] || font.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, $scheme, $tone, $unstableDisableFocusRing} = props
+  const {color, input} = getTheme_v2(props.theme)
+
+  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: var(--card-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};
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --card-bg-color: ${color.input.default.enabled.bg};
+      --card-fg-color: ${color.input.default.enabled.fg};
+
+      /* enabled */
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+          color: color.input.default.enabled.border,
+          width: input.border.width,
+        })};
+      }
+
+      /* invalid */
+      *:not(:disabled):invalid + & {
+        --card-bg-color: ${color.input.invalid.enabled.bg};
+        --card-fg-color: ${color.input.invalid.enabled.fg};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.enabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      /* focused */
+      *:not(:disabled):focus + & {
+        &[data-border] {
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({
+                border: {color: color.input.default.enabled.border, width: input.border.width},
+                focusRing: input.text.focusRing,
+              })};
+        }
+
+        &:not([data-border]) {
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({focusRing: input.text.focusRing})};
+        }
+      }
+
+      /* disabled */
+      *:disabled + & {
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.default.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      /* readOnly */
+      *:read-only + & {
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
+      }
+
+      /* hovered */
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${color.input.default.hovered.bg};
+          --card-fg-color: ${color.input.default.hovered.fg};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.default.hovered.border,
+            width: input.border.width,
+          })};
+        }
+      }
+    }
+  `
+}

package/src/core/styles/margin/marginStyle.ts

@@ -0,0 +1,20 @@
+import {CSSObject} from '@sanity/ui/theme'
+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/core/styles/margin/marginsStyle.test.ts

@@ -0,0 +1,32 @@
+/** @jest-environment jsdom */
+
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
+import {responsiveMarginStyle} from './marginStyle'
+
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
+
+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'},
+        },
+      ],
+    ])
+  })
+})

package/src/core/styles/padding/paddingStyle.test.ts

@@ -0,0 +1,32 @@
+/** @jest-environment jsdom */
+
+import {buildTheme, getScopedTheme} from '@sanity/ui/theme'
+import {responsivePaddingStyle} from './paddingStyle'
+
+const theme = getScopedTheme(buildTheme(), 'light', 'default')
+
+describe('styles/padding', () => {
+  it('should 1', () => {
+    const styles = responsivePaddingStyle({$padding: [0], theme})
+
+    expect(styles).toEqual([[{padding: 0}]])
+  })
+
+  it('should 2', () => {
+    const styles = responsivePaddingStyle({$padding: [0, 1, 2], theme})
+
+    expect(styles).toEqual([
+      [
+        {
+          padding: 0,
+        },
+        {
+          '@media screen and (min-width: 360px)': {padding: '0.25rem'},
+        },
+        {
+          '@media screen and (min-width: 600px)': {padding: '0.5rem'},
+        },
+      ],
+    ])
+  })
+})