@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → CustomPortal.tsx}

@@ -25,6 +25,7 @@ export default function CustomPortalStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -60,6 +61,7 @@ export default function CustomPortalStory(): React.JSX.Element {
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
                     content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
+                    // @ts-expect-error - TODO: fix this
                     placement={placement}
                     portal={portal}
                   >

package/src/core/primitives/tooltip/__workshop__/{overflowingBoundary.tsx → OverflowingBoundary.tsx}

@@ -9,6 +9,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', false)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -56,6 +57,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
             <Tooltip
               content={<Text size={1}>{content}</Text>}
               padding={2}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
             >

package/src/core/primitives/tooltip/__workshop__/{props.tsx → Props.tsx}

@@ -11,11 +11,14 @@ import {
 export default function PropsStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
   const openDelay = useNumber('Open Delay', 200)
   const closeDelay = useNumber('Close Delay', 200)
+  // @ts-expect-error - TODO: fix this
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -41,9 +44,12 @@ export default function PropsStory(): React.JSX.Element {
             <Tooltip
               arrow={arrow}
               content={<Text size={1}>{content}</Text>}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
+              // @ts-expect-error - TODO: fix this
               shadow={shadow}
               delay={{
                 open: openDelay,
@@ -81,9 +87,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Hover me" />
@@ -96,9 +105,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Or me" />

package/src/core/primitives/tooltip/__workshop__/{resizableBoundary.tsx → ResizableBoundary.tsx}

@@ -9,6 +9,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
   const portal = useBoolean('Portal', true)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -38,6 +39,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -46,6 +48,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -58,6 +61,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -70,6 +74,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >

package/src/core/primitives/tooltip/__workshop__/index.ts

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'resizableBoundary',
       title: 'Resizable Boundary',
-      component: lazy(() => import('./resizableBoundary')),
+      component: lazy(() => import('./ResizableBoundary')),
     },
     {
       name: 'overflowBoundary',
       title: 'Overflowing Boundary',
-      component: lazy(() => import('./overflowingBoundary')),
+      component: lazy(() => import('./OverflowingBoundary')),
     },
     {
       name: 'customPortalStory',
       title: 'Custom Portal',
-      component: lazy(() => import('./customPortal')),
+      component: lazy(() => import('./CustomPortal')),
     },
   ],
 }

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

@@ -8,6 +8,6 @@ import type {TooltipDelayGroupContextValue} from './types'
  */
 export const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null> =
   createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
-    '@sanity/ui/v3/tooltipDelayGroup',
+    '@sanity/ui/v4/tooltipDelayGroup',
     null,
   )

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

@@ -2,7 +2,7 @@ import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import type {Delay} from '../../../types'
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**
@@ -49,7 +49,5 @@ export function TooltipDelayGroupProvider(
     [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
   )
 
-  return (
-    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
-  )
+  return <TooltipDelayGroupContext value={value}>{children}</TooltipDelayGroupContext>
 }

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null {
-  const value = useContext(TooltipDelayGroupContext)
+  const value = use(TooltipDelayGroupContext)
 
   return value
 }

package/src/core/types.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
-
 /**
  * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
@@ -14,17 +12,20 @@ export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
 export type EmptyProps = {}
 
 /** @public */
-export type TagType = keyof JSX.IntrinsicElements
+export type TagType = keyof React.JSX.IntrinsicElements
 
 /** @public */
-export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
 
 /** @public */
 export type ElementType<P> = TagType | ComponentType<P>
 
 /** @public */
 export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
   P & {as?: E}
 >
 

package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx}

@@ -1,6 +1,6 @@
 import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
-import {Code} from '../primitives/code/code'
+import {Code} from '../primitives/code/Code'
 
 /**
  * DO NOT USE IN PRODUCTION

package/src/core/utils/boundaryElement/{boundaryElementContext.ts → BoundaryElementContext.ts}

@@ -3,8 +3,5 @@ import type {Context} from 'react'
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {BoundaryElementContextValue} from './types'
 
-export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
-  createGlobalScopedContext<BoundaryElementContextValue | null>(
-    '@sanity/ui/v3/boundaryElement',
-    null,
-  )
+export const BoundaryElementContext: Context<BoundaryElementContextValue> =
+  createGlobalScopedContext<BoundaryElementContextValue>('@sanity/ui/v4/boundaryElement', null)

package/src/core/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -0,0 +1,16 @@
+import {type ReactNode} from 'react'
+
+import {BoundaryElementContext} from './BoundaryElementContext'
+
+/** @public */
+export interface BoundaryElementProviderProps {
+  children: ReactNode
+  element: HTMLElement | null
+}
+
+/** @public */
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
+  const {children, element} = props
+
+  return <BoundaryElementContext value={element}>{children}</BoundaryElementContext>
+}

