@sanity/ui 0.36.13 → 0.36.16

package/src/styles/input/textInputStyle.ts

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

@@ -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/styles/margin/index.ts

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

package/src/styles/margin/marginStyle.ts

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

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

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

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

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

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

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

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

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

package/src/styles/radius/radiusStyle.ts

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

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

package/src/styles/shadow/index.ts

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

package/src/styles/shadow/shadowStyle.ts

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

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

package/src/styles/types.ts

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

package/src/theme/__workshop__/.eslintrc

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