@sanity/ui 0.36.17 → 0.37.3

package/src/styles/input/textInputStyle.ts

@@ -1,208 +0,0 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
-import {ThemeFontWeightKey} from '../../theme'
-import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
-import {getResponsiveProp, rem, responsive} from '../helpers'
-import {ThemeProps} from '../types'
-
-/**
- * @internal
- */
-export interface TextInputInputStyleProps {
-  $fontSize?: number | number[]
-  $weight?: ThemeFontWeightKey
-}
-
-/**
- * @internal
- */
-export interface TextInputRepresentationStyleProps {
-  $border?: boolean
-  $hasPrefix?: boolean
-  $hasSuffix?: boolean
-}
-
-const ROOT_STYLE = css`
-  &:not([hidden]) {
-    display: flex;
-  }
-`
-
-export function textInputRootStyle(): FlattenSimpleInterpolation {
-  return ROOT_STYLE
-}
-
-export function textInputBaseStyle(
-  props: TextInputInputStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
-  const {theme, $weight} = props
-  const font = theme.sanity.fonts.text
-  const color = theme.sanity.color.input
-
-  return css`
-    --input-fg-color: ${color.default.enabled.fg};
-    --input-placeholder-color: ${color.default.enabled.placeholder};
-
-    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;
-    color: var(--input-fg-color);
-
-    /* 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 */;
-    }
-
-    &::placeholder {
-      color: var(--input-placeholder-color);
-    }
-
-    /* &:is(textarea) */
-    &[data-as='textarea'] {
-      resize: none;
-    }
-
-    /* enabled */
-    &:not(:invalid):not(:disabled):not(:read-only) {
-      --input-fg-color: ${color.default.enabled.fg};
-      --input-placeholder-color: ${color.default.enabled.placeholder};
-    }
-
-    /* disabled */
-    &:not(:invalid):disabled {
-      --input-fg-color: ${color.default.disabled.fg};
-      --input-placeholder-color: ${color.default.disabled.placeholder};
-    }
-
-    /* invalid */
-    &:invalid {
-      --input-fg-color: ${color.invalid.enabled.fg};
-      --input-placeholder-color: ${color.invalid.enabled.placeholder};
-    }
-
-    /* readOnly */
-    &:read-only {
-      --input-fg-color: ${color.default.readOnly.fg};
-      --input-placeholder-color: ${color.default.readOnly.placeholder};
-    }
-  `
-}
-
-export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {fonts, media} = theme.sanity
-
-  return responsive(media, getResponsiveProp(props.$fontSize, [2]), (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
-): FlattenSimpleInterpolation {
-  const {$border, $hasPrefix, $hasSuffix, theme} = props
-  const {focusRing, input} = theme.sanity
-  const color = theme.sanity.color.input
-
-  return css`
-    --card-bg-color: ${color.default.enabled.bg};
-    --card-fg-color: ${color.default.enabled.fg};
-    --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};
-
-    /* enabled */
-    *:not(:disabled) + && {
-      --input-box-shadow: ${$border
-        ? focusRingBorderStyle({color: color.default.enabled.border, width: input.border.width})
-        : undefined};
-    }
-
-    /* invalid */
-    *:not(:disabled):invalid + && {
-      --card-bg-color: ${color.invalid.enabled.bg};
-      --card-fg-color: ${color.invalid.enabled.fg};
-      --input-box-shadow: ${$border
-        ? focusRingBorderStyle({color: color.invalid.enabled.border, width: input.border.width})
-        : 'none'};
-    }
-
-    /* focused */
-    *:not(:disabled):focus + && {
-      --input-box-shadow: ${focusRingStyle({
-        border: $border
-          ? {color: color.default.enabled.border, width: input.border.width}
-          : undefined,
-        focusRing,
-      })};
-    }
-
-    /* disabled */
-    *:disabled + && {
-      --card-bg-color: ${color.default.disabled.bg};
-      --card-fg-color: ${color.default.disabled.fg};
-      --input-box-shadow: ${$border
-        ? focusRingBorderStyle({
-            color: color.default.disabled.border,
-            width: input.border.width,
-          })
-        : 'none'};
-    }
-
-    /* hovered */
-    @media (hover: hover) {
-      *:not(:disabled):not(:read-only):not(:invalid):hover + && {
-        --card-bg-color: ${color.default.hovered.bg};
-        --card-fg-color: ${color.default.hovered.fg};
-      }
-
-      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + && {
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({
-              color: color.default.hovered.border,
-              width: input.border.width,
-            })
-          : 'none'};
-      }
-    }
-
-    /* readOnly */
-    *:read-only + && {
-      --card-bg-color: ${color.default.readOnly.bg};
-      --card-fg-color: ${color.default.readOnly.fg};
-    }
-  `
-}

package/src/styles/internal.ts

@@ -1,12 +0,0 @@
-// 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/styles/margin/index.ts

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

package/src/styles/margin/marginStyle.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp, 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'], getResponsiveProp(props.$margin)),
-    getResponsiveSpace(theme, ['marginLeft', 'marginRight'], getResponsiveProp(props.$marginX)),
-    getResponsiveSpace(theme, ['marginTop', 'marginBottom'], getResponsiveProp(props.$marginY)),
-    getResponsiveSpace(theme, ['marginTop'], getResponsiveProp(props.$marginTop)),
-    getResponsiveSpace(theme, ['marginRight'], getResponsiveProp(props.$marginRight)),
-    getResponsiveSpace(theme, ['marginBottom'], getResponsiveProp(props.$marginBottom)),
-    getResponsiveSpace(theme, ['marginLeft'], getResponsiveProp(props.$marginLeft)),
-  ].filter(Boolean) as CSSObject[][]
-}

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

