[ @sdxc/ui/styles ]

panelChrome

The border and rounding a bordered, framed panel applies to its own host element.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

Usage

A framed panel's shared border and rounding: a solid, 1px neutral border with large rounding, sized through the shared radius and border variables. Compose it in a host's mix array alongside that host's own local styles.

Signature

panelChrome<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>

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

Examples

<div
	mix={[
		panelChrome(),
		css({
			paddingBlock: "0.5rem",
			paddingInline: "0.5rem",
			outline: "none",
		}),
	]}
>
	{children}
</div>;