Skip to content

Commit

Permalink
Add new text-bg-color utilities
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Apr 30, 2022
1 parent ec41392 commit 8cd3c3e
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 0 deletions.
1 change: 1 addition & 0 deletions scss/_helpers.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "helpers/clearfix";
@import "helpers/color-bg";
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
Expand Down
10 changes: 10 additions & 0 deletions scss/helpers/_color-bg.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// stylelint-disable declaration-no-important, function-name-case

// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
$color-rgb: to-rgb($value);
.text-bg-#{$color} {
color: color-contrast($value) !important;
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important;
}
}
52 changes: 52 additions & 0 deletions site/content/docs/5.1/helpers/color-background.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
layout: docs
title: Color & background
description: Set a background color with contrasting foreground color.
group: helpers
toc: true
added: "5.2"
---

## Overview

{{< added-in "5.2.0" >}}

Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.

{{< callout 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 >}}
{{< text-bg.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
{{- end -}}
{{< /text-bg.inline >}}
{{< /example >}}

## With components

Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):

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

Or on [cards]({{< docsref "/components/card#background-and-color" >}}):

{{< example >}}
<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>
{{< /example >}}
1 change: 1 addition & 0 deletions site/data/sidebar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
icon_color: orange
pages:
- title: Clearfix
- title: Color & background
- title: Colored links
- title: Ratio
- title: Position
Expand Down

0 comments on commit 8cd3c3e

Please sign in to comment.