Project

General

Profile

Autre #71879

variables css pour les couleurs

Added by Frédéric Péters 2 months ago. Updated 22 days ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
30 November 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

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 Frédéric Péters, 30 November 2022 02:23 PM
0001-dark-mode-tests.patch (7.16 KB) 0001-dark-mode-tests.patch approche 2 (avec tentative de variation sombre) Frédéric Péters, 30 November 2022 02:23 PM
dark_mode_ff_generated.png (250 KB) dark_mode_ff_generated.png Paul Marillonnet, 17 January 2023 10:15 AM

Related issues

Related to Gadjo - Development #66666: utilisation des sprite-svg pour les icônesNouveau27 June 2022

Actions

History

#1

Updated by Agate Berriot 2 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).

#2

Updated by Paul Marillonnet 2 months ago

#3

Updated by Paul Marillonnet 2 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.

#4

Updated by Thomas Jund 2 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.

#5

Updated by Frédéric Péters 2 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.

#6

Updated by Paul Marillonnet 22 days 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.

Also available in: Atom PDF