[ @sdxc/ui/styles ]
floatingSurface
Composes the shared floating-surface edge, tint, and elevation as a mixin.
import { floatingSurface } from "@sdxc/ui/styles";Usage
Composes the shared floating-surface edge, tint, and elevation as a mixin.
The edge is a ring shadow in the composite box-shadow's ring slot over a
transparent 1px border, which forced-colors mode still paints as a line.
Signature
floatingSurface<Node extends Element = Element>(): UtilityMixin<Node>Returns a mixin ready for a host element's mix prop.
Examples
<div
popover="auto"
mix={[
floatingSurface(),
css({ margin: "0", inset: "auto" }),
]}
>
{content}
</div>;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.
Constant
SHADOW_RING
The hairline ring plus soft lift an elevated surface draws its edge with,
read from the theme's --ui-shadow-ring; the fallback is its light value.
const SHADOW_RING = "var(--ui-shadow-ring, 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04))"Constant
SURFACE_PADDING
The gap between a floating surface's edge and the rounded rows it stacks, one source for both the padding and the radius derived from it.
const SURFACE_PADDING = "var(--ui-surface-padding, 0.25rem)"