Text color, font-sizes and font family
Based on the
$feo-themes settings from your design tokens, utility classes for text colors are generated. Utility classes that trigger when a pseudo-class is triggered, are also facilitated. The following classes are available:
In addition, based on the
$feo-sizes, additional utility classes are generate, in the format
If names from
$feo-colorscollide, the former takes precedence.
Lastly, based on
$feo-font-families, utility classes are generated that allow you to set the font-family on an element. These classes follow the structure of
$feo-sizes, line-height utility classes and CSS variables are generated. The base value of this array is equal to
$feo-sizes, but can be set separately.
These classes set the
text-align on the element, based on the value in the name.
.bold: sets the font-weight to 600.
.regular: sets the font-weight to 400.
.italic: makes the text italic.
.no-decoration: removes any decoration in the