[CC Projects] Lines are sometimes off by one line (#1264)

## Status

closes #1259, #1253

## What's changed

* Remove border on code output blocks
* Fix alignment of line numbers in code blocks by
  * Using variables to set fonts consistently in the interface
* Fixing line spacing in a number of spots using the typography mixins
supplied by the design system.

This also unifies the list of fonts used in the Editor to the list in
settings/fonts. They can be added-to/changed by setting
`--editor-font-family-sans-serif` and `--editor-font-family-monospace`.

## Screenshots

| Problem | Before | After |
|--------|--------|--------|
| Emojis breaking highligting | <img width="444" height="400"
alt="image"
src="https://github.com/user-attachments/assets/7611d6e6-ef75-4e83-9ca4-c8933c208326"
/> | <img width="444" height="439" alt="image"
src="https://github.com/user-attachments/assets/1647e971-ec8a-4078-8ddf-9eea737541af"
/> |
| Another example | <img width="596" height="292" alt="image"
src="https://github.com/user-attachments/assets/c90acdc8-d742-4fbd-942f-e92d052b8bd5"
/> | <img width="519" height="333" alt="image"
src="https://github.com/user-attachments/assets/daa129b5-1e00-4a32-9bf9-6273982cf857"
/> |
| Fixes border on output | <img width="575" height="123" alt="image"
src="https://github.com/user-attachments/assets/dad91111-b952-4bff-a0d3-38b84a2df708"
/> | <img width="530" height="113" alt="image"
src="https://github.com/user-attachments/assets/f617e682-2fdb-4d8b-96c5-c36ff6ea6988"
/> |

---------

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Patrick Cherry <[email protected]>
Co-authored-by: HJ <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264)
+
 ### Changed
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
@@ -19,6 +23,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Styling design system components used in the web component (#1263)
 - Sidebar panel overflow for plugins (#1266, #1269)
+- Extra border around code output in the instructions panel (#1253)
+- Line numbering alignment in code blocks in the instructions panel (#1259)
 
 ## [0.33.0] - 2025-10-15
 

src/assets/stylesheets/App.scss

@@ -21,9 +21,7 @@ button {
 }
 
 input {
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--wc-font-family-sans-serif);
 }
 
 .--light {
@@ -60,9 +58,7 @@ input {
 #app {
   display: flex;
   flex-flow: column;
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--wc-font-family-sans-serif);
   @include font-size-1(regular);
 }
 

src/assets/stylesheets/AstroPiModel.scss

@@ -99,8 +99,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-            monospace;
+          font-family: var(--wc-font-family-monospace);
 
           &-timer {
             margin-block-start: 0;

src/assets/stylesheets/Button.scss

@@ -10,7 +10,7 @@
   color: inherit;
   cursor: pointer;
   display: inline-flex;
-  font-family: sans-serif;
+  font-family: var(--wc-font-family-sans-serif);
   font-size: inherit;
   font-weight: $font-weight-bold;
   gap: $space-0-5;

src/assets/stylesheets/EditorPanel.scss

@@ -1,5 +1,6 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/font-size" as *;
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
 
 // Scrollbar-width is needed from scrollbar to show in Chrome
 .editor-wrapper {
@@ -25,10 +26,14 @@
     }
 
     .cm-scroller {
+      @include typography.style-1();
+
       // Needed here for horizontal scroll
       overflow: auto;
       scrollbar-width: thin;
       overscroll-behavior-x: none;
+      font-family: var(--wc-font-family-monospace);
+
 
       .cm-content {
         flex: 1;

src/assets/stylesheets/Instructions.scss

@@ -3,23 +3,25 @@
 @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
 @use "./rpf_design_system/colours" as *;
 @use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-size" as *;
-@use "./rpf_design_system/font-weight" as *;
 
 .project-instructions {
   block-size: 100%;
 
   h2 {
-    @include font-size-1-25(bold);
+    @include typography.style-1-5(bold);
     margin: 0;
   }
 
+  p {
+    @include typography.style-1();
+  }
+
   a {
     color: var(--editor-color-theme-secondary);
   }
 
   strong {
-    font-weight: $font-weight-bold;
+    font-weight: var(--font-weight-bold);
   }
 
   img {
@@ -48,6 +50,8 @@
   }
 
   pre {
+    @include typography.style-1();
+
     background-color: $rpf-grey-700;
     border: 1px solid $rpf-grey-600;
     border-radius: 8px;
@@ -76,7 +80,7 @@
   }
 
   .c-code-filename {
-    font-family: monospace;
+    font-family: var(--wc-font-family-monospace);
     margin: 0;
     padding: $space-0-5 $space-1;
     color: $rpf-white;
@@ -239,9 +243,10 @@
     margin: $space-1-5 0;
 
     h3 {
+      @include typography.style-1(bold);
+
       margin: 0;
       padding-inline-start: $space-2;
-      @include font-size-1(bold);
       background-repeat: no-repeat;
       background-position: inline-start $space-0-5 center;
     }
@@ -279,10 +284,11 @@
     margin-block-end: $space-1-5;
 
     pre {
-      padding: 0;
-      margin: 0;
-      inline-size: 100%;
       background-color: $rpf-white;
+      border: none;
+      inline-size: 100%;
+      margin: 0;
+      padding: 0;
     }
 
     code {

src/assets/stylesheets/InternalStyles.scss

@@ -43,15 +43,21 @@
 @use "./FilePanel" as *; // needs to be below Button
 @use "./EmbeddedViewer" as *;
 
+@use "./settings/fonts" as fonts;
+
 :host {
   font-size: 1.6rem;
 }
 
 #wc {
+  // Allow fonts to be overridden by the host application via
+  // --editor-font-family-*, falling back to the default sets in
+  // settings/fonts.scss
+  --wc-font-family-sans-serif: var(--editor-font-family-sans-serif, #{fonts.$font-family-sans-serif});
+  --wc-font-family-monospace: var(--editor-font-family-monospace, #{fonts.$font-family-monospace});
+
   background: var(--editor-secondary-theme, transparent);
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--wc-font-family-sans-serif);
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -83,8 +89,7 @@
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--wc-font-family-monospace);
 }
 
 button {

src/assets/stylesheets/index.scss

@@ -1,25 +1,24 @@
 @use "./rpf_design_system/colours" as *;
+@use './settings/fonts' as fonts;
 
 html,
 body {
   margin: 0;
 }
 
-:host {
-  font-size: 16px;
+:root {
+  --editor-font-family-sans-serif: fonts.$font-family-sans-serif;
+  --editor-font-family-monospace: fonts.$font-family-monospace;
 }
 
 body {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--editor-font-family-sans-serif);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--editor-font-family-monospace);
 }
 
 #app {

src/assets/stylesheets/settings/_fonts.scss

@@ -0,0 +1,2 @@
+$font-family-sans-serif:  Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-monospace: RobotoMono, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;