Make component colors configurable (#28035)

7 files changed, 12 insertions, 1 deletions

diff --git a/scss/_card.scss b/scss/_card.scss
index cd2c4a569..c6b67ce05 100644
--- 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 acc68aa59..b82eb1655 100644
--- 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 7966bba1e..bcd7dcad9 100644
--- 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 f94141692..3f80687ab 100644
--- 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 0c4a68d0b..6b6770b32 100644
--- 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 e77cdaec7..b781892ee 100644
--- 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 6aea5e981..c916257e7 100644
--- 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;