From db46bfc03f3a22752ef6bd91ae577d893872a216 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:40 +0200 Subject: Merging upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/helpers/color-background.md | 52 ----------------------- 1 file changed, 52 deletions(-) delete mode 100644 site/content/docs/5.2/helpers/color-background.md (limited to 'site/content/docs/5.2/helpers/color-background.md') diff --git a/site/content/docs/5.2/helpers/color-background.md b/site/content/docs/5.2/helpers/color-background.md deleted file mode 100644 index c417484..0000000 --- a/site/content/docs/5.2/helpers/color-background.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -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") }} -
{{ .name | title }} with contrasting color
-{{- 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 >}} -Primary -Info -{{< /example >}} - -Or on [cards]({{< docsref "/components/card#background-and-color" >}}): - -{{< example >}} -
-
Header
-
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
-
-
Header
-
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
-{{< /example >}} -- cgit v1.2.3