Add a theme property for placeholders to properly handle contrast

Author: pimterry

src/components/common/inputs.tsx

@@ -151,6 +151,10 @@ export const TextInput = styled.input.attrs((p: { type?: string }) => ({
         opacity: 0.6;
     }
 
+    &::placeholder {
+        color: ${p => p.theme.inputPlaceholderColor};
+    }
+
     &:invalid {
         ${invalidTextCss}
     }

src/styles.ts

@@ -71,6 +71,7 @@ export const lightTheme = {
     inputHoverBackground: greyWhite,
     inputBorder: darkGrey,
     inputColor: inkGrey,
+    inputPlaceholderColor: darkishGrey,
 
     highlightBackground: white,
     highlightColor: inkGrey,
@@ -124,6 +125,7 @@ export const darkTheme = {
     inputHoverBackground: inkGrey,
     inputBorder: darkishGrey,
     inputColor: white,
+    inputPlaceholderColor: mediumGrey,
 
     highlightBackground: darkishGrey,
     highlightColor: white,
@@ -198,6 +200,7 @@ export const highContrastTheme = {
     inputHoverBackground: '#ddd',
     inputBorder: '#aaa',
     inputColor: '#000000',
+    inputPlaceholderColor: '#444',
 
     highlightBackground: '#ffffff',
     highlightColor: '#000',

test/unit/styles.spec.ts

@@ -68,6 +68,16 @@ import { expect } from '../test-setup';
                 );
             });
 
+            it("should have sufficient input placeholder contrast", () => {
+                const mainColor = theme.inputPlaceholderColor;
+                const bgColor = theme.inputBackground;
+
+                const contrast = polished.getContrast(mainColor, bgColor);
+                expect(contrast).to.be.greaterThan(normalContrastTarget,
+                    `Constrast for ${mainColor}/${bgColor} was only ${contrast}`
+                );
+            });
+
             it("should have sufficient primary button contrast", () => {
                 const mainColor = theme.primaryInputColor;
                 const bgColor = theme.primaryInputBackground;