Pour rendre le DS futur proof, permettre de + facilement y injecter des couleurs.
Historiquement, le DS a été pensé sur une palette de couleur précise -> Ici
Pour le back office, on est globalement parti sur du bleu, avec du blue.500 en couleur primaire, qu'on retrouve un peu partout en dur dans le code. Par exemple, le code de style du <Button />, actuellement :
C'est pas optimal, ça laisse aucune possibilité de personnalisation. En plus de ça, pour adapter le DS côté client, on peut pas se limiter à une palette de couleur, puisque certains (la majorité) voudront une charte graphique qui leur est spécifique. J'ai donc ajouté, dans le fichier de couleurs, des valeurs supplémentaires, pour tester un fonctionnement différent :
Par défaut, ces valeurs reprennent celles autour du blue.500, mais ça me permet, dans le code du bouton vu plus haut par exemple, d'avoir ça :
Du coup, lorsque l'on injecte le thème, on a juste à remplacer ces couleurs si besoin, et ça donne un bouton totalement personnalisable :
Techniquement, ça fonctionne, maintenant les questions que ça soulève :
Quid des teintes de bleues différentes, sur les spotIcons où l'uploader par exemple. Actuellement en dur, on a pas assez de couleur dans l'actuelle page apparence de la plateforme pour injecter tant de couleurs différentes.
Solutions temporaires proposées :
1 . Laisser les compo tel quel dans un premier temps, je sais même pas s'ils seront tous utilisés côté frontend.
2 . Créer les teintes dans le code à partir de la couleur primaire. On peut facilement créer des utiliaires lighten() ou darken(), ce serait chouette !
3 . Redesign plus simpliste de certains compos.
Quid des couleurs autre que la couleur primaire ? Les couleurs warning , success , danger , qui sont actuellement dans la palette de couleurs, en jaune, vert et rouge. On peut les laisser comme ça dans un premier temps, à voir ce qu'on fait
La page apparence. À terme ce serait cool de la refaire, on pourrait avoir une preview live du look des boutons, un truc assez moderne, je crois que Sylvain a déjà commencé à travailler dessus.
Voilà pour moi, dans tous les cas le fonctionnement existant n'est pas cassé, la palette de couleur est toujours utilisable, et comme j'ai laissé le blue.500 en primary par défaut, on prend pas de risque de casser le BO. Il va donc falloir dans un futur proche arbitrer les couleurs à utiliser, et on aura un front 100% moderne 100% customizable (fin on aura de quoi le faire, c'est différent)
:tophat: What? Why?
Pour rendre le DS futur proof, permettre de + facilement y injecter des couleurs.
Historiquement, le DS a été pensé sur une palette de couleur précise -> Ici
Pour le back office, on est globalement parti sur du bleu, avec du
blue.500en couleur primaire, qu'on retrouve un peu partout en dur dans le code. Par exemple, le code de style du<Button />, actuellement :C'est pas optimal, ça laisse aucune possibilité de personnalisation. En plus de ça, pour adapter le DS côté client, on peut pas se limiter à une palette de couleur, puisque certains (la majorité) voudront une charte graphique qui leur est spécifique. J'ai donc ajouté, dans le fichier de couleurs, des valeurs supplémentaires, pour tester un fonctionnement différent :
Par défaut, ces valeurs reprennent celles autour du
blue.500, mais ça me permet, dans le code du bouton vu plus haut par exemple, d'avoir ça :Du coup, lorsque l'on injecte le thème, on a juste à remplacer ces couleurs si besoin, et ça donne un bouton totalement personnalisable :
J'ai modifié le style de la plupart des versions primaires des composants existants -> Exemple de rendu ici (couleurs modifiables à la volée dans les controls)
Techniquement, ça fonctionne, maintenant les questions que ça soulève :
Quid des teintes de bleues différentes, sur les spotIcons où l'uploader par exemple. Actuellement en dur, on a pas assez de couleur dans l'actuelle page apparence de la plateforme pour injecter tant de couleurs différentes. Solutions temporaires proposées : 1 . Laisser les compo tel quel dans un premier temps, je sais même pas s'ils seront tous utilisés côté frontend. 2 . Créer les teintes dans le code à partir de la couleur primaire. On peut facilement créer des utiliaires lighten() ou darken(), ce serait chouette ! 3 . Redesign plus simpliste de certains compos.
Quid des couleurs autre que la couleur primaire ? Les couleurs
warning,success,danger, qui sont actuellement dans la palette de couleurs, en jaune, vert et rouge. On peut les laisser comme ça dans un premier temps, à voir ce qu'on faitLa page apparence. À terme ce serait cool de la refaire, on pourrait avoir une preview live du look des boutons, un truc assez moderne, je crois que Sylvain a déjà commencé à travailler dessus.
Voilà pour moi, dans tous les cas le fonctionnement existant n'est pas cassé, la palette de couleur est toujours utilisable, et comme j'ai laissé le
blue.500en primary par défaut, on prend pas de risque de casser le BO. Il va donc falloir dans un futur proche arbitrer les couleurs à utiliser, et on aura un front 100% moderne 100% customizable (fin on aura de quoi le faire, c'est différent):pushpin: Related Issues
Le frontend catastrophique
:clipboard: Technical Specification
:art: Chromatic links
Chromatic PR Storybook
:camera_flash: Screenshots