Replace .bg-white with .bg-body in docs

Response to issue #32810

Use of the .bg-white class to define visual aspects of the examples
would be unintuitive for theme builders to test themes on.
This replaces instances of .bg-white with .bg-body in the examples.

- Edited examples to replace use .bg-white class with .bg-body class
  - product
  - offcanvas
  - pricing
  - cheatsheet
  - cheatsheet-rtl
- Edited utilities colors.md & shadows.md to include .bg-body class

site/content/docs/5.0/examples/cheatsheet-rtl/index.html

@@ -70,7 +70,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<div class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
 

site/content/docs/5.0/examples/cheatsheet/index.html

@@ -69,7 +69,7 @@ <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
     </ul>
   </nav>
 </aside>
-<div class="bd-cheatsheet container-fluid bg-white">
+<div class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
     <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>
 

site/content/docs/5.0/examples/offcanvas/index.html

@@ -46,7 +46,7 @@
   </div>
 </nav>
 
-<div class="nav-scroller bg-white shadow-sm">
+<div class="nav-scroller bg--body shadow-sm">
   <nav class="nav nav-underline" aria-label="Secondary navigation">
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
@@ -72,7 +72,7 @@ <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
     </div>
   </div>
 
-  <div class="my-3 p-3 bg-white rounded shadow-sm">
+  <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
@@ -100,7 +100,7 @@ <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
     </small>
   </div>
 
-  <div class="my-3 p-3 bg-white rounded shadow-sm">
+  <div class="my-3 p-3 bg-body rounded shadow-sm">
     <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
     <div class="d-flex text-muted pt-3">
       {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}

site/content/docs/5.0/examples/pricing/index.html

@@ -6,7 +6,7 @@
 include_js: false
 ---
 
-<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
+<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
   <p class="h5 my-0 me-md-auto fw-normal">Company name</p>
   <nav class="my-2 my-md-0 me-md-3">
     <a class="p-2 text-dark" href="#">Features</a>

site/content/docs/5.0/examples/product/index.html

@@ -71,14 +71,14 @@ <h2 class="display-5">Another headline</h2>
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 
@@ -88,14 +88,14 @@ <h2 class="display-5">Another headline</h2>
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
     <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
       <div class="my-3 py-3">
         <h2 class="display-5">Another headline</h2>
         <p class="lead">And an even wittier subheading.</p>
       </div>
-      <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
+      <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
     </div>
   </div>
 </main>

site/content/docs/5.0/utilities/colors.md

@@ -44,6 +44,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {{- end -}}
 {{< /colors.inline >}}
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
 <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
 {{< /example >}}
 

site/content/docs/5.0/utilities/shadows.md

@@ -11,7 +11,7 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 
 {{< example >}}
 <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
 {{< /example >}}