Vad är designtokens?
En designtoken är ett namngivet värde, till exempel varumärkesfärgen eller standardavståndet, som definieras en gång och används överallt i stället för att det råa värdet upprepas.
Tokens i CSS#
På webben är tokens anpassade CSS-egenskaper, oftast definierade på :root:
--color-accent: #2b59ff;definierar en tokencolor: var(--color-accent);använder den
Ändra definitionen så följer varje ställe som använder den med. En färg som förekommer i fyrtio regler blir en enda rad att ändra.
Två nivåer: vad ett värde är och vad det används till#
Bra tokensystem har två lager. Primitiva tokens namnger den råa paletten (--blue-600). Semantiska tokens namnger en uppgift och pekar på en primitiv token (--color-accent: var(--blue-600)). Sidor och komponenter använder bara de semantiska, så ett mörkt läge är bara en andra uppsättning semantiska värden, och ett nytt varumärke ändrar en handfull rader.
Tokens i Weblooks#
Panelen Variabler i redigerarens läge Design listar dina tokens, grupperar dem och visar var var och en används. Kontrastskanningen läser färger som är skrivna som tokens, i ljust och mörkt läge, så en webbplats som bygger på tokens kontrolleras ordentligt. Startmallarna har en tokenuppsättning i två nivåer och ett mörkt läge.