Project

General

Profile

Development #71879

variables css pour les couleurs

Added by Frédéric Péters over 1 year ago. Updated about 1 year ago.

Status:
Fermé
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
Related to Gadjo - Development #77630: Simplifier le CSS des boutons en utilisant les vars CSSFermé15 May 2023

Actions

Associated revisions

Revision a2b2605d (diff)
Added by Frédéric Péters about 1 year ago

css: create colors chart file (#71879)

History

#1

Updated by A. B. over 1 year 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 over 1 year ago

#3

Updated by Paul Marillonnet over 1 year 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 over 1 year 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 over 1 year 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 over 1 year 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.

#7

Updated by Thomas Jund about 1 year ago

  • Tracker changed from Autre to Development
#8

Updated by Thomas Jund about 1 year ago

Je relance ce ticket, avoir un nuancier couleur partager entre les diff apps est une étape vers plus de joliesse.

#9

Updated by Robot Gitea about 1 year 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 :

#10

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

#11

Updated by Thomas Jund about 1 year ago

Pourtant une bonne base :(

#12

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

#13

Updated by Thomas Jund about 1 year ago

  • Related to Development #77630: Simplifier le CSS des boutons en utilisant les vars CSS added
#14

Updated by Robot Gitea about 1 year ago

  • Status changed from En cours to Solution proposée
#15

Updated by Robot Gitea about 1 year ago

  • Status changed from Solution proposée to Solution validée

Agate Berriot (aberriot) a approuvé une pull request sur Gitea concernant cette demande :

#16

Updated by Robot Gitea about 1 year 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 :

#17

Updated by Transition automatique about 1 year ago

  • Status changed from Résolu (à déployer) to Solution déployée
#18

Updated by Transition automatique 12 months ago

Automatic expiration

Also available in: Atom PDF