Scale design to maximise available screen space (#945)

Author: microbit-robert

.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/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.4.2 @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/python-editor-next-microbit@0.1.0-dev.154
+    run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/python-editor-next-microbit@0.1.0-dev.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>