Colin Maudry
0cfafedeef
Override CSS scopé aux classes .btn-* (jamais les variables --bs-* racine,
donc alertes/badges inchangés) pour remplacer les couleurs dérivées du thème
Simplex (danger mauve, secondary gris illisible). Trois rôles : la couleur
encode la fonction, le remplissage l'emphase.
- primary terracotta : action principale validante
- secondary gris ardoise : action neutre/alternative (lisible)
- danger rouge #c0392b : destructif (outline par défaut, plein en confirmation)
Audit + conformation des usages :
- compte_admin « Supprimer mon compte » : primary outline -> danger outline
- compte_abonnement « Me désabonner » : outline-primary -> outline-danger
- compte_abonnement « Je suis sûr » : outline-primary -> danger plein
Tests : ajout tests/test_boutons.py (garde de non-régression du primary).
conftest : implémente le hook pytest_setup_options (--headless=new) ; la
fixture chrome_options n'était jamais utilisée par dash.testing, d'où les
fenêtres Chrome qui s'ouvraient pendant les tests.
Specs et plan : docs/superpowers/{specs,plans}/2026-06-30-charte-boutons*.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
125 lines
6.8 KiB
Markdown
125 lines
6.8 KiB
Markdown
# Charte graphique des boutons — design
|
|
|
|
Date : 2026-06-30
|
|
Statut : validé (charte), à implémenter
|
|
|
|
## Problème
|
|
|
|
Le thème Bootstrap **Simplex** dérive ses couleurs contextuelles à partir de la
|
|
couleur primaire. La primaire de decp.info étant un terracotta chaud
|
|
(`rgb(179, 56, 33)` = `#b33821`), Simplex calcule un **`danger` mauve** (`#9b479f`)
|
|
et un **`secondary` gris très clair**. Résultat constaté sur `/compte/vues` :
|
|
|
|
- bouton **Renommer** (`color="secondary", outline=True`) : gris clair sur fond
|
|
blanc, quasi illisible ;
|
|
- bouton **Supprimer** (`color="danger", outline=True`) : mauve, sans rapport
|
|
sémantique avec une action destructive.
|
|
|
|
Les couleurs Simplex ne servent donc pas la lisibilité ni la sémantique. Il faut
|
|
**redéfinir les styles `primary`, `secondary` et `danger`** des boutons et établir
|
|
une charte claire où **chaque style a une fonction**.
|
|
|
|
## Principe directeur
|
|
|
|
**La couleur encode la fonction (sémantique) ; le remplissage encode l'emphase.**
|
|
|
|
Trois rôles seulement. Le code applicatif continue d'écrire
|
|
`color="primary|secondary|danger"` + `outline=True|False` exactement comme avant —
|
|
le CSS ne fait que restyler ces classes. Aucun changement d'API, aucun helper.
|
|
|
|
## La charte
|
|
|
|
| Style (dbc) | Fonction | Apparence |
|
|
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
|
|
| `primary` plein | **L'**action principale validante d'un contexte — idéalement une par écran (Rechercher, Enregistrer, S'abonner, Envoyer) | terracotta plein `#b33821`, texte blanc (dégradé existant conservé) |
|
|
| `primary` + `outline` | action affirmative de moindre emphase (quand le plein serait trop lourd) | bord + texte terracotta, fond transparent ; survol = plein terracotta texte blanc |
|
|
| `secondary` + `outline` | action **neutre / alternative** (Renommer, Annuler, navigation) | gris ardoise — bord `#5a6570`, texte `#344054`, fond transparent ; survol = fond gris très clair |
|
|
| `danger` + `outline` | action **destructive** dans une liste ou le flux courant (Supprimer, Se désabonner) | rouge `#c0392b` — bord + texte, fond transparent ; survol = plein rouge texte blanc |
|
|
| `danger` plein | **confirmation finale** destructive (dans une modale) | rouge plein `#c0392b`, texte blanc |
|
|
|
|
### Règles d'usage
|
|
|
|
1. **Une seule action `primary` pleine par contexte.** Tout le reste est `outline`
|
|
ou `secondary`.
|
|
2. **Le destructif est `outline` par défaut** ; seul le bouton de confirmation
|
|
finale (modale) est plein rouge.
|
|
3. **`secondary` est le défaut neutre** — remplace les boutons gris clair
|
|
illisibles sur fond blanc.
|
|
|
|
## Palette
|
|
|
|
Quatre valeurs ajoutées/confirmées ; le reste hérité de Simplex.
|
|
|
|
```
|
|
terracotta #b33821 primary (chaud, marque) — existant
|
|
ardoise texte #344054 / bord #5a6570 secondary (froid, neutre)
|
|
rouge #c0392b danger (chaud saturé, distinct du terracotta)
|
|
disabled bord #ccc / texte #666 état désactivé — existant, conservé
|
|
```
|
|
|
|
Le rouge `#c0392b` est volontairement plus saturé et légèrement plus froid que le
|
|
terracotta `#b33821`, pour rester distinguable à côté d'un bouton primaire.
|
|
|
|
## Périmètre
|
|
|
|
### Dans le périmètre
|
|
|
|
- Override CSS des classes **boutons uniquement** dans `src/assets/css/style.css` :
|
|
- `.btn-primary` (harmonisation du dégradé déjà présent)
|
|
- `.btn-outline-primary`
|
|
- `.btn-secondary` et `.btn-outline-secondary`
|
|
- `.btn-danger` et `.btn-outline-danger`
|
|
- états `:hover`, `:focus-visible`, `:disabled` correspondants
|
|
- Audit des boutons existants (~46 occurrences `color=…`, dont 8 `outline=True`)
|
|
pour corriger les cas qui ne respectent pas la charte, en particulier :
|
|
- `src/saved_views/ui.py` : Renommer (`secondary`+outline), Supprimer
|
|
(`danger`+outline) — déjà conformes en intention, à revalider visuellement ;
|
|
- vérifier qu'aucun écran n'a deux `primary` pleins concurrents ;
|
|
- vérifier que les confirmations destructives en modale sont en `danger` plein
|
|
et les déclencheurs en liste en `danger` outline.
|
|
|
|
### Hors périmètre (inchangé)
|
|
|
|
- Les variables racine `--bs-primary`, `--bs-danger`, `--bs-secondary`, etc. **ne
|
|
sont pas modifiées.** L'override cible exclusivement les sélecteurs `.btn-*`.
|
|
Conséquence : `dbc.Alert`, badges, `text-danger`, etc. conservent la sémantique
|
|
Simplex.
|
|
- `info` / `success` / `warning` : utilisés quasi exclusivement par des
|
|
`dbc.Alert` (bleu / vert / ambre). On garde la sémantique Simplex pour les
|
|
alertes. Aucun bouton `info`/`success`/`warning` n'est restylé.
|
|
- `light` (1 bouton, navbar `src/app.py`) et `link` (1 bouton,
|
|
`src/saved_views/ui.py`) : laissés tels quels, hors charte des trois rôles.
|
|
|
|
## Approche d'implémentation
|
|
|
|
**Retenue : CSS-only + audit.**
|
|
|
|
Override des classes `.btn-*` dans `style.css`, puis passe de revue des boutons
|
|
existants. Minimal, sans churn d'API, respecte le fonctionnement de
|
|
`dash-bootstrap-components`.
|
|
|
|
**Écartée : helper Python encapsulant `dbc.Button`.** Plus invasif (toucher tous
|
|
les appels), aucun bénéfice ici puisque la charte se mappe exactement sur les
|
|
`color`/`outline` natifs.
|
|
|
|
## Détails CSS à respecter
|
|
|
|
- Scoper aux sélecteurs `.btn-*` pour ne pas toucher alertes/badges.
|
|
- Gérer explicitement `:hover`, `:focus-visible` (anneau de focus visible —
|
|
accessibilité clavier) et `[disabled]`.
|
|
- Conserver le `border-radius: 3px` et la typographie (`Inter`, poids 400) déjà en
|
|
place pour `.btn-primary`.
|
|
- Attention à la spécificité : le `.btn-primary` actuel est ciblé via
|
|
`button.btn.btn-primary`. Aligner la spécificité des nouvelles règles pour
|
|
éviter qu'elles s'annulent avec celles de `bootstrap.simplex.css`.
|
|
- Respecter `prefers-reduced-motion` si des transitions de survol sont ajoutées.
|
|
|
|
## Critères de réussite
|
|
|
|
- Sur `/compte/vues` : « Renommer » lisible (gris ardoise) et « Supprimer »
|
|
clairement rouge, plus aucun mauve ni gris clair illisible.
|
|
- Les trois rôles sont visuellement distincts (terracotta / ardoise / rouge) et
|
|
cohérents sur toutes les pages.
|
|
- Les `dbc.Alert` (info/success/warning) sont inchangées.
|
|
- Focus clavier visible sur tous les boutons.
|