Color

Text Color

Applies color property for changing text color or icon color. These colors are themed and will vary depending on the color theme (except for positive and negative).

u-colorPrimary

u-colorSecondary

u-colorHighlight

u-colorInfo

u-colorGrey

u-colorPositive

u-colorNegative

u-colorForeground on u-bgPrimary

u-colorForeground on u-bgSecondary

u-colorForeground on u-bgHighlight

Background Color

Applies themed background colors (except for positive and negative) to an element.

u-bgPrimary
(text color: u-colorForeground)

u-bgSecondary
(text color: u-colorForeground)

u-bgHighlight
(text color: u-colorForeground)

u-bgLinkLight
(text color - default link)

u-bgPositive
(text color: u-colorForeground)

u-bgNegative
(text color: u-colorForeground)

u-bgForeground
(text color: u-colorInfo)

u-bgMiddleground
(text color: u-colorInfo)

u-bgBackground
(text color: u-colorInfo)

Responsive

Responsive colors are created on an as-needed basis.

Classes:

  • u-xs-bgForeground

Link Color

Change the link color to something other than the default. You'll want this instead of plain ol' color utilities to set the interactive states.

Normal links

Links don't require a special class, and they will change with different color themes.

I am a normal link

u-linkNegative

Styles links with red rather than the default link color.

I am a link styled with u-linkNegative

u-linkCascade

Applies link styles to all elements nested within anchor.

Heading within anchor.

Text within anchor.