Make component colors configurable (#28035)

diff --git a/scss/_card.scss b/scss/_card.scss
index cd2c4a5691f7f58b751a12d8444b9918fcd45d1d..c6b67ce05d5c3c9abbc5f030adfa497cdd8b5883 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -36,6 +36,7 @@
   // as much space as possible, ensuring footers are aligned to the bottom.
   flex: 1 1 auto;
   padding: $card-spacer-x;
+  color: $card-color;
 }
 
 .card-title {

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index acc68aa5993574d3568b39957afede3935a74bef..b82eb1655a8cb183c6fd4eb616b87ada80eff2a6 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -25,7 +25,7 @@
   padding: $dropdown-padding-y 0;
   margin: $dropdown-spacer 0 0; // override default ul
   font-size: $dropdown-font-size;
-  color: $body-color;
+  color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: $dropdown-bg;

diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index 7966bba1e22a62689973b6cb377d97802e2c5bbb..bcd7dcad996db4ed4a1c8451f04f623a01cc069b 100644 (file)
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -1,6 +1,7 @@
 .jumbotron {
   padding: $jumbotron-padding ($jumbotron-padding / 2);
   margin-bottom: $jumbotron-padding;
+  color: $jumbotron-color;
   background-color: $jumbotron-bg;
   @include border-radius($border-radius-lg);
 

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index f94141692846c8962fd1cef3aacab2f17d0360fa..3f80687ab4869da1a9e3a21bc8be542b369d070f 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -47,6 +47,7 @@
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
+  color: $list-group-color;
   background-color: $list-group-bg;
   border: $list-group-border-width solid $list-group-border-color;
 

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 0c4a68d0be3ed0f753458cb400f0c2574c57de22..6b6770b32c24cce8f3079cdf42596c5c7bfb8422 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -104,6 +104,7 @@
   flex-direction: column;
   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
+  color: $modal-content-color;
   pointer-events: auto;
   background-color: $modal-content-bg;
   background-clip: padding-box;

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index e77cdaec7d49b161d176892338f513546e8e474d..b781892ee53113f6d37c778a550d831cb25132c0 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -2,6 +2,7 @@
   max-width: $toast-max-width;
   overflow: hidden; // cheap rounded corners on nested items
   font-size: $toast-font-size; // knock it down to 14px
+  color: $toast-color;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6aea5e9814075ddafc0e5cc07cfa2baf770a9b3b..c916257e7818fe597b9a755d883f9da5db33bef6 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -746,6 +746,7 @@ $dropdown-min-width:                10rem !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
 $dropdown-border-radius:            $border-radius !default;
@@ -804,6 +805,7 @@ $pagination-disabled-border-color:  $gray-300 !default;
 // Jumbotron
 
 $jumbotron-padding:                 2rem !default;
+$jumbotron-color:                   null !default;
 $jumbotron-bg:                      $gray-200 !default;
 
 
@@ -817,6 +819,7 @@ $card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
 $card-cap-color:                    null !default;
+$card-color:                        null !default;
 $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
@@ -886,6 +889,7 @@ $toast-max-width:                   350px !default;
 $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .25rem !default;
 $toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
 $toast-border-color:                rgba(0, 0, 0, .1) !default;
@@ -924,6 +928,7 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
+$modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
 $modal-content-border-color:        rgba($black, .2) !default;
 $modal-content-border-width:        $border-width !default;
@@ -982,6 +987,7 @@ $progress-bar-transition:           width .6s ease !default;
 
 // List group
 
+$list-group-color:                  null !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
 $list-group-border-width:           $border-width !default;

diff --git a/site/docs/4.2/getting-started/theming.md b/site/docs/4.2/getting-started/theming.md
index 85c09e86e4e674245f8ce2247945c1398cd1eba8..db3b12ffd4218008e5cff1339c66ff39ef2b7eea 100644 (file)
--- a/site/docs/4.2/getting-started/theming.md
+++ b/site/docs/4.2/getting-started/theming.md
@@ -75,7 +75,7 @@ With that setup in place, you can begin to modify any of the Sass variables and
 
 Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
 
-You will find the complete list of Bootstrap's variables in `scss/_variables.scss`.
+You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
 
 Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files.