Brand colour tweaks

I've aligned the tints/shades with the brand guidelines. There are some minor visual differences that we'll discuss internally.
microbit-foundation · Dec 12, 2023 · 3045e8b · 3045e8b
1 parent 638f3ee
commit 3045e8b
Show file tree

Hide file tree

Showing 40 changed files with 89 additions and 80 deletions.
diff --git 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/[email protected]dev.18  @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/[email protected]brand.guidelines.20 @microbit-foundation/[email protected] @microbit-foundation/[email protected] @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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",