demo: Council secondary colours

editor.planx.uk/public/index.html

@@ -39,5 +39,18 @@
       To begin the development, run `pnpm start`.
       To create a production bundle, use `pnpm build`.
     -->
+
+    <!-- Manually add team body class for demo -->
+    <script>
+      const [team] = window.location.pathname
+        .split("/")
+        .map((value) => value.replaceAll("-", " "))
+        .slice(1, 3);
+
+      const body = document.body;
+      body.classList.remove(...body.classList);
+      body.classList.add("team--" + team);
+    </script>
+  <!-- end demo script -->
   </body>
 </html>

editor.planx.uk/src/councilStyles.scss

@@ -0,0 +1,40 @@
+// Light/dark text to contrast button background color
+$text-black: #0b0c0c;
+$text-white: #ffffff;
+
+// Action colour per council
+.MuiButton-containedPrimary:not(.Mui-disabled),
+.arrowButton {
+  body.team--buckinghamshire & {
+    color: $text-black;
+    background: #96bb36;
+  }
+  body.team--canterbury & {
+    color: $text-black;
+    background: #f9b400;
+  }
+  body.team--camden & {
+    color: $text-black;
+    background: #ead95b;
+  }
+  body.team--lambeth & {
+    color: $text-white;
+    background: #069;
+  }
+  body.team--braintree & {
+    color: $text-white;
+    background: #005e8a;
+  }
+  body.team--gateshead & {
+    color: $text-white;
+    background: #045a90;
+  }
+  body.team--gloucester & {
+    color: $text-white;
+    background: #0054a4;
+  }
+  body.team--newcastle & {
+    color: $text-white;
+    background: #1111d5;
+  }
+}

editor.planx.uk/src/themeOverrides.d.ts

@@ -31,3 +31,6 @@ declare module "@mui/material/styles/createPalette" {
     border?: { main: string; input: string; light: string };
   }
 }
+
+// Import council specific CSS for demo purposes
+import "./councilStyles.scss";