Scale design to maximise available screen space

.circleci/config.yml

@@ -34,7 +34,7 @@ _steps:
   install_dependencies: &install_dependencies
     run: npm ci --cache .npm-cache && sudo npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && sudo npm i -g @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
   install_theme: &install_theme
-    run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].154
+    run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].180
   update_version: &update_version
     run: npm run ci:update-version
   build: &build

src/deployment/default/common-sizes.ts

@@ -0,0 +1,42 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+const commonSizes = {
+  px: "1px",
+  0.5: "0.11rem",
+  1: "0.22rem",
+  1.5: "0.33rem",
+  2: "0.44rem",
+  2.5: "0.55rem",
+  3: "0.66rem",
+  3.5: "0.77rem",
+  4: "0.88rem",
+  5: "1.1rem",
+  6: "1.32rem",
+  7: "1.54rem",
+  8: "1.76rem",
+  9: "1.98rem",
+  10: "2.2rem",
+  12: "2.64rem",
+  14: "3.08rem",
+  16: "3.52rem",
+  20: "4.4rem",
+  24: "5.28rem",
+  28: "6.16rem",
+  32: "7.04rem",
+  36: "7.92rem",
+  40: "8.8rem",
+  44: "9.68rem",
+  48: "10.56rem",
+  52: "11.44rem",
+  56: "12.32rem",
+  60: "13.2rem",
+  64: "14.08rem",
+  72: "15.84rem",
+  80: "17.6rem",
+  96: "21.12rem",
+};
+
+export default commonSizes;

src/deployment/default/components/text.ts

@@ -0,0 +1,20 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+const Text = {
+  sizes: {
+    sm: {
+      fontSize: "sm",
+    },
+    md: {
+      fontSize: "md",
+    },
+  },
+  defaultProps: {
+    size: "md",
+  },
+};
+
+export default Text;

src/deployment/default/font-sizes.ts

@@ -0,0 +1,22 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+const fontSizes = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "0.9rem",
+  lg: "1.012rem",
+  xl: "1.125rem",
+  "2xl": "1.35rem",
+  "3xl": "1.687rem",
+  "4xl": "2.025rem",
+  "5xl": "2.7rem",
+  "6xl": "3.375rem",
+  "7xl": "4.05rem",
+  "8xl": "5.4rem",
+  "9xl": "7.2rem",
+};
+
+export default fontSizes;

src/deployment/default/sizes.ts

@@ -0,0 +1,35 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import commonSizes from "./common-sizes";
+
+const sizes = {
+  ...commonSizes,
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem",
+  container: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+  },
+};
+
+export default sizes;

src/deployment/default/space.ts

