Palette de Couleurs

Système de couleurs complet basé sur l'identité visuelle CCB.

CCB Orange (Couleur Principale)

orange-900
#CC5500
orange-800
#E65C00
orange
#FF6900
orange-400
#FF8533
orange-300
#FFA366
orange-200
#FFC299
orange-100
#FFE0CC
orange-50
#FFF5EE

CCB Jaune (Couleur Secondaire)

yellow-900
#CC8400
yellow-800
#E69500
yellow
#FFAA00
yellow-400
#FFBB33
yellow-300
#FFCC66
yellow-200
#FFDD99
yellow-100
#FFEECC
yellow-50
#FFF8E6

Couleurs Sémantiques (Theme Colors)

Success

var(--theme-success)
#28A745

Utilisé pour les confirmations et actions réussies

Warning

var(--theme-warning)
#FFC107

Utilisé pour les avertissements et alertes

Danger

var(--theme-danger)
#DC3545

Utilisé pour les erreurs et suppressions

Info

var(--theme-info)
#66BBFF

Utilisé pour les informations générales (bleu clair)

Couleurs Neutres (Gris)

gray-900
#1A1A1A
gray-800
#2D2D2D
gray-700
#4A4A4A
gray-600
#6C757D
gray-500
#8C8C8C
gray-400
#ACACAC
gray-300
#D1D1D1
gray-200
#E9ECEF
gray-100
#F5F6FA
gray-50
#FAFBFC

Exemples d'Utilisation

En CSS

/* ✅ CORRECT - Utiliser les Theme Colors */
.my-button-primary {
    background-color: var(--theme-primary);
    color: var(--theme-text-inverse);
    border: 1px solid var(--theme-primary);
}

/* ✅ Couleurs sémantiques (theme) */
.success-text {
    color: var(--theme-success);
}

.error-text {
    color: var(--theme-danger);
}

/* ❌ INCORRECT - Ne pas utiliser design tokens directement */
.bad-example {
    background-color: var(--ccb-orange); /* ❌ Utiliser --theme-primary */
}

Avec les Classes Utilitaires

.bg-theme-primary .text-white - Fond orange CCB, texte blanc
.bg-theme-secondary - Fond jaune CCB
.bg-light - Fond gris clair
.bg-theme-success .text-white - Fond vert (succès)
.bg-theme-info - Fond bleu clair (info) 
<!-- ✅ CORRECT - Utiliser classes theme -->
<div class="bg-theme-primary text-white p-4">
    Fond orange CCB
</div>

<div class="bg-theme-secondary p-4">
    Fond jaune CCB
</div>

<p class="text-theme-success">
    Texte vert (succès)
</p>

Bonnes Pratiques

À Faire

  • Utiliser les Theme Colors (var(--theme-primary), pas var(--ccb-orange))
  • Utiliser les classes utilitaires (.bg-theme-primary)
  • Respecter la hiérarchie des couleurs
  • Vérifier le contraste (WCAG AA minimum)
  • Utiliser les couleurs sémantiques pour les états

À Éviter

  • Valeurs de couleurs en dur (#FF6900)
  • Utiliser les design tokens directement (var(--ccb-orange) au lieu de var(--theme-primary))
  • Trop de couleurs différentes sur une page
  • Contraste insuffisant (texte illisible)
  • Couleurs sémantiques pour autre chose que leur usage