Stashpeak design tokeny

Proč všechny mé projekty sdílejí stejný odstín fialové a jak funguje sdílení stylů.

Při vývoji více věcí naráz člověk snadno sklouzne k tomu, že každé dá vlastní vizuální styl. Chvíli jsem to tak měl - Stashpeak měl fialovou, SimLauncher zelenou a shieldxx.net měl být modrý. Ve výsledku to ale znamenalo jen zbytečné rozhodování a udržování několika různých stylů.

Rozhodl jsem se to sjednotit a vytvořil Stashpeak Design System.

Co tokeny řeší

Nemusím pořád dokola řešit barvy a rozvržení. Když na shieldxx.net přidávám novou stránku, nepoužívám konkrétní hex kódy, ale --color-accent. Vím, že barva sedí, a pokud se v budoucnu rozhodnu pro změnu, stačí ji upravit na jednom místě a promítne se do všech projektů.

Co sdílíme

--color-accent: #ad46ff - primární fialová
Skleněné povrchy - --glass-bg, --glass-border, --header-glass-bg
Zaoblení (radii) - --radius-control (14px), --radius-card (20px), --radius-pill
Typografickou škálu - Display (56px), Heading/L (28px), Body/Base atd.

Zdrojem pravdy je Figma soubor s Foundations. Změny z ní zatím přenáším do tokens.css ručně.

Co dál

V budoucnu to chci automatizovat přes Figma API a skript, který vygeneruje PR. Není to ale priorita a zatím s tím nespěchám.