Color and background

import { getData } from '@libs/data'

Overview

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.

<Callout type="warning"> **Heads up!** There’s currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities. </Callout>

<Example code={getData('theme-colors').map((themeColor) => <div class="text-bg-${themeColor.name} p-3">${themeColor.title} with contrasting color</div>)} />

<Callout name="warning-color-assistive-technologies" />

With components

Use them in place of combined .text-* and .bg-* classes, like on badges:

<Example code={<span class="badge text-bg-primary">Primary</span> <span class="badge text-bg-info">Info</span>} />

Or on cards:

<Example code={`<div class="card text-bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </div>

</div> <div class="card text-bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p> </div> </div>`} />