Make invalid inputs opaque

And changed placeholder text color to contrast better

diff --git a/scss/forms/_error.scss b/scss/forms/_error.scss
index 84ba398ce8f1f32f9e4057dc3daf615067271c15..6a6c5397f3049f4f8adfcc012eb7ab5d54d33574 100644 (file)
--- a/scss/forms/_error.scss
+++ b/scss/forms/_error.scss
@@ -37,14 +37,17 @@ $input-error-font-weight: $global-weight-bold !default;
 /// Styles the background and border of an input field to have an error state.
 ///
 /// @param {Color} $background [$alert-color] - Color to use for the background and border.
-/// @param {Number} $background-alpha [0.1] - Transparency level of the background color.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
 @mixin form-input-error(
   $background: $input-background-invalid,
-  $background-alpha: 0.1
+  $background-lighten: 10%
 ) {
   &:not(:focus) {
     border-color: $background;
-    background-color: rgba($background, $background-alpha);
+    background-color: mix($background, $white, $background-lighten);
+    &::placeholder {
+      color: $background;
+    }    
   }
 }