Velikostní tokeny

Velikostní tokeny v Design systému gov.cz ​

Velikostní tokeny v Design systému gov.cz jsou navrženy pro konzistentní použití napříč různými komponentami a zařízeními. Tokeny jsou definovány v kolekci Size.

Semantická klasifikace ​

Velikostní tokeny jsou rozděleny do několika kategorií podle jejich použití:

• Rozestupy (--spacing): Definují mezery mezi prvky (gaps, marginy i paddingy).
• Rozměry komponent (--height-component): Definují výšku komponent.
• Velikost textu (--font-size): Tokeny pro velikosti textu.
• Výška řádku (--height-line): Definuje výšku řádku textu, hodí se např., když potřebujeme zarovnat ikonu na střed prvního řádku víceřádkového textu.
• Velikost ikon (--icon-size): Tokeny definující velikosti ikon.
• Vertikální paddingy v komponentách s více řádky (--spacing-multiline-vertical-padding): Určuje vertikální padding nutný pro víceřádkové komponenty, jako jsou např. inputy.
• Templates (--templates): Využívané v templates.

Použití velikostních tokenů v praxi ​

Velikostní tokeny jsou navrženy tak, aby byly snadno použitelné v různých typech komponent. Například:

• Rozestupy: Používají sémantické tokeny např. jako --spacing-l pro definování větších mezer mezi prvky nebo --spacing-m pro střední mezery.
• Rozměry komponent: Výšky komponent jsou určovány tokeny např. jako --height-component-m pro komponenty velikosti M a --height-component-l pro komponenty velikosti L.
• Velikost textu: Textové velikosti jsou definovány tokeny např. jako --font-size-m pro text velikosti M nebo --font-size-xl pro text velikosti XL.
• Výška řádku: Tokeny jako --height-line-m jsou používány pro definování výšky řádku textu, což je užitečné pro správné zarovnání ikon s textem ve víceřádkových komponentách.
• Velikost ikon: Velikosti ikon jsou definovány tokeny jako --icon-size-m pro ikony velikosti M nebo --icon-size-l pro ikony velikosti L.
• Vertikální paddingy v komponentách s více řádky: Používají sémantické tokeny jako --spacing-multiline-vertical-padding-m pro definování vertikálních paddingů v komponentách s víceřádkovým obsahem, jako jsou inputy. V těchto komponentách určuje token --height-component minimální velikost, tedy jednořádkovou variantu.

Možnosti customizace (přizpůsobení) a theming ​

Velikostní tokeny lze snadno přizpůsobit specifickým požadavkům projektu. Aktualizací velikostních hodnot v kolekci Size můžete rychle upravit celý design a rozložení projektu, čímž je zajištěna konzistence a efektivita v rámci návrhu a vývoje. Například úpravy velikosti textu nebo rozestupů mezi komponentami jsou díky tokenům rychlé a jednoduché.

Nicméně, rozsáhlejší úpravy velikostních tokenů nedoporučujeme, protože mezi jednotlivými hodnotami a komponentami existují složité vztahy. Nešťastné zásahy do těchto hodnot by mohly narušit proporce a konzistenci napříč celým Design Systémem. Doporučujeme provádět pouze menší úpravy, jako je například změna zaoblení rohů pomocí tokenu --corner-radius, což může dodat designu přátelštější vzhled, aniž by to ovlivnilo ostatní klíčové rozměry.