From ea0f896b5c7a5e2212d98b835cfbfe76ec26ecf7 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 11 Feb 2026 22:42:39 +0000
Subject: [PATCH 1/4] Add variables for code syntax blocks

---
 src/assets/stylesheets/Instructions.scss | 38 ++++++++++++------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index c4b57e02a..8652d8528 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -118,86 +118,86 @@
     .number,
     .boolean,
     .function {
-      color: $rpf-syntax-1;
+      color: var(--code-syntax-1, #{$rpf-syntax-1});
     }
     .keyword {
-      color: $rpf-syntax-4;
+      color: var(--code-syntax-4, #{$rpf-syntax-4});
     }
     .string,
     .char {
-      color: $rpf-syntax-2;
+      color: var(--code-syntax-2, #{$rpf-syntax-2});
     }
     .comment {
-      color: $rpf-syntax-3;
+      color: var(--code-syntax-3, #{$rpf-syntax-3});
     }
 
     .keyword-print {
-      color: $rpf-white;
+      color: var(--code-print-color, #{$rpf-white});
     }
   }
 
   .language-javascript {
     .number,
     .boolean {
-      color: $rpf-syntax-1;
+      color: var(--code-syntax-1, #{$rpf-syntax-1});
     }
     .keyword {
-      color: $rpf-syntax-4;
+      color: var(--code-syntax-4, #{$rpf-syntax-4});
     }
     .string,
     .char {
-      color: $rpf-syntax-2;
+      color: var(--code-syntax-2, #{$rpf-syntax-2});
     }
     .comment {
-      color: $rpf-syntax-3;
+      color: var(--code-syntax-3, #{$rpf-syntax-3});
     }
 
     .keyword-print {
-      color: $rpf-white;
+      color: var(--code-print-color, #{$rpf-white});
     }
   }
 
   .language-css {
-    color: $rpf-syntax-1;
+    color: var(--code-syntax-1, #{$rpf-syntax-1});
 
     .comment {
       color: $rpf-syntax-3;
     }
     .selector {
-      color: $rpf-syntax-4;
+      color: var(--code-syntax-4, #{$rpf-syntax-4});
     }
 
     .function {
-      color: $rpf-syntax-4;
+      color: var(--code-syntax-4, #{$rpf-syntax-4});
     }
 
     .property,
     .punctuation {
-      color: $rpf-white;
+      color: var(--code-print-color, #{$rpf-white});
     }
   }
 
   .language-html {
     .tag {
-      color: $rpf-syntax-4;
+      color: var(--code-syntax-4, #{$rpf-syntax-4});
       .punctuation,
       .attr-name {
-        color: $rpf-white;
+        color: var(--code-print-color, #{$rpf-white});
       }
 
       .attr-value {
-        color: $rpf-syntax-2;
+        color: var(--code-syntax-2, #{$rpf-syntax-2});
         .punctuation {
           color: inherit;
         }
         .attr-equals {
-          color: $rpf-white;
+          color: var(--code-print-color, #{$rpf-white});
         }
       }
     }
 
     .comment {
-      color: $rpf-syntax-3;
+      color: var(--code-syntax-3, #{$rpf-syntax-3});
     }
   }
 

From 26b8c0374a35e57ad84356c63ef13be982030b1d Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 11 Feb 2026 22:47:31 +0000
Subject: [PATCH 2/4] Update src/assets/stylesheets/Instructions.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/assets/stylesheets/Instructions.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 8652d8528..9bda4c792 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -161,7 +161,7 @@
     color: var(--code-syntax-1, #{$rpf-syntax-1});
 
     .comment {
-      color: $rpf-syntax-3;
+      color: var(--code-syntax-3, #{$rpf-syntax-3});
     }
     .selector {
       color: var(--code-syntax-4, #{$rpf-syntax-4});

From 4f05261eadd2f63d08d9b634c8d4f5dcbbb00653 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Wed, 11 Feb 2026 22:56:07 +0000
Subject: [PATCH 3/4] Add another colour variable

---
 src/assets/stylesheets/Instructions.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 9bda4c792..bc5711b50 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -116,10 +116,12 @@
 
   .language-python {
     .number,
-    .boolean,
-    .function {
+    .boolean {
       color: var(--code-syntax-1, #{$rpf-syntax-1});
     }
+    .function {
+      color: var(--code-syntax-5, #{$rpf-syntax-1});
+    }
     .keyword {
       color: var(--code-syntax-4, #{$rpf-syntax-4});
     }

From 4ce86f9264adc960404eefd3be8166146c26f7e1 Mon Sep 17 00:00:00 2001
From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com>
Date: Thu, 12 Feb 2026 11:49:08 +0000
Subject: [PATCH 4/4] Add border color customisation for code blocks

---
 src/assets/stylesheets/Instructions.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index bc5711b50..76de3a1e1 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -53,7 +53,7 @@
     @include typography.style-1();
 
     background-color: var(--code-background-color, #{$rpf-grey-700});
-    border: 1px solid $rpf-grey-600;
+    border: 1px solid var(--code-block-border-color, #{$rpf-grey-600});
     border-radius: 8px;
     padding: $space-0-5 $space-1;
     overflow: auto;
@@ -73,7 +73,6 @@
     margin: $space-1 0 $space-1-5 0;
 
     pre {
-      border: none;
       margin: 0;
     }