@routess/design-tokens

Designwaarden gecentraliseerd zodat de webapp, deze docs-site en de toekomstige mobiele app er allemaal hetzelfde uitzien.

Wat zit erinCopy Anchor Link

• Kleuren: light- + dark-paletten in OKLCH
• Typografie: lettergroottes, gewichten, regelhoogtes
• Spacing: consistente schaal (xs/sm/md/lg/xl)
• Border radius: --radius-systeem
• Animaties: fade-, slide-, scale-, spin-keyframes

Gebruik op webCopy Anchor Link

Importeer de CSS één keer bij de app-entry:

import "@routess/design-tokens/css/tokens.css";

Gebruik de CSS-variabelen rechtstreeks:

.card {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

Of de Tailwind v4-thematokens (bg-card, text-foreground, enz.), al bedraad via @theme inline.

Gebruik op React NativeCopy Anchor Link

Importeer de JS-exports:

import { lightColors, darkColors, spacing } from "@routess/design-tokens";

OKLCH wordt niet rechtstreeks ondersteund in RN; gebruik de helper-utilities in de package om hex/rgb-fallbacks te krijgen.

Dark modeCopy Anchor Link

Voeg de dark-klasse toe aan <html> (of <body>) en de dark-tokenwaarden nemen het over. De webapp en de docs-site volgen standaard allebei de systeemvoorkeur van de gebruiker.