This section explains and shows examples of all colors used in Halstack Design System.


Internal use

This is an example of how some components of the Design System use internally the BackgroundColorProvider, in this case the DxcAccordion knows that its background color is black and shows the DxcTextInput in its onDark version for its correct visualization.

Custom use

If at some point it is necessary that the components of the Design System are aware of the color on which they are going to be displayed to guarantee their correct visibility, we must wrap the container (where the components of the Design System are going to be displayed) with the BackgroundColorProvider and pass it the background color. This way the BackgroundColorProvider will evaluate that color and if it is dark it will show the onDark version of the components.

In this example we see how the same DxcTextInput component is shown in a different way, in the first case it is shown in its onDark version, since we have wrapped the container with the BackgroundColorProvider as we explained in the previous paragraph.