API and Development
Swatch, SwatchPattern, and SwatchShape from @prepared911/ui/swatch. Re-exported types: SwatchProps, SwatchMeaningfulProps, SwatchDecorativeProps, and VectorPaint / VectorPaintToken from the swatch entry (vector paint types live in packages/ui/src/parts/vector-paint/types.ts).
There is no className, style, or as. Fixed 12×12 box; no size prop. Consumers may pass data-* attributes the same way as on Image and Shape.
| Name | Type | Default | Description |
|---|---|---|---|
label | LocalizedMessage | — | Accessible name; renders role="img" and aria-label. |
pattern | SwatchPattern | — | Which pattern to draw. |
shape | SwatchShape | — | Filled or stroked circle. Filled or stroked square. Horizontal line mark. Pattern family. |
decorative | boolean | — | When omitted or false, the swatch is meaningful and must supply label.
Marks the swatch as decorative. Renders aria-hidden="true" and focusable="false". |
fill | VectorPaint | — | Fill paint. Circle and Square use fill; Line and Pattern prefer stroke, then fill. |
stroke | VectorPaint | — | Stroke paint. Circle and Square outline when set; Line and Pattern use stroke, then fill. |
SwatchProps is a union over shape:
shape: SwatchShape.Circle | Square | Line: do not pass pattern.shape: SwatchShape.Pattern: pattern: SwatchPattern is required. TypeScript rejects pattern on other shapes.label (and optional decorative?: false) or decorative: true without label.
| Member | Serialized value | Description |
|---|---|---|
Circle | circle | Filled or stroked circle (legend dot). |
Square | square | Filled or stroked square. |
Line | line | Horizontal line segment (series line). |
Pattern | pattern | Non-solid marks; requires pattern. |
| Member | Serialized value | Description |
|---|---|---|
Dashed | dashed | Dashed ring matching chart comparison series swatches. |
Dotted | dotted | Dotted ring. |
Hatched | hatched | Diagonal hatch fill. |
Vertices | vertices | Outlined polygon with square corner markers (GIS layer style). |
Foreground token (except Inherit) | ChartColor | DataColor. On Circle and Square, fill fills the solid and stroke outlines when set. On Line and Pattern, paint resolves to stroke, then fill for the mark geometry.