@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/src/{primitives → core/primitives}/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -3,18 +3,20 @@ import {useDelayedState} from '../../../hooks/useDelayedState'
 import {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
 import {TooltipDelayGroupContextValue} from './types'
-import {useTooltipDelayGroup} from './useTooltipDelayGroup'
+
 /**
  * @public
  * */
 export interface TooltipDelayGroupProviderProps {
   children?: React.ReactNode
   /**
-   * @public Handles the delays to open or close a tooltip inside a group
+   * Handles the delays to open or close a tooltip inside a group
    *
    * If only a `number` is passed, it will be used for both opening and closing.
    *
    * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
    */
   delay: Delay
 }
@@ -31,14 +33,6 @@ export function TooltipDelayGroupProvider(
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
 
-  const isInsideContext = useTooltipDelayGroup()
-
-  if (isInsideContext) {
-    throw new Error(
-      'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
-    )
-  }
-
   const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
   const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
 

package/src/{primitives → core/primitives}/types.ts

@@ -55,6 +55,7 @@ export interface ResponsiveFlexProps {
  * @public
  */
 export interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -88,8 +89,11 @@ export interface ResponsiveGridItemProps {
  * @public
  */
 export interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]

package/src/{styles → core/styles}/border/borderStyle.ts

@@ -1,10 +1,8 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
-const BORDER_VALUE = '1px solid var(--card-border-color)'
-
 export function responsiveBorderStyle(): Array<
   (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
 > {
@@ -13,45 +11,50 @@ export function responsiveBorderStyle(): Array<
 
 function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
+    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
   )
 }
 
 function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
+    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
   )
 }
 
 function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
+    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
   )
 }
 
 function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
+    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
   )
 }
 
 function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
-  const {media} = theme.sanity
+  const {card, media} = theme.sanity
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
 
   return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
+    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
   )
 }

package/src/{styles → core/styles}/box/boxStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {Property} from 'csstype'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'

package/src/{styles → core/styles}/colorVars/colorVarsStyle.ts

@@ -1,5 +1,5 @@
-import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
-import {CSSObject} from '../../types/styled'
+import {ThemeColorBase, ThemeColorGenericState} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 
 /**
  * @internal
@@ -17,7 +17,7 @@ export function _colorVarsStyle(
     '--card-shadow-penumbra-color': base.shadow.penumbra,
     '--card-shadow-ambient-color': base.shadow.ambient,
     '--card-focus-ring-color': base.focusRing,
-    '--card-icon-color': color.iconColor,
+    '--card-icon-color': color.icon,
 
     // Card
     '--card-bg-color': color.bg,

package/src/{styles → core/styles}/flex/flexItemStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../../constants'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'

package/src/{styles → core/styles}/flex/flexStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'

package/src/{styles → core/styles}/focusRing/index.ts

@@ -1,4 +1,4 @@
-import {FocusRing} from '../../theme'
+import {ThemeFocusRing} from '@sanity/ui/theme'
 
 export function focusRingBorderStyle(border: {color: string; width: number}): string {
   return `inset 0 0 0 ${border.width}px ${border.color}`
@@ -7,7 +7,7 @@ export function focusRingBorderStyle(border: {color: string; width: number}): st
 export function focusRingStyle(opts: {
   base?: {bg: string}
   border?: {color: string; width: number}
-  focusRing: FocusRing
+  focusRing: ThemeFocusRing
 }): string {
   const {base, border, focusRing} = opts
   const focusRingOutsetWidth = focusRing.offset + focusRing.width

package/src/{styles → core/styles}/font/codeFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/headingFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/labelFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/responsiveFont.ts

@@ -1,5 +1,5 @@
-import {ThemeFontSize, ThemeFontKey} from '../../theme'
-import {CSSObject} from '../../types/styled'
+import {ThemeFontSize, ThemeFontKey} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/textAlignStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'

package/src/{styles → core/styles}/font/textFontStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {ThemeProps} from '../types'
 import {responsiveFont} from './responsiveFont'
 import {ResponsiveFontStyleProps} from './types'

package/src/{styles → core/styles}/font/types.ts

@@ -1,4 +1,4 @@
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {TextAlign} from '../../types'
 
 /**

package/src/{styles → core/styles}/grid/gridItemStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'

package/src/{styles → core/styles}/grid/gridStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'

package/src/{styles → core/styles}/helpers.ts

@@ -1,6 +1,6 @@
+import {Theme} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_ARRAY} from '../constants'
-import {Theme} from '../theme'
-import {CSSObject} from '../types/styled'
 
 /**
  * @internal

package/src/{styles → core/styles}/input/responsiveInputPaddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 

package/src/{styles → core/styles}/input/textInputStyle.ts

@@ -1,7 +1,7 @@
+import {ThemeColorSchemeKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
 import {CardTone} from '../../types'
-import {CSSObject} from '../../types/styled'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -24,6 +24,7 @@ export interface TextInputRepresentationStyleProps {
   $hasSuffix?: boolean
   $scheme: ThemeColorSchemeKey
   $tone: CardTone
+  $unstableDisableFocusRing?: boolean
 }
 
 const ROOT_STYLE = css`
@@ -129,7 +130,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing, theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.text
   const color = theme.sanity.color.input
@@ -182,14 +183,18 @@ export function textInputRepresentationStyle(
       /* focused */
       *:not(:disabled):focus + & {
         &[data-border] {
-          --input-box-shadow: ${focusRingStyle({
-            border: {color: color.default.enabled.border, width: input.border.width},
-            focusRing,
-          })};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({
+                border: {color: color.default.enabled.border, width: input.border.width},
+                focusRing,
+              })};
         }
 
         &:not([data-border]) {
-          --input-box-shadow: ${focusRingStyle({focusRing})};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({focusRing})};
         }
       }
 

