Dark mode: Cards (#2318)

Co-authored-by: Julien Déramond <[email protected]>

scss/_variables.scss

@@ -1710,15 +1710,15 @@ $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-bottom * .5 !default; // Boosted mod
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
-$card-cap-color:                    $white !default; // Boosted mod: instead of `null`
+$card-cap-bg:                       var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)`
+$card-cap-color:                    var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `null`
 $card-cap-font-weight:              $font-weight-bold !default; // Boosted mod
 $card-height:                       null !default;
 $card-color:                        null !default;
 $card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
-$card-footer-color:                 $gray-700 !default; // Boosted mod
+$card-footer-color:                 var(--#{$prefix}placeholder-color) !default; // Boosted mod
 // scss-docs-end card-variables
 
 // Accordion

site/content/docs/5.3/components/card.md

@@ -302,7 +302,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
 
 {{< example >}}
 <div class="card text-center">
-  <div class="card-header bg-white">
+  <div class="card-header bg-body">
     <ul class="nav nav-tabs card-header-tabs">
       <li class="nav-item">
         <a class="nav-link active" aria-current="true" href="#">Active</a>
@@ -325,7 +325,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components
 
 {{< example >}}
 <div class="card text-center">
-  <div class="card-header bg-white">
+  <div class="card-header bg-body">
     <ul class="nav nav-pills card-header-pills">
       <li class="nav-item">
         <a class="nav-link active" href="#">Active</a>

site/content/docs/5.3/content/figures.md

@@ -14,7 +14,7 @@ Use the included `.figure`, `.figure-img` and `.figure-caption` classes to provi
 
 {{< example >}}
 <figure class="figure">
-  {{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
+  {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
@@ -23,7 +23,7 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
 
 {{< example >}}
 <figure class="figure">
-  {{< placeholder width="400" height="300" class="figure-img img-fluid" >}}
+  {{< placeholder width="400" height="300" class="figure-img img-fluid" color="#999" >}}
   <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}

site/content/docs/5.3/content/images.md

@@ -13,34 +13,34 @@ toc: true
 Images in Boosted are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
 
 {{< example >}}
-{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" color="#999" >}}
 {{< /example >}}
 
 ## Image thumbnails
 
 In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a 2px border appearance.
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a gray border around it" color="#999" >}}
 {{< /example >}}
 
 ## Aligning images
 
 Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="float-start" >}}
-{{< placeholder width="200" height="200" class="float-end" >}}
+{{< placeholder width="200" height="200" class="float-start" color="#999" >}}
+{{< placeholder width="200" height="200" class="float-end" color="#999" >}}
 {{< /example >}}
 
 
 {{< example >}}
-{{< placeholder width="200" height="200" class="mx-auto d-block" >}}
+{{< placeholder width="200" height="200" class="mx-auto d-block" color="#999" >}}
 {{< /example >}}
 
 {{< example >}}
 <div class="text-center">
-  {{< placeholder width="200" height="200" >}}
+  {{< placeholder width="200" height="200" color="#999" >}}
 </div>
 {{< /example >}}