Fix contrast & styling for invalid input placeholders

Author: pimterry

src/components/common/inputs.tsx

@@ -120,6 +120,10 @@ const invalidTextCss = css`
         border-color: ${p => p.theme.mainColor};
         background-color: ${p => p.theme.warningBackground};
     }
+
+    &::placeholder {
+        color: ${p => p.theme.inputWarningPlaceholder};
+    }
 `;
 
 type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {

src/styles.ts

@@ -72,6 +72,7 @@ export const lightTheme = {
     inputBorder: darkGrey,
     inputColor: inkGrey,
     inputPlaceholderColor: darkishGrey,
+    inputWarningPlaceholder: '#8c5c1d', // Mix of warning + inkGrey
 
     highlightBackground: white,
     highlightColor: inkGrey,
@@ -126,6 +127,7 @@ export const darkTheme = {
     inputBorder: darkishGrey,
     inputColor: white,
     inputPlaceholderColor: mediumGrey,
+    inputWarningPlaceholder: '#e8b978', // Mix of warning + white
 
     highlightBackground: darkishGrey,
     highlightColor: white,
@@ -201,6 +203,7 @@ export const highContrastTheme = {
     inputBorder: '#aaa',
     inputColor: '#000000',
     inputPlaceholderColor: '#444',
+    inputWarningPlaceholder: '#e1b374', // Mix of warning + white
 
     highlightBackground: '#ffffff',
     highlightColor: '#000',

test/unit/styles.spec.ts

@@ -68,6 +68,26 @@ import { expect } from '../test-setup';
                 );
             });
 
+            it("should have sufficient input warning contrast", () => {
+                const mainColor = theme.inputWarningPlaceholder;
+
+                // Warning background is #RRGGBBAA, so we need to mix to check the real bg colour:
+                const warningBackgroundColor = theme.warningBackground.slice(0, 7);
+                const warningBackgroundOpacity = theme.warningBackground.slice(7, 9);
+                const warningBackgroundRatio = parseInt(warningBackgroundOpacity, 16) / 255;
+
+                const bgColor = polished.mix(
+                    warningBackgroundRatio,
+                    warningBackgroundColor,
+                    theme.mainBackground
+                );
+
+                const contrast = polished.getContrast(mainColor, bgColor);
+                expect(contrast).to.be.greaterThan(normalContrastTarget,
+                    `Constrast for ${mainColor}/${bgColor} was only ${contrast}`
+                );
+            });
+
             it("should have sufficient input placeholder contrast", () => {
                 const mainColor = theme.inputPlaceholderColor;
                 const bgColor = theme.inputBackground;