Color picker

Grid of colour swatches (radiogroup, arrows, optional 'no colour' row) and its canonical wrapper: popover on desktop, sheet on the phone, InSheet panel inside a dialog.

acrm !4337 (one swatch grid instead of four copies: EventLabelPicker, EventTypeFilter, MailLabelDialog use ColorPicker; SegmentIconPicker keeps its own panel and uses ColorSwatches for SEGMENT_TONES — validator exception), !4347 (phone: swatches span the width, 44 px targets, segment icon tiles capped at --tap-min), !4354 (stories + usage/a11y), !4363 (a11y: 'Bez barvy' is a radio of the same group with a check on the right; roving tabindex — one Tab stop on the chosen option; focus ring and selection ring read apart). Canon 1. 10. 2026 (AD) after before/after app screenshots (1440 + 390, light/dark) and the States story. Custom hex colour in the segment picker unchanged; dropping it is a separate owner decision.

Used in 6 files · 5 areas · 6× — components/calendar, components/mail, components/meetings, components/segment, pages/TymyPage

Import

Not exported from @acrm/ui — <ColorSwatches&gt;, &lt;ColorPicker> lives in the app (apps/web/src/components/color/ColorSwatches.tsx). Reuse the CSS classes below, or move the component into the package first.

Props

ColorSwatches

No props extracted (not in props.json).

ColorPicker

No props extracted (not in props.json).

CSS classes

Files

• apps/web/src/components/color/ColorSwatches.tsx
• apps/web/src/components/color/ColorPicker.tsx
• apps/web/src/ds/calendar.css
• apps/web/src/ds/segment-screen.css
• apps/web/src/ds/responsive.css

Related