Add support for customising a card title color (#36979)

* Add support for customising a card title color

* Group `*card-title-*` variables together

* Add support for customising a card subtitle color

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/_card.scss b/scss/_card.scss
index ce8c02f1f254ce5ed4275d9f5b4994a12d475e00..70279df9e97215395a868404be984822d3661eea 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -7,6 +7,8 @@
   --#{$prefix}card-spacer-y: #{$card-spacer-y};
   --#{$prefix}card-spacer-x: #{$card-spacer-x};
   --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: #{$card-border-color};
   --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -73,11 +75,13 @@
 
 .card-title {
   margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }
 
 .card-subtitle {
   margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
   margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }
 
 .card-text:last-child {

diff --git a/scss/_variables.scss b/scss/_variables.scss
index fa25b8e72a453e2e431f26be7ddbe3013963e7fb..af72ef2043a306cb516045ebb602493d560eaf72 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1247,6 +1247,8 @@ $placeholder-opacity-min:           .2 !default;
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
+$card-title-color:                  null !default;
+$card-subtitle-color:               null !default;
 $card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius:                $border-radius !default;