Development #71879
variables css pour les couleurs
0%
Description
Dans l'idée de terrain d'essai avant de pouvoir l'imaginer pour le front, (parce qu'on exige depuis un certain temps un navigateur plus récent pour le backoffice, parce qu'il y a davantage de contrôle possible aussi, et des retours plus faciles),
Dans l'idée que ça éviterait de répéter/hardcoder des couleurs dans les différents modules quand on y ajoute des styles particuliers, exemple border: 1px solid #386ede; dans chrono),
Dans l'idée aussi que cela pourrait permettre pour le backoffice une alternative "sombre" que certaines personnes préfèrent,
Je me demandais comment introduire l'utilisation de variables CSS dans Gadjo.
Jusqu'à présent j'ai réfléchi à deux approches, exposées basiquement :
1/ on définit $primary-color comme étant var(--primary-color); ça a l'avantage immédiat de s'appliquer partout, le code qui faisait border-color: $primary-color; ne change pas.
$_primary_color: #386ede;
$_secondary_color: #00d6eb;
html {
--primary-color: #{$_primary_color};
--secondary-color: #{$_secondary_color};
}
$primary-color: var(--primary-color);
$secondary-color: var(--secondary-color);
2/ on ne touche pas à $primary-color et cie, on remplace de manière progressive les usages,
html {
--primary-color: #{$primary-color};
--secondary-color: #{$secondary-color};
}
[...]
background: var(--secondary-color);
[...]
color: var(--primary-color);
J'attache des commits associés à ces deux approches mais il ne faut pas s'arrêter dessus, il faut peut-être une troisième approche, je n'ai pas d'expérience particulière ici.
Qu'en pensez-vous ?
Files
| 0001-misc-declare-css-variables-for-main-colours.patch (5.21 KB) 0001-misc-declare-css-variables-for-main-colours.patch | approche 1 | ||
| 0001-dark-mode-tests.patch (7.16 KB) 0001-dark-mode-tests.patch | approche 2 (avec tentative de variation sombre) | ||
| dark_mode_ff_generated.png (250 KB) dark_mode_ff_generated.png |
Related issues
Associated revisions
History
Updated by Agate Berriot 10 months ago
Je préfère nettement l'approche 2 qui retire des choses de SCSS et passe sur du CSS simple. En plus de ça, en faisant directement un $primary-color: var(--x), ça risque de casser par endroit si on appelle des fonctions scss sur les valeurs en question, par exemple darken($primary-color).
Updated by Paul Marillonnet 10 months ago
- Related to Development #66666: utilisation des sprite-svg pour les icônes added
Updated by Paul Marillonnet 10 months ago
Je me permets de lier à #66666 qui m’a l’air d’être une étape intéressante pour parvenir à ce que tu décris ici, l’idée étant qu’on s’épargnerait la régénération d’icônes png à la bonne couleur dès que cette dernière est redéfinie.
Updated by Thomas Jund 10 months ago
Je préfère aussi la 2e solution proposée.
Dans gadjo ne pourrait-on pas supprimer carrement les vars sass (pour les couleurs) ? je ne vois pas trop à quoi elles serviraient encore.
Updated by Frédéric Péters 10 months ago
(malgré la numérotation l'approche 2 était ma première direction, donc ça me va bien qu'on s'accorde dessus).
Dans gadjo ne pourrait-on pas supprimer carrement les vars sass (pour les couleurs) ? je ne vois pas trop à quoi elles serviraient encore.
Sur _forms.scss il y avait un avantage à pouvoir faire un diff entre publik-base-theme et gadjo pour s'assurer que ça ne s'éloigne pas trop, et plus ou moins rapidement pouvoir rapatrier du code de l'un dans l'autre. Je regarde maintenant et ça serait par exemple utile pour certaines adaptations autour du select2 multiple. Mais je vois aussi que ça s'est quand même déjà beaucoup éloigné, c'est moins proche que ce que j'imaginais.
Aussi, ça n'exclut pas les formes hybrides, garder dans _forms.scss un $button-color, avec var(--whatever) comme valeur, tout en utilisant directement les variables CSS dans gadjo.scss et autres fichiers.
Aussi (alternatif), on pourrait se dire que ça n'est qu'un temps, que le _forms.scss de publik-base-theme aussi basculerait vers les variables CSS, que la proximité de code reviendrait à ce moment.
Updated by Paul Marillonnet 8 months ago
Frédéric Péters a écrit :
Dans l'idée aussi que cela pourrait permettre pour le backoffice une alternative "sombre" que certaines personnes préfèrent,
À noter que le mode sombre ne requiert peut-être pas d’avoir tout ça, et pourrait faire l’objet d’un ticket à part. On constate par exemple qu’en utilisant une extension de navigateur lambda sans trop d’intelligence et sans règle spécifique pour le BO Publik, le rendu est déjà utilisable assez directement.
Updated by Thomas Jund 5 months ago
Je relance ce ticket, avoir un nuancier couleur partager entre les diff apps est une étape vers plus de joliesse.
Updated by Robot Gitea 5 months ago
- Status changed from Nouveau to En cours
- Assignee set to Thomas Jund
Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/gadjo/pulls/20
- Titre : WIP: colors chart (via css vars)
- Modifications : https://git.entrouvert.org/entrouvert/gadjo/pulls/20/files
Updated by Frédéric Péters 5 months ago
Je ne partirais pas du patch de test que j'attachais, histoire de ne pas mélanger à l'histoire le code pour une variante sombre.
Updated by Frédéric Péters 5 months ago
Ok oui peut-être, mais je veux dire qu'il faudrait éliminer la partie "mode sombre", que celle-ci parte dans son propre ticket, concentrer celui-ci uniquement sur le bénéfice d'avoir des variables css.
Updated by Thomas Jund 5 months ago
- Related to Development #77630: Simplifier le CSS des boutons en utilisant les vars CSS added
Updated by Robot Gitea 4 months ago
- Status changed from Solution proposée to Solution validée
Agate Berriot (aberriot) a approuvé une pull request sur Gitea concernant cette demande :
Updated by Robot Gitea 4 months ago
- Status changed from Solution validée to Résolu (à déployer)
Thomas Jund (tjund) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://git.entrouvert.org/entrouvert/gadjo/pulls/20
- Titre : colors chart (via css vars)
- Modifications : https://git.entrouvert.org/entrouvert/gadjo/pulls/20/files
Updated by Transition automatique 4 months ago
- Status changed from Résolu (à déployer) to Solution déployée
css: create colors chart file (#71879)