[ @sdxc/ui/styles ]

surfaceInset

Pads a surface around its rounded rows and rounds the surface concentric with them.

import { surfaceInset } from "@sdxc/ui/styles";

Signature

surfaceInset<Node extends Element = Element>(options?: SurfaceInset.Options): UtilityMixin<Node>

Returns a mixin ready for a host element's mix prop, after floatingSurface.

Parameter	Type	Description
`options?`	`SurfaceInset.Options`	How many `--ui-surface-padding` steps the surface pads by.

<Popover id="actions" mix={[surfaceInset()]}>{rows}</Popover>;

<Popover id="products" mix={[surfaceInset({ scale: 2 })]}>{links}</Popover>;

The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.

Constant

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

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)"

Interface

Member	Type	Description
`scale?`	`number`	Multiple of `--ui-surface-padding` the surface pads its rows by. Defaults to `1`.