@sanity/ui 3.0.0-static.15 → 3.0.0-static.16

package/src/css/primitives/box/types.ts

@@ -16,6 +16,7 @@ import {
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  TextAlignStyleProps,
   WidthStyleProps,
 } from '../../aspects'
 import {ResponsiveProp} from '../../types'
@@ -42,6 +43,7 @@ export interface BoxStyleProps
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    TextAlignStyleProps,
     WidthStyleProps {
   muted?: boolean
   outline?: 'none'

package/src/css/primitives/heading/heading.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {HeadingStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function heading(props: HeadingStyleProps): string | undefined {
     props.muted && 'heading-muted',
     _resp(`heading`, props.size),
     flexItem(props),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/heading/types.ts

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -7,6 +7,7 @@ export type HeadingSize = number
 /** @public */
 export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }

package/src/css/primitives/label/label.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {font} from '../../aspects'
+import {font, textAlign} from '../../aspects'
 import {LabelStyleProps} from './types'
 
 /** @public */
@@ -12,5 +12,6 @@ export function label(props: LabelStyleProps): string | undefined {
     props.accent && 'label-accent',
     props.muted && 'label-muted',
     _resp(`label`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/label/types.ts

@@ -1,6 +1,6 @@
 import {FontLabelSize} from '@sanity/ui/theme'
 
-import {FontStyleProps} from '../../aspects'
+import {FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -12,6 +12,7 @@ export type LabelSize = number
 /** @public */
 export interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<FontLabelSize>
 }

package/src/css/primitives/text/text.style.ts

@@ -39,13 +39,8 @@ const primitive: StyleRules = {
     },
   },
 
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
   '.text-muted': {
     color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
   },
 }
 

package/src/css/primitives/text/text.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {TextStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function text(props: TextStyleProps): string | undefined {
     props.accent && 'text-accent',
     props.muted && 'text-muted',
     _resp(`text`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

package/src/css/primitives/text/types.ts

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -10,6 +10,7 @@ export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
    * @deprecated Will be removed in next major version
    */
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }

package/src/css/primitives/textInput/textInput.style.ts

@@ -42,126 +42,7 @@ const primitive: StyleRules = {
     },
   },
 
-  '.text-input-presentation': {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // 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};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[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,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
+  '.text-input-presentation': {},
 }
 
 export const textInputStyle: Style = {layers: {primitive}}

package/src/ui/RootClassNames.tsx

@@ -1,44 +0,0 @@
-import {card, scopeClassName as _} from '@sanity/ui/css'
-import {useEffect} from 'react'
-
-import {_raf2} from './helpers'
-import {useCard} from './primitives'
-
-/** @internal */
-export function RootClassNames(props: {element: HTMLElement}) {
-  const {element} = props
-  const {scheme, tone} = useCard() ?? {}
-
-  useEffect(() => {
-    const els = document.querySelectorAll(
-      [_('button'), _('card'), _('font')].map((n) => `.${n}`).join(', '),
-    )
-
-    // temporarily disable all transitions when the theme changes
-    for (const el of els) {
-      if (el instanceof HTMLElement) {
-        el.style.transition = 'none'
-      }
-    }
-
-    _raf2(() => {
-      document.documentElement.className = card({scheme, tone}) ?? ''
-
-      _raf2(() => {
-        for (const el of els) {
-          if (el instanceof HTMLElement) {
-            el.style.transition = ''
-          }
-        }
-      })
-    })
-
-    return () => {
-      document.documentElement.className = ''
-    }
-  }, [element, scheme, tone])
-
-  return null
-}
-
-RootClassNames.displayName = 'RootClassNames'

package/src/ui/_compat/studioTheme.ts

@@ -1,7 +0,0 @@
-import {buildTheme} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export const studioTheme = buildTheme()

package/src/ui/primitives/card/cardProvider.tsx

@@ -1,21 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactNode, useMemo} from 'react'
-
-import {CardContext} from './cardContext'
-import {CardCompatProviderComponent} from './types'
-
-export function CardProvider(props: {
-  compat_provider?: CardCompatProviderComponent
-  children?: ReactNode
-  rendered?: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
-}) {
-  const {children, rendered = false, tone, scheme} = props
-
-  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
-
-  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
-}
-
-CardProvider.displayName = 'CardProvider'