@@ -0,0 +1,12 @@
+/**
+ * (c) 2022, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import commonSizes from "./common-sizes";
+
+const space = {
+  ...commonSizes,
+};
+
+export default space;

src/deployment/default/theme.ts

@@ -6,21 +6,29 @@
 import { extendTheme, withDefaultVariant } from "@chakra-ui/react";
 
 import fonts from "./fonts";
+import fontSizes from "./font-sizes";
 import radii from "./radii";
 import colors from "./colors";
+import sizes from "./sizes";
+import space from "./space";
 import Button from "./components/button";
 import Tabs from "./components/tabs";
 import Alert from "./components/alert";
+import Text from "./components/text";
 
 // See https://chakra-ui.com/docs/theming/customize-theme
 const overrides = {
   fonts,
+  fontSizes,
+  sizes,
+  space,
   radii,
   colors,
   components: {
     Alert,
     Button,
     Tabs,
+    Text,
   },
 };
 

src/deployment/misc.ts

@@ -6,5 +6,5 @@
 
 // Miscellaneous items that haven't been properly integrated into the branding.
 export const backgroundColorTerm = "#333333";
-export const defaultCodeFontSizePt = 16;
-export const topBarHeight = "4.25rem";
+export const defaultCodeFontSizePt = 14;
+export const topBarHeight = "4rem";

src/documentation/common/CodeEmbed.tsx

@@ -237,6 +237,7 @@ const CodePopUp = ({
   return (
     <Portal>
       <Code
+        fontSize="md"
         zIndex={zIndexCodePopUp}
         concise={concise}
         full={full}

src/project/ProjectAreaNav.tsx

@@ -15,7 +15,7 @@ const ProjectAreaNav = (props: BoxProps) => {
         <NewButton mode="button" />
         <OpenButton mode="button" />
         <Box>
-          <ResetButton mode="button" mt={5} color="#ae1f1f" />
+          <ResetButton mode="button" mt={5} colorScheme="red" />
         </Box>
       </VStack>
     </Flex>

src/serial/SerialArea.tsx

@@ -82,6 +82,6 @@ const SerialArea = ({
     </TerminalContext>
   );
 };
-SerialArea.compactSize = 48;
+SerialArea.compactSize = 43.19;
 
 export default SerialArea;

src/settings/LanguageDialog.tsx

@@ -95,11 +95,9 @@ const LanguageCard = ({ language, onChooseLanguage }: LanguageCardProps) => {
   return (
     <Button
       padding={3}
-      variant="outline"
+      variant="language"
       alignItems="stretch"
       borderRadius="xl"
-      colorScheme="gray"
-      textColor="brand.500"
       onClick={() => onChooseLanguage(language.id)}
       height="auto"
       data-testid={language.id}

src/simulator/ButtonsModule.tsx

@@ -41,24 +41,26 @@ const ButtonsModule = ({
           </>
         )}
       </VStack>
-      <SensorInput
-        type="button"
-        sensorId="buttonA"
-        label="A"
-        state={state}
-        onValueChange={onValueChange}
-        running={running}
-        minimised={minimised}
-      />
-      <SensorInput
-        type="button"
-        sensorId="buttonB"
-        label="B"
-        state={state}
-        onValueChange={onValueChange}
-        running={running}
-        minimised={minimised}
-      />
+      <HStack spacing={2}>
+        <SensorInput
+          type="button"
+          sensorId="buttonA"
+          label="A"
+          state={state}
+          onValueChange={onValueChange}
+          running={running}
+          minimised={minimised}
+        />
+        <SensorInput
+          type="button"
+          sensorId="buttonB"
+          label="B"
+          state={state}
+          onValueChange={onValueChange}
+          running={running}
+          minimised={minimised}
+        />
+      </HStack>
     </HStack>
   );
 };

src/simulator/PinsModule.tsx

@@ -45,43 +45,45 @@ const PinsModule = ({
           </>
         )}
       </VStack>
-      <SensorInput
-        type="pin"
-        sensorId="pin0"
-        label="0"
-        state={state}
-        onValueChange={onValueChange}
-        running={simState}
-        minimised={minimised}
-      />
-      <SensorInput
-        type="pin"
-        sensorId="pin1"
-        label="1"
-        state={state}
-        onValueChange={onValueChange}
-        running={simState}
-        minimised={minimised}
-      />
-      <SensorInput
-        type="pin"
-        sensorId="pin2"
-        label="2"
-        state={state}
-        onValueChange={onValueChange}
-        running={simState}
-        minimised={minimised}
-      />
-      <SensorInput
-        type="pin"
-        sensorId="pinLogo"
-        label={touchLogoLabel}
-        logo={brand.squareLogo}
-        state={state}
-        onValueChange={onValueChange}
-        running={simState}
-        minimised={minimised}
-      />
+      <HStack spacing={2}>
+        <SensorInput
+          type="pin"
+          sensorId="pin0"
+          label="0"
+          state={state}
+          onValueChange={onValueChange}
+          running={simState}
+          minimised={minimised}
+        />
+        <SensorInput
+          type="pin"
+          sensorId="pin1"
+          label="1"
+          state={state}
+          onValueChange={onValueChange}
+          running={simState}
+          minimised={minimised}
+        />
+        <SensorInput
+          type="pin"
+          sensorId="pin2"
+          label="2"
+          state={state}
+          onValueChange={onValueChange}
+          running={simState}
+          minimised={minimised}
+        />
+        <SensorInput
+          type="pin"
+          sensorId="pinLogo"
+          label={touchLogoLabel}
+          logo={brand.squareLogo}
+          state={state}
+          onValueChange={onValueChange}
+          running={simState}
+          minimised={minimised}
+        />
+      </HStack>
     </HStack>
   );
 };

src/workbench/SideBarHeader.tsx

@@ -183,7 +183,9 @@ const SideBarHeader = ({
         backgroundColor="brand.500"
         boxShadow="0px 4px 16px #00000033"
         zIndex={zIndexSidebarHeader}
-        height={searchAvailable && searchModal.isOpen ? "5.5rem" : topBarHeight}
+        height={
+          searchAvailable && searchModal.isOpen ? "4.95rem" : topBarHeight
+        }
         alignItems="center"
         justifyContent="space-between"
         pr={4}
@@ -197,7 +199,7 @@ const SideBarHeader = ({
           rel="noopener noreferrer"
           aria-label={intl.formatMessage({ id: "visit-dot-org" })}
         >
-          <HStack spacing={3.5} pl={4} pr={4}>
+          <HStack spacing="0.875rem" px="1rem">
             <Box width="3.56875rem" color="white" role="img" ref={faceLogoRef}>
               {brand.squareLogo}
             </Box>

src/workbench/Workbench.tsx

@@ -32,7 +32,7 @@ import SideBar from "./SideBar";
 import { useSelection } from "./use-selection";
 
 const minimums: [number, number] = [380, 580];
-const simulatorMinimums: [number, number] = [300, 300];
+const simulatorMinimums: [number, number] = [275, 0];
 
 /**
  * The main app layout with resizable panels.