espace-paie-odentas/EMAIL_COLOR_STANDARDIZATION.md

Standardisation des Couleurs Email - Résumé des Modifications

🎯 Objectif

Uniformiser les couleurs de tous les types d'emails avec :

• Header : #171424 (bleu-gris foncé)
• Bouton : #efc543 (jaune doré) avec texte noir

✅ Modifications Réalisées

1. Service Email Universel (lib/emailTemplateService.ts)

• ✅ Ajout des constantes de couleur standardisées
• ✅ Remplacement de toutes les headerColor par #171424
• ✅ Remplacement de toutes les buttonColor par #efc543
• ✅ Remplacement de toutes les buttonHoverColor par #d4a834

2. Template HTML (templates-mails/universal-template.html)

• ✅ Modification de la couleur du texte des boutons : color: #000 (noir)
• ✅ Variables CSS pour compatibilité avec les couleurs dynamiques

📊 Types d'Emails Affectés

Tous les 14 types d'emails utilisent maintenant les mêmes couleurs :

Type d'Email	Header	Bouton	Texte Bouton
contract-created	#171424	#efc543	#000
contract-updated	#171424	#efc543	#000
contract-cancelled	#171424	#efc543	#000
invitation	#171424	#efc543	#000
invoice	#171424	#efc543	#000
signature-request	#171424	#efc543	#000
signature-reminder	#171424	#efc543	#000
password-reset	#171424	#efc543	#000
otp	#171424	#efc543	#000
access-granted	#171424	#efc543	#000
access-revoked	#171424	#efc543	#000
notification	#171424	#efc543	#000
reminder	#171424	#efc543	#000
welcome	#171424	#efc543	#000

🔧 Détails Techniques

Commandes Utilisées

# Remplacement automatique des couleurs header
sed -i '' 's/headerColor: '\''#[^'\'']*'\''/headerColor: '\''#171424'\''/g' lib/emailTemplateService.ts

# Remplacement automatique des couleurs bouton
sed -i '' 's/buttonColor: '\''#[^'\'']*'\''/buttonColor: '\''#efc543'\''/g' lib/emailTemplateService.ts

# Remplacement automatique des couleurs hover
sed -i '' 's/buttonHoverColor: '\''#[^'\'']*'\''/buttonHoverColor: '\''#d4a834'\''/g' lib/emailTemplateService.ts

Variables CSS

:root {
  --header-color: #171424;
  --button-color: #efc543;
  --button-hover-color: #d4a834;
}

.cta {
  background: var(--button-color, #efc543);
  color: #000; /* Texte noir sur bouton jaune */
}

✅ Validation

• ✅ Build Next.js : Compilation réussie
• ✅ Types TypeScript : Validation réussie
• ✅ Couleurs appliquées : Tous les types d'emails standardisés
• ✅ Template HTML : Couleur de texte adaptée pour le contraste

🎨 Apparence Finale

• Header : Fond bleu-gris foncé (#171424) professionnel
• Boutons : Jaune doré (#efc543) avec texte noir pour un excellent contraste
• Hover : Version légèrement plus foncée (#d4a834) pour l'interactivité

📝 Notes

• Les couleurs des cartes et alertes restent spécifiques à chaque type d'email
• La cohérence visuelle est maintenant garantie pour tous les headers et boutons
• Le contraste texte/bouton respecte les standards d'accessibilité

---

Modification effectuée le 2 octobre 2025