Couleurs

Le système de couleurs TDS est construit sur deux niveaux : la palette de base (valeurs brutes) et les couleurs sémantiques (significations fonctionnelles).

Règle fondamentale

Toujours utiliser les couleurs sémantiques pour les états fonctionnels (succès, erreur, avertissement, info). La palette de base sert à construire des composants, jamais à exprimer directement un état.

---

Palette de base

Bleu — Couleur primaire de l’État

Le bleu 500 est la couleur d’action principale. Il représente l’autorité et la fiabilité de l’État.

Token	Valeur CSS	Hex	Usage
blue.50	--tds-color-blue-50	#F2F5FF	Fond d’information légère
blue.100	--tds-color-blue-100	#D9E3FF	Fond de badge / chip info
blue.200	--tds-color-blue-200	#A6C1FF	Bordure focus, état survol léger
blue.300	--tds-color-blue-300	#6B94FF	Éléments interactifs secondaires
blue.400	--tds-color-blue-400	#2F68FF	Liens actifs, états hover
blue.500	--tds-color-blue-500	#0033A0	Action principale, couleur de marque
blue.600	--tds-color-blue-600	#002B89	Hover sur bleu 500
blue.700	--tds-color-blue-700	#002063	Active sur bleu 500, texte fort
blue.800	--tds-color-blue-800	#00143E	Texte très fort sur fond clair
blue.900	--tds-color-blue-900	#00061A	Quasi-noir bleu

blue.50#F2F5FF

blue.100#D9E3FF

blue.200#A6C1FF

blue.300#6B94FF

blue.400#2F68FF

blue.500 ★#0033A0

blue.600#002B89

blue.700#002063

blue.800#00143E

blue.900#00061A

---

Jaune — Couleur nationale, attention

Le jaune est la seconde couleur du drapeau tchadien. Il sert aux avertissements et aux éléments identitaires.

Token	Hex	Usage
yellow.50	#FFFBEB	Fond d’alerte légère
yellow.100	#FFF3CC	Fond badge avertissement
yellow.200	#FFE699	Bordure de notification
yellow.300	#FFDA66	Accent secondaire
yellow.400	#FFCF33	Éléments d’alerte visible
yellow.500	#FFD100	Couleur d’avertissement principale
yellow.600	#E6B800	Hover sur jaune 500
yellow.700	#B58D00	Texte sur fond jaune clair
yellow.800	#846200	Texte fort sur fond jaune pâle
yellow.900	#4D3A00	Texte haute emphase

Contraste sur fond jaune

Le jaune présente des problèmes de contraste avec du texte blanc. Utilisez toujours du texte sombre (neutral.800 ou neutral.900) sur fond jaune. Le contraste blanc/jaune ne respecte pas WCAG AA.

---

Rouge — Danger, erreur

Token	Hex	Usage
red.50	#FFF2F1	Fond d’erreur légère
red.100	#FFD8D6	Fond de badge erreur
red.500	#DA291C	Action destructive, état d’erreur
red.600	#B21F16	Hover bouton danger
red.700	#82160F	Texte d’erreur sur fond clair

---

Vert — Succès, confirmation

Token	Hex	Usage
green.50	#F0FBF5	Fond de confirmation légère
green.100	#D9F6E6	Fond badge succès
green.500	#006B3C	Confirmation, succès, validation
green.600	#005B32	Hover bouton succès
green.700	#004224	Texte de succès sur fond clair

---

Neutrals — Interface et typographie

Les neutrals constituent l’échelle de gris pour l’interface. Ce sont les couleurs les plus utilisées.

Token	Hex	Usage principal
neutral.0	#FFFFFF	Fond de page, cartes, modales
neutral.100	#F3F4F6	Fond alterné, lignes de tableau
neutral.200	#E5E7EB	Séparateurs, bordures légères
neutral.300	#D1D5DB	Bordures de champs inactifs
neutral.400	#9CA3AF	Placeholders, icônes désactivées
neutral.500	#6B7280	Texte secondaire, helper text
neutral.600	#4B5563	Légendes, labels secondaires
neutral.700	#374151	Texte de corps secondaire
neutral.800	#1F2937	Texte de corps principal
neutral.900	#0B1220	Titres, texte fort

