[DSFR] Création d'un thème (de couleurs) compatible avec le dsfr

[lucaa]

L'objectif est de fournir le cadre pour avoir des décorations compatibles DSFR pour pouvoir obtenir un résultat similaire aux mockups de https://www.figma.com/file/kG2znZqEzySDPUxiWbrEme/JDMA?node-id=49%3A26243 .

Plus précisément, l'objectif est de créer un thème (de couleurs) pour XWiki qui fonctionne comme une surcouche à bootstrap et XWiki et décore les éléments suivants, le plus proche possible du dsfr (l'objectif est de décorer le markup standard bootstrap, pas de demander du markup spécifique) :

• couleurs pour: texte simple, des titres, des liens, des menus, des fonds d'écran
• style de texte - notamment les tailles des titres
• boutons: couleurs et forme

[lucaa]

En terme d'implémentation, idéalement ce thème devrait être générique et isolé du reste des styles de la plateforme, pour pouvoir être contribué comme une contribution à la plateforme XWiki et réutilisé.

On aura potentiellement besoin de déplacer les styles courants spécifiques à l'observatoire ailleurs que dans la color thème, on peut les mettre dans la skin.

[lucaa]

Idéalement, l'implémentation de #1010 devrait / pourrait être également incluse dans ce thème - à prendre en compte et à faire si la solution est raisonnable.

[clemdee]

Ce qui a été fait :

• séparation des styles spécifique au DSFR et des styles spécifiques au wikidemarches
• modifications des couleurs du thèmes à celle correspondantes du DSFR
• modification du style des boutons
  • les variants bootstrap des boutons (success, danger, etc.) prennent tous le style "primary" du DSFR
  • le bouton par défaut bootstrap prend le style "secondary" du DSFR
  • fix des bords arrondis à carrés
  • fix du fond gradient en fond coloré simple
• modification de la taille des titres au DSFR
  • Le titre du document garde la même taille qu'un titre h1 classique
• mise en place des polices via ssx déployé globalement sur le wiki
• mise en place de l'ombre en dessous du header directement dans le style du DSFR
• mise en place du logo RF par défaut
  • certains styles du header ont été gardé dans le DSFRTheme afin de garantir un affichage correct du logo dans le header
• le style outline par défaut du focus a été ajusté aux couleurs du dsfr (pas les conditions d’apparition)

