Add placeholder text styles and Sass variable $input-placeholder-color

diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
index 49bcf66fb9bb5b34762e9418ea83f48b5c017384..fb2a1c4e33ffb1e6229acc16726874272c9d75c0 100644 (file)
--- a/scss/forms/_text.scss
+++ b/scss/forms/_text.scss
@@ -10,6 +10,10 @@
 /// @type Color
 $input-color: $black !default;
 
+/// Font color of placeholder text within text inputs.
+/// @type Color
+$input-placeholder-color: $medium-gray !default;
+
 /// Font family of text inputs.
 /// @type Font
 $input-font-family: inherit !default;
@@ -115,9 +119,14 @@ $input-radius: $global-radius !default;
     }
   }
 
-  // Disabled/readonly state
   input,
   textarea {
+    // Placeholder text
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    // Disabled/readonly state
     &:disabled,
     &[readonly] {
       background-color: $input-background-disabled;