feat: Update theme with new colours

theopensystemslab · Jan 10, 2024 · 22266c2 · 22266c2
1 parent 7444999
commit 22266c2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -14,9 +14,9 @@ import createPalette, {
 } from "@mui/material/styles/createPalette";
 import { deepmerge } from "@mui/utils";
 import { TeamTheme } from "@opensystemslab/planx-core/types";
+import { getContrastTextColor } from "styleUtils";
 
 const DEFAULT_PRIMARY_COLOR = "#0010A4";
-const DEFAULT_SECONDARY_COLOR = "#F3F2F1";
 
 // Type styles
 export const FONT_WEIGHT_SEMI_BOLD = "600";
@@ -34,12 +34,19 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
     paper: "#F9F8F8",
   },
   secondary: {
-    main: DEFAULT_SECONDARY_COLOR,
+    main: "#F3F2F1",
   },
   text: {
     primary: "#0B0C0C",
     secondary: "#505A5F",
   },
+  link: {
+    main: DEFAULT_PRIMARY_COLOR
+  },
+  prompt: {
+    main: DEFAULT_PRIMARY_COLOR,
+    contrastText: "#FFFFFF"
+  },
   action: {
     selected: "#F8F8F8",
     focus: "#FFDD00",
@@ -87,8 +94,8 @@ export const borderedFocusStyle = {
   background: "transparent",
 };
 
-export const linkStyle = (primaryColor?: string) => ({
-  color: primaryColor || "inherit",
+export const linkStyle = (linkColour: string) => ({
+  color: linkColour || "inherit",
   textDecoration: "underline",
   textDecorationThickness: "1px",
   textUnderlineOffset: "0.1em",
@@ -102,13 +109,21 @@ export const linkStyle = (primaryColor?: string) => ({
   "&:focus-visible": focusStyle,
 });
 
-const getThemeOptions = (teamTheme?: TeamTheme): ThemeOptions => {
+const getThemeOptions = (teamTheme: TeamTheme): ThemeOptions => {
   const teamPalette: Partial<PaletteOptions> = {
     primary: {
-      main: teamTheme?.primaryColour || DEFAULT_PRIMARY_COLOR,
+      main: teamTheme.primaryColour,
+    },
+    link: {
+      main: teamTheme.linkColour,
+    },
+    prompt: {
+      main: teamTheme.actionColour,
+      contrastText: getContrastTextColor(teamTheme.actionColour, "#FFF")!,
     },
   };
   const palette = createPalette(deepmerge(DEFAULT_PALETTE, teamPalette));
+  console.log({ palette })
 
   const themeOptions: ThemeOptions = {
     // Set default spacing unit to match GOV.UK
@@ -339,7 +354,7 @@ const getThemeOptions = (teamTheme?: TeamTheme): ThemeOptions => {
       MuiLink: {
         styleOverrides: {
           root: {
-            ...linkStyle(palette.primary.main),
+            ...linkStyle(palette.link.main),
             "&:disabled": {
               color: palette.text.disabled,
               cursor: "default",

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -25,10 +25,14 @@ declare module "@mui/material/styles" {
 declare module "@mui/material/styles/createPalette" {
   interface Palette {
     border: { main: string; input: string; light: string };
+    link: { main: string; };
+    prompt: { main: string; contrastText: string; };
   }
 
   interface PaletteOptions {
     border?: { main: string; input: string; light: string };
+    link?: { main: string; };
+    prompt?: { main: string; contrastText: string; };
   }
 }
 
@@ -37,4 +41,8 @@ declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     help: true;
   }
+
+  interface ButtonPropsColorOverrides {
+    prompt: true;
+  }
 }
diff --git a/editor.planx.uk/src/ui/shared/ReactMarkdownOrHtml.tsx b/editor.planx.uk/src/ui/shared/ReactMarkdownOrHtml.tsx
@@ -6,7 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { FONT_WEIGHT_SEMI_BOLD, linkStyle } from "theme";
 
 const styles = (theme: Theme) => ({
-  "& a": linkStyle(theme.palette.primary.main),
+  "& a": linkStyle(theme.palette.link.main),
   "& h1": theme.typography.h2,
   "& h2": theme.typography.h3,
   "& h3": theme.typography.h3,