docs: update content

mrholek · mrholek · commit f7aa38c988b0 · 2023-08-02T12:49:51.000+02:00
diff --git a/docs/content/customize/css-variables.md b/docs/content/customize/css-variables.md
@@ -28,6 +28,7 @@ Here are the variables we include (note that the `:root` is required) that can b
 {{< /root.inline >}}
 ```
 
+
 ## Component variables
 
 CoreUI is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
diff --git a/docs/content/utilities/background.md b/docs/content/utilities/background.md
@@ -16,9 +16,13 @@ Similar to the contextual text color classes, set the background of an element t
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
 {{- end -}}
 {{< /colors.inline >}}
-<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
+<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
+<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
+
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
 {{< /example >}}
 
 ## Background gradient
@@ -33,6 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(gradi
 <div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
 {{< /markdown >}}
 
 ## Opacity
diff --git a/docs/content/utilities/borders.md b/docs/content/utilities/borders.md
@@ -42,6 +42,7 @@ Change the border color using utilities built on our theme colors.
 <span class="border border-{{ .name }}"></span>
 {{- end -}}
 {{< /border.inline >}}
+<span class="border border-black"></span>
 <span class="border border-white"></span>
 {{< /example >}}
 
diff --git a/docs/content/utilities/colors.md b/docs/content/utilities/colors.md
@@ -17,9 +17,13 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 {{- end -}}
 {{< /colors.inline >}}
 <p class="text-body">.text-body</p>
-<p class="text-muted">.text-muted</p>
+<p class="text-body-emphasis">.text-body-emphasis</p>
+<p class="text-body-secondary">.text-body-secondary</p>
+<p class="text-body-tertiary">.text-body-tertiary</p>
+
+<p class="text-black bg-white">.text-black</p>
 <p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50">.text-black-50</p>
+<p class="text-black-50 bg-white">.text-black-50</p>
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
