@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -0,0 +1,263 @@
+import {CSSObject, getTheme_v2, ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {CardTone} from '../../types'
+import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
+import {_responsive, rem} 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 */
+      *:not(:invalid):disabled + & {
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
+        --card-icon-color: ${color.input.default.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.default.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      *:invalid:disabled + & {
+        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.disabled.border,
+            width: input.border.width,
+          })};
+        }
+      }
+
+      /* readOnly */
+      *:not(:invalid):read-only + & {
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
+      }
+
+      *:invalid:read-only + & {
+        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+        --card-fg-color: ${color.input.invalid.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};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):hover + & {
+          --card-bg-color: ${color.input.invalid.hovered.bg};
+          --card-fg-color: ${color.input.invalid.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,
+          })};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+            color: color.input.invalid.hovered.border,
+            width: input.border.width,
+          })};
+        }
+      }
+    }
+  `
+}

package/src/core/styles/internal.ts

@@ -0,0 +1,12 @@
+// Not yet ready to be exposed
+export * from './border'
+export * from './box'
+export * from './flex'
+export * from './focusRing'
+export * from './font'
+export * from './grid'
+export * from './input'
+export * from './margin'
+export * from './padding'
+export * from './radius'
+export * from './shadow'

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

@@ -0,0 +1,2 @@
+export * from './marginStyle'
+export * from './types'

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

@@ -0,0 +1,21 @@
+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,33 @@
+/** @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/margin/types.ts

@@ -0,0 +1,9 @@
+export interface ResponsiveMarginStyleProps {
+  $margin?: number[]
+  $marginX?: number[]
+  $marginY?: number[]
+  $marginTop?: number[]
+  $marginRight?: number[]
+  $marginBottom?: number[]
+  $marginLeft?: number[]
+}

package/src/core/styles/padding/index.ts

@@ -0,0 +1,2 @@
+export * from './paddingStyle'
+export * from './types'

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

@@ -0,0 +1,33 @@
+/** @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'},
+        },
+      ],
+    ])
+  })
+})

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

@@ -0,0 +1,21 @@
+import {CSSObject} from '@sanity/ui/theme'
+
+import {_getResponsiveSpace} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsivePaddingStyleProps} from './types'
+
+export function responsivePaddingStyle(
+  props: ResponsivePaddingStyleProps & ThemeProps,
+): CSSObject[][] {
+  const {theme} = props
+
+  return [
+    _getResponsiveSpace(theme, ['padding'], props.$padding),
+    _getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
+    _getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
+    _getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
+    _getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
+    _getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
+    _getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
+  ].filter(Boolean) as CSSObject[][]
+}

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

@@ -0,0 +1,12 @@
+/**
+ * @internal
+ */
+export interface ResponsivePaddingStyleProps {
+  $padding?: number[]
+  $paddingX?: number[]
+  $paddingY?: number[]
+  $paddingTop?: number[]
+  $paddingRight?: number[]
+  $paddingBottom?: number[]
+  $paddingLeft?: number[]
+}

package/src/core/styles/radius/index.ts

@@ -0,0 +1,2 @@
+export * from './radiusStyle'
+export * from './types'

package/src/core/styles/radius/radiusStyle.ts

@@ -0,0 +1,23 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+
+import {_responsive, rem} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveRadiusStyleProps} from './types'
+
+export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
+  const {media, radius} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$radius, (value) => {
+    let borderRadius: string | 0 = 0
+
+    if (typeof value === 'number') {
+      borderRadius = rem(radius[value])
+    }
+
+    if (value === 'full') {
+      borderRadius = '9999px'
+    }
+
+    return {borderRadius}
+  })
+}

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

@@ -0,0 +1,8 @@
+import {Radius} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveRadiusStyleProps {
+  $radius: Radius[]
+}

package/src/core/styles/shadow/index.ts

@@ -0,0 +1,2 @@
+export * from './shadowStyle'
+export * from './types'

package/src/core/styles/shadow/shadowStyle.ts

@@ -0,0 +1,29 @@
+import {CSSObject, getTheme_v2, ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
+
+import {EMPTY_RECORD} from '../../constants'
+import {_responsive, rem} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveShadowStyleProps} from './types'
+
+function toBoxShadow(shadow: ThemeBoxShadow, color: string) {
+  return `${shadow.map(rem).join(' ')} ${color}`
+}
+
+function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSObject {
+  if (!shadow) return EMPTY_RECORD
+
+  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`
+  const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)')
+  const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)')
+  const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)')
+
+  return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
+}
+
+export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
+  const {card, media, shadow} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$shadow, (index) =>
+    shadowStyle(shadow[index], card.shadow.outline),
+  )
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveShadowStyleProps {
+  $shadow: number[]
+}

package/src/core/styles/types.ts

@@ -0,0 +1,8 @@
+import {Theme} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ */
+export interface ThemeProps {
+  theme: Theme
+}