« Dette Design » : différence entre les versions
Aller à la navigation
Aller à la recherche
(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 —... ») |
mAucun résumé des modifications |
||
| 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) | ||
Version du 25 septembre 2024 à 14:11
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
- 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)