neutral.0#FFFFFF

neutral.100#F3F4F6

neutral.200#E5E7EB

neutral.300#D1D5DB

neutral.400#9CA3AF

neutral.500#6B7280

neutral.600#4B5563

neutral.700#374151

neutral.800#1F2937

neutral.900#0B1220

---

Couleurs sémantiques

Les couleurs sémantiques expriment une signification fonctionnelle. Chaque état a quatre rôles : background, border, text, icon.

Info

Utilisée pour les messages informatifs neutres, les aides contextuelles.

Rôle	Variable CSS	Valeur
background	--tds-color-semantic-info-background	#F2F5FF (blue.50)
border	--tds-color-semantic-info-border	#A6C1FF (blue.200)
text	--tds-color-semantic-info-text	#002063 (blue.700)
icon	--tds-color-semantic-info-icon	#0033A0 (blue.500)

<div style="
  background: var(--tds-color-semantic-info-background);
  border: 1px solid var(--tds-color-semantic-info-border);
  border-left: 4px solid var(--tds-color-semantic-info-icon);
  color: var(--tds-color-semantic-info-text);
  padding: var(--tds-spacing-4);
  border-radius: var(--tds-radius-sm);
">
  Votre demande est en cours de traitement. Délai estimé : 5 jours ouvrables.
</div>

Succès

Confirmations, validations réussies, étapes complétées.

Rôle	Variable CSS	Valeur
background	--tds-color-semantic-success-background	#F0FBF5 (green.50)
border	--tds-color-semantic-success-border	#A8E9C7 (green.200)
text	--tds-color-semantic-success-text	#004224 (green.700)
icon	--tds-color-semantic-success-icon	#006B3C (green.500)

Avertissement

Situations nécessitant attention sans être des erreurs.

Rôle	Variable CSS	Valeur
background	--tds-color-semantic-warning-background	#FFFBEB (yellow.50)
border	--tds-color-semantic-warning-border	#FFDA66 (yellow.300)
text	--tds-color-semantic-warning-text	#0B1220 (neutral.900)
icon	--tds-color-semantic-warning-icon	#0B1220 (neutral.900)

Texte sombre sur fond jaune

L’avertissement utilise neutral.900 pour le texte et l’icône afin de garantir un contraste suffisant sur le fond jaune pâle.

Danger

Erreurs bloquantes, actions irréversibles, validations échouées.

Rôle	Variable CSS	Valeur
background	--tds-color-semantic-danger-background	#FFF2F1 (red.50)
border	--tds-color-semantic-danger-border	#FFB0AD (red.200)
text	--tds-color-semantic-danger-text	#82160F (red.700)
icon	--tds-color-semantic-danger-icon	#DA291C (red.500)

---

Variables CSS — Référence complète

/* Palette Bleue */
--tds-color-blue-50:    #F2F5FF;
--tds-color-blue-100:   #D9E3FF;
--tds-color-blue-200:   #A6C1FF;
--tds-color-blue-300:   #6B94FF;
--tds-color-blue-400:   #2F68FF;
--tds-color-blue-500:   #0033A0;   /* ← primaire */
--tds-color-blue-600:   #002B89;
--tds-color-blue-700:   #002063;
--tds-color-blue-800:   #00143E;
--tds-color-blue-900:   #00061A;

/* Palette Jaune */
--tds-color-yellow-50:  #FFFBEB;
--tds-color-yellow-100: #FFF3CC;
--tds-color-yellow-200: #FFE699;
--tds-color-yellow-300: #FFDA66;
--tds-color-yellow-400: #FFCF33;
--tds-color-yellow-500: #FFD100;   /* ← avertissement */
--tds-color-yellow-600: #E6B800;
--tds-color-yellow-700: #B58D00;
--tds-color-yellow-800: #846200;
--tds-color-yellow-900: #4D3A00;

/* Palette Rouge */
--tds-color-red-50:     #FFF2F1;
--tds-color-red-100:    #FFD8D6;
--tds-color-red-200:    #FFB0AD;
--tds-color-red-300:    #FF8A83;
--tds-color-red-400:    #FF665D;
--tds-color-red-500:    #DA291C;   /* ← danger */
--tds-color-red-600:    #B21F16;
--tds-color-red-700:    #82160F;
--tds-color-red-800:    #560E08;
--tds-color-red-900:    #2B0604;

