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

package/src/{ui → core}/primitives/card/__workshop__/selected.tsx

@@ -1,29 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, Theme, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((props: {
-  $tone: ThemeColorStateToneKey
-  theme: Theme
-}) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
-    }
-  `
-})
 
 export default function SelectedStory() {
   const disabled = useBoolean('Disabled', false) || false
@@ -62,31 +39,23 @@ export default function SelectedStory() {
 }
 
 function Preview({selected}: {selected: boolean}) {
-  const rootTheme = useRootTheme()
-
   return (
     <Flex>
       <Box flex={1}>
         <Text size={1}>Title</Text>
       </Box>
       <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          weight="medium"
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
+        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
           <EditIcon />
-        </TextWithTone>
-        <TextWithTone
+        </Text>
+        <Text
           data-selected={selected ? '' : undefined}
           muted
           size={1}
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />
-        </TextWithTone>
+        </Text>
       </Inline>
     </Flex>
   )

package/src/{ui → core}/primitives/card/card.tsx

@@ -1,5 +1,4 @@
 import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {createElement} from 'react'
 
 import {Props} from '../../types'
 import {Box, BoxElementType, BoxOwnProps} from '../box'
@@ -57,14 +56,8 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
   const parent = useCard()
-
-  const context = {
-    tone: parent?.tone ?? 'default',
-    scheme: parent?.scheme ?? 'light',
-  }
-
-  const tone = toneProp === 'inherit' ? context.tone : toneProp
-  const scheme = schemeProp === undefined ? context.scheme : schemeProp
+  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
+  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
   let node = (
     <Box
@@ -74,7 +67,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
       className={composeClassNames(
         className,
         card({
-          scheme: scheme === context.scheme ? undefined : scheme,
+          scheme: scheme === parent?.scheme ? undefined : scheme,
           shadow,
           tone,
         }),
@@ -89,27 +82,28 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     />
   )
 
-  if (scheme === context.scheme && tone === context.tone) {
+  if (scheme === parent?.scheme && tone === parent?.tone) {
     return node
   }
 
   node = (
     <CardProvider
-      compat_provider={parent?.compat_provider}
-      rendered={true}
-      scheme={scheme}
-      tone={tone ?? context.tone}
+      scheme={scheme ?? 'light'}
+      tone={tone ?? 'default'}
+      unstable_CompatProvider={parent?.unstable_CompatProvider}
     >
       {node}
     </CardProvider>
   )
 
-  if (parent?.compat_provider) {
-    return createElement(parent.compat_provider, {
-      children: node,
-      scheme,
-      tone: tone ?? context.tone,
-    })
+  if (parent?.unstable_CompatProvider) {
+    const CompatProvider = parent.unstable_CompatProvider
+
+    return (
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+        {node}
+      </CompatProvider>
+    )
   }
 
   return node

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

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

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

@@ -12,16 +12,17 @@ export interface CardStyleProps {
   $tone: ThemeColorCardToneKey
 }
 
-export type CardCompatProviderComponent = ComponentType<{
+/** @internal */
+export type _CardCompatProviderComponent = ComponentType<{
   children?: ReactNode
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey
 }>
 
-/** @internal */
+/** @public */
 export interface CardContextValue {
-  compat_provider?: CardCompatProviderComponent
-  rendered: boolean
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
 }

package/src/{ui → core}/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -43,7 +43,7 @@ export default function OpticalAlignment() {
 
         <Flex>
           <Card padding={2} tone="neutral">
-            <Heading accent>
+            <Heading>
               <AddCircleIcon />
             </Heading>
           </Card>

package/src/{ui → core}/primitives/heading/__workshop__/plain.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../../../../workshop/constants'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
   const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
   const textChild = useText('Text', 'Hello, world', 'Props')
@@ -18,13 +17,7 @@ export default function PlainStory() {
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        accent={accent}
-        muted={muted}
-        size={size}
-        textOverflow={textOverflow}
-        weight={weight}
-      >
+      <Heading muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
         {textChild}
       </Heading>
     </Flex>

package/src/{ui → core}/primitives/label/__workshop__/plain.tsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../../workshop/constants'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
@@ -21,14 +20,7 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Label
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
+        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
           {textChild}
         </Label>
       </Container>

package/src/{ui → core}/primitives/popover/popover.tsx

@@ -141,7 +141,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = false,
+    animate: _animate = true,
     arrow: arrowProp = false,
     as: as = DEFAULT_POPOVER_ELEMENT,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/{ui → core}/primitives/text/__workshop__/example.tsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../../workshop/constants'
 
 export default function TextStory() {
-  const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
@@ -23,14 +22,7 @@ export default function TextStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <Text
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
+        <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
           {text}
         </Text>
       </Container>

package/src/{ui → core}/primitives/tooltip/tooltip.tsx

@@ -107,7 +107,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   const boundaryElementContext = useBoundaryElement()
 
   const {
-    animate: _animate = false,
+    animate: _animate = true,
     arrow: arrowProp = false,
     as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,

package/src/{ui/utils/portal/portal.ts → core/utils/portal/portal.tsx}

@@ -1,4 +1,4 @@
-import {createElement, ReactNode, ReactPortal} from 'react'
+import {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
 import {CardProvider, useCard} from '../../primitives'
@@ -26,15 +26,13 @@ export function Portal(props: PortalProps): ReactPortal | null {
   }
 
   return createPortal(
-    createElement(
-      CardProvider,
-      {
-        rendered: true,
-        tone: 'transparent', // card?.tone || 'default',
-        scheme: card?.scheme || 'light',
-      },
-      children,
-    ),
+    <CardProvider
+      // rendered={true}
+      tone="transparent" // card?.tone || 'default',
+      scheme={card?.scheme || 'light'}
+    >
+      {children}
+    </CardProvider>,
     portalElement,
   )
 }

package/src/css/{compilePalette.ts → _compilePalette.ts}

@@ -6,10 +6,10 @@ import {Properties} from './types'
 import {varNames} from './varNames'
 
 /** @internal */
-export function compilePalette(): string {
+export function _compilePalette(): string {
   return _compileStyle({
     layers: {
-      theme: {
+      palette: {
         ':root': compilePaletteProperties(),
       },
     },

package/src/css/{compileSystem.ts → _compileSystem.ts}

@@ -2,6 +2,6 @@ import {_compileStyle} from './_compileStyle'
 import {_systemStyle} from './_system.style'
 
 /** @internal */
-export function compileSystem(): string {
+export function _compileSystem(): string {
   return _compileStyle(_systemStyle)
 }

package/src/css/{compileTheme.ts → _compileTheme.ts}

@@ -1,11 +1,11 @@
 import {type RootTheme} from '@sanity/ui/theme'
 
-import {compileTheme_v3} from './compileTheme_v3'
+import {_compileTheme_v3} from './_compileTheme_v3'
 
 /** @internal */
-export function compileTheme(theme: RootTheme): string {
+export function _compileTheme(theme: RootTheme): string {
   if (theme.v3) {
-    return compileTheme_v3(theme.v3)
+    return _compileTheme_v3(theme.v3)
   }
 
   if (theme.v2) {

package/src/css/{compileTheme_v3.ts → _compileTheme_v3.ts}

@@ -22,7 +22,7 @@ const THEME_COLOR_SCHEMES = ['dark', 'light'] as const
 const THEME_COLOR_VARIANTS = ['tinted', 'solid'] as const
 
 /** @internal */
-export function compileTheme_v3(theme: Theme_v3): string {
+export function _compileTheme_v3(theme: Theme_v3): string {
   return _compileStyle({
     layers: {
       theme: {
@@ -36,7 +36,10 @@ function compileThemeProperties(theme: Theme_v3): Properties {
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
+
+    // card
     [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
+
     ...buildColorThemeProperties(theme),
     ...buildContainerThemeProperties(theme),
     ...buildFontCodeThemeProperties(theme),
@@ -297,6 +300,7 @@ function buildColorThemeProperties(theme: Theme_v3): Properties {
           const t = theme._tokens.color[cardTone].variant[colorVariant][elementTone]
 
           const context: RenderColorContext = {
+            bgValue: 'transparent',
             bgVar: v.bg[0],
             hue: t._hue,
             scheme,
@@ -342,6 +346,7 @@ function buildColorAvatarThemeProperties(
 
   for (const hue of HUES) {
     const context: RenderColorContext = {
+      bgValue: 'transparent',
       bgVar: varNames.color.bg,
       hue: t.avatar[hue]._hue ?? hue,
       scheme,
@@ -366,6 +371,7 @@ function buildColorCardThemeProperties(
   const t = theme._tokens.color[cardTone]
 
   const context: RenderColorContext = {
+    bgValue: 'transparent',
     bgVar: varNames.color.bg,
     hue: t._hue,
     scheme,

package/src/css/_mergeStyles.ts

@@ -1,5 +1,3 @@
-// import type {Style, StyleKeyframes, StyleLayers, StyleRules} from '@sanity/css'
-
 import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
 
 /** @internal */
@@ -9,11 +7,6 @@ export function _mergeStyles(styles: Style[]): Style {
   const rules: StyleRules = {}
 
   for (const s of styles) {
-    if (!s) {
-      // TODO: should not happen
-      continue
-    }
-
     Object.assign(keyframes, s.keyframes)
 
     for (const layerName in s.layers) {

package/src/css/_system.style.ts

@@ -31,6 +31,7 @@ import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
 import {positionStyle} from './aspects/position/position.style'
 import {radiusStyle} from './aspects/radius/radius.style'
 import {shadowStyle} from './aspects/shadow/shadow.style'
+import {textAlignStyle} from './aspects/textAlign/textAlign.style'
 import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
 import {widthStyle} from './aspects/width/width.style'
 import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
@@ -74,6 +75,7 @@ export const _systemStyle: Style = _mergeStyles([
   {
     // define order of layers
     layers: {
+      palette: {},
       theme: {},
       base: {},
       util: {},
@@ -114,6 +116,7 @@ export const _systemStyle: Style = _mergeStyles([
   positionStyle,
   radiusStyle,
   shadowStyle,
+  textAlignStyle,
   textOverflowStyle,
   widthStyle,
 

package/src/css/aspects/font/font.style.ts

@@ -1,4 +1,3 @@
-import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 
 export const primitive: StyleRules = {
@@ -69,24 +68,4 @@ export const primitive: StyleRules = {
   },
 }
 
-_responsiveRule(primitive, `text-align-initial`, {
-  textAlign: 'initial',
-})
-
-_responsiveRule(primitive, `text-align-left`, {
-  textAlign: 'left',
-})
-
-_responsiveRule(primitive, `text-align-center`, {
-  textAlign: 'center',
-})
-
-_responsiveRule(primitive, `text-align-right`, {
-  textAlign: 'right',
-})
-
-_responsiveRule(primitive, `text-align-justify`, {
-  textAlign: 'justify',
-})
-
 export const fontStyle: Style = {layers: {primitive}}

package/src/css/aspects/font/font.ts

@@ -1,12 +1,7 @@
-import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {FontStyleProps} from './types'
 
 /** @public */
 export function font(props: FontStyleProps): string | undefined {
-  return composeClassNames(
-    'font',
-    props.weight && `font-${props.weight}`,
-    _resp('text-align', props.align),
-  )
+  return composeClassNames('font', props.weight && `font-${props.weight}`)
 }

package/src/css/aspects/font/types.ts

@@ -1,10 +1,6 @@
 import {FontWeight} from '@sanity/ui/theme'
 
-/** @public */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
 /** @public */
 export interface FontStyleProps {
-  align?: TextAlign
   weight?: FontWeight
 }

package/src/css/aspects/index.ts

@@ -17,5 +17,6 @@ export * from './pointerEvents'
 export * from './position'
 export * from './radius'
 export * from './shadow'
+export * from './textAlign'
 export * from './textOverflow'
 export * from './width'

package/src/css/aspects/textAlign/index.ts

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

package/src/css/aspects/textAlign/textAlign.style.ts

@@ -0,0 +1,26 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+export const util: StyleRules = {}
+
+_responsiveRule(util, `text-align-initial`, {
+  textAlign: 'initial',
+})
+
+_responsiveRule(util, `text-align-left`, {
+  textAlign: 'left',
+})
+
+_responsiveRule(util, `text-align-center`, {
+  textAlign: 'center',
+})
+
+_responsiveRule(util, `text-align-right`, {
+  textAlign: 'right',
+})
+
+_responsiveRule(util, `text-align-justify`, {
+  textAlign: 'justify',
+})
+
+export const textAlignStyle: Style = {layers: {util}}

package/src/css/aspects/textAlign/textAlign.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {TextAlignStyleProps} from './types'
+
+/** @public */
+export function textAlign(props: TextAlignStyleProps): string | undefined {
+  return composeClassNames(_resp('text-align', props.textAlign))
+}

package/src/css/aspects/textAlign/types.ts

@@ -0,0 +1,7 @@
+/** @public */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
+/** @public */
+export interface TextAlignStyleProps {
+  textAlign?: TextAlign
+}

package/src/css/index.ts

@@ -1,7 +1,7 @@
+export * from './_compilePalette'
+export * from './_compileSystem'
+export * from './_compileTheme'
 export * from './aspects'
-export * from './compilePalette'
-export * from './compileSystem'
-export * from './compileTheme'
 export * from './components/breadcrumbs'
 export * from './components/dialog'
 export * from './components/menu'

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

@@ -1,5 +1,6 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
+import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
@@ -132,31 +133,28 @@ const primitive: StyleRules = {
   },
 }
 
-// todo: make responsive
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize]
+for (const size of FONT_TEXT_SIZE) {
+  const source = vars.font.text.sizes[size]
 
-  primitive[`.input-${textSize}`] = {
+  _responsiveRule(primitive, `input-${size}`, {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
     [varNames.input.ascenderHeight]: source.ascenderHeight,
     [varNames.input.descenderHeight]: source.descenderHeight,
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-p-${space}`] = {
+  _responsiveRule(primitive, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space],
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-g-${space}`] = {
+  _responsiveRule(primitive, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space],
-  }
+  })
 }
 
 export const _inputStyle: Style = {layers: {primitive}}

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

@@ -7,7 +7,11 @@ const primitive: StyleRules = {
     'minHeight': 0,
 
     '@nest': {
-      '&:is(ul), &:is(ol)': {
+      'iframe&': {
+        border: 'none',
+      },
+
+      'ul&, ol&': {
         listStyle: 'none',
       },
 

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

@@ -18,6 +18,7 @@ import {
   pointerEvents,
   position,
   radius,
+  textAlign,
   width,
 } from '../../aspects'
 import {BoxStyleProps} from './types'
@@ -47,6 +48,7 @@ export function box(props: BoxStyleProps): string | undefined {
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(props),
   )
 }