diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts index ddecbd42b4..83c998ecf5 100644 --- 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 = { 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 = { 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 index d779e08863..214f8998fa 100644 --- 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 index cf228f9a07..0a3c0f7420 100644 --- 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,