text-primary avec white background...

[damiengontier]

Bonjour,

La classe text-primary ajoute un fond de couleur blanche alors que text-muted ne le fait pas par exemple.
Me semble que l'idée de la classe est de changer la couleur de font, pas celle de background

[ffoodd]

Bonjour,

C’est volontaire et livré en 4.4.0, comme indiqué dans le changelog, dans la section Orange Brand Digital Guidelines → Color palette.

C’est un choix assumé dans Boosted (qui se démarque de Bootstrap, sur ce point parmi d’autres) pour garantir un niveau de contraste suffisant, inciter à utiliser ces classes avec parcimonie, mais aussi respecter la charte graphique. Le tout est documenté dans la page dédiée aux utilitaires de couleurs. Les couleurs supports sont un couple couleur et arrière-plan nécessairement — à l’exception notable du orange qui n’est pas le même selon que son arrière-plan est blanc ou noir…

Par ailleurs dans la version en cours (4.4.1), un certain nombre d’utilitaires sont supprimés, n’étant pas conformes à la charte. La documentation de la version en cours concernant les couleurs est ici. La palette disponible sera d’ailleurs documentée dans la page dédiée à la marque.

Cependant ce retour est très pertinent (merci) car je m’aperçois que deux utilitaires m’ont échappé : .text-muted et .text-body qui sont gérées « en dur » (et .text-muted devrait utiliser un autre gris quand son arrière-plan est noir, à l’instar du orange).

Je boucle à nouveau avec @PigeardSylvain notamment pour ajuster tout ça, tout nouveau commentaire est évidemment bienvenu !

[damiengontier]

D'accord, ça parait cohérent.

La raison pour laquelle ça m'a choqué, c'est que du coup quand il se trouve dans un élément qui à un fond différent en :hover, bah le fond du text primary reste blanc.

Par exemple:
Les tab/onglets (en utilisant ngb), j'en ai un dont le title est en primary pour indiquer qu'il est plus important que les autres, et des muted
Quand je passe dessus avec la souris ça rend pas terrible d'avoir un onglet qui devient noir avec le text qui a un fond blanc.

Est-ce qu'il manquerait pas aussi la prise en compte de ce genre de cas?

[ffoodd]

Le cas que tu décris est précisément celui qui sort de la parcimonie : les onglets sont chartés, leur aspect ne devrait pas être surchargés de la sorte — par exemple dans ton cas, parce que dans la version light des onglets, la couleur orange est utilisée au survol. Ainsi, dans cette version du composant on ne distinguerait plus l’élément « important » de l’élément survolé.

On touche un point qui n’a plus grand chose à voir avec le CSS ni avec Boosted : si cet onglet est plus important que les autres, peut-être que :

1. un pictogramme indiquerait mieux cette importance que la couleur — surtout si la couleur est le seul indice visuel de l’importance accrue de cet onglet, l’information n’étant alors véhiculée que par la couleur et donc inaccessible — mais on touche alors au graphisme à proprement parler ;
2. si cet élément se distingue du groupe, peut-être ne devrait-il pas en faire partie mais se trouver dans une section avant ou après — on touche plutôt à la hiérarchie de l’information voire à l’ergonomie de la page en question.

Dans tous les cas, la charte graphique proscrit certains usages de certaines couleurs, mais avant tout propose directement des « UI Kits » que Boosted se doit de respecter (tout comme les projets l’utilisant) :

• Le Web UI Kit sur design.orange.com, version Sketch
• Le Web UI Kit version Sketch, sur le cloud Sketch
• Le Web UI Kit sur design.orange.com, version Adobe

J’espère que ces ressources te seront utiles, il y en a d’autres à trouver sur design.orange.com ou brand.orange.com en cas de besoin :)