Dnes rozhoduje
01 / PriorityZákladní karta. Při najetí myší ji sleduje měkká limetková záře.
Systém pro řídicí centrum bistra Green. Tmavé, lesní základy uklidní ranní chaos, limetkový akcent ukáže jen to, co právě rozhoduje. Každý token má roli a každá animace má důvod.
Limetková je vzácná. Patří primární akci a tomu, co je „teď“. Když svítí všechno, nesvítí nic.
Manažer stojí u pultu s kávou. Velká čísla, krátké věty, čas v monospace, stav v barvě.
Animace ukazují změnu stavu: úkol se přeškrtne a sjede dolů, objednávka posune stav, briefing se dopíše.
Primitiva definují paletu, sémantické tokeny jejich roli. Komponenty používají jen sémantiku, takže světlý motiv funguje automaticky.
Tři hlasy: groteskní Bricolage pro titulky, přívětivý Figtree pro text a JetBrains Mono pro čas, ceny a štítky. Bez kurzívy, akcent dělá jen barva. Běžný text 16 px (17 px na QHD), nic důležitého pod 13 px.
Mřížka 4 px. Karty mají velké zaoblení (22 px), vnitřní prvky menší, aby do sebe opticky zapadly.
Najeď myší na ukázky. Výchozí je --ease-out, pružina jen pro potvrzení (checkbox, toast). Systém respektuje prefers-reduced-motion.
280ms · vstupy, hover, drawer560ms · potvrzení, pop, toast900ms · ring, count-up, revealKarty najíždějí s rozestupem --stagger: 70ms. Asistent se krátce „zamyslí“ (jiskra ✦ se nadechne, tři tečky) a briefing se objeví po větách. Nic se nepíše po písmenech.
BEM pojmenování (.blok__prvek--varianta), stavy přes .is-* a ARIA atributy.
Pole nemá rámeček, jen jemnou výplň --field-bg. Hover výplň zesílí, focus přidá limetkový rámeček a prstenec --accent-soft. Chybu nese korálový rámeček a hláška .field-err pod polem, nikdy systémová bublina.
Píše se obyčejný <select class="field">, forms.js ho sám nahradí vlastní nabídkou (nativní zůstává skrytý ve formuláři). Šipky, Enter, Esc i hledání podle písmen fungují. Systémový vzhled jen s data-native.
Píše se <input type="time">. Do pole jde psát rovnou (1330, 9, 9.30), šipky ↑↓ posouvají o krok (step, výchozí 15 min). Klik otevře panel: rychlé volby Teď / +30 min / +1 h, sloupec hodin a minut. .field--time dává kompaktní variantu do řádků a tabulek. Panely mají vlastní tenký posuvník (pro jiné posuvné plochy třída .scroll-thin).
Mřížka .form-grid (2 sloupce, .full přes celou šířku), popisek .label nad polem. Odešli prázdné: GC.validate(form) označí chybná pole a přesune fokus na první z nich. Chyba zmizí, jakmile ji uživatel opraví.
Eyebrow (sekce · období) a nadpis jako otázka nebo stav. Bez podnadpisu: datum, počty a stav patří do komponent pod hlavičkou.
Stav jen barvou čísla: .is-accent (teď), .is-warn (čeká), .is-danger (problém).
| Čas | Host | Stůl | Osob | Stav |
|---|---|---|---|---|
| 12:00 | Petra Nováková | Sál · 2 | 4 | Potvrzeno |
| 13:30 | Firma Lesák s.r.o. | Terasa | 12 | Čeká |
| 18:00 | Martin Kučera | Sál · 5 | 2 | Zrušeno |
Základní karta. Při najetí myší ji sleduje měkká limetková záře.
.card--accent pro kartu s hlavní akcí dne. Maximálně jedna na obrazovce.
Lineární, tah 1.7, 24×24. Vkládej přes <use href="#i-název">.