# semanticColorPanel

> The border, tinted background, and emphasized foreground a bordered, tinted panel — a full-width status message or placeholder panel — takes on for each of the five semantic color roles, one `&[data-color="..."]` branch per role, every branch driven by that color's own `--ui-*` variables.

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

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

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

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

## Examples

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