Make placeholder error color more consistent, fix input placeholder color #2786

RELEASE-NOTES.md

@@ -24,6 +24,7 @@
 - **Icon** - Fixed typo in cube icon alias caused by bad grep #2765
 - **Embed** - Remove accidental `console.log` statements in js #2760
 - **Transition** - Transition callbacks now all have the correct `this` set. #2758
+- **Form / Input** - Fixes `::placeholder` text color for `ui error input`, modifies form error placeholder color to distinguish from form value error color #2786
 
 **Additional Bugs**
 - **Build Tools** - Fixes issue on `win` platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators.

src/definitions/elements/input.less

@@ -168,24 +168,24 @@
 }
 
 /* Error Placeholder */
-.ui.input.error input ::-webkit-input-placeholder {
+.ui.input.error input::-webkit-input-placeholder {
   color: @placeholderErrorColor;
 }
-.ui.input.error input ::-moz-placeholder {
+.ui.input.error input::-moz-placeholder {
   color: @placeholderErrorColor;
 }
-.ui.input.error input ::-ms-input-placeholder {
+.ui.input.error input::-ms-input-placeholder {
   color: @placeholderErrorColor;
 }
 
 /* Focused Error Placeholder */
-.ui.input.error input :focus::-webkit-input-placeholder {
+.ui.input.error input:focus::-webkit-input-placeholder {
   color: @placeholderErrorFocusColor;
 }
-.ui.input.error input :focus::-moz-placeholder {
+.ui.input.error input:focus::-moz-placeholder {
   color: @placeholderErrorFocusColor;
 }
-.ui.input.error input :focus::-ms-input-placeholder {
+.ui.input.error input:focus::-ms-input-placeholder {
   color: @placeholderErrorFocusColor;
 }
 

src/themes/default/collections/form.variables

@@ -129,9 +129,10 @@
 /* Placeholder */
 @inputPlaceholderColor: lighten(@inputColor, 55);
 @inputPlaceholderFocusColor: lighten(@inputColor, 35);
-@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
-@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
 
+/* Placeholder Error */
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
 
 /* Loading Dimmer */
 @loaderDimmerColor: rgba(255, 255, 255, 0.8);

src/themes/default/elements/input.variables

@@ -70,9 +70,6 @@
 @placeholderColor: @unselectedTextColor;
 @placeholderFocusColor: @textColor;
 
-@placeholderErrorColor: rgba(255, 80, 80, 0.4);
-@placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
-
 /* Down */
 @downBorderColor: rgba(0, 0, 0, 0.3);
 @downBackground: #FAFAFA;
@@ -87,10 +84,13 @@
 
 /* Error */
 @errorBackground: @negativeBackgroundColor;
+@errorColor: @negativeTextColor;
 @errorBorder: @negativeBorderColor;
-@errorColor: @negativeColor;
 @errorBoxShadow: none;
 
+@placeholderErrorColor: lighten(@errorColor, 40);
+@placeholderErrorFocusColor: lighten(@errorColor, 30);
+
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);