package/src/core/utils/boundaryElement/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/utils/boundaryElement/types.ts

@@ -1,5 +1,2 @@
 /** @public */
-export interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}
+export type BoundaryElementContextValue = HTMLElement | null

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,24 +1,12 @@
-import {useContext} from 'react'
+import {use, useMemo} from 'react'
 
-import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
-const DEFAULT_VALUE: BoundaryElementContextValue = {
-  version: 0.0,
-  element: null,
-}
-
 /** @public */
-export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = useContext(BoundaryElementContext)
-
-  // NOTE: This check is for future-compatiblity
-  // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (value && (!isRecord(value) || value.version !== 0.0)) {
-    throw new Error('useBoundaryElement(): the context value is not compatible')
-  }
-
-  return value || DEFAULT_VALUE
+export function useBoundaryElement(): {version: 0.0; element: BoundaryElementContextValue} {
+  // eslint-disable-next-line no-warning-comments
+  // @TODO this wrapping is for BC and should be removed
+  const element = use(BoundaryElementContext)
+  return useMemo(() => ({version: 0.0, element}), [element])
 }

package/src/core/utils/elementQuery/__workshop__/CustomMedia.tsx

@@ -0,0 +1,19 @@
+import {Box, Card, ElementQuery, Text} from '@sanity/ui'
+
+import {testCard} from './styles.css'
+
+export default function CustomMediaQuery(): React.JSX.Element {
+  return (
+    <Box padding={4}>
+      <Box marginBottom={4}>
+        <Text>Resize this frame to see the text color change:</Text>
+      </Box>
+
+      <ElementQuery media={[0, 100, 200, 300]}>
+        <Card className={testCard} padding={3} shadow={1}>
+          <Text>This card sits inside an element query.</Text>
+        </Card>
+      </ElementQuery>
+    </Box>
+  )
+}

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'custom-media',
       title: 'Custom media',
-      component: lazy(() => import('./customMedia')),
+      component: lazy(() => import('./CustomMedia')),
     },
   ],
 }

package/src/core/utils/elementQuery/__workshop__/styles.css.ts

@@ -0,0 +1,31 @@
+import {vars} from '@sanity/ui/css'
+import {style} from '@vanilla-extract/css'
+
+export const testCard: string = style({
+  selectors: {
+    '[data-eq-min~="0"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.orange[600]}, ${vars.color.palette.orange[400]})`,
+      },
+    },
+    '[data-eq-min~="1"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.red[600]}, ${vars.color.palette.red[400]})`,
+      },
+    },
+    '[data-eq-min~="2"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.magenta[600]}, ${vars.color.palette.magenta[400]})`,
+      },
+    },
+    '[data-eq-min~="3"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.purple[600]}, ${vars.color.palette.purple[400]})`,
+      },
+    },
+  },
+})

