De kans is groot dat je hier terecht kwam omdat je op zoek was naar een effeciente manier om theming toe te passen in een website. Om te beginnen is het belangrijk om duidelijk te krijgen wat er precies met Theming en Design Tokens bedoeld wordt.

Wat is Theming?

Theming is een techniek binnen software development waarbij je op basis van een voorgedefineerd kleurenschema de vormgeving van die website aan past.

In de praktijk kom je theming vaker tegen in UI libraries, zoals Chakra UI, Bootstrap en TailwindCSS. Op die manier kan je de uiteindelijke vormgeving van de UI componenten aanpassen, maar helaas zitten daar dan ook weer grenzen aan.

Wat vaker het geval is dat je zaken zoals de primaire, secundaire kleuren kan aangeven en daarnaast lettertypes voor kopjes en normale tekst. De daadwerkelijk opties verschillen natuurlijk per UI library, maar het is vaker lastig te controleren waar hoe die kleuren en lettertypes toegepast worden.

Wat zijn Design Tokens?

Design Tokens is een werkwijze die vaak als onderdeel van Design Systems gebruikt wordt. Een Design System is methode waarmee de vormgeving van een merk (brand in het Engels) op een systematische manier toegepast kan worden op al haar uitingen. Denk hier bij aan websites en apps. Wat het Design System in feite doet is alle ideeën en logica van het ontwerp vast leggen in richtlijnen en code. Op die manier kan het werk en de moeite die gedaan is het ontwerp beter gewaarborgd worden, omdat het Design System dan als een automatische autoriteit geldt als het aankomt op ontwerp.

In zo’n systeem is het essentieel dat zaken zoals typografie (lettertypes e.d.), kleurgebruik en maatvoering (marges, paddings en groottes) gemakkelijk, op 1 plaats, beheerd en gedefinieerd kunnen worden.

Dit is precies wat Design Tokens doen. Het zijn als het ware globale variabelen (binnen het systeem) waarin al deze zaken als waarden opgeslagen zijn. Een bijkomende kracht van deze tokens is dan direct ook dat een waarde een betekenis meekrijgt. Neem als voorbeeld deze css code voor het stylen van een link:

/* 
De link heeft voor de tekst een rood-paarse kleur en voor de lijn onder te tekst
een ietwat andere rood-paarse kleur. De gedachte achter de kleurwaarden is
echter niet duidelijk.
Als in, waar zijn deze kleuren op gebasseerd?
*/
a[href] {
	display: inline-block;
  color: #ff4400;
  border-bottom: 2px solid #ffdd12;
}
/* 
Door de kleurwaarden te defineren als tokens (effectief hier als css-variabelen)
koppel je de kleurwaarde aan een betekenis.
Op die manie wordt het duidelijker wat het idee achter het de vormgeving
van de link is. Met andere woorden, door het gebruiken van tokens documenteer je
impliciet de betekenis van de tekstkleur en de onderlijningskleur van deze link.
*/
:root {
 --PerenComputer-colour-brand-main-text: #ff4400;
 --PerenComputer-colour-brand-main-lines: #ffdd12;
}
a[href] {
	display: inline-block;
  color: var(--PerenComputer-colour-brand-main-text);
  border-bottom: 2px solid var(--PerenComputer-colour-brand-main-lines);
}

Design Tokens voor Theming

Er zit een overlap tussen hoe standaard Theming gedaan wordt (zoals in UI libraries) en hoe Design Tokens gebruikt worden. Beiden gebruiken in de basis een configuratie (bestand of data-object), waarin alle waarden gekoppeld zijn aan definities (variabelen of properties).

Hier is een voorbeeld om het verschil tussen Theming zonder design en met design tokens uit te leggen:

/*
Dit is een voorbeeld van hoe theming werkt voor de UI library Chakra UI.
In dit voorbeeld pas je het bestaande standaard thema aan door de kleur tokens
voor success, error, primary en secondary aan te passen.
**/
import { extendTheme } from '@chakra-ui/react'
/*
red.[nummer] refereert naar een voorgedefineerd kleurenschema van Chakra UI:
<https://chakra-ui.com/docs/styled-system/theme>
*/
const theme = extendTheme({
  semanticTokens: {
    colors: {
      error: 'red.500',
      success: 'green.500',
      primary: 'red.500',
      secondary: 'yellow.800',
    },
  },
})

In het bovenstaande voorbeeld van Chakra UI pas je het standaard kleuren schema aan naar je eigen wensen. Echter ontstaat er hier een subtiel probleem met betrekking tot schaalbaarheid. De namen error en success geven enkel dat de kleuren op een bepaalde manier gebruikt worden voor communicatie van de success en error staat van iets, maar niet hoe en op wat voor manier. En dan hebben we het nog niet eens over de kleur definities primary en secondary. Deze twee vertellen je nog minder over hoe, waar en wanneer ze wel en niet gebruikt worden.

Op een kleine schaal zal dit niet voor grote problemen zorgen en is deze manier van werken daarom ook vaker ok, maar zodra de complexiteit omhoog gaat (meer code, meer componenten, grotere codebase), wordt het steeds lastiger om kleuren correct toe te passen, omdat het ook onduidelijk hoe kleuren precies gebruikt moeten worden. M.a.w. zorgen dat het kleurgebruik klopt met de originele intenties van het ontwerp.

Design Tokens gebruiken binnen Theming

Een methode om hier beter mee om te gaan is door Design Tokens te gaan gebruiken. Omdat Design Tokens juist bedoeld zijn om het gebruik van waarden (zoals kleur) te documenteren krijg je automatisch een meer gestructureerde manier van werken. Neem als voorbeeld hieronder waar het eerdere voorbeeld aangepast is om meer te werken volgens de filosofie van design tokens:

import { extendTheme } from '@chakra-ui/react'
/*
Dit is een aangepaste versie van het eerdere voorbeeld
Dit gebruikt nog steeds het kleurenschema van Chakra UI, maar de naamgevingen
de properties zijn daarentegen gebasseerd op de functie van de tokens. M.a.w.
hoe de waarde gebruikt moet worden.

Let op: niet iedere UI library ondersteunt het defineren van eigen tokens.
Chakra UI ondersteund dit wel, maar je moet dan nog wel handmatig deze tokens
toepassen op de respectievelijke componenten.
*/
const theme = extendTheme({
  semanticTokens: {
    colors: {
      error: {
				border: 'red.500',
			},
      success: {
				border: 'green.500',
			},
      ctaButton: {
			  background: 'red.500',
      },
      button: {
				background: 'yellow.800',
			},
      text: {
				onLightBackground: 'gray.900', // heel donker grijs
				onDarkBackground: 'white'
			},
    },
  },
})

Als je Design Tokens voor Theming wilt gaan gebruiken dan is de eerste stap de beste manier vinden voor het definiëren van de token-namen. Een goede basis richtlijn hier is om de naamgeving van de tokens te baseren op waar ze voor gebruikt worden. Een vraag die je jezelf dan kan stellen is bijvoorbeeld hoe wordt red.500 gebruikt? En waarom? De antwoorden (op basis van ons voorbeeld) zijn dan: