diff --git a/.yarnrc.yml b/.yarnrc.yml index 93d3a1dc6..f60e66e1f 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -13,4 +13,6 @@ npmMinimalAgeGate: 7d npmPreapprovedPackages: - "@raspberrypifoundation/design-system-react" - "@raspberrypifoundation/design-system-core" - - "@raspberrypifoundation/python-friendly-error-messages" \ No newline at end of file + - "@RaspberryPiFoundation/scratch-gui" + - "@raspberrypifoundation/python-friendly-error-messages" + - "@raspberrypifoundation/rpf-markdown-core" diff --git a/apps/scratch-frame/src/WrappedScratchGui.jsx b/apps/scratch-frame/src/WrappedScratchGui.jsx index 04b0345d3..02aa17bb0 100644 --- a/apps/scratch-frame/src/WrappedScratchGui.jsx +++ b/apps/scratch-frame/src/WrappedScratchGui.jsx @@ -14,15 +14,24 @@ const ScratchGuiWithIntegration = ScratchIntegrationHOC(ScratchComponent); scratchGui.legacyConfig.storage.getLibraryAssetUrl = buildLibraryAssetUrl; -export const createScratchStore = (locale) => - createStore( +export const createScratchStore = (locale) => { + const initialState = scratchGui.buildInitialState(scratchGui.legacyConfig); + + return createStore( combineReducers(scratchGui.guiReducers), { locales: scratchGui.initLocale(scratchGui.localesInitialState, locale), - scratchGui: scratchGui.buildInitialState(scratchGui.legacyConfig), + scratchGui: { + ...initialState, + settings: { + ...initialState.settings, + colorMode: "high-contrast", + }, + }, }, scratchGui.guiMiddleware, ); +}; const WrappedScratchGui = ({ locale, ...componentProps }) => { const [store] = useState(() => createScratchStore(locale)); diff --git a/package.json b/package.json index 3f7e6e832..5ee85d439 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@juggle/resize-observer": "^3.3.1", "@raspberrypifoundation/design-system-react": "^2.10.4", "@raspberrypifoundation/python-friendly-error-messages": "0.8.0", - "@raspberrypifoundation/rpf-markdown-core": "^0.1.4", + "@raspberrypifoundation/rpf-markdown-core": "^0.2.0", "@react-three/drei": "^10.0.0", "@react-three/fiber": "^9.6.1", "@reduxjs/toolkit": "^1.6.2", diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss index efb55d5f7..5f529141d 100644 --- a/src/assets/stylesheets/Instructions.scss +++ b/src/assets/stylesheets/Instructions.scss @@ -17,10 +17,8 @@ } } - @media (prefers-contrast: more) { - code[class*="block3"] { - color: var(--rpf-black); - } + code[class*="block3"] { + color: var(--rpf-black); } &__content { diff --git a/src/assets/stylesheets/_scratch_colours.scss b/src/assets/stylesheets/_scratch_colours.scss index ad09be0c7..e3cde868e 100644 --- a/src/assets/stylesheets/_scratch_colours.scss +++ b/src/assets/stylesheets/_scratch_colours.scss @@ -1,7 +1,7 @@ // Scratch block category colours, sourced from // @RaspberryPiFoundation/scratch-gui's src/lib/settings/color-mode/*/index.js -// key:value pairs for mapping each `code.block3` class +// key:value pairs for mapping each `code.block3` class // onto the matching `--scratch--primary colour variables $scratch-block-categories: ( "control": "control", @@ -17,31 +17,15 @@ $scratch-block-categories: ( ); .project-instructions { - --scratch-motion-primary: #4c97ff; - --scratch-looks-primary: #9966ff; - --scratch-sounds-primary: #cf63cf; - --scratch-control-primary: #ffab19; - --scratch-events-primary: #ffbf00; - --scratch-sensing-primary: #5cb1d6; - --scratch-pen-primary: #0fbd8c; - --scratch-operators-primary: #59c059; - --scratch-data-primary: #ff8c1a; - --scratch-data-lists-primary: #ff661a; - --scratch-more-primary: #ff6680; -} - -@media (prefers-contrast: more) { - .project-instructions { - --scratch-motion-primary: #80b5ff; - --scratch-looks-primary: #ccb3ff; - --scratch-sounds-primary: #e19de1; - --scratch-control-primary: #ffbe4c; - --scratch-events-primary: #ffd966; - --scratch-sensing-primary: #85c4e0; - --scratch-pen-primary: #13ecaf; - --scratch-operators-primary: #7ece7e; - --scratch-data-primary: #ffa54c; - --scratch-data-lists-primary: #ff9966; - --scratch-more-primary: #ff99aa; - } + --scratch-motion-primary: #80b5ff; + --scratch-looks-primary: #ccb3ff; + --scratch-sounds-primary: #e19de1; + --scratch-control-primary: #ffbe4c; + --scratch-events-primary: #ffd966; + --scratch-sensing-primary: #85c4e0; + --scratch-pen-primary: #13ecaf; + --scratch-operators-primary: #7ece7e; + --scratch-data-primary: #ffa54c; + --scratch-data-lists-primary: #ff9966; + --scratch-more-primary: #ff99aa; } diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.jsx index ccacd1191..992e4590e 100644 --- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.jsx +++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsStep/InstructionsStep.jsx @@ -8,7 +8,9 @@ const getStepHtml = (step) => { const html = step.content !== undefined ? step.content - : processEditorProject(step.markdown_content ?? ""); + : processEditorProject(step.markdown_content ?? "", { + scratchblocks: { highContrast: true }, + }); return sanitiseInstructions(html); }; diff --git a/src/utils/scratchblocks.js b/src/utils/scratchblocks.js index 048db7f9b..c002c2b47 100644 --- a/src/utils/scratchblocks.js +++ b/src/utils/scratchblocks.js @@ -70,7 +70,7 @@ const localeMap = { export const scratchblocksInit = (currentLocale, container = document) => { const selectors = { ".language-blocks": "scratch2", - ".language-blocks3": "scratch3", + ".language-blocks3": "scratch3-high-contrast", }; if (!languagesLoaded) { @@ -134,7 +134,9 @@ const renderScratchblock = (block, currentLocale, style) => { return; } - if (style === "scratch3") { + svg.classList.add(`scratchblocks-style-${style}`); + + if (style.startsWith("scratch3")) { svg.style.transform = "scale(1)"; svg.style.transformOrigin = "0 0"; } diff --git a/yarn.lock b/yarn.lock index 03948eae0..f71e5e964 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2479,7 +2479,7 @@ __metadata: "@juggle/resize-observer": "npm:^3.3.1" "@raspberrypifoundation/design-system-react": "npm:^2.10.4" "@raspberrypifoundation/python-friendly-error-messages": "npm:0.8.0" - "@raspberrypifoundation/rpf-markdown-core": "npm:^0.1.4" + "@raspberrypifoundation/rpf-markdown-core": "npm:^0.2.0" "@react-three/drei": "npm:^10.0.0" "@react-three/fiber": "npm:^9.6.1" "@react-three/test-renderer": "npm:^9.0.0" @@ -2582,16 +2582,16 @@ __metadata: languageName: node linkType: hard -"@raspberrypifoundation/rpf-markdown-core@npm:^0.1.4": - version: 0.1.4 - resolution: "@raspberrypifoundation/rpf-markdown-core@npm:0.1.4" +"@raspberrypifoundation/rpf-markdown-core@npm:^0.2.0": + version: 0.2.0 + resolution: "@raspberrypifoundation/rpf-markdown-core@npm:0.2.0" dependencies: happy-dom: "npm:^20.9.0" marked: "npm:^17.0.5" marked-gfm-heading-id: "npm:^4.1.4" prismjs: "npm:^1.30.0" scratchblocks: "npm:^3.6.4" - checksum: 10/b43e91495ae756c4ebfb6e4936ad77fe4f02d3c6bbc6f376c7dfa16eab6b3ef1901842aab98cdf1ebc488e8e3d4591c4227e3186a13c85016fcb7855781e0344 + checksum: 10/abc8b16b91b8f0745063dad951e26bc2922679dddfe2ffe0a622882047bdd5943456175b24e9dfaec4e640230c918dd9aecfabb47b30adaad09030a0976d4fd4 languageName: node linkType: hard