TDS — Système de Design de l’État

Le système de design open source destiné aux services numériques publics du Tchad.

Important

TDS est actuellement une initiative indépendante et communautaire. Le projet vise une adoption par les institutions publiques tchadiennes, mais ne se présente pas encore comme une norme officiellement homologuée par l'État.

Pourquoi TDS ?

Les services numériques gouvernementaux du Tchad manquent d'une identité visuelle cohérente. Chaque ministère, chaque plateforme citoyenne développe ses interfaces de manière indépendante — résultat : incohérence, inaccessibilité et perte de confiance des citoyens.

TDS propose une réponse systémique : une bibliothèque de tokens et de composants partagés, accessibles par défaut, conformes WCAG 2.1 AA, et prêts pour le français comme pour l'arabe.

Inspiré de GOV.UK Design System, DSFR et USWDS.

Ce que TDS fournit

🎨 Design Tokens

Système	Variables CSS	TypeScript	JSON
Couleurs (bleu, jaune, rouge, vert, neutrals, sémantiques)	✅	✅	✅
Typographie (Source Sans 3, Noto Naskh Arabic, JetBrains Mono)	✅	✅	✅
Espacement (grille 4px)	✅	✅	✅
Arrondis, Ombres, Motion, Z-index	✅	✅	✅

🧩 Composants

Composant	Classes CSS	Types TS	Accessibilité
Button	`tds-button`	`ButtonVariant`, `ButtonSize`	WCAG AA ✅
Input / Form	`tds-input`, `tds-field`	`InputVariant`, `InputSize`	WCAG AA ✅
Alert	`tds-alert`	`AlertVariant`	`role=alert` ✅
Badge	`tds-badge`	`BadgeVariant`	WCAG AA ✅
Card	`tds-card`	`CardVariant`	✅
Link	`tds-link`	`LinkVariant`	Focus visible ✅
Table	`tds-table`	—	`scope`, `caption` ✅
Header	`tds-header`	`HeaderVariant`	Lien d'évitement recommandé ✅
Navigation	`tds-nav`	—	`aria-current="page"` ✅
Breadcrumb	`tds-breadcrumb`	—	`aria-current="page"` ✅
Pagination	`tds-pagination`	—	`aria-label`, `aria-current` ✅
Modal	`tds-modal`	`ModalSize`	Focus trap natif (`<dialog>`) ✅
Skip Link	`tds-skip-link`	—	Premier élément focusable ✅
Footer	`tds-footer`	—	Lien déclaration d'accessibilité ✅
Accordion	`tds-accordion`	—	`<details>`/`<summary>` natif, zéro JS ✅
Tabs	`tds-tabs`	—	WAI-ARIA APG (roving tabindex) ✅
Tooltip	`tds-tooltip`	—	CSS pur, limitation tactile documentée ⚠️

Installation

Le namespace npm @tds-tchad et les classes CSS tds-* constituent l'API stable du projet (le package n'étant pas encore publié, aucune compatibilité ascendante n'est requise avec l'ancien namespace @dstd).

# pnpm (recommandé)
pnpm add @tds-tchad/core

# npm
npm install @tds-tchad/core

# yarn
yarn add @tds-tchad/core

Node.js 18+ requis. Le package est distribué en ESM ("type": "module").

Démarrage rapide

1. Charger les tokens CSS

/* Dans votre feuille de style principale */
@import "@tds-tchad/core/base.css";             /* Reset + styles HTML */
@import "@tds-tchad/core/tokens/color.css";
@import "@tds-tchad/core/tokens/typography.css";
@import "@tds-tchad/core/tokens/spacing.css";
@import "@tds-tchad/core/tokens/radius.css";
@import "@tds-tchad/core/tokens/shadow.css";
@import "@tds-tchad/core/tokens/motion.css";
@import "@tds-tchad/core/tokens/z-index.css";

