Design systém

Barvy

Návrh pracuje se čtyřmi hodnotami. Zelená je akcent i aktivní stav, červená se ukáže jen při hoveru nad destruktivní akcí, černá je text i rám, bílá plocha.

Typografie

Inter ve třech velikostech: title na titulky, body na běžný text a hlavičky (tam semibold), micro na vysvětlivky. Základ je 14px, návrh stavěl na 12px — vodorovné rozměry jsou proto přeškálované faktorem 7/6, svislé drží návrh, protože je řídí velikost ikony.

Rozměrová mřížka

Hodnoty se čtou z tokenů, takže tenhle přehled je vždy aktuální.

Markery seznamů

Kolečko se šrafou identifikuje seznam. Vzory jsou generované, protože seznamů může uživatel založit libovolný počet.

Tlačítka

Výška podle --control-h, 1px černý rám, ostré hrany.

Ikonová tlačítka

Čtverec o straně --control-h. Klidový stav je bílý, zelená značí aktivní volbu. Destruktivní prvek je v klidu také bílý — červená se ukáže teprve při hoveru (na obrázku ji nevidíš, zkus na koš najet myší).

Pole a výběr

Zaostření značí zelené obtažení. Silný černý rám, který návrh u polí měl, je zrušený — působil jako trvalá vlastnost pole, ne jako stav. Datum se píše česky: „22. 6.“ uloží událost jako každoroční (--MM-DD), „22. 6. 1995“ jako konkrétní den. Nativní type=date tady nesedí, ten by si rok vždycky vynutil. Nesrozumitelný zápis podbarví pole červeně a potvrzení je do opravy nedostupné.

Zaškrtávátko

Návrh pro něj nebyl — vznikl v objednávce z pravidel systému. Zaškrtnuté je inverze, ne zelená: zelená plocha tady znamená navigaci, ne stav „vybráno“. Klikací je celý popisek, protože na samostatný čtverec se míří dvaceti pixely. Zamčené zůstává černé, ne zprůhledněné — je to platný stav, ne nedostupný ovladač; používá se u volby, která se odškrtnout nedá.

Tabulka událostí

Výšku řádku drží --row-h, obsah buněk má svislé odsazení --pad-row. Ovládací prvky kopírují výšku řádku, takže jdou od hrany k hraně, a jejich vodorovné rámy se ruší, aby nezdvojily oddělovače. Tužka i „přidat novou událost“ otevřou editaci v místě řádku — Escape, ✕ nebo kliknutí do ztmavení ji zruší, Enter potvrdí. Šipky se rozšíří do výběru cílového seznamu; jiný seznam řádek podbarví zelenou a odsune, výběr téhož ho nechá být (zpátky vede Escape). Koš dělá totéž červenou.

Stavová hlášení