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.
The Swatch component set in the Axon 911 Design System file maps to this component through packages/ui/src/components/swatch/swatch.figma.ts. The set exposes Shape, Pattern and Outlined as variants: Outlined is the stroke form of Circle and Square, while Line and Pattern marks always draw a stroke. Paint comes from the mark's Text Foreground variable mode; ChartColor and DataColor paint and the accessible name are code-only. See Figma Code Connect.