[ @sdxc/ui/styles ]
floatingSurface
The border, rounding, tint, and elevation shadow a floating surface.
import { floatingSurface } from "@sdxc/ui/styles";Usage
Composes the shared floating-surface border, tint, and elevation shadow as
a css() mixin. The shadow keeps a literal fallback shaped like @sdxc/u's
lg step, under the --ui-shadow-md variable name.
Signature
floatingSurface<Node extends Element = Element>(): MixinDescriptor<
Node,
[styles: CSSStyles],
ElementProps
>Returns a css() mixin ready for a host element's mix prop.
Examples
<div
popover="auto"
mix={[
floatingSurface(),
css({ margin: "0", inset: "auto" }),
]}
>
{content}
</div>;