[ @sdxc/ui/styles ]

semanticColorPanel

The border, tinted background, and emphasized foreground a bordered, tinted panel.

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

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

Usage

Composes every &[data-color="..."] branch a tinted panel keys its border, background, and foreground on, one branch per SemanticColor, built from @sdxc/u's border()/bg()/fg() utilities nested under when().

Signature

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

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

Examples

<div
	data-color="danger"
	mix={[
		semanticColorPanel(),
		css({
			display: "flex",
			borderRadius: "var(--ui-radius-lg, 0.5rem)",
		}),
	]}
>
	{children}
</div>;