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

Changelog since 28. 9. 2026

• 5. 11. 2026feat(schůzky): štítek schůzky jde vybrat vždy, i bez Googlu — Upravit, Nová schůzka, řádek Štítek v detailu (ACRM-642)apps/web/src/ds/calendar.cssClaude · 1eb10f170
• 3. 11. 2026fix(průvodce): na telefonu „Uložit segment“ nepřetéká okraj, název ustoupí výpustkouapps/web/src/ds/segment-screen.cssŠtěpán · d1cb4cd71
• 2. 11. 2026polish(filtr): na telefonu menu filtru v šuplíku na celou šířku a volby 44 pxapps/web/src/ds/responsive.cssŠtěpán · f0052e280
• 2. 11. 2026polish(dialogy): na telefonu rámovaný koš a ⋮ v patičce 44 px vždy, ne jen vedle ⋮ rozhodnutíapps/web/src/ds/responsive.cssŠtěpán · 05c5d74cb
• 1. 11. 2026polish(ds): položky nabídky v šuplíku ⋮ na telefonu 44 px i u BottomSheetuapps/web/src/ds/responsive.cssŠtěpán · 5bee5cd2d
• 29. 10. 2026fix(web): šuplík úkolu na telefonu, Ke schválení: pevná lišta Schválit | Vrátit | ⋮ v patičceapps/web/src/ds/responsive.cssClaude · 421ec2362
• 21. 10. 2026polish(prázdné stavy): stav stojí uprostřed plochy, vodorovně i svisle (RULES §27)apps/web/src/ds/segment-screen.cssŠtěpán · faaec62da
• 19. 10. 2026feat(web): zbylá místa s úkoly jako odkazy (nová záložka)apps/web/src/ds/calendar.cssClaude · 452f60127
• 17. 10. 2026refactor(ds): tokeny podle významu — vrstvy, pohyb, focus ring, text na barvě (beze změny vzhledu)apps/web/src/ds/calendar.cssŠtěpán · 8cda81b26
• 14. 10. 2026polish(uzivatele): telefonní výpis ItemList, prázdný Typ úvazku bez pomlčkyapps/web/src/ds/segment-screen.cssŠtěpán · f9da8d614
• 11. 10. 2026feat(ds): lišta výběru na telefonu — „Vybrat všech N" v ⋮, lišta nepřekrývá CTA overlayeapps/web/src/ds/responsive.cssŠtěpán · 65e5a348a
• 8. 10. 2026fix(kalendář): překrývající se události v týdnu vedle sebe, ne přes sebe (ACRM-466)apps/web/src/ds/calendar.cssClaude · 7b15a7419
• 8. 10. 2026fix(ds): dotykový cíl 44 px i u Ajdy a hvězdy v Poště, vzhled beze změnyapps/web/src/ds/responsive.cssŠtěpán · c22319a0a
• 8. 10. 2026fix(ds): .tbar-tools bez vlastní vrstvy — plocha tlačítek v liště roste svisle na střed (review !4882)apps/web/src/ds/responsive.cssŠtěpán · 7cb261ec1
• 8. 10. 2026fix(ds): rozšíření dotykového cíle nepřekrývá klikatelné sousedy (review !4882)apps/web/src/ds/responsive.cssŠtěpán · f1deb000b
• 8. 10. 2026fix(ds): dotykový cíl roste doprava a dolů — sousedovi nebere klepnutí (review !4882)apps/web/src/ds/responsive.cssŠtěpán · 205fc4a42
• 8. 10. 2026feat(ds): dotykový cíl ≥ 44 px u každého tlačítka na telefonu, vzhled beze změnyapps/web/src/ds/responsive.cssŠtěpán · 1d47a0871
• 6. 10. 2026fix(kalendář): třídy celodenní lišty bez „ad" — blokátor reklam je schovávalapps/web/src/ds/calendar.cssClaude · 6daeb9b2d
• 4. 10. 2026refactor(ds): hnědá B — text --fg + oranžová tečka, tmavé plochy neutrálníapps/web/src/ds/segment-screen.cssŠtěpán · eb0f8e899
• 3. 10. 2026feat(seznamy): vysvětlivky W1 — pevný popis seznamů pryč, Týmy (i) u Vedoucíapps/web/src/ds/segment-screen.cssŠtěpán · dbac572b8
• 3. 10. 2026fix(segmenty): Průvodce na telefonu — taby nad panelem, panel přes celou šířkuapps/web/src/ds/responsive.cssŠtěpán · 78829f9cf
• 3. 10. 2026chore(ds): pryč mrtvá pravidla starého řádku milníku v railu (.prj-msrow, .prj-msgrip)apps/web/src/ds/responsive.cssŠtěpán · 69f756680
• 3. 10. 2026refactor(ds): Milníky na Přehledu = sdílený useReorder + .acrm-reorder-gapapps/web/src/ds/responsive.cssŠtěpán · 3383a1369
• 2. 10. 2026chore(ds): mrtvá CSS pravidla — vlna 2 (70 pravidel ve 12 souborech)apps/web/src/ds/segment-screen.cssŠtěpán · a8e48c131
• 2. 10. 2026polish(ds): glyfy railu, přepínače navigace a × štítku na --ico-* (parita s boxem)apps/web/src/ds/responsive.cssŠtěpán · 566eec74c
• 1. 10. 2026fix(web): mrizka barev i v supliku (ctype-grid nebyla mimo .acrm-popover vyskladana)apps/web/src/ds/calendar.cssŠtěpán · 78ce633f0
• 1. 10. 2026fix(web): tony segmentu - kanonicke .segpick-tones beze zmeny, subgrid jen na .cs-tonesapps/web/src/ds/segment-screen.cssŠtěpán · bdfe72cf2
• 1. 10. 2026fix(web): tony segmentu bez display:contents - radiogroup zustane v a11y stromuapps/web/src/ds/segment-screen.cssŠtěpán · edf58c8eb
• 1. 10. 2026feat(web): ColorSwatches + ColorPicker - jedna mrizka barev misto ctyr kopiiapps/web/src/ds/segment-screen.cssŠtěpán · 9e00d8b58
• 1. 10. 2026fix(karta): hlavička schůzky, úkolu a projektu na telefonu = schválený jeden řádek ‹ · název · ⋯apps/web/src/ds/responsive.cssŠtěpán · 436d0e9be
• 1. 10. 2026fix(karta): hlavička karty na telefonu drží nahoře; Esc nad šuplíkem ⋯ neodchází z kartyapps/web/src/ds/responsive.cssŠtěpán · cd39340d8
• 1. 10. 2026feat(karta): hlavička karty na telefonu = jeden řádek ‹ · jméno · ⋯ (osoba, firma, obchod)apps/web/src/ds/responsive.cssŠtěpán · cb7db2d02
• 1. 10. 2026fix(web): detail na telefonu = jeden scroll, rail bez stropu 42vh (R26)apps/web/src/ds/responsive.cssŠtěpán · 6503cee29
• 1. 10. 2026polish(web): vyber barvy a ikony na telefonu - vzorky pres celou sirku, cil 44 px, dlazdice max 44apps/web/src/ds/responsive.cssŠtěpán · c50a5e484
• 1. 10. 2026feat(web): kazdy dialog na telefonu = suplikapps/web/src/ds/responsive.cssŠtěpán · 865e409e1
• 1. 10. 2026feat(ui): suplik dialogu vyroste pro kotveny panel (pruzina), panel neopusti hraniceapps/web/src/ds/responsive.cssŠtěpán · a43b7b529
• 1. 10. 2026refactor(ui): holy Popover -> kanon (vlna 3) + nabidka v dialogu = panel v suplikuapps/web/src/ds/responsive.cssŠtěpán · 5a55c030f
• 1. 10. 2026feat(navigace): menu A1+A2+A4 — tiché počty, horní blok 6 položek, akce seznamůapps/web/src/ds/responsive.cssŠtěpán · 1c421c0e4
• 1. 10. 2026fix(ui): hledani v kazdem supliku na jedne leve hrane; sablony bez zvolene hodnotyapps/web/src/ds/responsive.cssŠtěpán · fb58d38bf
• 30. 9. 2026refactor(ds): rozměry natvrdo na tokeny podle významu — vlna 1 (--tap-min, --tab-h + přesné hodnoty)apps/web/src/ds/calendar.cssŠtěpán · d9fe30719
• 30. 9. 2026fix(ds): ✕ řádku Multi-value editoru na dotyku trvale vidět (AD FA235)apps/web/src/ds/responsive.cssClaude · 914ea29be
• 30. 9. 2026fix(ui): nadpis supliku = --h2 (ne rez polozky); Promenne; Bez zasedackyapps/web/src/ds/responsive.cssŠtěpán · 2979bd926
• 30. 9. 2026feat(segment): panel sloupcu v3 - plus na konci hlavicky, hledani, oddelovac, sheet na telefonuapps/web/src/ds/responsive.cssŠtěpán · bc6465fd9
• 29. 9. 2026fix(web): sloupec Jméno/Název ve výpisu na telefonu na polovinu šířkyapps/web/src/ds/responsive.cssŠtěpán · 69be37149
• 28. 9. 2026fix(ui): položka nabídky = jeden řádek, bez šedé vysvětlivky (ACRM-375–377)apps/web/src/ds/responsive.cssŠtěpán · 1a87decfc
• 28. 9. 2026feat(web): řádek pohledu na telefonu podle Attio — Úkoly a Poštaapps/web/src/ds/responsive.cssŠtěpán · 99a87ae05