@@ -1,31 +0,0 @@
-import {studioTheme, Theme} from '../../theme'
-import {responsiveMarginStyle} from './marginStyle'
-
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
-
-describe('styles/margin', () => {
-  it('should', () => {
-    const styles = responsiveMarginStyle({$margin: 0, theme})
-
-    expect(styles).toEqual([[{margin: 0}]])
-  })
-
-  it('should', () => {
-    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/styles/margin/types.ts

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

package/src/styles/padding/index.ts

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

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

@@ -1,31 +0,0 @@
-import {studioTheme, Theme} from '../../theme'
-import {responsivePaddingStyle} from './paddingStyle'
-
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
-
-describe('styles/padding', () => {
-  it('should', () => {
-    const styles = responsivePaddingStyle({$padding: 0, theme})
-
-    expect(styles).toEqual([[{padding: 0}]])
-  })
-
-  it('should', () => {
-    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/styles/padding/paddingStyle.ts

@@ -1,20 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp, 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'], getResponsiveProp(props.$padding)),
-    getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], getResponsiveProp(props.$paddingX)),
-    getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], getResponsiveProp(props.$paddingY)),
-    getResponsiveSpace(theme, ['paddingTop'], getResponsiveProp(props.$paddingTop)),
-    getResponsiveSpace(theme, ['paddingRight'], getResponsiveProp(props.$paddingRight)),
-    getResponsiveSpace(theme, ['paddingBottom'], getResponsiveProp(props.$paddingBottom)),
-    getResponsiveSpace(theme, ['paddingLeft'], getResponsiveProp(props.$paddingLeft)),
-  ].filter(Boolean) as CSSObject[][]
-}

package/src/styles/padding/types.ts

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

package/src/styles/radius/index.ts

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

package/src/styles/radius/radiusStyle.ts

@@ -1,13 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveRadiusStyleProps} from './types'
-
-export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeProps): CSSObject[] {
-  const {theme} = props
-  const {media, radius} = theme.sanity
-
-  return responsive(media, getResponsiveProp(props.$radius), (radiusIndex) => ({
-    borderRadius: rem(radius[radiusIndex]),
-  }))
-}

package/src/styles/radius/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveRadiusStyleProps {
-  $radius?: number | number[]
-}

package/src/styles/shadow/index.ts

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

package/src/styles/shadow/shadowStyle.ts

@@ -1,31 +0,0 @@
-import {CSSObject} from 'styled-components'
-import {getResponsiveProp} from '..'
-import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow} from '../../theme'
-import {rem, responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveShadowStyleProps} from './types'
-
-function toBoxShadow(shadow: BoxShadow, color: string) {
-  return `${shadow.map(rem).join(' ')} ${color}`
-}
-
-function shadowStyle(shadow: ThemeShadow | null): CSSObject {
-  if (!shadow) return EMPTY_RECORD
-
-  const outline = `0 0 0 ${rem(1)} 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 {theme} = props
-  const {media, shadows} = theme.sanity
-
-  return responsive(media, getResponsiveProp(props.$shadow), (shadow) =>
-    shadowStyle(shadows[shadow])
-  )
-}

package/src/styles/shadow/types.ts

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

package/src/styles/types.ts

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

package/src/theme/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}