Parent : [[INDEX-WEB-UIUX]]

Web UI/UX - Couleurs en dur et inline styles non-tokenisés : inconsistance, maintenance impossible

Problème

Une IA génère du code avec des couleurs hexadécimales en dur dans chaque composant (style={{ background: '#1a1a1a' }}). Résultat : 47 nuances de gris différentes, impossible de changer le thème, maintenance cauchemardesque.

Symptômes

• style={{ color: '#888' }} répété 50 fois
• background: '#111' dans 20 fichiers différents
• border: '1px solid #333' partout
• Aucune variable CSS, aucun design system

Conséquences

• Inconsistance visuelle : chaque composant a sa propre palette
• Maintenance impossible : changer le fond = modifier 50 fichiers
• Pas de dark/light mode : les couleurs sont hardcodées
• A11y cassée : ratios de contraste aléatoires
• Bundle CSS plus gros : pas de réutilisation

Exemple incorrect (NE PAS FAIRE)

// ❌ ANTI-PATTERN : couleurs en dur partout
function Card() {
  return (
    <div style={{ background: '#1a1a1a', border: '1px solid #333', padding: '16px' }}>
      <h2 style={{ color: 'white', fontSize: '16px' }}>Titre</h2>
      <p style={{ color: '#888', fontSize: '14px' }}>Description</p>
      <button style={{ background: '#e5191a', color: 'white', padding: '8px 16px' }}>
        Action
      </button>
    </div>
  )
}

function AnotherCard() {
  return (
    <div style={{ background: '#151515', border: '1px solid #2a2a2a', padding: '16px' }}>
      {/* Même intention, couleurs DIFFÉRENTES */}
    </div>
  )
}

Solution (pattern associé)

Voir KNOW-PAT-111 — Dark Theme CSS Variables Design System.

Règles immédiates :

1. 0 couleur hexadécimale dans les composants (sauf l'accent dans :root)
2. Toujours var(--token) : var(--surface), var(--text-2), var(--border)
3. Un seul :root dans globals.css qui définit tout
4. Utilities CSS : .surface, .card, .btn-primary qui utilisent les tokens

// ✅ CORRECT : utilise les tokens du design system
function Card() {
  return (
    <div className="surface rounded-[6px] p-4">
      <h2 style={{ color: 'var(--text)' }} className="text-base font-bold">Titre</h2>
      <p style={{ color: 'var(--text-2)' }} className="text-sm">Description</p>
      <button className="btn-primary">Action</button>
    </div>
  )
}

Détection

Rechercher dans le codebase :

style=.*#[0-9a-f]{3,6}
background:.*#[0-9a-f]
color:.*#[0-9a-f]
border:.*#[0-9a-f]

Comptez les occurrences. Plus de 10 couleurs différentes = anti-pattern confirmé.

Références

• KNOW-PAT-111 — Dark Theme CSS Variables Design System
• ProjectAlpha/globals.css (exemple correct)