Il n'existe qu'une seule règle less du WikiDemarchesTheme qui modifie une variable bootstrap, à propos du breakpoint de collapse de la navbar. Cette règle a été gardée dans le DSFRTheme, car on ne pourrait plus modifier cette variable depuis un SSX, mais aussi parce que le breakpoint modifié correspond au breakpoint spécifié par le DSFR (et qu'il est donc cohérent de laisser la règle ici).

A noter que les pièces jointes présentes dans le WikiDemarchesTheme ont été déplacées dans uicomponents/, celui-ci n'étant plus utilisée sur le wiki.

[clemdee]

Ce qu'il reste à faire :

• rajouter un style "underline" aux liens, qui sont maintenant de la même couleur que le texte normal
  • s'assurer que cela ne casse rien aux styles déjà existants, notamment le footer / header et autres pages stylisées
• doit-on modifier les marges des titres aux valeurs spécifiées par le DSFR?

[lucaa]

mise en place de l'ombre en dessous du header directement dans le style du DSFR

Je pense que cette modification casse l'affichage sur mobile pour le formulaire d'avis, il n'y a plus d'espace entre le header et les titres des pages parce-qu'il y a une règle spéciale sur le formulaire d'avis qui enleve le padding de document-info.

[clemdee]

Bien vu, c'est fixé !

[AnthonyBrunelli]

@lucaa @ugodtn on est d'accord que sur ce ticket, rien en attente de notre côté?

[AnthonyBrunelli]

Confirmé par Ugo, rien de notre côté.

[clemdee]

À propos des liens à souligner, cela me semble assez compliqué à mettre en place, car la majorité des balises <a> utilisées un peu partout dans le wiki partent du principe que les liens ne sont pas soulignés par défaut. Et donc appliquer un style "souligné" par défaut pour les liens casserait le design à de nombreux endroits dans le wiki (entre autre: le footer, la navbar, mais aussi des boutons et onglets un peu partout, ...)

Du coup si on veut vraiment souligner les liens, il faudrait aller corriger à chaque endroit où on voit que c'est mal stylisé, en étant sûr qu'on en oublie pas (ce que me semble assez fastidieux). Quel est ton avis à propos de ça @lucaa ?

[lucaa]

alors, pour les liens la situation courante n'est pas acceptable. Ne pas avoir aucun marker pour les liens par rapport au texte simple sauf au passage de la souris rend l'utilisation très complexe.

Nous avons donc 2 choix et il faudra en choisir un, ne rien changer n'est pas une possibilité :) :

• la solution de marquage dsfr
• une autre solution - par exemple, la solution XWiki (qui vient de bootstrap?) qui est la différence par couleur avec soulignage au passage de la souris

Quel est ton avis à propos de ça @lucaa ?

peux-tu essayer une décoration uniquement dans #xwikicontent , qui est le 'corps' d'une page. Il se peut qu'il y ait des effets de bord aussi (e.g. pour les liens-boutons) pour lesquelles les surcouches de styles supposent qu'il n'y a pas de décoration, mais au moins il y aura moins à corriger...

[lucaa]

la solution de marquage dsfr

en fait, dans dsfr, la dernière fois que j'ai vérifié il y avait 2 types de liens, un dans le texte ("inline") et l'autre pour les liens "tout seuls", comme les boutons ou les éléments de navigation .

Comment les 2 sont différenciés dans dsfr? car finalement notre problème est un peu du même type, on veut décorer que les liens du texte...

[clemdee]

Comment les 2 sont différenciés dans dsfr?

Il n'y a aucune différentiation de liens "inline" ou "tout seuls", il y a juste la possibilité de rajouter une classe à la balise a pour modifier son affichage (par exemple 'fr-raw-link' ou 'fr-reset-link'), mais l'affichage par défaut de tous les liens c'est surligné

[clemdee]

Je crois avoir trouvé une solution pas trop mal pour souligner seulement les liens qui nous intéresse: Puisque les seuls liens qu'on ne veut pas souligner à l'intérieur d'une page c'est ceux qui sont utilisés comme des boutons (merci bootstrap), il suffit d'appliquer le style soulignés à tous les a sauf ceux qui correspondent à ce critère:

#xwikicontent {
  a:not(.btn):not([type="button"]):not([role="button"]):not(ul.nav > li > a) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

C'est ce que j'ai committé pour l'instant, de ce que j'ai pu voir rien n'est cassé, ça à l'air de bien marcher

[lucaa]

:not(ul.nav > li > a)

pas besoin de ça vu que t'as déjà mis #xwikicontent. Normalement y'a pas de ul.nav dans le contenu (t'as trouvé un cas spécial ici?)

[lucaa]

aussi @ClemDee vérifie, stp, le support des selecteurs de la règle ci-dessus dans les navigateurs (:not et [condition]) dans les navigateurs.

[clemdee]

pas besoin de ça vu que t'as déjà mis #xwikicontent. Normalement y'a pas de ul.nav dans le contenu (t'as trouvé un cas spécial ici?)

oui, c'est pour le system de tabs de bootstrap

[clemdee]

aussi @ClemDee vérifie, stp, le support des selecteurs de la règle ci-dessus dans les navigateurs (:not et [condition]) dans les navigateurs.

Oui c'est bon, c'est pour ça d'ailleurs que j'ai écrit mes exclusions à la suite (:not(...):not(...)) plutôt que d'utiliser des virgules à l'intérieur (:not(..., ...)), car cette dernière syntaxe n'est pas supportée par IE11 !

[clemdee]

Du coup je ferme le ticket!

Ce qui a été fait:

• customisation des styles boostraps existants afin de les rapprocher au maximum des styles dsfr (pour les theme de couleurs, la police, les boutons)
• séparation des styles dsfr aux styles spécifiques de l'instance, afin d'avoir un Theme DSFR réutilisable pour XWiki