Type Color Color defines the color of the type element.
Important Notes: If font color is not defined, the font color will be black. Due to accessiblity needs, it is not recommended to set the type. If color is altered on a typographical element, please use the contrast ratio to make sure if passes the contrast ratio for WCAG AA. Please note that below there is white type color on the white background and navy type color on the navy background which are not visible.
Demo
Light

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Dark

This color is navy.

This color is teal.

This color is orange.

This color is yellow.

This color is wine.

This color is pink.

This color is berry.

This color is gray.

This color is black.

This color is white.

Twig
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is teal color.'
  color: 'teal',
} only %}
HTML
<p class="e-bolt-type e-bolt-type--color-teal">This color is teal.</p>