From db713c2a50d43fb965d1f10397b72d20783d0c9d Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Fri, 9 Sep 2022 09:22:32 +0100 Subject: [PATCH 01/17] Global change to font-size for 90% view. --- src/App.css | 4 +++- src/serial/SerialArea.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index c90dd3742..8d5c66bd3 100644 --- a/src/App.css +++ b/src/App.css @@ -25,7 +25,9 @@ :root { /* Seems to fix a Safari glitch: https://github.com/microbit-foundation/python-editor-next/issues/369 */ - font-size: 16px; + /* font-size: 16px; */ + + font-size: 90%; } html, diff --git a/src/serial/SerialArea.tsx b/src/serial/SerialArea.tsx index e821ba09c..6a98d2504 100644 --- a/src/serial/SerialArea.tsx +++ b/src/serial/SerialArea.tsx @@ -82,6 +82,6 @@ const SerialArea = ({ ); }; -SerialArea.compactSize = 48; +SerialArea.compactSize = 43.19; export default SerialArea; From 88058bf17fc2a596090baea1faee1ade0d6b1d5c Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Tue, 13 Sep 2022 10:11:43 +0100 Subject: [PATCH 02/17] 90 percent demo using default theme. --- craco.config.js | 4 +-- src/App.css | 4 +-- src/deployment/default/components/text.ts | 20 +++++++++++ src/deployment/default/font-sizes.ts | 22 ++++++++++++ src/deployment/default/spacing.ts | 44 +++++++++++++++++++++++ src/deployment/default/theme.ts | 6 ++++ src/deployment/misc.ts | 4 +-- src/workbench/Workbench.tsx | 2 +- 8 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 src/deployment/default/components/text.ts create mode 100644 src/deployment/default/font-sizes.ts create mode 100644 src/deployment/default/spacing.ts diff --git a/craco.config.js b/craco.config.js index 34cf6611e..b16c24a52 100644 --- a/craco.config.js +++ b/craco.config.js @@ -14,9 +14,7 @@ const internal = "src/deployment/default"; module.exports = { webpack: { alias: { - "theme-package": fs.existsSync(external) - ? theme - : path.resolve(__dirname, internal), + "theme-package": path.resolve(__dirname, internal), }, configure: { ignoreWarnings: [ diff --git a/src/App.css b/src/App.css index 8d5c66bd3..c90dd3742 100644 --- a/src/App.css +++ b/src/App.css @@ -25,9 +25,7 @@ :root { /* Seems to fix a Safari glitch: https://github.com/microbit-foundation/python-editor-next/issues/369 */ - /* font-size: 16px; */ - - font-size: 90%; + font-size: 16px; } html, diff --git a/src/deployment/default/components/text.ts b/src/deployment/default/components/text.ts new file mode 100644 index 000000000..a00a1d426 --- /dev/null +++ b/src/deployment/default/components/text.ts @@ -0,0 +1,20 @@ +/** + * (c) 2021, 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; diff --git a/src/deployment/default/font-sizes.ts b/src/deployment/default/font-sizes.ts new file mode 100644 index 000000000..8513f6a2a --- /dev/null +++ b/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; diff --git a/src/deployment/default/spacing.ts b/src/deployment/default/spacing.ts new file mode 100644 index 000000000..241524e5f --- /dev/null +++ b/src/deployment/default/spacing.ts @@ -0,0 +1,44 @@ +/** + * (c) 2022, Micro:bit Educational Foundation and contributors + * + * SPDX-License-Identifier: MIT + */ +const spacing = { + space: { + 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 spacing; diff --git a/src/deployment/default/theme.ts b/src/deployment/default/theme.ts index 2c2ff5554..8b5d36019 100644 --- a/src/deployment/default/theme.ts +++ b/src/deployment/default/theme.ts @@ -6,21 +6,27 @@ 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 spacing from "./spacing"; 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, + ...spacing, radii, colors, components: { Alert, Button, Tabs, + Text, }, }; diff --git a/src/deployment/misc.ts b/src/deployment/misc.ts index 881b9ff49..e3f47b2e6 100644 --- a/src/deployment/misc.ts +++ b/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 = 16; diff --git a/src/workbench/Workbench.tsx b/src/workbench/Workbench.tsx index 33d473386..127a5d4c3 100644 --- a/src/workbench/Workbench.tsx +++ b/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. From 8a51dfb80f3e6ef01cfa1c89c446f0501868f37e Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Tue, 13 Sep 2022 13:36:55 +0100 Subject: [PATCH 03/17] Fix code embed height --- src/documentation/common/CodeEmbed.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/documentation/common/CodeEmbed.tsx b/src/documentation/common/CodeEmbed.tsx index 1a25ea0c1..87d7c8564 100644 --- a/src/documentation/common/CodeEmbed.tsx +++ b/src/documentation/common/CodeEmbed.tsx @@ -237,6 +237,7 @@ const CodePopUp = ({ return ( Date: Tue, 13 Sep 2022 13:41:02 +0100 Subject: [PATCH 04/17] Reset craco config changes. --- craco.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/craco.config.js b/craco.config.js index b16c24a52..34cf6611e 100644 --- a/craco.config.js +++ b/craco.config.js @@ -14,7 +14,9 @@ const internal = "src/deployment/default"; module.exports = { webpack: { alias: { - "theme-package": path.resolve(__dirname, internal), + "theme-package": fs.existsSync(external) + ? theme + : path.resolve(__dirname, internal), }, configure: { ignoreWarnings: [ From b968bfadb24c58c4ee48f7ae26af66985495efd1 Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Tue, 13 Sep 2022 13:41:10 +0100 Subject: [PATCH 05/17] Use colour scheme for reset button. --- src/project/ProjectAreaNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/project/ProjectAreaNav.tsx b/src/project/ProjectAreaNav.tsx index e56f31ddf..b7eaac00d 100644 --- a/src/project/ProjectAreaNav.tsx +++ b/src/project/ProjectAreaNav.tsx @@ -15,7 +15,7 @@ const ProjectAreaNav = (props: BoxProps) => { - + From 45dde333b0d7555a42ec4ff111e9540e5d902a08 Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Tue, 13 Sep 2022 14:19:22 +0100 Subject: [PATCH 06/17] Use branch version of theme. --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8e2bf2e34..128206162 100644 --- a/.circleci/config.yml +++ b/.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-percent.90.169 update_version: &update_version run: npm run ci:update-version build: &build From 761dc626b9fd3e7fb194f2f759f399dd55e32eda Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Tue, 13 Sep 2022 14:39:47 +0100 Subject: [PATCH 07/17] Use new language variant button. --- .circleci/config.yml | 2 +- src/settings/LanguageDialog.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 128206162..ad31c4e51 100644 --- a/.circleci/config.yml +++ b/.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-percent.90.169 + 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-percent.90.171 update_version: &update_version run: npm run ci:update-version build: &build diff --git a/src/settings/LanguageDialog.tsx b/src/settings/LanguageDialog.tsx index 1a86a1ce3..ed44486d6 100644 --- a/src/settings/LanguageDialog.tsx +++ b/src/settings/LanguageDialog.tsx @@ -95,11 +95,9 @@ const LanguageCard = ({ language, onChooseLanguage }: LanguageCardProps) => { return (