set color to form-control-plaintext (#25565)

* set color to `.form-control-plaintext`
* fixes readability on dark themes like ‘darkly’
  * https://bootswatch.com/darkly/index.html#forms
  * https://bootswatch.com/slate/index.html#forms
  * https://bootswatch.com/superhero/index.html#superhero
  * https://bootswatch.com/solar/index.html#forms

/cc @thomaspark

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 8835595e734488c13eae77a57b91bfa0eba85b3d..c079bd5c4f070ca7bd35d1c6522d3514f91a6293 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -121,6 +121,7 @@ select.form-control {
   padding-bottom: $input-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
+  color: $input-plaintext-color;
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e7f18acc78b3b7d679ddd9532d1db3912ef608c8..2178e1f9cbacb32e0635c024b5f223bad6db4805 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -416,6 +416,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               $gray-600 !default;
+$input-plaintext-color:                 $body-color !default;
 
 $input-height-border:                   $input-border-width * 2 !default;