/* Composants selon vos besoins */
@import "@tds-tchad/core/components/button/button.css";
@import "@tds-tchad/core/components/input/input.css";
@import "@tds-tchad/core/components/alert/alert.css";
@import "@tds-tchad/core/components/badge/badge.css";
@import "@tds-tchad/core/components/card/card.css";
@import "@tds-tchad/core/components/link/link.css";
@import "@tds-tchad/core/components/table/table.css";
@import "@tds-tchad/core/components/header/header.css";
@import "@tds-tchad/core/components/nav/nav.css";
@import "@tds-tchad/core/components/breadcrumb/breadcrumb.css";
@import "@tds-tchad/core/components/pagination/pagination.css";
@import "@tds-tchad/core/components/modal/modal.css";
@import "@tds-tchad/core/components/skip-link/skip-link.css";
@import "@tds-tchad/core/components/footer/footer.css";
@import "@tds-tchad/core/components/accordion/accordion.css";
@import "@tds-tchad/core/components/tabs/tabs.css";
@import "@tds-tchad/core/components/tooltip/tooltip.css";

2. Utiliser les composants en HTML

<!-- Bouton primary -->
<button type="submit" class="tds-button tds-button--primary tds-button--md">
  Valider la demande
</button>

<!-- Champ de formulaire -->
<div class="tds-field">
  <label class="tds-field__label" for="nom">Nom complet</label>
  <input id="nom" type="text" class="tds-input tds-input--md" required>
</div>

<!-- Alerte succès -->
<div class="tds-alert tds-alert--success" role="status">
  <div class="tds-alert__content">
    <p class="tds-alert__title">Dossier soumis</p>
    <div class="tds-alert__body">Référence : REF-2024-001234</div>
  </div>
</div>

3. Utiliser les tokens TypeScript

import { color, spacing, typography } from '@tds-tchad/core/tokens';
import type { ButtonVariant } from '@tds-tchad/core/components/button';

const primary = color.blue[500];      // '#0033A0'
const gap = spacing.scale[4];         // '1rem' (16px)
const body = typography.sizes.md;     // '1rem'

Structure du monorepo

TDS/
├── packages/
│   └── core/                  ← Package npm principal @tds-tchad/core
│       ├── src/
│       │   ├── base.css       ← Reset CSS + styles HTML de base
│       │   ├── tokens/        ← Design tokens (TS + JSON + CSS)
│       │   └── components/    ← Tokens + CSS de chaque composant
│       ├── scripts/           ← Build, clean, validation
│       └── package.json
├── apps/
│   ├── docs/                  ← Site de documentation (Astro Starlight)
│   └── site/                  ← Site statique HTML de démonstration
├── templates/                 ← Templates gouvernementaux (à venir)
├── .github/workflows/ci.yml   ← CI/CD GitHub Actions
├── turbo.json                 ← Orchestration Turbo
└── pnpm-workspace.yaml

Développement local

Prérequis

Node.js 18+
pnpm 8+ : npm install -g pnpm

Installation

git clone https://github.com/wargafu/TDS.git
cd TDS
pnpm install

Commandes principales

# Lancer le site de documentation en local
cd apps/docs && npm run dev
# → http://localhost:4321

# Builder tous les packages
pnpm build

# Vérifier les types TypeScript
pnpm typecheck

# Valider les tokens (93 checks)
pnpm --filter @tds-tchad/core validate:tokens

# Valider les exports npm (après build)
pnpm --filter @tds-tchad/core validate:exports

# Lint
pnpm lint

# Formatter le code
pnpm format

Workflow de développement

# 1. Créer une branche feature
git checkout -b feat/nom-du-composant

# 2. Développer + valider
pnpm --filter @tds-tchad/core validate:tokens
pnpm build
pnpm typecheck

# 3. Committer
git commit -m "feat: ajouter le composant X"

# 4. Ouvrir une Pull Request vers main
git push origin feat/nom-du-composant

Contribuer

Toute contribution est bienvenue. TDS est un bien numérique commun pour le Tchad.

Avant d'ouvrir une PR

Les tokens ajoutés existent en .ts, .json ET .css
pnpm --filter @tds-tchad/core validate:tokens passe à 0 erreur
pnpm build && pnpm --filter @tds-tchad/core validate:exports réussit
pnpm typecheck → zéro erreur TypeScript
pnpm --filter @tds-tchad/core test et lint:css passent
Les composants respectent WCAG 2.1 AA (contraste, focus, ARIA) — cd apps/docs && npm run test:a11y
La documentation est mise à jour dans apps/docs/ (page composant + terrain de jeu)

