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 ?
Fichiers
| 0001-misc-declare-css-variables-for-main-colours.patch (5,21 ko) 0001-misc-declare-css-variables-for-main-colours.patch | approche 1 | ||
| 0001-dark-mode-tests.patch (7,16 ko) 0001-dark-mode-tests.patch | approche 2 (avec tentative de variation sombre) | ||
| dark_mode_ff_generated.png (250 ko) dark_mode_ff_generated.png |
Demandes liées
Révisions associées
Historique
Mis à jour par A. Berriot il y a plus d'un an
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).
Mis à jour par Paul Marillonnet il y a plus d'un an
- Lié à Development #66666: utilisation des sprite-svg pour les icônes ajouté
Mis à jour par Paul Marillonnet il y a plus d'un an
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.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus d'un an
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.
Mis à jour par Frédéric Péters il y a plus d'un an
(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.
Mis à jour par Paul Marillonnet il y a plus d'un an
- Fichier dark_mode_ff_generated.png dark_mode_ff_generated.png ajouté
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.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a 12 mois
- Tracker changé de Autre à Development
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a 12 mois
Je relance ce ticket, avoir un nuancier couleur partager entre les diff apps est une étape vers plus de joliesse.
Mis à jour par Robot Gitea il y a 12 mois
- Statut changé de Nouveau à En cours
- Assigné à mis à Thomas Jund (congés, retour le 29/04)
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
Mis à jour par Frédéric Péters il y a 12 mois
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.
Mis à jour par Frédéric Péters il y a 12 mois
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.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a 12 mois
- Lié à Development #77630: Simplifier le CSS des boutons en utilisant les vars CSS ajouté
Mis à jour par Robot Gitea il y a 11 mois
- Statut changé de Solution proposée à Solution validée
Agate Berriot (aberriot) a approuvé une pull request sur Gitea concernant cette demande :
Mis à jour par Robot Gitea il y a 11 mois
- Statut changé de Solution validée à 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
Mis à jour par Transition automatique il y a 11 mois
- Statut changé de Résolu (à déployer) à Solution déployée
css: create colors chart file (#71879)