@routess/design-tokens

Des valeurs de design centralisées pour que l'application web, ce site de documentation et la future application mobile aient tous le même rendu.

Ce qu'il contientCopy Anchor Link

• Couleurs : palettes claire + sombre en OKLCH
• Typographie : tailles de police, graisses, hauteurs de ligne
• Espacement : échelle cohérente (xs/sm/md/lg/xl)
• Rayon de bordure : système --radius
• Animations : keyframes fade, slide, scale, spin

Utilisation webCopy Anchor Link

Importe le CSS une seule fois à l'entrée de l'app :

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

Utilise directement les variables CSS :

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

Ou les tokens de thème Tailwind v4 (bg-card, text-foreground, etc.), déjà câblés via @theme inline.

Utilisation React NativeCopy Anchor Link

Importe les exports JS :

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

OKLCH n'est pas directement pris en charge dans RN ; utilise les utilitaires d'aide du package pour obtenir des fallbacks hex/rgb.

Mode sombreCopy Anchor Link

Ajoute la classe dark à <html> (ou <body>) et les valeurs de tokens sombres prennent le relais. L'application web et le site de documentation suivent par défaut la préférence système de l'utilisateur.