package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 
@@ -27,9 +27,9 @@ describe('utils/portal', () => {
         }
 
         return (
-          <PortalContext.Provider value={value}>
+          <PortalContext value={value}>
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 
@@ -55,12 +55,12 @@ describe('utils/portal', () => {
 
       function Root() {
         return (
-          <PortalContext.Provider
+          <PortalContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 
@@ -86,12 +86,12 @@ describe('utils/portal', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <PortalContext.Provider
+          <PortalContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </PortalContext.Provider>
+          </PortalContext>
         )
       }
 

package/src/core/utils/portal/{portal.tsx → Portal.tsx}

@@ -1,8 +1,9 @@
-import type {ReactNode, ReactPortal} from 'react'
+import {type ReactNode, type ReactPortal, use} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider} from '../../primitives/card/cardProvider'
-import {useCard} from '../../primitives/card/useCard'
+import {CardContext} from '../../primitives/card/CardContext'
+import {CardProvider} from '../../primitives/card/CardProvider'
+import {assertCardContext} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 
 /** @public */
@@ -17,7 +18,6 @@ export interface PortalProps {
 /** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
-  const card = useCard()
   const portal = usePortal()
   const portalElement =
     (name ? portal.elements && portal.elements[name] : portal.element) ||
@@ -27,6 +27,9 @@ export function Portal(props: PortalProps): ReactPortal | null {
     return null
   }
 
+  const card = use(CardContext)
+  assertCardContext(card)
+
   return createPortal(
     <CardProvider tone="transparent" scheme={card.scheme}>
       {children}

package/src/core/utils/portal/{portalContext.ts → PortalContext.ts}

@@ -4,7 +4,7 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {globalScope} from '../../lib/globalScope'
 import type {PortalContextValue} from './types'
 
-const key = '@sanity/ui/v3/portal'
+const key = '@sanity/ui/v4/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
 // Use the global scope as a map of symbols to elements

package/src/core/utils/portal/PortalProvider.tsx

@@ -0,0 +1,38 @@
+import {type ReactNode, use, useMemo, useSyncExternalStore} from 'react'
+
+import {PortalContext} from './PortalContext'
+import type {PortalContextValue} from './types'
+
+/** @public */
+export interface PortalProviderProps {
+  children: ReactNode
+  element?: HTMLElement | null
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+}
+
+/** @public */
+export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
+  const {children, element, __unstable_elements: elements} = props
+  const parentPortal = use(PortalContext)
+  const fallbackElement = useSyncExternalStore(
+    emptySubscribe,
+    () => elements?.['default'] ?? (parentPortal.element || document.body),
+    () => null,
+  )
+
+  const value = useMemo(() => {
+    return {
+      version: 0.0,
+      boundaryElement: null,
+      element: element || fallbackElement,
+      elements,
+    } satisfies PortalContextValue
+  }, [element, elements, fallbackElement])
+
+  return <PortalContext value={value}>{children}</PortalContext>
+}
+
+const emptySubscribe = () => () => {}

package/src/core/utils/portal/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'named',
       title: 'Named portals',
-      component: lazy(() => import('./named')),
+      component: lazy(() => import('./Named')),
     },
   ],
 }

package/src/core/utils/portal/usePortal.ts

@@ -1,13 +1,22 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
 export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
+  const value = use(PortalContext)
 
+  assertPortalContext(value)
+
+  return value
+}
+
+/** @internal */
+export function assertPortalContext(
+  value: PortalContextValue | null,
+): asserts value is PortalContextValue {
   if (!value) {
     throw new Error('usePortal(): missing context value')
   }
@@ -18,6 +27,4 @@ export function usePortal(): PortalContextValue {
   if (!isRecord(value) || value.version !== 0.0) {
     throw new Error('usePortal(): the context value is not compatible')
   }
-
-  return value
 }

package/src/css/_responsiveStyle.css.ts

@@ -21,8 +21,8 @@ export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRule
       rules[index] = style({
         '@layer': {
           [layer]: {
-            '@media': {
-              [`screen and (min-width: ${bp}px)`]: rule,
+            '@container': {
+              [`(min-width: ${bp}px)`]: rule,
             },
           },
         },

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

@@ -37,8 +37,7 @@ export const element: string = _style(layers.primitives, {
   display: 'block',
   boxSizing: 'border-box',
   resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+  inlineSize: 'stretch',
 
   selectors: {
     '&::placeholder': {
@@ -57,7 +56,6 @@ export const element: string = _style(layers.primitives, {
     [`${root}:not([data-invalid]) &`]: {
       vars: {
         [vars.color.input.text.fg]: vars.color.tinted.default.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[4],
       },
     },
 
@@ -76,14 +74,12 @@ export const element: string = _style(layers.primitives, {
     [`${root}:not([data-invalid]) &:disabled`]: {
       vars: {
         [vars.color.input.text.fg]: vars.color.tinted.default.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.default.border[1],
       },
     },
 
     [`${root}[data-invalid] &`]: {
       vars: {
         [vars.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
       },
     },
 
@@ -102,22 +98,26 @@ export const element: string = _style(layers.primitives, {
     [`${root}[data-invalid] &:disabled`]: {
       vars: {
         [vars.color.input.text.fg]: vars.color.tinted.critical.border[4],
-        [vars.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
       },
     },
   },
+
+  vars: {
+    [vars.color.input.text.placeholder]:
+      `color-mix(in srgb, transparent, ${vars.color.input.text.fg} 50%)`,
+  },
 })
 
 export const presentation: string = _style(layers.primitives, {
   backgroundColor: vars.color.input.text.bg,
   borderRadius: 'inherit',
   boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
+  display: 'block',
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  display: 'block',
   pointerEvents: 'none',
   zIndex: 0,
 
@@ -155,11 +155,12 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+    [`${root}.${border}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]:
+      {
+        vars: {
+          [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+        },
       },
-    },
 
     [`${root}:not([data-invalid]) ${element}:focus + &`]: {
       vars: {
@@ -186,7 +187,7 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
+    [`${root}.${border}[data-invalid] ${element}:not(:disabled):hover + &`]: {
       vars: {
         [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
       },