Update EditorPanel to honour font size changes (#1277)

In #1264 we added a `typography.style-1()` to the `.cm-scroller` class
in the EditorPanel css, which unwittingly prevented font sizes from
taking effect.

This PR reverts that, but also tidies up the styling to use Design
System typography styles instead, so line spacing etc goes with it.

Also removes the `$space-0-5` var in favour of the Design System vars.

e.g.

Small:
<img width="841" height="649" alt="image"
src="https://github.com/user-attachments/assets/394b807d-a051-427c-b950-afbce7906a7c"
/>


Medium:
<img width="857" height="596" alt="image"
src="https://github.com/user-attachments/assets/ea3453ea-7f86-4bd1-a36e-6e7243706928"
/>

Large:
<img width="861" height="496" alt="image"
src="https://github.com/user-attachments/assets/3025bc83-eb31-429e-bff2-9c9eeebe1ea4"
/>

Author: patch0

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+- Font size selection now works in the web component (#1277)
+
 ## [0.34.0] - 2025-11-17
 
 ### Added

src/assets/stylesheets/EditorPanel.scss

@@ -1,6 +1,5 @@
-@use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-size" as *;
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
+@forward '@raspberrypifoundation/design-system-core/scss/properties/spacing';
+@use '@raspberrypifoundation/design-system-core/scss/mixins/typography' as typography;
 
 // Scrollbar-width is needed from scrollbar to show in Chrome
 .editor-wrapper {
@@ -26,8 +25,6 @@
     }
 
     .cm-scroller {
-      @include typography.style-1();
-
       // Needed here for horizontal scroll
       overflow: auto;
       scrollbar-width: thin;
@@ -37,22 +34,22 @@
 
       .cm-content {
         flex: 1;
-        padding-block-start: $space-0-5;
-        margin-inline-end: $space-0-5;
+        padding-block-start: var(--space-0-5);
+        margin-inline-end: var(--space-0-5);
       }
     }
   }
 
   &--small {
-    @include font-size-1(regular);
+    @include typography.style-1();
   }
 
   &--medium {
-    @include font-size-1-5(regular);
+    @include typography.style-1-5();
   }
 
   &--large {
-    @include font-size-2(regular);
+    @include typography.style-2();
   }
 }