ADR-045 ActifActive contract

Complétion de la famille de couleurs sémantiques `feedback`

DateDate
2026-06-05
DécideursDecision makers
Design System Lead

English summary: Completes the semantic.color.feedback family so every severity (danger, success, warning, info) exposes all three roles — text, subtle background, border — eliminating the last hardcoded feedback colors (including a previously-missing warning family) in site/build.js.

>

*The original French version follows below — preserved unaltered as the historical record.*


Contexte

Le *dogfooding* du site (catégorie A) a tokenisé les couleurs de texte feedback en dur (.icon-no, .icon-ok, audit pass/fail) le 2026-06-04. Restait une dette explicitement consignée au log : les fonds subtils, bordures et la palette warning encore en dur dans site/build.js :

Ces valeurs ne pouvaient pas être routées : le niveau sémantique n'exposait que danger, danger-subtle, success, info — il manquait les variantes subtle (fond) et border, ainsi que toute la famille warning.


Décision

Compléter la famille semantic.color.feedback pour qu'elle couvre les trois rôles de chaque sévérité — texte (-11), fond subtil (-3), bordure (-6) — sur les quatre sévérités standard : danger, success, warning, info.

Token sémantique ajoutéPrimitifRôle
feedback.danger-borderred.6Bordure danger
feedback.success-subtlegreen.3Fond subtil succès
feedback.success-bordergreen.6Bordure succès
feedback.warningorange.11Texte avertissement
feedback.warning-subtleorange.3Fond subtil avertissement
feedback.warning-borderorange.6Bordure avertissement
feedback.info-subtleblue.3Fond subtil information
feedback.info-borderblue.6Bordure information

danger, danger-subtle, success, info préexistaient — inchangés.

Le choix des échelons (-11 texte / -3 fond / -6 bordure) suit la convention Radix déjà en vigueur dans component.badge (ADR-034) et component.banner (ADR-042) : cohérence inter-composants garantie.


Accessibilité (WCAG 2.2)

PaireRatioVerdict
warning (#cc4e00) sur blanc4.51:1✅ AA texte normal
success (#18794e) sur success-subtle (#e6f6eb)paire Radix éprouvée (badge)
danger (#ce2c31) sur danger-subtle (#feebec)paire Radix éprouvée (badge)

Les tokens *-border (-6) sont non textuels (séparateurs/contours décoratifs) — exemptés du 4.5:1 (WCAG 1.4.3) ; ils ne portent jamais seuls l'information de sévérité (WCAG 1.4.1).


Périmètre

InclusExclu (évolution future)
8 nouveaux tokens sémantiques feedback (subtle/border + famille warning)Tokens de composant dédiés (restent dérivés au besoin)
Symétrie complète des 4 sévérités × 3 rôlesVariantes « solid » (fond plein + texte clair)
info-subtle / info-border ajoutés par symétrie (pas encore consommés sur le site)Nouvelles sévérités (ex. neutral)

info-subtle/info-border sont ajoutés pour la cohérence de la famille même s'ils ne sont pas encore consommés : la régularité du contrat prime, et un futur composant banner info ou une infobox du site les attend.


Alternatives rejetées

  • Garder les couleurs en dur dans build.js : viole tokens-system.md (jamais de valeur en

dur) et feedback_site_dogfooding.md (le site doit consommer le DS) — rejeté.

  • Créer des tokens de composant ad hoc (component.site.audit.*) : surdimensionné pour des

fonds/bordures de feedback génériques ; ces rôles appartiennent au niveau sémantique.

  • **Réutiliser *-subtle comme bordure** : un fond et une bordure n'ont pas le même contraste

cible ; -3 (fond) et -6 (bordure) restent distincts, conformément à Radix.


Conséquences

  • site/build.js route désormais toutes ses surfaces feedback via le niveau sémantique :

.rule-can/.rule-cannot, .do-section/.dont-section, .audit-badge, .audit-card--*. Dette du log du 2026-06-04 soldée, zéro couleur de feedback en dur subsistante.

  • La famille feedback est désormais symétrique et prévisible : tout agent peut router une

sévérité vers ses trois rôles sans inventer de valeur.

  • Gouvernance : ajout de tokens sémantiques → approbation Design System Lead (humain),

conforme à tokens-system.md. Aucun token primitif ni de composant modifié.