Jetons de design

Le système de design est entièrement tokenisé. Chaque couleur, espacement et valeur typographique provient d'un fichier de jetons au format W3C DTCG.

Catégories de jetons

Couleur
Couleurs sémantiques (texte, surface, bordure, marque) avec variantes clair/sombre.
Typographie
Familles de polices, tailles, poids, hauteurs de ligne.
Espacement
Échelle de 4 pt (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96).
Dimensionnement
Tailles fixes de composants pour boutons, champs, avatars.
Ombres
Jetons d'élévation (sm, md, lg, xl, overlay).
Rayons
Échelle de rayons de coin (none, sm, md, lg, xl, 2xl, full).
Mouvement
Jetons de durée et d'accélération pour les animations.

Utiliser les jetons en CSS

Référence les jetons via les propriétés personnalisées CSS :

.my-component {
  color: var(--ep-text-body);
  background: var(--ep-surface-card);
  padding: var(--ep-space-4);
  border-radius: var(--ep-radius-md);
  box-shadow: var(--ep-shadow-md);
}

Utiliser les jetons en Tailwind

Le système de design étend Tailwind avec des classes de jetons sémantiques :

<div className="bg-ep-surface-card text-ep-text-body p-ep-4 rounded-ep-md shadow-ep-md">
  Themed component
</div>

Utiliser les jetons programmatiquement

Importe les jetons comme constantes TypeScript :

import { tokens } from '@epasslive/design-system'

const brandColor = tokens.color.brand.primary // '#009FCA'
const baseSpacing = tokens.spacing[4] // '1rem'