When using TLP's business colors, the reflex was to always write a @each loop to iterate over the map of colors and create new CSS classes each time. Since then, we have introduced "generic" CSS classes tlp-swatch-$color_name that set "standard" CSS custom properties. By leveraging those classes, it is possible to keep the @each contained in only one place and to set all styling using CSS custom properties. For example, to have some item with the "inca-silver" variant, do the following:

// Define _one_ single class for my item. The class leverages CSS custom properties.
.my-colored-element {
  color: var(--text-color);
  background: var(--primary-color);
}

<!-- in HTML, apply _two_ classes to the item -->
<span class="tlp-swatch-inca-silver my-colored-element"></span>

The only reason to use @each loops again should be to produce heavily customised versions of the colors, for example mixing with white or fiddling with alpha.

There are many existing places where @each has been used while it is not necessary. We should replace those custom CSS classes with tlp-swatch-$color usage. git #tuleap/stable/8e455d6fe1ed5692e7820a664da93f6b519da066 provides a base from which to search those usages. For example, card fields, labels, etc.