Default to high contrast mode in Scratch projects

.yarnrc.yml

@@ -13,4 +13,6 @@ npmMinimalAgeGate: 7d
 npmPreapprovedPackages:
   - "@raspberrypifoundation/design-system-react"
   - "@raspberrypifoundation/design-system-core"
-  - "@raspberrypifoundation/python-friendly-error-messages"
+  - "@RaspberryPiFoundation/scratch-gui"
+  - "@raspberrypifoundation/python-friendly-error-messages"
+  - "@raspberrypifoundation/rpf-markdown-core"

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));

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",

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 {

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<key>` class 
+// key:value pairs for mapping each `code.block3<key>` class
 // onto the matching `--scratch-<value>-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;
 }

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);
 };

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";
   }

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