Barevné tokeny

Barevné tokeny v Design systému gov.cz ​

Barevné tokeny v Design systému gov.cz jsou navrženy tak, aby umožnily konzistentní používání barev napříč celým systémem a zároveň zajistily flexibilitu pro přizpůsobení různým vizuálním identitám a potřebám. Tokeny jsou strukturovány tak, aby poskytovaly sémantický význam jednotlivým barevným vlastnostem a byly snadno použitelné pro různé prvky uživatelského rozhraní.

Sémantická klasifikace ​

Každý barevný token je pojmenován podle svého účelu a významu v uživatelském rozhraní. Design systém gov.cz umožňuje snadné odlišení barev podle toho, kde a jak jsou použity, například pro pozadí, texty, ikony nebo tlačítka. Základní klasifikace zahrnuje:

• Pozadí (--background): Barvy pro pozadí prvků (primary, secondary, neutral, status).
• Tlačítka (--button): Barvy pro tlačítka (solid, outlined).
• Texty (--text): Barvy textů (hierarchické, primary, secondary, status).
• Orámování (--border): Barvy pro orámování prvků.
• Ikony (--icon): Barvy ikon.
• Interakce (--interactive): Sada pro interaktivní prvky (např. Checbox, Radio a Switch).
• Komponenty (--component): Sada pro specifické komponenty (např. Footer nebo Banner).

Tato struktura usnadňuje práci jak designérům, tak vývojářům, protože každý barevný token má jasně definovaný účel a místo v rámci systému.

Referencování barevných hodnot ​

Barevné hodnoty jsou uloženy v kolekci Primitives, která obsahuje základní barvy ve formě hexadecimálních kódů. Následně jsou tyto hodnoty referencovány v kolekci Color a přiřazovány jednotlivým prvkům prostřednictvím sémantických tokenů. Tímto způsobem je zajištěna konzistentní aplikace barev napříč všemi komponentami systému.

Například:

• Základní definice barvy (kolekce Primitives): #2362A2
• Primitive token (kolekce Primitives): --color-primary-600
• Sémantický token (kolekce Color): --button-solid-primary

Tento systém referencování umožňuje snadné přizpůsobení barev pro různé vizuální styly, například pro tmavý režim (Dark Mode) nebo produkty s vlastní vizuální identitou, aniž by došlo k narušení konzistence.

Přizpůsobení názvů pro Figmu a kód ​

Aby byly barevné tokeny pro designéry ve Figmě přehlednější a snadněji použitelné, je u nich často využito zdvojení některých klíčových slov. Toto zdvojení pomáhá přiřadit tokeny do odpovídajících skupin a zajistit jasnou strukturu. Například token --text-primary je ve Figmě reprezentován jako --text--text-primary, kde první slovo „text“ slouží k přiřazení tokenu do skupiny textových prvků. Tento způsob pojmenování umožňuje designérům snadno navigovat mezi tokeny a mít lepší přehled o jejich použití v rámci skupin. Ve Figmě je zároveň syntax tokenů pro kód správně nakonfigurována, takže vývojáři mohou tokeny používat přímo v kódu bez nutnosti dalších úprav.

Použití barevných tokenů v praxi ​

Barevné tokeny jsou navrženy tak, aby byly snadno implementovatelné v různých komponentách. Například:

• Pozadí: Používají sémantické tokeny jako --page-background pro pozadí celé stránky.
• Tlačítka: Barvy tlačítek jsou definovány tokeny jako --button-solid-primary pro pozadí primárního tlačítka, --button-solid-error-hover pro error tlačítko ve stavu hover a --button-outlined-primary pro tlačítko s obrysem.
• Texty: Textové barvy jsou definovány sémantickými tokeny jako --text-primary pro hlavní text, --text-secondary pro sekundární texty nebo --text-status-error pro chybová hlášení.
• Orámování: Barvy pro orámování prvků jsou specifikovány tokeny jako --border-primary pro primární orámování, --border-neutral pro neutrální orámování nebo --border-error pro orámování chybových stavů.
• Ikony: Barvy ikon jsou definovány tokeny jako --icon-default pro výchozí ikony, --icon-error pro chybové ikony nebo --icon-success pro ikony úspěšných stavů.
• Interakce: Interaktivní prvky používají tokeny jako --interactive-active pro aktivní prvky, --interactive-disabled pro deaktivované prvky nebo --interactive-error pro prvky v chybovém stavu.

Světlý a tmavý režim (Light a Dark Mode) ​

Kolekce Color v Design Systému gov.cz podporuje dva módy – Light (světlý) a Dark (tmavý) režim. To umožňuje snadnou implementaci tmavého režimu napříč celým systémem bez nutnosti zásadních změn v kódu. Každá barva v kolekci Color je definována pro oba režimy, takže při přepnutí na Dark Mode jsou barevné tokeny automaticky přemapovány na tmavé odstíny, které jsou přizpůsobeny čitelnosti a kontrastním požadavkům. Implementace Dark Mode je díky sémantickým tokenům jednoduchá – jakmile jsou definovány základní barvy, systém je automaticky přizpůsobí správnému režimu.

Přístupnost a kontrast ​

Jedním z hlavních principů při práci s barevnými tokeny je dodržování standardů přístupnosti. Všechny barvy musí splňovat požadavky na dostatečný kontrast, aby byla zajištěna čitelnost textů a viditelnost prvků. Design Systém gov.cz důsledně dbá na to, aby byly kontrastní poměry v souladu se standardy.

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

Díky použití design tokenů od verze 4.1 je snadné přizpůsobit barevnou paletu novým požadavkům nebo produktům s odlišnou vizuální identitou. Stačí aktualizovat hodnoty v kolekci Primitives, a změny se automaticky projeví napříč celým Design Systémem. Tímto způsobem lze jednoduše implementovat například tematické úpravy pro specifické produkty, aniž by bylo nutné upravovat jednotlivé komponenty.

Jednotný vizuální styl státní správy (JVS) ​

Od verze 4.6.0 Design Systém gov.cz plně vychází z Jednotného vizuálního stylu státní správy (JVS). Hodnoty primitive palet primary, neutral a error jsou JVS-kompatibilní a tvoří jedinou výchozí paletu systému – není potřeba žádný dodatečný import ani přepnutí módu.