Replace react-toggle with DS Switch (#1503)

Closes
RaspberryPiFoundation/digital-editor-issues#1499

### Changes
- Bumped Design System React to 2.9.2 to use Switch component and
updated colour variable.
- Replaced react-toggle Toggle with Switch and removed react-toggle
dependency
- Increased height of colour and timer controls to match the minimum
height applied to `.rpf-switch` for a WCAG AAA touch-target requirement
- Updated colours as per Max's design

### Screen recordings
- Before

https://github.com/user-attachments/assets/4a280a36-b5d9-4a12-b461-30af7b64e854

- After

https://github.com/user-attachments/assets/35745f4e-701e-4eaf-a8a3-2fe2eb7187fa

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: cocomarine

package.json

@@ -14,7 +14,7 @@
     "@codemirror/view": "^6.3.0",
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
-    "@raspberrypifoundation/design-system-react": "^2.7.0",
+    "@raspberrypifoundation/design-system-react": "^2.9.2",
     "@raspberrypifoundation/python-friendly-error-messages": "0.7.0",
     "@react-three/drei": "^10.0.0",
     "@react-three/fiber": "^9.6.1",
@@ -64,7 +64,6 @@
     "react-tabs": "^3.2.3",
     "react-timer-hook": "^3.0.5",
     "react-toastify": "^11.1.0",
-    "react-toggle": "^4.1.3",
     "redux": "^4.2.1",
     "redux-oidc": "^4.0.0-beta1",
     "scratchReactDomVendor": "npm:react-dom@18.3.1",

src/assets/stylesheets/AstroPiModel.scss

@@ -102,6 +102,7 @@
           font-family: var(--wc-font-family-monospace);
 
           &-timer {
+            flex: 1;
             margin-block-start: 0;
             padding: $space-0-5 0;
             inline-size: 100%;
@@ -120,6 +121,14 @@
           label {
             flex: 1;
           }
+
+          .rpf-input-field {
+            margin-block-end: 0;
+          }
+
+          .rpf-switch {
+            gap: 0;
+          }
         }
 
         &-input {
@@ -209,11 +218,12 @@
             background-color: $rpf-grey-800;
             border: 1px solid $rpf-grey-500;
 
-            .react-toggle {
-              &-thumb {
-                border: 1px solid $rpf-white;
-                background-color: $rpf-white;
-              }
+            .rpf-switch {
+              --rpf-switch-on-color: var(--rpf-green-400);
+              --rpf-switch-handle-on-color: var(--rpf-grey-600);
+              --rpf-switch-off-color: var(--rpf-grey-150);
+              --rpf-switch-icon-off-color: var(--rpf-text-primary);
+              --rpf-switch-track-color: var(--rpf-grey-500);
             }
           }
         }
@@ -263,9 +273,8 @@
             background-color: $rpf-white;
             border: 2px solid $rpf-grey-300;
 
-            .react-toggle-thumb {
-              border: 1px solid $rpf-grey-100;
-              background-color: $rpf-grey-100;
+            .rpf-switch {
+              --rpf-switch-on-color: var(--rpf-green-800);
             }
           }
         }

src/assets/stylesheets/ExternalStyles.scss

@@ -1,6 +1,5 @@
 @forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/scss/design-system-core";
 @use "../../../node_modules/react-tabs/style/react-tabs.css";
-@use "../../../node_modules/react-toggle/style.css";
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
 @use "../../../node_modules/react-toastify/dist/ReactToastify.css";

src/components/AstroPiModel/AstroPiControls/MotionInput.jsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { useEffect, useState, startTransition } from "react";
 import { useSelector } from "react-redux";
-import Toggle from "react-toggle";
+import { Switch } from "@raspberrypifoundation/design-system-react";
 import Sk from "skulpt";
 import "../../../assets/stylesheets/AstroPiModel.scss";
