From 3045e8b7f1573ff0504938bcbb05fcd6ca11a3f9 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 12 Dec 2023 14:36:54 +0000
Subject: [PATCH 1/5] Brand colour tweaks

I've aligned the tints/shades with the brand guidelines.
There are some minor visual differences that we'll discuss internally.
---
 .github/workflows/build.yml                   |  2 +-
 src/common/GenericDialog.tsx                  |  2 +-
 src/common/PostSaveDialog.tsx                 |  2 +-
 src/common/SplitView/HideSplitViewButton.tsx  |  2 +-
 src/common/SplitView/SplitViewDivider.tsx     |  2 +-
 src/deployment/default/colors.ts              |  3 +-
 src/documentation/api/ApiDocumentation.tsx    |  6 +++-
 src/documentation/api/ApiNode.tsx             |  4 +--
 src/documentation/common/CodeActionButton.tsx |  2 +-
 src/documentation/common/CodeEmbed.tsx        |  6 ++--
 .../common/DocumentationBreadcrumbHeading.tsx |  2 +-
 .../common/DocumentationContent.tsx           |  6 ++--
 .../common/DocumentationTopLevelItem.tsx      |  2 +-
 src/documentation/common/DragHandle.tsx       |  8 ++---
 src/documentation/common/MoreButton.tsx       |  2 +-
 src/documentation/common/ShowMoreButton.tsx   |  2 +-
 src/documentation/common/V2Tag.tsx            |  2 +-
 .../ideas/IdeasDocumentation.tsx              |  2 +-
 src/documentation/reference/Highlight.tsx     |  2 +-
 src/documentation/search/SearchResultList.tsx |  4 +--
 src/editor/ModuleOverlay.tsx                  |  2 +-
 .../language-server/documentation.css         | 30 ++++++++++++-------
 .../language-server/documentation.ts          |  2 +-
 src/project/ProjectArea.tsx                   |  2 +-
 src/project/ProjectNameEditable.tsx           |  2 +-
 src/settings/LanguageDialog.tsx               |  2 +-
 src/simulator/CompassModule.tsx               |  2 +-
 src/simulator/RadioModule.tsx                 |  6 ++--
 src/simulator/RangeSensor.tsx                 |  2 +-
 src/simulator/SensorInput.tsx                 |  2 +-
 src/simulator/Simulator.tsx                   |  2 +-
 src/simulator/SimulatorModules.tsx            | 18 +++++------
 src/simulator/icons/compass-heading.svg       |  2 +-
 src/workbench/AboutDialog/AboutDialog.tsx     | 10 +++----
 src/workbench/SideBarHeader.tsx               |  2 +-
 src/workbench/SideBarTab.tsx                  |  2 +-
 src/workbench/WelcomeDialog.tsx               |  2 +-
 .../connect-dialogs/ConnectDialog.tsx         |  2 +-
 .../connect-dialogs/FirmwareDialog.tsx        |  4 +--
 .../connect-dialogs/NotFoundDialog.tsx        | 10 +++----
 40 files changed, 89 insertions(+), 80 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 285827b47..6d2255175 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.18  @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-brand.guidelines.20 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/common/GenericDialog.tsx b/src/common/GenericDialog.tsx
