Design systém a tokeny

Web i administrace vypadají jednotně proto, že sdílejí tytéž komponenty a tytéž tokeny. Tahle kapitola říká, co přesně je sdílené, kde se to mění a jak se ověřuje, že změna nerozbila druhou stranu.

Co je sdílené — v číslech

	Front (template1)	Administrace (default)
Souborů komponent	58	66
Z toho shodných s druhou větví	57	57
Vlastních	1 (nastavení cookies)	9 (dashboard, skládací karty, hustá tabulka, tajné pole…)

Změna v components/ se projeví na OBOU stranách

Padesát sedm souborů je společných. Úprava tlačítka kvůli jedné stránce administrace přebarví tlačítka i na webu — a nikdo to nespojí, protože se sahalo do „administrace“. Odchylky proto patří do custom/, viz Struktura SCSS.

Vlastní komponenty jedné větve jsou v pořádku — dashboard na webu nedává smysl. Špatně je až to, když se společná komponenta upraví pro potřeby jedné strany.

Dvě úrovně tokenů

Úroveň	Kde	Příklad
Základní	abstracts/_vars.scss	--color-primary, --font-primary, --border-radius
Komponentní	u komponenty samotné	--card-bg, --card-radius

Komponentní token je rozhraní komponenty: říká, co na ní jde měnit zvenčí, aniž by se do ní sahalo. Jeho hodnota přitom odkazuje na základní token, takže změna palety projde celým systémem.

.card {
  --card-bg: var(--color-surface);   // ← odkaz, ne konkrétní barva
  background: var(--card-bg);
}

Chybějící token je signál

Když kvůli šabloně potřebujete sáhnout do komponenty, skoro vždy chybí token. Doplnit ho je lepší než komponentu rozkopírovat — druhá kopie se přestane udržovat hned, jak se změní ta první.

Návrhová sada versus šablona

V ui-demo/final-design/ leží návrhové iterace — HTML z návrhu, ze kterého šablona vznikla. Mají vlastní názvosloví tříd.

Třídy z návrhové sady NEJSOU třídy šablony

Zkopírovaný kus markupu z návrhu se v šabloně nenastyluje. Výsledek vypadá jako rozbité vykreslení, hledá se chyba v CSS — a přitom jen ta třída v šabloně neexistuje. Vzor pro kopírování je katalog komponent, ne návrh.

Ukázky z návrhu mají styly v atributu

style="…" přímo v markupu. Do šablony to nepatří — hodnota se nedá přebít tokenem a při první změně palety zůstane, jak byla.

Postup u nové komponenty

1. Podívat se, jestli už neexistuje — katalog má 49 kapitol; polovina „nových“ komponent je varianta existující.
2. Napsat ji do components/ s vlastními tokeny, hodnoty odkazovat na základní.
3. Přidat ji do ui-demo/ — jinak ji nikdo nenajde a za půl roku vznikne podruhé.
4. Ověřit obě větve — společná komponenta se musí vykreslit i v administraci.
5. Prokliknout — ne jen sestavit.

Proklik odhalí to, co sestavení ne

Sestavený CSS soubor nic neříká o tom, jak komponenta vypadá vedle ostatních, co dělá při přetečení textu a jestli se dá ovládat klávesnicí. Vizuální porovnání drží var/ds-baseline/ — snímky a metriky stránek před změnou a po ní.

Kde co hledat

Chci	Kde
vidět, jak má komponenta vypadat	katalog komponent
změnit barvu, písmo, rozestupy	abstracts/_vars.scss, odchylky v custom/_vars-override.scss
upravit jednu komponentu	components/_<jméno>.scss — ⚠️ dopadne to na obě větve
udělat odchylku jen pro svou šablonu	custom/
ověřit, že se nic nerozbilo	var/ds-baseline/tools/