Démarrer un projet
Quatre étapes. La seule décision réelle est à l'étape 2.
-
Installer et builder
npm install npm run build # dist/tokens.css + dist/tokens.json + docs/ -
Choisir l'identité du projet
Éditer la table
BRANDdansscripts/generate-theme.js, puis lancernpm run theme. C'est le seul endroit à toucher.const BRAND = { primary: 'violet', // ← change ça, tout suit neutral: 'slateBlue', success: 'green', warning: 'orange', danger: 'red', info: 'blue', };Sélection actuelle :
primary→violet·neutral→slateBlue·success→green·warning→orange·danger→red·info→blueN'importe quelle palette peut jouer n'importe quel rôle : elles exposent toutes les mêmes 11 crans sur la même courbe de luminosité. Un swap ne casse ni le build, ni les contrastes. -
Consommer les tokens
@import '@fred/design-tokens/dist/tokens.css'; /* tokens.css = le système. components.css = les tokens de composant. */ @import '@fred/design-tokens/dist/components.css'; /* Un bouton : variante · rôle · état, et une taille */ .btn-filled { background: var(--color-button-filled-primary-default-background); color: var(--color-button-filled-primary-default-text); height: var(--size-button-md-height); padding: 0 var(--space-button-md-padding-x); border-radius: var(--radius-button-md); font-size: var(--font-size-button-md); } /* Changer de couleur = changer le rôle. Aucun token nouveau. */ .btn-filled[data-color="danger"] { background: var(--color-button-filled-danger-default-background); } -
Activer le thème sombre
<html data-theme="dark">Rien d'autre à faire : seuls les rôles sémantiques sont redéfinis sous ce sélecteur, les composants suivent via
var(). Le responsive est automatique (media query à 768px).
Les commandes
| Commande | Effet |
|---|---|
npm run build | Génère dist/ et docs/. |
npm run theme | Régénère brand + rôles + composants depuis les tables de mapping, puis build. |
npm run ramps | Aperçu des rampes de couleur (n'écrit rien). |
npm run ramps:write | Régénère tokens/primitives/color.json. |
npm run watch | Rebuild à chaque modification. |