feat: Setup colours via theme

theopensystemslab · Oct 8, 2024 · aad2b5b · aad2b5b
1 parent 70e2770
commit aad2b5b
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 20 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#c19c3be",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#0ade7fa",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Tag.tsx
@@ -1,4 +1,5 @@
 import Box from "@mui/material/Box";
+import { PaletteOptions, useTheme } from "@mui/material/styles";
 import { NodeTag } from "@opensystemslab/planx-core/types";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
@@ -7,46 +8,50 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 export const TAG_DISPLAY_VALUES: Record<
   NodeTag,
-  { color: string; displayName: string }
+  { color: keyof PaletteOptions["nodeTag"]; displayName: string }
 > = {
   placeholder: {
-    color: "#FAE1B7",
+    color: "blocking",
     displayName: "Placeholder",
   },
-  "to review": {
-    color: "#E9EDC9",
+  toReview: {
+    color: "nonBlocking",
     displayName: "To review",
   },
-  "sensitive data": {
-    color: "#F4978E",
+  sensitiveData: {
+    color: "information",
     displayName: "Sensitive data",
   },
   analytics: {
-    color: "#E9EDC9",
+    color: "information",
     displayName: "Analytics",
   },
   automation: {
-    color: "#E9EDC9",
+    color: "information",
     displayName: "Automation",
   },
 } as const;
 
 export const Tag: React.FC<{ tag: NodeTag }> = ({ tag }) => {
+  const theme = useTheme();
+
   const showTags = useStore((state) => state.showTags);
   if (!showTags) return null;
 
+  const tagBgColor = theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color];
+
   return (
     <Box
       sx={(theme) => ({
-        bgcolor: TAG_DISPLAY_VALUES[tag].color,
+        bgcolor: tagBgColor,
         borderColor: theme.palette.common.black,
         borderWidth: "0 1px 1px 1px",
         borderStyle: "solid",
         width: "100%",
         p: 0.5,
         textAlign: "center",
         fontWeight: FONT_WEIGHT_SEMI_BOLD,
-        color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
+        color: getContrastTextColor(tagBgColor, "#FFF"),
       })}
     >
       {TAG_DISPLAY_VALUES[tag].displayName}

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -76,6 +76,11 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
     input: "#0B0C0C",
     light: "#E0E0E0",
   },
+  nodeTag: {
+    blocking: "#F4978E",
+    nonBlocking: "#B7FAD7",
+    information: "#FAE1B7",
+  },
   tonalOffset: DEFAULT_TONAL_OFFSET,
 };
 

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -32,6 +32,7 @@ declare module "@mui/material/styles/createPalette" {
     border: { main: string; input: string; light: string };
     link: { main: string };
     prompt: { main: string; contrastText: string; light: string; dark: string };
+    nodeTag: { nonBlocking: string; blocking: string; information: string };
   }
 
   interface PaletteOptions {
@@ -43,6 +44,7 @@ declare module "@mui/material/styles/createPalette" {
       light: string;
       dark: string;
     };
+    nodeTag?: { nonBlocking: string; blocking: string; information: string };
   }
 
   interface TypeText {

diff --git a/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx b/editor.planx.uk/src/ui/editor/ComponentTagSelect.tsx
@@ -41,10 +41,13 @@ const renderTags: AutocompleteProps<
       {...getTagProps({ index })}
       key={tag}
       label={TAG_DISPLAY_VALUES[tag].displayName}
-      sx={{
-        backgroundColor: TAG_DISPLAY_VALUES[tag].color,
-        color: getContrastTextColor(TAG_DISPLAY_VALUES[tag].color, "#FFF"),
-      }}
+      sx={(theme) => ({
+        backgroundColor: theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color],
+        color: getContrastTextColor(
+          theme.palette.nodeTag[TAG_DISPLAY_VALUES[tag].color],
+          "#FFF",
+        ),
+      })}
     />
   ));