Aller au contenu
TDS

Installation

@tds-tchad/core est disponible sur npm. Choisissez votre gestionnaire de paquets.

Gestionnaire de paquets

Fenêtre de terminal
pnpm add @tds-tchad/core

Importer les tokens CSS

La manière la plus simple est d’importer les CSS custom properties directement. Elles sont disponibles pour chaque système de tokens.

/* Importer tous les tokens (recommandé pour démarrer) */
@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";

Après import, toutes les variables CSS --tds-* sont disponibles globalement.

/* Utilisation directe */
.mon-composant {
  color: var(--tds-color-blue-500);
  padding: var(--tds-spacing-4);
  border-radius: var(--tds-radius-sm);
}

Importer les styles composants

Importez les CSS des composants que vous utilisez.

/* Bouton */
@import "@tds-tchad/core/components/button/button.css";


/* Champs de formulaire */
@import "@tds-tchad/core/components/input/input.css";

Importer les tokens TypeScript

Pour accéder aux valeurs de tokens dans votre code TypeScript/JavaScript :

// Importer les tokens individuellement
import { color } from '@tds-tchad/core/tokens';
import { typography } from '@tds-tchad/core/tokens';
import { spacing } from '@tds-tchad/core/tokens';


// Ou tout importer depuis la racine
import { color, typography, spacing, radius, shadow, motion } from '@tds-tchad/core';


// Utiliser les tokens
const primaryBlue = color.blue[500];    // '#0033A0'
const bodySize = typography.sizes.md;   // '1rem'
const gap = spacing.scale[4];           // '1rem' (16px)

Importer les types TypeScript

import type { ColorTokens } from '@tds-tchad/core/tokens';
import type { ButtonVariant, ButtonSize } from '@tds-tchad/core/components/button';
import type { InputVariant, InputSize, InputState } from '@tds-tchad/core/components/input';

Import JSON (Style Dictionary / Figma)

Les tokens sont aussi disponibles en JSON pour l’intégration avec Style Dictionary, les plugins Figma ou d’autres outils de design.

import colorJson from '@tds-tchad/core/tokens/color.json' assert { type: 'json' };
// ou en CommonJS
const colorJson = require('@tds-tchad/core/tokens/color.json');

Installation sans bundler (CDN / HTML pur)

Pour utiliser TDS sans outil de build, copiez les fichiers CSS dans votre projet ou pointez vers un CDN auto-hébergé.

<!doctype html>
<html lang="fr">
<head>
  <!-- Polices institutionnelles -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">


  <!-- Tokens TDS (depuis votre serveur) -->
  <link rel="stylesheet" href="/assets/tds/tokens/color.css">
  <link rel="stylesheet" href="/assets/tds/tokens/typography.css">
  <link rel="stylesheet" href="/assets/tds/tokens/spacing.css">
  <link rel="stylesheet" href="/assets/tds/tokens/radius.css">
  <link rel="stylesheet" href="/assets/tds/tokens/shadow.css">
  <link rel="stylesheet" href="/assets/tds/tokens/motion.css">
  <link rel="stylesheet" href="/assets/tds/tokens/z-index.css">


  <!-- Composants TDS -->
  <link rel="stylesheet" href="/assets/tds/components/button/button.css">
  <link rel="stylesheet" href="/assets/tds/components/input/input.css">
</head>

Vérification de l’installation

Après installation, vérifiez que les tokens CSS sont bien chargés dans le navigateur :

// Dans la console du navigateur
getComputedStyle(document.documentElement)
  .getPropertyValue('--tds-color-blue-500')
// Doit retourner : ' #0033A0'

Arborescence du package publié

@tds-tchad/core/
├── dist/
│   ├── index.js              — Point d'entrée principal (ESM)
│   ├── index.d.ts            — Types TypeScript
│   ├── tokens/
│   │   ├── index.js          — Barrel tokens
│   │   ├── color.js + color.d.ts + color.css + color.json
│   │   ├── typography.*
│   │   ├── spacing.*
│   │   ├── radius.*
│   │   ├── shadow.*
│   │   ├── motion.*
│   │   └── z-index.*
│   └── components/
│       ├── button/
│       │   ├── index.js + index.d.ts
│       │   ├── button.tokens.js + button.tokens.d.ts
│       │   ├── button.tokens.json
│       │   └── button.css
│       └── input/
│           └── (même structure)

Prochaine étape

Construisez votre première interface avec le Démarrage rapide →