Dette Design - Historique des versions

Mrobert le 18 novembre 2024 à 09:51

2024-11-18T09:51:00Z

← Version précédente		Version du 18 novembre 2024 à 09:51
Ligne 23 :		Ligne 23 :
	* Les couleurs rouge, orange et vert n'ont pas de version déclinée		* 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)		* 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 :
			{\| class="wikitable"
			\|+
			![[Fichier:CRO-616.png\|centré\|vignette]]
			![[Fichier:CRO-617.png\|centré\|vignette]]
			\|}

Mrobert le 1 octobre 2024 à 08:38

2024-10-01T08:38:35Z

← Version précédente		Version du 1 octobre 2024 à 08:38
Ligne 1 :		Ligne 1 :
			Suivi d'avancement des composants à faire évoluer : https://culturegouv.sharepoint.com/:x:/s/ProgrammeVITAM/EViLBIZsfnJCuxgGUnOSS4EBDK8GvIneoahcChVuv0qeGQ?e=jWuBHd

	== Couleurs ==		== 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.		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.

Mrobert : /* Couleurs */

2024-09-25T14:42:57Z

Couleurs

← Version précédente		Version du 25 septembre 2024 à 14:42
Ligne 1 :		Ligne 1 :
	== Couleurs ==		== 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.		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 ===		=== État des lieux Figma ===

Mrobert le 25 septembre 2024 à 14:11

2024-09-25T14:11:19Z

← Version précédente		Version du 25 septembre 2024 à 14:11
Ligne 11 :		Ligne 11 :

	* 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		* 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 : <code>vitamui-primary</code>, <code>vitamui-secondary</code>, <code>vitamui-tertiary</code>, <code>vitamui-background</code>, <code>vitamui-header-footer</code>
	* Les déclinaisons grises et additionnelles sont en dur dans le code et non configurables		* 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)		* 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)

Mrobert : Page créée avec « == 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. === État des lieux Figma === * La couleur "Primary" ne correspond(ait) pas à "Primary —... »

2024-09-25T14:08:48Z

Page créée avec « == 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. === État des lieux Figma === * La couleur "Primary" ne correspond(ait) pas à "Primary —... »

Nouvelle page

== 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.

=== É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
* 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 <code>*</code> 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)

Dette Design - Historique des versions

Mrobert le 18 novembre 2024 à 09:51

Mrobert le 1 octobre 2024 à 08:38

Mrobert : /* Couleurs */

Mrobert le 25 septembre 2024 à 14:11

Mrobert : /* Couleurs */