index ba88bb2da..c07d17400 100644
--- a/src/common/GenericDialog.tsx
+++ b/src/common/GenericDialog.tsx
@@ -84,7 +84,7 @@ export const GenericDialogFooter = ({
         <Link
           onClick={onCloseDontShowAgain}
           as="button"
-          color="brand.500"
+          color="brand1.500"
           mr="auto"
         >
           <FormattedMessage id="dont-show-again" />
diff --git a/src/common/PostSaveDialog.tsx b/src/common/PostSaveDialog.tsx
index 7a6d76a0f..3c32731b9 100644
--- a/src/common/PostSaveDialog.tsx
+++ b/src/common/PostSaveDialog.tsx
@@ -122,7 +122,7 @@ const PostSaveDialogBody = ({
           values={{
             link: (chunks: ReactNode) => (
               <Link
-                color="brand.500"
+                color="brand1.500"
                 onClick={handleShowTransferHexHelp}
                 href=""
               >
diff --git a/src/common/SplitView/HideSplitViewButton.tsx b/src/common/SplitView/HideSplitViewButton.tsx
index 43a354843..1cbf5dc53 100644
--- a/src/common/SplitView/HideSplitViewButton.tsx
+++ b/src/common/SplitView/HideSplitViewButton.tsx
@@ -72,7 +72,7 @@ const HideSplitViewButton = React.forwardRef(
           minW="unset"
           width={mode === "icon" ? "20px" : "auto"}
           background="#eaecf1"
-          color="brand.500"
+          color="brand1.500"
           variant="ghost"
           zIndex={splitViewHideButton}
           boxShadow={direction === "expandLeft" ? "md" : "none"}
diff --git a/src/common/SplitView/SplitViewDivider.tsx b/src/common/SplitView/SplitViewDivider.tsx
index bce588512..c0086f179 100644
--- a/src/common/SplitView/SplitViewDivider.tsx
+++ b/src/common/SplitView/SplitViewDivider.tsx
@@ -46,7 +46,7 @@ const SplitViewDivider = ({ showBoxShadow = false }: SplitViewDividerProps) => {
       >
         <Icon
           as={RiMore2Fill}
-          color="brand.500"
+          color="brand1.500"
           h={6}
           w={6}
           transform={direction === "row" ? "" : "rotate(90deg)"}
diff --git a/src/deployment/default/colors.ts b/src/deployment/default/colors.ts
index 93ff50bee..be9978f30 100644
--- a/src/deployment/default/colors.ts
+++ b/src/deployment/default/colors.ts
@@ -12,7 +12,8 @@ const gray = {
 };
 
 const colors = {
-  brand: gray,
+  brand1: gray,
+  brand2: gray,
   gray,
   code: {
     blockBorder: theme.colors.gray[400],
diff --git a/src/documentation/api/ApiDocumentation.tsx b/src/documentation/api/ApiDocumentation.tsx
index d88b4b42c..ab23753d8 100644
--- a/src/documentation/api/ApiDocumentation.tsx
+++ b/src/documentation/api/ApiDocumentation.tsx
@@ -112,7 +112,11 @@ const ActiveLevel = ({
               id="api-description"
               values={{
                 link: (chunks: ReactNode) => (
-                  <Link color="brand.500" onClick={handleReferenceLink} href="">
+                  <Link
+                    color="brand1.500"
+                    onClick={handleReferenceLink}
+                    href=""
+                  >
                     {chunks}
                   </Link>
                 ),
diff --git a/src/documentation/api/ApiNode.tsx b/src/documentation/api/ApiNode.tsx
index 3fb244f5c..0ee16ff01 100644
--- a/src/documentation/api/ApiNode.tsx
+++ b/src/documentation/api/ApiNode.tsx
@@ -456,7 +456,7 @@ const DraggableSignature = ({
           display="inline-flex"
           overflow="hidden"
           borderWidth="1px"
-          borderColor="blimpTeal.300"
+          borderColor="brand2.300"
           borderRadius="lg"
           onMouseEnter={highlight.onOpen}
           onMouseLeave={highlight.onClose}
@@ -483,7 +483,7 @@ const DraggableSignature = ({
           />
           <Text
             minW={40}
-            background={highlight.isOpen ? "blimpTeal.50" : "white"}
+            background={highlight.isOpen ? "brand2.50" : "white"}
             transition="background .2s"
             p={2}
             fontFamily="code"
diff --git a/src/documentation/common/CodeActionButton.tsx b/src/documentation/common/CodeActionButton.tsx
index 354528751..8de6fe8e0 100644
--- a/src/documentation/common/CodeActionButton.tsx
+++ b/src/documentation/common/CodeActionButton.tsx
@@ -41,7 +41,7 @@ const CodeActionButton = ({
           fontWeight="normal"
           color="gray.800"
           border="none"
-          bgColor={hovered ? "blimpTeal.300" : "blimpTeal.100"}
+          bgColor={hovered ? "brand2.300" : "brand2.100"}
           borderTopRadius="0"
           borderBottomRadius="lg"
           ml={5}
diff --git a/src/documentation/common/CodeEmbed.tsx b/src/documentation/common/CodeEmbed.tsx
index 53ad7dcdd..e89f9c7e7 100644
--- a/src/documentation/common/CodeEmbed.tsx
+++ b/src/documentation/common/CodeEmbed.tsx
@@ -151,7 +151,7 @@ const CodeEmbed = ({
       (toolkitType === "ideas" && state === "highlighted") ||
       (toolkitType !== "ideas" && state !== "default")
     ) {
-      return "blimpTeal.50";
+      return "brand2.50";
     }
     return "white";
   };
@@ -244,7 +244,7 @@ const CodePopUp = ({
         full={full}
         position="absolute"
         // We're always "raised" as this is the pop-up.
-        background={toolkitType === "ideas" ? "white" : "blimpTeal.50"}
+        background={toolkitType === "ideas" ? "white" : "brand2.50"}
         boxShadow="rgba(0, 0, 0, 0.18) 0px 2px 6px"
         highlightDragHandle
         toolkitType={toolkitType}
@@ -328,7 +328,7 @@ const Code = forwardRef<CodeProps, "pre">(
           draggable={toolkitType === "ideas" ? false : true}
           transition="background .2s, box-shadow .2s"
           borderWidth="1px"
-          borderColor="blimpTeal.300"
+          borderColor="brand2.300"
           borderRadius="lg"
           fontFamily="code"
           overflow="hidden"
diff --git a/src/documentation/common/DocumentationBreadcrumbHeading.tsx b/src/documentation/common/DocumentationBreadcrumbHeading.tsx
index b7f945a6b..ba165c06c 100644
--- a/src/documentation/common/DocumentationBreadcrumbHeading.tsx
+++ b/src/documentation/common/DocumentationBreadcrumbHeading.tsx
@@ -102,7 +102,7 @@ const DocumentationBreadcrumbHeading = ({
           fontSize="md"
           whiteSpace="normal"
           textAlign="left"
-          color="brand.500"
+          color="brand1.500"
         >
           <Text as="span">
             {grandparent && grandparent + " / "}
diff --git a/src/documentation/common/DocumentationContent.tsx b/src/documentation/common/DocumentationContent.tsx
index 32bc6871d..70f9e259d 100644
--- a/src/documentation/common/DocumentationContent.tsx
+++ b/src/documentation/common/DocumentationContent.tsx
@@ -69,7 +69,7 @@ const DocumentationApiLinkMark = (
   const [, setState] = useRouterState();
   return (
     <Link
-      color="brand.600"
+      color="brand1.600"
       onClick={(e) => {
         e.preventDefault();
         setState({
@@ -89,7 +89,7 @@ const DocumentationInternalLinkMark = (
   const [state, setState] = useRouterState();
   return (
     <Link
-      color="brand.600"
+      color="brand1.600"
       onClick={(e) => {
         e.preventDefault();
         setState(
@@ -114,7 +114,7 @@ const DocumentationExternalLinkMark = (
 ) => {
   return (
     <Link
-      color="brand.600"
+      color="brand1.600"
       href={props.mark.href}
       target="_blank"
       rel="nofollow noopener"
diff --git a/src/documentation/common/DocumentationTopLevelItem.tsx b/src/documentation/common/DocumentationTopLevelItem.tsx
index 5926744fd..79fe46e91 100644
--- a/src/documentation/common/DocumentationTopLevelItem.tsx
+++ b/src/documentation/common/DocumentationTopLevelItem.tsx
@@ -65,7 +65,7 @@ const DocumentationTopLevelItem = ({
               { name }
             )}
             size="sm"
-            color="brand.200"
+            color="brand1.200"
             variant="ghost"
             fontSize="2xl"
           />
diff --git a/src/documentation/common/DragHandle.tsx b/src/documentation/common/DragHandle.tsx
index ab2ac42d0..90c0affaf 100644
--- a/src/documentation/common/DragHandle.tsx
+++ b/src/documentation/common/DragHandle.tsx
@@ -15,14 +15,10 @@ const DragHandle = ({ highlight, ...props }: DragHandleProps) => {
     <HStack
       cursor="grab"
       {...props}
-      bgColor={highlight ? "blimpTeal.300" : "blimpTeal.100"}
+      bgColor={highlight ? "brand2.300" : "brand2.100"}
       transition="background .2s"
     >
-      <DragHandleIcon
-        boxSize={3}
-        color="blimpTeal.600"
-        transition="color .2s"
-      />
+      <DragHandleIcon boxSize={3} color="brand2.600" transition="color .2s" />
     </HStack>
   );
 };
diff --git a/src/documentation/common/MoreButton.tsx b/src/documentation/common/MoreButton.tsx
index 2a83f3122..b7bffbab4 100644
--- a/src/documentation/common/MoreButton.tsx
+++ b/src/documentation/common/MoreButton.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage } from "react-intl";
 const MoreButton = (props: ButtonProps) => (
   <Button
     fontWeight="normal"
-    color="brand.500"
+    color="brand1.500"
     variant="unstyled"
     display="flex"
     size="sm"
diff --git a/src/documentation/common/ShowMoreButton.tsx b/src/documentation/common/ShowMoreButton.tsx
index 26843e852..f698bd26c 100644
--- a/src/documentation/common/ShowMoreButton.tsx
+++ b/src/documentation/common/ShowMoreButton.tsx
@@ -19,7 +19,7 @@ const ShowMoreButton = ({ isOpen, isBrief, ...props }: ShowMoreLinkProps) => {
     <Link
       {...props}
       as="button"
-      color="brand.600"
+      color="brand1.600"
       textAlign="left"
       _hover={{
         textDecoration: "none",
diff --git a/src/documentation/common/V2Tag.tsx b/src/documentation/common/V2Tag.tsx
index 2d12e4d10..3692f7c2b 100644
--- a/src/documentation/common/V2Tag.tsx
+++ b/src/documentation/common/V2Tag.tsx
@@ -11,7 +11,7 @@ const V2Tag = ({ ...props }: V2TagProps) => {
   return (
     <Tag
       fontWeight="semibold"
-      background="brand.500"
+      background="brand1.500"
       color="gray.25"
       minH="unset"
       pt="1px"
diff --git a/src/documentation/ideas/IdeasDocumentation.tsx b/src/documentation/ideas/IdeasDocumentation.tsx
index df754a31d..67afe5dbd 100644
--- a/src/documentation/ideas/IdeasDocumentation.tsx
+++ b/src/documentation/ideas/IdeasDocumentation.tsx
@@ -149,7 +149,7 @@ const ActiveLevel = ({
           values={{
             link: (chunks: ReactNode) => (
               <Link
-                color="brand.500"
+                color="brand1.500"
                 href="https://microbit.org/projects/make-it-code-it/?filters=python"
                 target="_blank"
                 rel="noopener"
diff --git a/src/documentation/reference/Highlight.tsx b/src/documentation/reference/Highlight.tsx
index 5a321d42d..c32938329 100644
--- a/src/documentation/reference/Highlight.tsx
+++ b/src/documentation/reference/Highlight.tsx
@@ -76,7 +76,7 @@ const Highlight = ({
 
   const style = highlighting
     ? {
-        backgroundColor: "brand.100",
+        backgroundColor: "brand1.100",
         transition: "background-color ease-out 0.2s",
       }
     : { transition: "background-color ease-in 0.6s" };
diff --git a/src/documentation/search/SearchResultList.tsx b/src/documentation/search/SearchResultList.tsx
index da64c2ca0..988b90cde 100644
--- a/src/documentation/search/SearchResultList.tsx
+++ b/src/documentation/search/SearchResultList.tsx
@@ -71,8 +71,8 @@ const SearchResultItem = ({
           e.preventDefault();
           onViewResult(id, navigation);
         }}
-        _hover={{ textDecor: "none", bgColor: "brand.100" }}
-        _focus={{ bgColor: "brand.100" }}
+        _hover={{ textDecor: "none", bgColor: "brand1.50" }}
+        _focus={{ bgColor: "brand1.50" }}
       >
         <Stack px={8} py={2} spacing={0}>
           {title !== containerTitle && (
diff --git a/src/editor/ModuleOverlay.tsx b/src/editor/ModuleOverlay.tsx
index 3345fe9e6..d846b1a62 100644
--- a/src/editor/ModuleOverlay.tsx
+++ b/src/editor/ModuleOverlay.tsx
@@ -62,7 +62,7 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
             values={{
               link: (chunks: ReactNode) => (
                 <Link
-                  color="brand.500"
+                  color="brand1.500"
                   as="button"
                   onClick={handleShowSettings}
                 >
diff --git a/src/editor/codemirror/language-server/documentation.css b/src/editor/codemirror/language-server/documentation.css
index d58482462..d597c5de6 100644
--- a/src/editor/codemirror/language-server/documentation.css
+++ b/src/editor/codemirror/language-server/documentation.css
@@ -7,29 +7,37 @@
 .docs-spacing code {
   font-family: "Source Code Pro", monospace;
 }
-.docs-spacing * + * {
+
+.docs-spacing *+* {
   margin-top: var(--chakra-space-2);
 }
-.docs-spacing * + p {
+
+.docs-spacing *+p {
   margin-top: var(--chakra-space-3);
 }
-.docs-spacing * + code {
+
+.docs-spacing *+code {
   margin-top: var(--chakra-space-3);
 }
-.docs-spacing hr + *,
-.docs-spacing * + hr {
+
+.docs-spacing hr+*,
+.docs-spacing *+hr {
   margin-top: var(--chakra-space-1);
 }
+
 .docs-spacing code {
   white-space: pre-wrap;
 }
+
 .docs-spacing ul,
 .docs-spacing ol {
   margin-left: var(--chakra-space-5);
 }
+
 .docs-spacing a {
-  color: var(--chakra-colors-brand-500);
+  color: var(--chakra-colors-brand1-500);
 }
+
 .docs-spacing pre {
   padding: var(--chakra-space-1);
 }
@@ -38,7 +46,7 @@
 pre {
   background-color: #fff;
   border-radius: var(--chakra-radii-md);
-  border-color: var(--chakra-colors-blimpTeal-100);
+  border-color: var(--chakra-colors-brand2-100);
   border-style: solid;
   border-width: 1px;
 }
@@ -58,15 +66,15 @@ pre {
   width: fit-content;
 }
 
-.docs-code > pre > code,
-.docs-code.docs-code-muted > pre > code {
+.docs-code>pre>code,
+.docs-code.docs-code-muted>pre>code {
   display: block;
   border: none;
   background-color: unset;
 }
 
-.docs-skip-signature > pre:first-of-type {
+.docs-skip-signature>pre:first-of-type {
   border: none;
   padding: 0;
   background-color: unset;
-}
+}
\ No newline at end of file
diff --git a/src/editor/codemirror/language-server/documentation.ts b/src/editor/codemirror/language-server/documentation.ts
index a3da069fa..4f23e1eb2 100644
--- a/src/editor/codemirror/language-server/documentation.ts
+++ b/src/editor/codemirror/language-server/documentation.ts
@@ -106,7 +106,7 @@ const createStyledAnchorElement = (): HTMLAnchorElement => {
   const anchor = document.createElement("a");
   anchor.href = "";
   anchor.style.fontSize = "var(--chakra-fontSizes-sm)";
-  anchor.style.color = "var(--chakra-colors-brand-600)";
+  anchor.style.color = "var(--chakra-colors-brand1-600)";
   anchor.style.display = "block";
   anchor.style.margin = "0";
   anchor.style.padding = "0.5rem";
diff --git a/src/project/ProjectArea.tsx b/src/project/ProjectArea.tsx
index 14049a80c..0c7b0873b 100644
--- a/src/project/ProjectArea.tsx
+++ b/src/project/ProjectArea.tsx
@@ -56,7 +56,7 @@ const ProjectArea = ({
               key={f.name}
               fontWeight={selected ? "semibold" : undefined}
               _hover={{
-                bgColor: "blimpTeal.100",
+                bgColor: "brand2.100",
               }}
               pl={2}
               pr={1}
diff --git a/src/project/ProjectNameEditable.tsx b/src/project/ProjectNameEditable.tsx
index 532f5566c..b66ee00a5 100644
--- a/src/project/ProjectNameEditable.tsx
+++ b/src/project/ProjectNameEditable.tsx
@@ -51,7 +51,7 @@ const ProjectNameEditable = ({
         size="md"
         icon={<RiEdit2Line />}
         fontSize="xl"
-        color="brand.500"
+        color="brand1.500"
         variant="ghost"
         onClick={handleClick}
         aria-label={intl.formatMessage({ id: "edit-project-name-action" })}
diff --git a/src/settings/LanguageDialog.tsx b/src/settings/LanguageDialog.tsx
index e31d58203..5e3468a19 100644
--- a/src/settings/LanguageDialog.tsx
+++ b/src/settings/LanguageDialog.tsx
@@ -74,7 +74,7 @@ export const LanguageDialog = ({
                 href={deployment.translationLink}
                 target="_blank"
                 rel="noopener"
-                color="brand.500"
+                color="brand1.500"
               >
                 <FormattedMessage id="help-translate" />{" "}
                 <Icon as={RiExternalLinkLine} />
diff --git a/src/simulator/CompassModule.tsx b/src/simulator/CompassModule.tsx
index 26676fb3d..7905f3fc4 100644
--- a/src/simulator/CompassModule.tsx
+++ b/src/simulator/CompassModule.tsx
@@ -68,7 +68,7 @@ const CompassModule = ({
             <Icon
               ref={ref}
               as={CompassHeadingIcon}
-              color="blimpTeal.400"
+              color="brand2.400"
               boxSize="20"
             />
           </HStack>
diff --git a/src/simulator/RadioModule.tsx b/src/simulator/RadioModule.tsx
index 8dfa46d70..82dfa41fd 100644
--- a/src/simulator/RadioModule.tsx
+++ b/src/simulator/RadioModule.tsx
@@ -13,7 +13,7 @@ import {
   Stack,
   Text,
   VisuallyHidden,
-  VStack
+  VStack,
 } from "@chakra-ui/react";
 import { ReactNode, useCallback, useState } from "react";
 import { RiSendPlane2Line } from "react-icons/ri";
@@ -119,7 +119,7 @@ const ChatMessage = ({
   from: "code" | "user";
   message: string;
 }) => {
-  const color = from === "code" ? "blimpTeal.100" : "brand.100";
+  const color = from === "code" ? "brand2.100" : "brand1.100";
   return (
     <Flex
       gap="10px"
@@ -171,7 +171,7 @@ const MessageComposer = ({
       {...props}
     >
       <Input
-        colorScheme="brand"
+        colorScheme="purple"
         minW={0}
         _placeholder={{
           color: "gray.600",
diff --git a/src/simulator/RangeSensor.tsx b/src/simulator/RangeSensor.tsx
index 6cdcb6167..28b06cfda 100644
--- a/src/simulator/RangeSensor.tsx
+++ b/src/simulator/RangeSensor.tsx
@@ -169,7 +169,7 @@ const ThresholdMark = ({ value, label, min, max }: ThresholdMarkProps) => {
         position="absolute"
         top="3px"
         left={percentLeft}
-        bg="brand.200"
+        bg="brand1.200"
         height={2}
         width={2}
         borderLeft="1px solid"
diff --git a/src/simulator/SensorInput.tsx b/src/simulator/SensorInput.tsx
index a4ddf8b37..d57bd6d56 100644
--- a/src/simulator/SensorInput.tsx
+++ b/src/simulator/SensorInput.tsx
@@ -128,7 +128,7 @@ const SensorInput = ({
           sensorValue.current === sensor.min
             ? {}
             : {
-                background: "brand.100",
+                background: "brand1.100",
               }
         }
         isActive={!!sensorValue.current}
diff --git a/src/simulator/Simulator.tsx b/src/simulator/Simulator.tsx
index dedc35b39..462851859 100644
--- a/src/simulator/Simulator.tsx
+++ b/src/simulator/Simulator.tsx
@@ -75,7 +75,7 @@ const Simulator = ({
   const simControlsRef = useRef<HTMLDivElement>(null);
   const contentRect = useResizeObserverContentRect(simControlsRef);
   const simHeight = contentRect?.height ?? 0;
-  const [brand500] = useToken("colors", ["brand.500"]);
+  const [brand500] = useToken("colors", ["brand1.500"]);
   const [running, setRunning] = useState<RunningStatus>(RunningStatus.STOPPED);
   const previouslyShown = usePrevious(shown);
 
diff --git a/src/simulator/SimulatorModules.tsx b/src/simulator/SimulatorModules.tsx
index 384055d4b..8e50aef49 100644
--- a/src/simulator/SimulatorModules.tsx
+++ b/src/simulator/SimulatorModules.tsx
@@ -216,7 +216,7 @@ const CollapsibleModule = ({
                 id: "simulator-reference-link",
               })}
               icon={<RiInformationLine />}
-              color="brand.500"
+              color="brand1.500"
               variant="ghost"
               size="xs"
               fontSize="lg"
@@ -237,7 +237,7 @@ const CollapsibleModule = ({
               : intl.formatMessage({ id: "simulator-expand-module" }, { title })
           }
           size="sm"
-          color="brand.200"
+          color="brand1.200"
           variant="ghost"
           fontSize="2xl"
           onClick={disclosure.onToggle}
@@ -267,7 +267,7 @@ const ModuleForId = ({
       return (
         <RangeSensor
           id={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           key={id}
           title={title}
           sensor={state[id] as RangeSensorType}
@@ -279,7 +279,7 @@ const ModuleForId = ({
       return (
         <ButtonsModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -290,7 +290,7 @@ const ModuleForId = ({
       return (
         <PinsModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -301,7 +301,7 @@ const ModuleForId = ({
       return (
         <DataLoggingModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           logFull={state.dataLogging.logFull}
           minimised={minimised}
         />
@@ -310,7 +310,7 @@ const ModuleForId = ({
       return (
         <AccelerometerModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -321,7 +321,7 @@ const ModuleForId = ({
       return (
         <CompassModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           minimised={minimised}
@@ -331,7 +331,7 @@ const ModuleForId = ({
       return (
         <RadioModule
           key={id}
-          icon={<Icon as={icons[id]} color="blimpTeal.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
           enabled={state.radio.enabled}
           group={state.radio.group}
           minimised={minimised}
diff --git a/src/simulator/icons/compass-heading.svg b/src/simulator/icons/compass-heading.svg
index 1d9056576..d6427f9d8 100644
--- a/src/simulator/icons/compass-heading.svg
+++ b/src/simulator/icons/compass-heading.svg
@@ -7,7 +7,7 @@
         </g>
         <g id="Needle" style="transform-box: fill-box; transform-origin: center;">
             <g transform="matrix(1,0,0,1,3.22958,-2.84217e-14)">
-                <path d="M118.596,3726.91L123.121,3770.09L114.071,3770.09L118.596,3726.91Z" style="fill:var(--chakra-colors-brand-200);"/>
+                <path d="M118.596,3726.91L123.121,3770.09L114.071,3770.09L118.596,3726.91Z" style="fill:var(--chakra-colors-brand1-200);"/>
             </g>
             <g transform="matrix(-1,1.22465e-16,-1.22465e-16,-1,240.422,7540.44)">
                 <path d="M118.596,3726.91L123.121,3770.09L114.071,3770.09L118.596,3726.91Z" style="fill:rgb(215,216,214);"/>
diff --git a/src/workbench/AboutDialog/AboutDialog.tsx b/src/workbench/AboutDialog/AboutDialog.tsx
index c1efddfcf..0f5992530 100644
--- a/src/workbench/AboutDialog/AboutDialog.tsx
+++ b/src/workbench/AboutDialog/AboutDialog.tsx
@@ -123,7 +123,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                       <Link
                         rel="noopener noreferrer"
                         target="blank"
-                        color="brand.500"
+                        color="brand1.500"
                         href="https://github.com/microbit-foundation/python-editor-v3/graphs/contributors"
                       >
                         {chunks}
@@ -193,7 +193,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                   values={{
                     link: (chunks: ReactNode) => (
                       <Link
-                        color="brand.500"
+                        color="brand1.500"
                         href="https://micropython.org"
                         target="_blank"
                         rel="noopener"
@@ -258,7 +258,7 @@ const MicroPythonSection = (props: BoxProps) => {
             values={{
               linkV1: (chunks: ReactNode) => (
                 <Link
-                  color="brand.500"
+                  color="brand1.500"
                   href="https://github.com/bbcmicrobit/micropython"
                   target="_blank"
                   rel="noopener"
@@ -268,7 +268,7 @@ const MicroPythonSection = (props: BoxProps) => {
               ),
               linkV2: (chunks: ReactNode) => (
                 <Link
-                  color="brand.500"
+                  color="brand1.500"
                   href="https://github.com/microbit-foundation/micropython-microbit-v2"
                   target="_blank"
                   rel="noopener"
@@ -281,7 +281,7 @@ const MicroPythonSection = (props: BoxProps) => {
         </Text>
         <Text fontSize="md">
           <Link
-            color="brand.500"
+            color="brand1.500"
             href="https://ntoll.org/article/story-micropython-on-microbit/"
             target="_blank"
             rel="noopener"
diff --git a/src/workbench/SideBarHeader.tsx b/src/workbench/SideBarHeader.tsx
index 5b10ddf75..4239070e2 100644
--- a/src/workbench/SideBarHeader.tsx
+++ b/src/workbench/SideBarHeader.tsx
@@ -220,7 +220,7 @@ const SideBarHeader = ({
           {searchAvailable && !query && sidebarShown && (
             <CollapsibleButton
               onClick={handleModalOpened}
-              backgroundColor="brand.700"
+              backgroundColor="brand1.600"
               fontWeight="normal"
               color="#fffc"
               icon={<Box as={RiSearch2Line} fontSize="lg" color="fff" />}
diff --git a/src/workbench/SideBarTab.tsx b/src/workbench/SideBarTab.tsx
index c00d95012..9ed3dda3b 100644
--- a/src/workbench/SideBarTab.tsx
+++ b/src/workbench/SideBarTab.tsx
@@ -75,7 +75,7 @@ const SideBarTab = ({
                 borderBottom: "3px solid",
                 // To match the active/inactive colour.
                 borderColor: active
-                  ? "var(--chakra-colors-brand-300)"
+                  ? "var(--chakra-colors-brand1-300)"
                   : "var(--chakra-colors-gray-25)",
               },
             }}
diff --git a/src/workbench/WelcomeDialog.tsx b/src/workbench/WelcomeDialog.tsx
index 4de16c5ea..a1a5aac63 100644
--- a/src/workbench/WelcomeDialog.tsx
+++ b/src/workbench/WelcomeDialog.tsx
@@ -92,7 +92,7 @@ const WelcomeDialog = ({ isOpen, onClose }: WelcomeDialogProps) => {
                   values={{
                     link: (chunks: ReactNode) => (
                       <Link
-                        color="brand.500"
+                        color="brand1.500"
                         target="_blank"
                         rel="noreferrer"
                         href={guideLink}
diff --git a/src/workbench/connect-dialogs/ConnectDialog.tsx b/src/workbench/connect-dialogs/ConnectDialog.tsx
index 612aabeea..0e96cdcec 100644
--- a/src/workbench/connect-dialogs/ConnectDialog.tsx
+++ b/src/workbench/connect-dialogs/ConnectDialog.tsx
@@ -100,7 +100,7 @@ const ConnectDialogFooter = ({
         <Link
           onClick={onNextDontShowAgain}
           as="button"
-          color="brand.500"
+          color="brand1.500"
           mr="auto"
         >
           <FormattedMessage id="dont-show-again" />
diff --git a/src/workbench/connect-dialogs/FirmwareDialog.tsx b/src/workbench/connect-dialogs/FirmwareDialog.tsx
index 21820abf5..70a08c7d4 100644
--- a/src/workbench/connect-dialogs/FirmwareDialog.tsx
+++ b/src/workbench/connect-dialogs/FirmwareDialog.tsx
@@ -71,7 +71,7 @@ const FirmwareDialogBody = () => {
               values={{
                 link: (chunks: ReactNode) => (
                   <Link
-                    color="brand.500"
+                    color="brand1.500"
                     display="inline-flex"
                     alignItems="center"
                     target="_blank"
@@ -88,7 +88,7 @@ const FirmwareDialogBody = () => {
         </VStack>
       </HStack>
       <Link
-        color="brand.500"
+        color="brand1.500"
         display="inline-flex"
         alignItems="center"
         target="_blank"
diff --git a/src/workbench/connect-dialogs/NotFoundDialog.tsx b/src/workbench/connect-dialogs/NotFoundDialog.tsx
index b2b2b9295..7af309b86 100644
--- a/src/workbench/connect-dialogs/NotFoundDialog.tsx
+++ b/src/workbench/connect-dialogs/NotFoundDialog.tsx
@@ -91,7 +91,7 @@ const NotFoundDialogBody = ({
                 values={{
                   link: (chunks: ReactNode) => (
                     <Link
-                      color="brand.500"
+                      color="brand1.500"
                       onClick={handleReviewDevice}
                       href=""
                     >
@@ -112,7 +112,7 @@ const NotFoundDialogBody = ({
                 values={{
                   link: (chunks: ReactNode) => (
                     <Link
-                      color="brand.500"
+                      color="brand1.500"
                       display="inline-flex"
                       alignItems="center"
                       target="_blank"
@@ -133,7 +133,7 @@ const NotFoundDialogBody = ({
             </Text>
           </VStack>
           <Link
-            color="brand.500"
+            color="brand1.500"
             display="inline-flex"
             alignItems="center"
             target="_blank"
@@ -147,13 +147,13 @@ const NotFoundDialogBody = ({
       </HStack>
       <Flex
         width="100%"
-        background="blimpTeal.50"
+        background="brand2.50"
         alignItems="center"
         py={3}
         px={5}
         borderRadius="xl"
       >
-        <Icon as={RiDownload2Line} color="brand.500" h={6} w={6} mr={5} />
+        <Icon as={RiDownload2Line} color="brand1.500" h={6} w={6} mr={5} />
         <Text fontWeight="semibold" mr="auto">
           <FormattedMessage id="not-found-save-message" />
         </Text>

From c5e4d03707a256f90d2f7d13c52486f787f12293 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 12 Dec 2023 14:39:25 +0000
Subject: [PATCH 2/5] Color name is in the snapshot

---
 src/documentation/common/DocumentationContent.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/documentation/common/DocumentationContent.test.tsx b/src/documentation/common/DocumentationContent.test.tsx
index 03c05ae43..8a8de789b 100644
--- a/src/documentation/common/DocumentationContent.test.tsx
+++ b/src/documentation/common/DocumentationContent.test.tsx
@@ -48,7 +48,7 @@ describe("DocumentationContent", () => {
     ];
     const rendered = render(<DocumentationContent content={content} />);
     expect(rendered.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class=\\"chakra-stack css-bs1yt6\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-1w3ukj\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z\\"></path></g></svg></a>.</p></div>"`
+      `"<div class=\\"chakra-stack css-bs1yt6\\"><p><a target=\\"_blank\\" rel=\\"nofollow noopener\\" class=\\"chakra-link css-11x26cq\\" href=\\"https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4\\">Read more about ASCII<svg stroke=\\"currentColor\\" fill=\\"currentColor\\" stroke-width=\\"0\\" viewBox=\\"0 0 24 24\\" focusable=\\"false\\" class=\\"chakra-icon css-q1kx43\\" height=\\"1em\\" width=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z\\"></path></g></svg></a>.</p></div>"`
     );
   });
 

From b3ee6f8685e6084ef7732f1fe7a32f8011a52e42 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 12 Dec 2023 14:56:57 +0000
Subject: [PATCH 3/5] Tweak colour

---
 src/documentation/common/DocumentationTopLevelItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/documentation/common/DocumentationTopLevelItem.tsx b/src/documentation/common/DocumentationTopLevelItem.tsx
index 79fe46e91..123636929 100644
--- a/src/documentation/common/DocumentationTopLevelItem.tsx
+++ b/src/documentation/common/DocumentationTopLevelItem.tsx
@@ -65,7 +65,7 @@ const DocumentationTopLevelItem = ({
               { name }
             )}
             size="sm"
-            color="brand1.200"
+            color="brand1.300"
             variant="ghost"
             fontSize="2xl"
           />

From 76fb49bafd056624b6104a1fbb87d8d7c1a86304 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 12 Dec 2023 14:59:12 +0000
Subject: [PATCH 4/5] 400 was the brand key colour previously, now 500

---
 src/simulator/CompassModule.tsx    |  2 +-
 src/simulator/SimulatorModules.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/simulator/CompassModule.tsx b/src/simulator/CompassModule.tsx
index 7905f3fc4..72138806f 100644
--- a/src/simulator/CompassModule.tsx
+++ b/src/simulator/CompassModule.tsx
@@ -68,7 +68,7 @@ const CompassModule = ({
             <Icon
               ref={ref}
               as={CompassHeadingIcon}
-              color="brand2.400"
+              color="brand2.500"
               boxSize="20"
             />
           </HStack>
diff --git a/src/simulator/SimulatorModules.tsx b/src/simulator/SimulatorModules.tsx
index 8e50aef49..f252c50b1 100644
--- a/src/simulator/SimulatorModules.tsx
+++ b/src/simulator/SimulatorModules.tsx
@@ -267,7 +267,7 @@ const ModuleForId = ({
       return (
         <RangeSensor
           id={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           key={id}
           title={title}
           sensor={state[id] as RangeSensorType}
@@ -279,7 +279,7 @@ const ModuleForId = ({
       return (
         <ButtonsModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -290,7 +290,7 @@ const ModuleForId = ({
       return (
         <PinsModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -301,7 +301,7 @@ const ModuleForId = ({
       return (
         <DataLoggingModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           logFull={state.dataLogging.logFull}
           minimised={minimised}
         />
@@ -310,7 +310,7 @@ const ModuleForId = ({
       return (
         <AccelerometerModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           running={running}
@@ -321,7 +321,7 @@ const ModuleForId = ({
       return (
         <CompassModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           state={state}
           onValueChange={onValueChange}
           minimised={minimised}
@@ -331,7 +331,7 @@ const ModuleForId = ({
       return (
         <RadioModule
           key={id}
-          icon={<Icon as={icons[id]} color="brand2.400" boxSize="6" />}
+          icon={<Icon as={icons[id]} color="brand2.500" boxSize="6" />}
           enabled={state.radio.enabled}
           group={state.radio.group}
           minimised={minimised}

From c2a1421de4023b305504802785455c0f1ffaca69 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Tue, 12 Dec 2023 15:49:16 +0000
Subject: [PATCH 5/5] Bump theme package

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 6d2255175..e6ce46664 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-brand.guidelines.20 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-brand.guidelines.21 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}