Types de contributions acceptées

Type	Processus
🐛 Correction de bug	PR directe avec description du bug
♿ Amélioration accessibilité	PR avec tests AT décrits
🎨 Nouveau token	Ouvrir une issue d'abord
🧩 Nouveau composant	RFC obligatoire — discussion issue
📚 Documentation	PR directe
🌐 Traduction arabe	PR directe — contactez les mainteneurs

Ce qui est interdit sans version majeure

Modifier la valeur d'un token existant
Supprimer un export public
Renommer une classe CSS existante

TDS suit le versionnement sémantique strict. Les tokens publiés sont immuables.

Guide de contribution complet

→ docs/communaute/contribution

Feuille de route

v0.1 — Fondations ✅

7 systèmes de tokens (couleurs, typo, espacement, radius, shadow, motion, z-index)
17 composants (Button, Input, Alert, Badge, Card, Link, Table, Header, Navigation, Breadcrumb, Pagination, Modal, Skip Link, Footer, Accordion, Tabs, Tooltip)
Build system industriel + CI/CD
Documentation Astro Starlight
Pipeline de génération de tokens à source unique, tests automatisés, stylelint, vérifications a11y (axe-core)

v0.2 — Composants navigation ✅ (actuel)

v0.3 — Patterns et templates

Template portail citoyen
Template tableau de bord administratif
Terrain de jeu visuel des composants (apps/docs/src/pages/playground.astro)

v1.0 — Production ready

Dark mode complet
Système d'icônes SVG
Support arabe RTL complet et testé
Publication npm @tds-tchad/core

Compatibilité

Environnement	Support
HTML + CSS (sans JS)	✅ Complet
React 18+	✅ Via classes CSS
Vue 3+	✅ Via classes CSS
Angular	✅ Via classes CSS
Next.js / Nuxt / Astro	✅ Via classes CSS
Node.js (tokens JSON/JS)	✅
Navigateurs modernes (2 dernières versions)	✅
IE11	❌ Non supporté

Stack technique

Outil	Usage
pnpm + Turbo	Monorepo et orchestration
TypeScript 5.6	Tokens typés
Astro + Starlight	Documentation
GitHub Actions	CI/CD
ESLint + Prettier	Qualité du code

Licence

MIT — Libre d'utilisation pour tous les projets, y compris gouvernementaux.

Contact

Issues : github.com/wargafu/TDS/issues
Discussions : github.com/wargafu/TDS/discussions
Email : design-system@gouv.td (à configurer)

Construit pour le Tchad 🇹🇩 — Libre pour tous

Name		Name	Last commit message	Last commit date
Latest commit History 42 Commits
.agents/skills/ckm-design-system		.agents/skills/ckm-design-system
.github/workflows		.github/workflows
apps		apps
packages		packages
templates		templates
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
README.md		README.md
package.json		package.json
pnpm-workspace.yaml		pnpm-workspace.yaml
skills-lock.json		skills-lock.json
tsconfig.base.json		tsconfig.base.json
turbo.json		turbo.json

Folders and files

Latest commit

History

Repository files navigation

TDS — Système de Design de l’État

Pourquoi TDS ?

Ce que TDS fournit

🎨 Design Tokens

🧩 Composants

Installation

Démarrage rapide

1. Charger les tokens CSS

2. Utiliser les composants en HTML

3. Utiliser les tokens TypeScript

Structure du monorepo

Développement local

Prérequis

Installation

Commandes principales

Workflow de développement

Contribuer

Avant d'ouvrir une PR

Types de contributions acceptées

Ce qui est interdit sans version majeure

Guide de contribution complet

Feuille de route

v0.1 — Fondations ✅

v0.2 — Composants navigation ✅ (actuel)

v0.3 — Patterns et templates

v1.0 — Production ready

Compatibilité

Stack technique

Licence

Contact

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages