Dette Design
Suivi d'avancement des composants à faire évoluer : https://culturegouv.sharepoint.com/:x:/s/ProgrammeVITAM/EViLBIZsfnJCuxgGUnOSS4EBDK8GvIneoahcChVuv0qeGQ?e=jWuBHd
Couleurs
Le material design en général, et Angular material en particulier, définit 10 déclinaisons de couleurs : 50, 100, 200, 300, 400, 500, 600, 700, 800 et 900 avec 500 correspondant à la couleur de base. Dans Vitam, nous n'utilisons pas toutes les déclinaisons de couleur. À voir si on doit tout de même toutes les définir/garder dans Figma et le code.
Lien Figma : https://www.figma.com/design/YHKmbbnI25ttjMLBUhXu3u/Vitam-UI-%F0%9F%A7%A9-Design-System?node-id=2110-478&m=dev
Lien Design Système code : https://int-ui.env.programmevitam.fr/design-system/colors
État des lieux Figma
- La couleur "Primary" ne correspond(ait) pas à "Primary — 500" alors que la règle est que la déclinaison "500" doit correspondre à la couleur de base
- Les déclinaisons 50, 100, 200, ..., 900 ne suivent (a priori) pas de règle déterministe : on ne peut pas déduire la couleur "Primary — 400" à partir de "Primary — 500" et d'une règle de calcul. Or, pour personnaliser le thème Vitam, on ne fournit que les couleurs de base et pas toutes leurs déclinaisons, ce qui nécessite d'avoir une règle de calcul automatique pour déterminer les déclinaisons
- La couleur "Lightly purple" est peut-être mal nommée (si cette couleur doit changer en fonction de la couleur primary, le "purple" peut ne pas correspondre à la couleur de thème choisie)
État des lieux code
- Les déclinaisons des couleurs (primary et secondary) sont automatiquement calculées à partir de la couleur de base (500) en ajoutant/retranchant 8 à la luminosité (en HLS) à chaque niveau plus/moins clair
- Le thème Vitam peut être configuré en modifiant les couleurs suivantes :
vitamui-primary,vitamui-secondary,vitamui-tertiary,vitamui-background,vitamui-header-footer - Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables
- Même si le thème Vitam n'utilise pas toutes les déclinaisons, les SVG (logos d'applications) semblent utiliser beaucoup de déclinaisons (primary : toutes les variantes | secondary : 100, 300, 400 500, 600, 900)
- La couleur tertiary ne semble pas être utilisée dans ses déclinaisons et ne semble être utilisée (peut-être ? dans certains cas ?) que pour afficher le
*pour les champs obligatoires - Les couleurs rouge, orange et vert n'ont pas de version déclinée
- La couleur "Lightly purple" existe bien mais ne semble pas être utilisée. Il existe aussi une couleur "--vitamui-background" qui est configurable et qui devrait surement correspondre à "Lightly purple" (mais ce n'est pas le cas visiblement)
Version d'Angular
La version actuelle d'Angular est la v17 avec angular-material en v16.
La montée de version d'Angular est bloquée par angular-material, lui-même bloqué car nos composants utilisent les composants "legacy" d'angular-material. Il faut donc migrer des composants "legacy" aux nouveaux composants afin de pouvoir tout débloquer.
Xelians nous a fait un retour d'expérience sur leur montée de version. Voici les captures d'écran de leurs tickets créés suite à la migration "legacy" vers nouveaux composants :
