From 2554ee93f068735285c662046e3ec6af8371828e Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:36:49 +0100
Subject: [PATCH] fix(a11y): Colour contrast issues (#2981)

---
 editor.planx.uk/src/theme.ts                    |  4 +++-
 editor.planx.uk/src/themeOverrides.d.ts         | 14 ++++++++++++++
 editor.planx.uk/src/ui/editor/RichTextInput.tsx |  4 ++--
 editor.planx.uk/src/ui/shared/Input.tsx         |  6 +++---
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
index 8ef8c36013..d7c0367f78 100644
--- a/editor.planx.uk/src/theme.ts
+++ b/editor.planx.uk/src/theme.ts
@@ -40,6 +40,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   text: {
     primary: "#0B0C0C",
     secondary: "#505A5F",
+    placeholder: "#68787D",
   },
   link: {
     main: DEFAULT_PRIMARY_COLOR,
@@ -60,6 +61,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   },
   success: {
     main: "#4CAF50",
+    dark: "#265A26",
   },
   info: {
     main: "#2196F3",
@@ -484,7 +486,7 @@ const generateTeamTheme = (
     linkColour: DEFAULT_PRIMARY_COLOR,
     logo: null,
     favicon: null,
-  }
+  },
 ): MUITheme => {
   const themeOptions = getThemeOptions(teamTheme);
   const theme = responsiveFontSizes(createTheme(themeOptions), { factor: 3 });
diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
index 9af6a4b12f..079fc17abd 100644
--- a/editor.planx.uk/src/themeOverrides.d.ts
+++ b/editor.planx.uk/src/themeOverrides.d.ts
@@ -39,6 +39,20 @@ declare module "@mui/material/styles/createPalette" {
       dark: string;
     };
   }
+
+  interface TypeText {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    placeholder: string;
+  }
+
+  interface TypeTextOptions {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    placeholder: string;
+  }
 }
 
 // Append our custom variants to MUI Button
diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx
index 07292427cf..b5587c845b 100644
--- a/editor.planx.uk/src/ui/editor/RichTextInput.tsx
+++ b/editor.planx.uk/src/ui/editor/RichTextInput.tsx
@@ -98,8 +98,8 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({
     },
     // Styles for placeholder text, to match ui/Input.tsx
     "& p.is-editor-empty:nth-child(1)::before": {
-      color: theme.palette.text.secondary,
-      opacity: "0.5",
+      color: theme.palette.text.placeholder,
+      opacity: 1,
       content: `attr(data-placeholder)`,
       float: "left",
       height: 0,
diff --git a/editor.planx.uk/src/ui/shared/Input.tsx b/editor.planx.uk/src/ui/shared/Input.tsx
index 49bd131f0c..03655321e1 100644
--- a/editor.planx.uk/src/ui/shared/Input.tsx
+++ b/editor.planx.uk/src/ui/shared/Input.tsx
@@ -54,9 +54,9 @@ const StyledInputBase = styled(InputBase, {
   "& input": {
     fontWeight: "inherit",
   },
-  "& ::placeholder": {
-    color: theme.palette.text.secondary,
-    opacity: "0.5",
+  "& input::placeholder, & textarea::placeholder": {
+    color: theme.palette.text.placeholder,
+    opacity: 1,
   },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,