@dsrc-cm/tokens

Design Systeme de la Republique du Cameroun — Design tokens.

Les tokens du DSRC définissent les valeurs fondamentales du design system : couleurs, typographie, espacement, ombres, rayons, transitions. Disponibles en CSS, SCSS, JS et ESM.

Installation

npm install @dsrc-cm/tokens

Utilisation

CSS Custom Properties

<link rel="stylesheet" href="node_modules/@dsrc-cm/tokens/dist/tokens.css">

.mon-composant {
  color: var(--dsrc-color-primary);
  padding: var(--dsrc-spacing-4);
  font-family: var(--dsrc-font-family-sans);
}

SCSS

@import '@dsrc-cm/tokens/scss';

.mon-composant {
  color: $dsrc-color-primary;
  padding: $dsrc-spacing-4;
}

JavaScript / ESM

import tokens from '@dsrc-cm/tokens';

CommonJS

const tokens = require('@dsrc-cm/tokens');

Système de couleurs (3 couches)

Le DSRC utilise une architecture de tokens à 3 couches :

Couche 1 — Primitifs     --dsrc-color-green-500   (valeur brute)
                              ↓
Couche 2 — Sémantique    --dsrc-color-primary      (décision de design)
                              ↓
Couche 3 — Compat        --dsrc-color-primaire      (ancien nom FR)

Palettes (8 familles × 10 nuances)

| Famille | Ancrage | Nuances | |---------|---------|---------| | Green | #007A2B (vert de l'État) | 50–900 | | Red | #CE003A (drapeau) | 50–900 | | Yellow | #F0B414 (drapeau) | 50–900 | | Blue | #2563EB (info) | 50–900 | | Gray | #161616 → #F7F7F7 | 50–900 | | Purple | #9333EA | 50–900 | | Teal | #14B8A6 | 50–900 | | Orange | #F97316 | 50–900 |

Tokens sémantiques

| Token | Référence | Usage | |-------|-----------|-------| | --dsrc-color-primary | green-500 | Boutons, liens, focus | | --dsrc-color-primary-hover | green-600 | État hover | | --dsrc-color-primary-dark | green-700 | État pressé | | --dsrc-color-primary-light | green-50 | Fonds légers | | --dsrc-color-text | gray-900 | Texte principal | | --dsrc-color-text-secondary | gray-600 | Texte secondaire | | --dsrc-color-border | gray-200 | Bordures | | --dsrc-color-surface | white | Surfaces/cartes | | --dsrc-color-success-bg/text/border | green | Succès | | --dsrc-color-error-bg/text/border | red | Erreurs | | --dsrc-color-warning-bg/text/border | yellow | Alertes | | --dsrc-color-info-bg/text/border | blue | Informations | | --dsrc-color-flag-green/red/yellow | — | Drapeau camerounais |

Rétrocompatibilité

Les anciens noms français fonctionnent toujours :

| Ancien | Nouveau | |--------|---------| | --dsrc-color-primaire | --dsrc-color-primary | | --dsrc-color-noir | --dsrc-color-black | | --dsrc-color-gris-600 | --dsrc-color-gray-600 | | --dsrc-color-succes-fond | --dsrc-color-success-bg |

Typographie

| Token | Valeur | |-------|--------| | --dsrc-font-family-sans | 'IBM Plex Sans', sans-serif | | --dsrc-font-family-mono | 'IBM Plex Mono', monospace | | --dsrc-font-size-body | 16px | | --dsrc-font-weight-bold | 700 |

Espacement

Grille de 4px : --dsrc-spacing-1 (4px) à --dsrc-spacing-8 (64px).

Breakpoints

| Token | Valeur | |-------|--------| | --dsrc-breakpoint-sm | 576px | | --dsrc-breakpoint-md | 768px | | --dsrc-breakpoint-lg | 992px | | --dsrc-breakpoint-xl | 1248px |

Formats de sortie

| Fichier | Format | Usage | |---------|--------|-------| | dist/tokens.css | CSS Custom Properties | Sites web | | dist/tokens.scss | Variables SCSS | Préprocesseurs | | dist/tokens.mjs | ES Modules | Bundlers modernes | | dist/tokens.js | CommonJS | Node.js |

Licence

MIT — NZIDJOUO FONJI Terence Hill