-import "react-toggle/style.css";
 import { useTranslation } from "react-i18next";
 
 const MotionInput = (props) => {
@@ -45,9 +44,10 @@ const MotionInput = (props) => {
         <label htmlFor={`sense_hat_motion`}>
           {t("output.senseHat.controls.motionSensorOptions.no")}
         </label>
-        <Toggle
+        <Switch
           id="sense_hat_motion"
-          icons={false}
+          name="senseHatMotionToggle"
+          icon
           checked={value}
           onChange={(e) => setValue(e.target.checked)}
         />

yarn.lock

@@ -4091,20 +4091,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
+"@raspberrypifoundation/design-system-core@npm:^2.4.7":
+  version: 2.4.7
+  resolution: "@raspberrypifoundation/design-system-core@npm:2.4.7"
   dependencies:
     classnames: "npm:^2.3.2"
-  checksum: 10/4f989c48c9e93f57f65a6979c37c6b0cda69fb8e06c6dffb91dc5c407783775422b527907a081258aa16dab06977af9e74e053456b3d98680fc1f1c86218a417
+  checksum: 10/3692700108f69bb41df4d0e5c512e87efbd5b1c5d929f86bfb62bc80b2a24a71f48f9b232be748aea6c937331324677c58e5f90ce54eab32ae4f8752dd614fd5
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:^2.7.0":
-  version: 2.7.3
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.7.3"
+"@raspberrypifoundation/design-system-react@npm:^2.9.2":
+  version: 2.9.2
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.9.2"
   dependencies:
-    "@raspberrypifoundation/design-system-core": "npm:^2.4.0"
+    "@raspberrypifoundation/design-system-core": "npm:^2.4.7"
     classnames: "npm:^2.5.1"
     lucide-react: "npm:^0.553.0"
   peerDependencies:
@@ -4116,7 +4116,7 @@ __metadata:
       optional: false
     react-dom:
       optional: false
-  checksum: 10/28db4405bbb59c612308411f12201ec5b6437116078187286e76022822a6e41be54cb78a82b00857218f07f6e6aeb3efdebcfa7e87425ce0e9302f0043d1ed6c
+  checksum: 10/36ec7dc3ade7da08b0b2d7fbec6e7114cc84ab14c7fec566969ad5d30c8dbd694643295fbb97ed51f7a85b643fa9e06146e852860a68f563e81aea9941bb91f9
   languageName: node
   linkType: hard
 
@@ -4135,7 +4135,7 @@ __metadata:
     "@codemirror/view": "npm:^6.3.0"
     "@hello-pangea/dnd": "npm:^16.2.0"
     "@juggle/resize-observer": "npm:^3.3.1"
-    "@raspberrypifoundation/design-system-react": "npm:^2.7.0"
+    "@raspberrypifoundation/design-system-react": "npm:^2.9.2"
     "@raspberrypifoundation/python-friendly-error-messages": "npm:0.7.0"
     "@react-three/drei": "npm:^10.0.0"
     "@react-three/fiber": "npm:^9.6.1"
@@ -4233,7 +4233,6 @@ __metadata:
     react-tabs: "npm:^3.2.3"
     react-timer-hook: "npm:^3.0.5"
     react-toastify: "npm:^11.1.0"
-    react-toggle: "npm:^4.1.3"
     redux: "npm:^4.2.1"
     redux-mock-store: "npm:^1.5.4"
     redux-oidc: "npm:^4.0.0-beta1"
@@ -18321,19 +18320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-toggle@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "react-toggle@npm:4.1.3"
-  dependencies:
-    classnames: "npm:^2.2.5"
-  peerDependencies:
-    prop-types: ">= 15.3.0 < 19"
-    react: ">= 15.3.0 < 19"
-    react-dom: ">= 15.3.0 < 19"
-  checksum: 10/b63b7c3bd37431c4dc3cce741143a490239ba4981302a1af0f5aeb83635bf580bc1b142097eb28a4f52fef8dee40913085aa30d52579f355992689002d2602ca
-  languageName: node
-  linkType: hard
-
 "react-tooltip@npm:4.5.1":
   version: 4.5.1
   resolution: "react-tooltip@npm:4.5.1"