package/src/{styles → core/styles}/margin/marginStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'

package/src/{styles → core/styles}/margin/marginsStyle.test.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '../../theme'
+import {studioTheme, Theme} from '@sanity/ui/theme'
 import {responsiveMarginStyle} from './marginStyle'
 
 const {color, ...restTheme} = studioTheme

package/src/{styles → core/styles}/padding/paddingStyle.test.ts

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import {studioTheme, Theme} from '../../theme'
+import {studioTheme, Theme} from '@sanity/ui/theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
 const {color, ...restTheme} = studioTheme

package/src/{styles → core/styles}/padding/paddingStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'

package/src/{styles → core/styles}/radius/radiusStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from '../../types/styled'
+import {CSSObject} from '@sanity/ui/theme'
 import {_responsive, rem} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveRadiusStyleProps} from './types'

package/src/{styles → core/styles}/shadow/shadowStyle.ts

@@ -1,18 +1,18 @@
+import {ThemeBoxShadow, ThemeShadow} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow} from '../../theme'
-import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveShadowStyleProps} from './types'
 
-function toBoxShadow(shadow: BoxShadow, color: string) {
+function toBoxShadow(shadow: ThemeBoxShadow, color: string) {
   return `${shadow.map(rem).join(' ')} ${color}`
 }
 
-function shadowStyle(shadow: ThemeShadow | null): CSSObject {
+function shadowStyle(shadow: ThemeShadow | null, outlineWidth: number = 1): CSSObject {
   if (!shadow) return EMPTY_RECORD
 
-  const outline = `0 0 0 ${rem(1)} var(--card-shadow-outline-color)`
+  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)')
@@ -22,7 +22,9 @@ function shadowStyle(shadow: ThemeShadow | null): CSSObject {
 
 export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeProps): CSSObject[] {
   const {theme} = props
-  const {media, shadows} = theme.sanity
+  const {card, media, shadows} = theme.sanity
 
-  return _responsive(media, props.$shadow, (shadow) => shadowStyle(shadows[shadow]))
+  return _responsive(media, props.$shadow, (shadow) =>
+    shadowStyle(shadows[shadow], card.shadow.outline),
+  )
 }

package/src/{styles → core/styles}/types.ts

@@ -1,4 +1,4 @@
-import {Theme} from '../theme'
+import {Theme} from '@sanity/ui/theme'
 
 /**
  * @internal