/* Palette Verte */
--tds-color-green-50:   #F0FBF5;
--tds-color-green-100:  #D9F6E6;
--tds-color-green-200:  #A8E9C7;
--tds-color-green-300:  #6FD8A1;
--tds-color-green-400:  #38C07F;
--tds-color-green-500:  #006B3C;   /* ← succès */
--tds-color-green-600:  #005B32;
--tds-color-green-700:  #004224;
--tds-color-green-800:  #002B18;
--tds-color-green-900:  #00140C;

/* Neutrals */
--tds-neutral-0:   #FFFFFF;
--tds-neutral-100: #F3F4F6;
--tds-neutral-200: #E5E7EB;
--tds-neutral-300: #D1D5DB;
--tds-neutral-400: #9CA3AF;
--tds-neutral-500: #6B7280;
--tds-neutral-600: #4B5563;
--tds-neutral-700: #374151;
--tds-neutral-800: #1F2937;
--tds-neutral-900: #0B1220;

/* Couleurs sémantiques */
--tds-color-semantic-info-background:       #F2F5FF;
--tds-color-semantic-info-border:           #A6C1FF;
--tds-color-semantic-info-text:             #002063;
--tds-color-semantic-info-icon:             #0033A0;

--tds-color-semantic-success-background:    #F0FBF5;
--tds-color-semantic-success-border:        #A8E9C7;
--tds-color-semantic-success-text:          #004224;
--tds-color-semantic-success-icon:          #006B3C;

--tds-color-semantic-warning-background:    #FFFBEB;
--tds-color-semantic-warning-border:        #FFDA66;
--tds-color-semantic-warning-text:          #0B1220;
--tds-color-semantic-warning-icon:          #0B1220;

--tds-color-semantic-danger-background:     #FFF2F1;
--tds-color-semantic-danger-border:         #FFB0AD;
--tds-color-semantic-danger-text:           #82160F;
--tds-color-semantic-danger-icon:           #DA291C;

---

Utilisation TypeScript

import { color } from '@tds-tchad/core/tokens';
import type { ColorTokens } from '@tds-tchad/core/tokens';

// Accès direct aux valeurs
const primary = color.blue[500];          // '#0033A0'
const dangerText = color.semantic.danger.text;   // '#82160F'
const pageBg = color.neutral[0];          // '#FFFFFF'

// Utilisation dans un objet de thème
const theme = {
  brand: color.blue[500],
  surface: color.neutral[0],
  text: color.neutral[900],
  textMuted: color.neutral[500],
  border: color.neutral[200],
} as const;

---

Règles d’usage

À faire

✓ Faire

• Utiliser les couleurs sémantiques pour les états (info/succès/danger/avertissement)
• Utiliser neutral.800 ou neutral.900 pour le texte de corps
• Utiliser blue.500 pour les actions primaires et les liens importants
• Vérifier le contraste avant d’utiliser une combinaison non standard

✗ Éviter

• Inventer des couleurs hors de la palette TDS
• Utiliser du texte blanc sur fond jaune
• Utiliser red.500 pour une action primaire non-destructive
• Utiliser les palettes brutes pour exprimer des états (préférez les sémantiques)

---

Ratios de contraste WCAG

Combinaison	Ratio	Standard
blue.500 sur neutral.0	8.59:1	✅ AAA
neutral.900 sur neutral.0	18.1:1	✅ AAA
red.700 sur red.50	7.2:1	✅ AAA
green.700 sur green.50	6.9:1	✅ AA
neutral.900 sur yellow.50	16.4:1	✅ AAA
blue.200 sur neutral.0	2.1:1	❌ Insuffisant pour texte
Blanc sur yellow.500	1.5:1	❌ Insuffisant

Combinaisons interdites

Ne jamais utiliser yellow.500 avec du texte blanc, ni blue.200 comme couleur de texte sur fond blanc. Ces combinaisons échouent WCAG AA et rendent le contenu illisible pour les personnes malvoyantes.