Skip to Main Content

General Color Utilities

While many components within Universal Theme automatically make use of these colors, you can use them in several custom components as well. Universal Theme provides a number of CSS utility classes that can be used to apply this color palette to any HTML markup.

General Utility Classes

BlockTextBackgroundBorder
u-color-1u-color-1-textu-color-1-bgu-color-1-border
u-color-2u-color-2-textu-color-2-bgu-color-2-border
u-color-3u-color-3-textu-color-3-bgu-color-3-border
u-color-4u-color-4-textu-color-4-bgu-color-4-border
u-color-5u-color-5-textu-color-5-bgu-color-5-border
u-color-6u-color-6-textu-color-6-bgu-color-6-border
u-color-7u-color-7-textu-color-7-bgu-color-7-border
u-color-8u-color-8-textu-color-8-bgu-color-8-border
u-color-9u-color-9-textu-color-9-bgu-color-9-border
u-color-10u-color-10-textu-color-10-bgu-color-10-border
u-color-11u-color-11-textu-color-11-bgu-color-11-border
u-color-12u-color-12-textu-color-12-bgu-color-12-border
u-color-13u-color-13-textu-color-13-bgu-color-13-border
u-color-14u-color-14-textu-color-14-bgu-color-14-border
u-color-15u-color-15-textu-color-15-bgu-color-15-border
u-color-16u-color-16-textu-color-16-bgu-color-16-border
u-color-17u-color-17-textu-color-17-bgu-color-17-border
u-color-18u-color-18-textu-color-18-bgu-color-18-border
u-color-19u-color-19-textu-color-19-bgu-color-19-border
u-color-20u-color-20-textu-color-20-bgu-color-20-border
u-color-21u-color-21-textu-color-21-bgu-color-21-border
u-color-22u-color-22-textu-color-22-bgu-color-22-border
u-color-23u-color-23-textu-color-23-bgu-color-23-border
u-color-24u-color-24-textu-color-24-bgu-color-24-border
u-color-25u-color-25-textu-color-25-bgu-color-25-border
u-color-26u-color-26-textu-color-26-bgu-color-26-border
u-color-27u-color-27-textu-color-27-bgu-color-27-border
u-color-28u-color-28-textu-color-28-bgu-color-28-border
u-color-29u-color-29-textu-color-29-bgu-color-29-border
u-color-30u-color-30-textu-color-30-bgu-color-30-border
u-color-31u-color-31-textu-color-31-bgu-color-31-border
u-color-32u-color-32-textu-color-32-bgu-color-32-border
u-color-33u-color-33-textu-color-33-bgu-color-33-border
u-color-34u-color-34-textu-color-34-bgu-color-34-border
u-color-35u-color-35-textu-color-35-bgu-color-35-border
u-color-36u-color-36-textu-color-36-bgu-color-36-border
u-color-37u-color-37-textu-color-37-bgu-color-37-border
u-color-38u-color-38-textu-color-38-bgu-color-38-border
u-color-39u-color-39-textu-color-39-bgu-color-39-border
u-color-40u-color-40-textu-color-40-bgu-color-40-border
u-color-41u-color-41-textu-color-41-bgu-color-41-border
u-color-42u-color-42-textu-color-42-bgu-color-42-border
u-color-43u-color-43-textu-color-43-bgu-color-43-border
u-color-44u-color-44-textu-color-44-bgu-color-44-border
u-color-45u-color-45-textu-color-45-bgu-color-45-border

Stateful Color Utilities

Universal Theme provides 6 stateful colors: normal, hot, informational, danger, warning, and success. Here are the CSS modifier classes you can use to apply these states to your own UI controls.

Stateful Utility Classes

StatusBlockTextBackgroundBorder
Normalu-normalu-normal-textu-normal-bgu-normal-border
Hotu-hotu-hot-textu-hot-bgu-hot-border
Warningu-warningu-warning-textu-warning-bgu-warning-border
Dangeru-dangeru-danger-textu-danger-bgu-danger-border
Infou-infou-info-textu-info-bgu-info-border
Successu-successu-success-textu-success-bgu-success-border

Opacity Utility Class

The opacity class allows for control over the opacity of elements. Combine u-opacity with any percentage amount to set the opacity of an element.

Opacity Class

Opacity LevelBlock
Opacity 10%u-opacity-10
Opacity 20%u-opacity-20
Opacity 30%u-opacity-30
Opacity 40%u-opacity-40
Opacity 50%u-opacity-50
Opacity 60%u-opacity-60
Opacity 70%u-opacity-70
Opacity 80%u-opacity-80
Opacity 90%u-opacity-90
Opacity 100%u-opacity-100