Colors

Color utility classes let you quickly set text and background colors using your design system tokens.

Examples

Text Colors

Use .ro-u-text-* classes to set text color.

<p class="ro-u-text-product">var(--ro-colors-accent)</p>
<p class="ro-u-text-success">var(--ro-colors-success)</p>
<p class="ro-u-text-warning">var(--ro-colors-warning)</p>
<p class="ro-u-text-danger">var(--ro-colors-danger)</p>
<p class="ro-u-text-white ro-u-bg-black">var(--ro-colors-white)</p>
<p class="ro-u-text-black ro-u-bg-white">var(--ro-colors-black)</p>
<p class="ro-u-text-favorite">var(--ro-colors-favorite)</p>
<p class="ro-u-text-primary">var(--ro-colors-text-primary)</p>
<p class="ro-u-text-secondary">var(--ro-colors-text-secondary)</p>
<p class="ro-u-text-inverted ro-u-bg-overlay-inverted">var(--ro-colors-text-inverted)</p>
<p class="ro-u-text-incoming">var(--ro-colors-business-incoming)</p>
<p class="ro-u-text-outgoing">var(--ro-colors-business-outgoing)</p>
<p class="ro-u-text-missed">var(--ro-colors-business-missed)</p>
<p class="ro-u-text-voicemail">var(--ro-colors-business-voicemail)</p>
<p class="ro-u-text-snooze">var(--ro-colors-business-snooze)</p>
<p class="ro-u-text-not-connected">var(--ro-colors-business-not-connected)</p>
<p class="ro-u-text-processed">var(--ro-colors-business-processed)</p>
<p class="ro-u-text-not-applicable">var(--ro-colors-business-not-applicable)</p>
<p class="ro-u-text-video-calls">var(--ro-colors-business-video-calls)</p>
<p class="ro-u-text-call-back">var(--ro-colors-business-call-back)</p>

Preview

ro-u-text-product

ro-u-text-success

ro-u-text-warning

ro-u-text-danger

ro-u-text-white

ro-u-text-black

ro-u-text-favorite

ro-u-text-primary

ro-u-text-secondary

ro-u-text-inverted

ro-u-text-incoming

ro-u-text-outgoing

ro-u-text-missed

ro-u-text-voicemail

ro-u-text-snooze

ro-u-text-not-connected

ro-u-text-processed

ro-u-text-not-applicable

ro-u-text-video-calls

ro-u-text-call-back

Background Colors

Use .ro-u-bg-* classes to set background color.

<p class="ro-u-bg-transparent">var(transparent)</p>
<p class="ro-u-bg-product">var(--ro-colors-accent)</p>
<p class="ro-u-bg-product-light">var(--ro-colors-accent-light)</p>
<p class="ro-u-bg-success">var(--ro-colors-success)</p>
<p class="ro-u-bg-success-light">var(--ro-colors-success-light)</p>
<p class="ro-u-bg-warning">var(--ro-colors-warning)</p>
<p class="ro-u-bg-warning-light">var(--ro-colors-warning-light)</p>
<p class="ro-u-bg-danger">var(--ro-colors-danger)</p>
<p class="ro-u-bg-danger-light">var(--ro-colors-danger-light)</p>
<p class="ro-u-bg-white ro-u-text-black">var(--ro-colors-white)</p>
<p class="ro-u-bg-black ro-u-text-white">var(--ro-colors-black)</p>
<p class="ro-u-bg-overlay">var(--ro-colors-bg-overlay)</p>
<p class="ro-u-bg-overlay-inverted ro-u-text-inverted">var(--ro-colors-bg-overlay-inverted)</p>
<p class="ro-u-bg-favorite">var(--ro-colors-favorite)</p>

Preview

ro-u-bg-transparent

ro-u-bg-product

ro-u-bg-product-light

ro-u-bg-success

ro-u-bg-success-light

ro-u-bg-warning

ro-u-bg-warning-light

ro-u-bg-danger

ro-u-bg-danger-light

ro-u-bg-white

ro-u-bg-black

ro-u-bg-overlay

ro-u-bg-overlay-inverted

ro-u-bg-favorite

Properties

Text Color Classes

Class	Token	Description
.ro-u-text-product	--ro-colors-accent	Product accent text
.ro-u-text-success	--ro-colors-success	Success text
.ro-u-text-warning	--ro-colors-warning	Warning text
.ro-u-text-danger	--ro-colors-danger	Danger text
.ro-u-text-white	--ro-colors-white	White text
.ro-u-text-black	--ro-colors-black	Black text
.ro-u-text-favorite	--ro-colors-favorite	Favorite text
.ro-u-text-primary	--ro-colors-text-primary	Primary text
.ro-u-text-secondary	--ro-colors-text-secondary	Secondary text
.ro-u-text-inverted	--ro-colors-text-inverted	Inverted text
.ro-u-text-incoming	--ro-colors-business-incoming	Business incoming text
.ro-u-text-outgoing	--ro-colors-business-outgoing	Business outgoing text
.ro-u-text-missed	--ro-colors-business-missed	Business missed text
.ro-u-text-voicemail	--ro-colors-business-voicemail	Business voicemail text
.ro-u-text-snooze	--ro-colors-business-snooze	Business snooze text
.ro-u-text-not-connected	--ro-colors-business-not-connected	Business not connected text
.ro-u-text-processed	--ro-colors-business-processed	Business processed text
.ro-u-text-not-applicable	--ro-colors-business-not-applicable	Business not applicable text
.ro-u-text-video-calls	--ro-colors-business-video-calls	Business video calls text
.ro-u-text-call-back	--ro-colors-business-call-back	Business call back text

Background Color Classes

Class	Token	Description
.ro-u-bg-transparent	transparent	Transparent background
.ro-u-bg-product	--ro-colors-accent	Product accent background
.ro-u-bg-product-light	--ro-colors-accent-light	Product accent light background
.ro-u-bg-success	--ro-colors-success	Success background
.ro-u-bg-success-light	--ro-colors-success-light	Success light background
.ro-u-bg-warning	--ro-colors-warning	Warning background
.ro-u-bg-warning-light	--ro-colors-warning-light	Warning light background
.ro-u-bg-danger	--ro-colors-danger	Danger background
.ro-u-bg-danger-light	--ro-colors-danger-light	Danger light background
.ro-u-bg-white	--ro-colors-white	White background
.ro-u-bg-black	--ro-colors-black	Black background
.ro-u-bg-overlay	--ro-colors-bg-overlay	Overlay background
.ro-u-bg-overlay-inverted	--ro-colors-bg-overlay-inverted	Inverted background (previously .ro-u-bg-inverted)
.ro-u-bg-favorite	--ro-colors-favorite	Favorite background