Color and Status Modifiers - Universal Theme

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.

Block	Text	Background	Border
u-color-1	u-color-1-text	u-color-1-bg	u-color-1-border
u-color-2	u-color-2-text	u-color-2-bg	u-color-2-border
u-color-3	u-color-3-text	u-color-3-bg	u-color-3-border
u-color-4	u-color-4-text	u-color-4-bg	u-color-4-border
u-color-5	u-color-5-text	u-color-5-bg	u-color-5-border
u-color-6	u-color-6-text	u-color-6-bg	u-color-6-border
u-color-7	u-color-7-text	u-color-7-bg	u-color-7-border
u-color-8	u-color-8-text	u-color-8-bg	u-color-8-border
u-color-9	u-color-9-text	u-color-9-bg	u-color-9-border
u-color-10	u-color-10-text	u-color-10-bg	u-color-10-border
u-color-11	u-color-11-text	u-color-11-bg	u-color-11-border
u-color-12	u-color-12-text	u-color-12-bg	u-color-12-border
u-color-13	u-color-13-text	u-color-13-bg	u-color-13-border
u-color-14	u-color-14-text	u-color-14-bg	u-color-14-border
u-color-15	u-color-15-text	u-color-15-bg	u-color-15-border
u-color-16	u-color-16-text	u-color-16-bg	u-color-16-border
u-color-17	u-color-17-text	u-color-17-bg	u-color-17-border
u-color-18	u-color-18-text	u-color-18-bg	u-color-18-border
u-color-19	u-color-19-text	u-color-19-bg	u-color-19-border
u-color-20	u-color-20-text	u-color-20-bg	u-color-20-border
u-color-21	u-color-21-text	u-color-21-bg	u-color-21-border
u-color-22	u-color-22-text	u-color-22-bg	u-color-22-border
u-color-23	u-color-23-text	u-color-23-bg	u-color-23-border
u-color-24	u-color-24-text	u-color-24-bg	u-color-24-border
u-color-25	u-color-25-text	u-color-25-bg	u-color-25-border
u-color-26	u-color-26-text	u-color-26-bg	u-color-26-border
u-color-27	u-color-27-text	u-color-27-bg	u-color-27-border
u-color-28	u-color-28-text	u-color-28-bg	u-color-28-border
u-color-29	u-color-29-text	u-color-29-bg	u-color-29-border
u-color-30	u-color-30-text	u-color-30-bg	u-color-30-border
u-color-31	u-color-31-text	u-color-31-bg	u-color-31-border
u-color-32	u-color-32-text	u-color-32-bg	u-color-32-border
u-color-33	u-color-33-text	u-color-33-bg	u-color-33-border
u-color-34	u-color-34-text	u-color-34-bg	u-color-34-border
u-color-35	u-color-35-text	u-color-35-bg	u-color-35-border
u-color-36	u-color-36-text	u-color-36-bg	u-color-36-border
u-color-37	u-color-37-text	u-color-37-bg	u-color-37-border
u-color-38	u-color-38-text	u-color-38-bg	u-color-38-border
u-color-39	u-color-39-text	u-color-39-bg	u-color-39-border
u-color-40	u-color-40-text	u-color-40-bg	u-color-40-border
u-color-41	u-color-41-text	u-color-41-bg	u-color-41-border
u-color-42	u-color-42-text	u-color-42-bg	u-color-42-border
u-color-43	u-color-43-text	u-color-43-bg	u-color-43-border
u-color-44	u-color-44-text	u-color-44-bg	u-color-44-border
u-color-45	u-color-45-text	u-color-45-bg	u-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.

Status	Block	Text	Background	Border
Normal	u-normal	u-normal-text	u-normal-bg	u-normal-border
Hot	u-hot	u-hot-text	u-hot-bg	u-hot-border
Warning	u-warning	u-warning-text	u-warning-bg	u-warning-border
Danger	u-danger	u-danger-text	u-danger-bg	u-danger-border
Info	u-info	u-info-text	u-info-bg	u-info-border
Success	u-success	u-success-text	u-success-bg	u-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 Level	Block
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

General Color Utilities

General Utility Classes

Stateful Color Utilities

Stateful Utility Classes

Opacity Utility Class

Opacity Class