These new helpers aim to replace the instances where you must declare a contrasting color and background-color on the same element. Currently we defer to the developer/designer to decide how to handle this via separate utilities, which is kind of a shitty experience. Since we cannot use the completely unsupported native color contrast CSS function (you can opt into it in Safari dev tools though), we rely on our own custom color-contrast() function. As such, the contrast action doesn't happen live in browser, but at compilation time via Sass.
These new helpers are great for common component use cases like badges and cards, as shown below.
These utilities also ship with a local CSS variable for --bs-bg-opacity, so you can also do fun stuff like:
<span class="badge text-bg-info bg-opacity-25">Light info</span>Note that these are helpers because utilities, at least in our definition, are singular property and value pairings. Helpers are small snippets of code.
Todos:
-
Bundlewatch -
Update badges and cards pages to use new helpers -
Update migration guide