💄 Update requiredColor to #999

gilbarbara · Jan 17, 2019 · 0d6cc1d · 0d6cc1d
1 parent fdfeeb3
commit 0d6cc1d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 20 deletions.
diff --git a/src/utils/system.js b/src/utils/system.js
@@ -3,6 +3,7 @@
 import PropTypes from 'prop-types';
 import lighten from 'polished/lib/color/lighten';
 import darken from 'polished/lib/color/darken';
+import desaturate from 'polished/lib/color/desaturate';
 import { css } from 'styled-components';
 import { cloneFunc, compose, propTypes, style } from 'styled-system';
 
@@ -194,7 +195,7 @@ export const formPseudo = (props: Object): string => {
 
     &:required:not(:valid) {
       border-color: ${requiredColor};
-      ${placeholder(`color: ${requiredColor};`)};
+      ${placeholder(`color: ${lighten(0.1, desaturate(0.2, requiredColor))};`)};
     }
   `;
 };
diff --git a/src/utils/theme.js b/src/utils/theme.js
@@ -252,7 +252,7 @@ const baseInput = {
     md: 8,
     lg: 10,
   },
-  requiredColor: '#000',
+  requiredColor: '#999',
   validation: {
     invalid: '#f00',
     valid: '#3ac200',

diff --git a/test/__snapshots__/Input.spec.js.snap b/test/__snapshots__/Input.spec.js.snap
@@ -58,23 +58,23 @@ exports[`Input should render properly 1`] = `
 }
 
 .c0:required:not(:valid) {
-  border-color: #000;
+  border-color: #999;
 }
 
 .c0:required:not(:valid)::-webkit-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid)::-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-ms-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 <Input

diff --git a/test/__snapshots__/Select.spec.js.snap b/test/__snapshots__/Select.spec.js.snap
@@ -71,23 +71,23 @@ exports[`Select should render properly 1`] = `
 }
 
 .c0:required:not(:valid) {
-  border-color: #000;
+  border-color: #999;
 }
 
 .c0:required:not(:valid)::-webkit-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid)::-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-ms-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 <Select

diff --git a/test/__snapshots__/Textarea.spec.js.snap b/test/__snapshots__/Textarea.spec.js.snap
@@ -53,23 +53,23 @@ exports[`Textarea should render properly 1`] = `
 }
 
 .c0:required:not(:valid) {
-  border-color: #000;
+  border-color: #999;
 }
 
 .c0:required:not(:valid)::-webkit-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid)::-moz-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 .c0:required:not(:valid):-ms-input-placeholder {
-  color: #000;
+  color: #b3b3b3;
 }
 
 <Textarea

diff --git a/test/__snapshots__/index.spec.js.snap b/test/__snapshots__/index.spec.js.snap
@@ -3791,7 +3791,7 @@ Object {
         "md": 8,
         "sm": 6,
       },
-      "requiredColor": "#000",
+      "requiredColor": "#999",
       "validation": Object {
         "invalid": "#f00",
         "valid": "#3ac200",
@@ -3851,7 +3851,7 @@ Object {
         "md": 8,
         "sm": 6,
       },
-      "requiredColor": "#000",
+      "requiredColor": "#999",
       "validation": Object {
         "invalid": "#f00",
         "valid": "#3ac200",
@@ -3946,7 +3946,7 @@ Object {
         "md": 8,
         "sm": 6,
       },
-      "requiredColor": "#000",
+      "requiredColor": "#999",
       "validation": Object {
         "invalid": "#f00",
         "valid": "#3ac200",