[ @sdxc/ui/styles ]
chartPalette
The eight-slot categorical color contract shared by every chart's plotted elements, addressed everywhere through a data-color attribute.
import { chartPalette } from "@sdxc/ui/styles";Usage
Composes the mixin painting property from whichever of the
CHART_COLOR_SLOT_COUNT categorical slots an element's own
data-color attribute names, one rule generated per slot.
Signature
chartPalette<Node extends Element = Element>(property: "color" | "fill" | "backgroundColor", combinator?: string): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>Returns a css() mixin ready for a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
property | "color" | "fill" | "backgroundColor" | The CSS property each rule sets, read from the matching --ui-chart-* variable. |
combinator? | string | Selector combinator placed between the mixin's own host and its [data-color] match. Defaults to "", matching the host itself. |
Examples
<span data-color={String(color)} mix={[chartPalette("color"), css({ display: "inline-block" })]} />;// A chart root painting every nested `[data-color]` descendant from one
// shared mixin.
<svg mix={[chartPalette("fill", " "), css({ display: "block" })]}>{children}</svg>;Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/styles too.
Constant
CHART_COLOR_SLOT_COUNT
Number of categorical color slots a chart's --ui-chart-* palette spans.
A series, wedge, or bar whose position in its own list outgrows this
count wraps back around to the first slot.
const CHART_COLOR_SLOT_COUNT = 8