[ @sdxc/ui/styles ]

graphicHostStyle

The flex-item layout and current-color declarations shared by a leading graphic slot.

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

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

Usage

A shrink-resistant, nudged-down, current-colored mixin for a leading graphic slot, keeping an icon and a loading graphic laid out identically. fg("currentcolor") matches @sdxc/u's case-normalized token lookup.

Signature

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

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

Examples

<div data-slot="icon" mix={[graphicHostStyle(), css({ ...ownStyles })]}>
  <CircleCheckIcon />
</div>;