Update the default code editor styles by jamiebenstead · Pull Request #1378 · RaspberryPiFoundation/editor-ui

jamiebenstead · 2026-03-11T15:23:04Z

Light mode default -

Dark mode default -

Light mode editor styles -

Dark mode editor styles -

Copilot

Pull request overview

This PR refactors theme-related styling for the web component by removing the .--light/--dark CSS variable blocks from index.scss and consolidating/expanding them in InternalStyles.scss, while also switching many assignments from SCSS color tokens to CSS custom properties.

Changes:

Moved .--light / .--dark editor theme variable definitions out of index.scss and into InternalStyles.scss.
Switched various theme variable assignments from SCSS interpolation (e.g. #{$rpf-teal-100}) to CSS variables (e.g. var(--rpf-teal-100)).
Added additional theme-scoped CSS variables for files list, tabs, sidebar, and button theming inside InternalStyles.scss.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/assets/stylesheets/InternalStyles.scss	Consolidates and expands theme/token CSS variables for light/dark modes; updates focus outline color token usage.
src/assets/stylesheets/index.scss	Removes duplicated theme variable blocks, leaving shared global variables/utilities.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/assets/stylesheets/InternalStyles.scss

zetter-rpf · 2026-03-12T10:50:12Z

Does this make the use_editor_styles flag redundant? If it does, should we remove it as part of this?

zetter-rpf · 2026-03-12T10:51:06Z

Have you compared the light and dark mode from before (with use_editor_styles=true) and after - is there any differences? Are they expected?

zetter-rpf · 2026-03-12T10:52:21Z

Do any projects that use code editor set use_editor_styles=false (or not set it at all)?

Will this change the look when they upgrade? If so, what do we expect them to do?

jamiebenstead · 2026-03-12T15:18:05Z

Does this make the use_editor_styles flag redundant? If it does, should we remove it as part of this?

It doesn't, but it should. The plan is to sort this in future work

jamiebenstead · 2026-03-12T15:18:37Z

Have you compared the light and dark mode from before (with use_editor_styles=true) and after - is there any differences? Are they expected?

A few small changes but they are expected

jamiebenstead · 2026-03-12T15:19:19Z

Do any projects that use code editor set use_editor_styles=false (or not set it at all)?

Will this change the look when they upgrade? If so, what do we expect them to do?

I'd imagine they don't set it at all. This will change some colours for them but this is what we want to happen.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/assets/stylesheets/InternalStyles.scss

src/assets/stylesheets/index.scss

Story: RaspberryPiFoundation/digital-code-club#1056 ### Description Now that caching is effectively disabled (#1342), we want to warn the users about losing their code changes upon locale change. In CCP, we will be using this feature to trigger a modal to warn users and also allow them to confirm or cancel the locale change. ### Approaches that didn’t work - Custom event similar to `editor-codeChanged`: The host couldn't tell “user edited” from “project just reloaded,” so it’s not suitable for the purposes of detecting unsaved code changes. - Redux boolean field and getter: A single flag set to true in updateProjectComponent and false in setProject / loadProjectFulfilled. This didn’t work reliably: after a locale change, it didn't reset to false and stayed true. There seems to be some sort of sync / timing issue. ### Approach that worked - Baseline snapshot of initial load and getter: Redux stores initialComponents (snapshot of { name, extension, content } per component), updated on load/set/save/remix. The web component getter compares current components to this snapshot. The host calls the getter when needed (e.g. before changing locale). ### Changes added - Added `initialComponents` to initial states and saved the initial components on project load - Did the same for `editor/saveProject/fulfilled` and `editor/remixProject/fulfilled` handlers to update the baseline for detecting code changes. - Added `codeChangedSinceInitialLoad` getter that compares any difference in file count, name, extension, or content between initial and current projects ### Can we store the initial project content as hash? - We did consider that and decided not to. For hashing the contents, we need to either install a new dependency like js-md5 (possible conflict with the transitive dependency present in `yarn.lock` pulled in by scratch) or add a custom checksum logic, and we felt the added complexity is not necessary as the comparison is only done when we call the getter.

Adds styling for task block body (previously didn't exist) and sets background colour to rpf-white to match the instruction panel background

Still items missing due to BE: [x] The "Save" button is only visible to users who are logged into a Code Editor for Education account. [ ] ~When the user clicks "Save," the current state of the Scratch project (including all blocks, sprites, and assets) is stored against their user account in the database.~ This will move to a different PR [x] When the user clicks "Save" the FE makes a request as if it was saving the scratch project (ready to connect to the BE when available) [x] When you click it, it says 'Saving...' [x] When the save is confirmed it says 'Saved' [x] ~The save action overwrites the previous version of that specific project.~ The save action, makes the request as if it would overwrite the previous version of that specific project. [x] After 5 seconds, it should revert back to the 'Save' button. Please double check what logic ExCS have here. Extra thing from context: "When you click it, it says 'Saving...'" -> i did it the first version but it needs to concat them ... but we can add them if required - Added a hook to handle saving. - Enabled in School accounts for scratch projects, both Educator and Students To check the API maybe in a different PR - Faked status in the code for the video since it's not connected https://github.com/user-attachments/assets/b5b706d9-6405-488d-8d1f-9738ecd85066

Closes: #1318

Closes: RaspberryPiFoundation/digital-editor-issues#1187 This adds an sb3 Upload project button to the save and download panel The button currently will only be visible on the scratch editor as it currently only allows upload for scratch projects

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/assets/stylesheets/InternalStyles.scss

 .--light {
-  --editor-color-layer-1: #{$rpf-teal-100};
-  --editor-color-layer-2: #{$rpf-white};
-  --editor-color-layer-3: #{$rpf-white};
-  --editor-color-outline: #{$rpf-grey-150};
-  //theme change to match WC navy colors
-  --editor-color-theme: #{$rpf-navy-800};
-  --editor-color-theme-secondary: #{$rpf-teal-900};
-  --editor-color-theme-tertiary: #{$rpf-teal-100};
-  --editor-color-text: #{$rpf-text-primary};
-  --editor-color-text-secondary: #{$rpf-text-secondary};
-  --editor-color-tab-background: #{$rpf-off-white};
+  // Theme colours
+  --editor-color-layer-1: var(--rpf-teal-100);
+  --editor-color-layer-2: var(--rpf-white);
+  --editor-color-layer-3: var(--rpf-white);


src/assets/stylesheets/InternalStyles.scss

 .--light {
-  --editor-color-layer-1: #{$rpf-teal-100};
-  --editor-color-layer-2: #{$rpf-white};
-  --editor-color-layer-3: #{$rpf-white};
-  --editor-color-outline: #{$rpf-grey-150};
-  //theme change to match WC navy colors
-  --editor-color-theme: #{$rpf-navy-800};
-  --editor-color-theme-secondary: #{$rpf-teal-900};
-  --editor-color-theme-tertiary: #{$rpf-teal-100};
-  --editor-color-text: #{$rpf-text-primary};
-  --editor-color-text-secondary: #{$rpf-text-secondary};
-  --editor-color-tab-background: #{$rpf-off-white};
+  // Theme colours
+  --editor-color-layer-1: var(--rpf-teal-100);
+  --editor-color-layer-2: var(--rpf-white);
+  --editor-color-layer-3: var(--rpf-white);
+  --editor-color-outline: var(--rpf-grey-150);
+  --editor-color-theme: var(--rpf-navy-800);
+  --editor-color-theme-secondary: var(--rpf-navy-900);
+  --editor-color-theme-tertiary: var(--rpf-navy-100);


src/assets/stylesheets/InternalStyles.scss


 button:focus-visible {
-  outline: 2px solid $rpf-black;
+  outline: 2px solid var(--rpf-black);


src/assets/stylesheets/index.scss

-  --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
-  --sidebar-option-selected-background-hover: var(--rpf-teal-800);
+  --rpf-tab-border-bottom-selected: var(--editor-color-theme);
+  --sidebar-option-selected-background-hover: var(--rpf-teal-950);


zetter-rpf

Thanks for looking at this,

My only remaining concern is that we should make it clear to users of editor UI what these changes are so it's easier for them to update.

The Pull Request title appears in the changelog, and the PR is linked to - currently the title doesn't make clear that it changes the default styles, could you update it to something like: "Update the default code editor styles"

It would also be good to add more detail into the description to explain because the default styles have changed, more attributes might need to be overridden when the library is updated.

Move styles over to InternalStyles

d43fe8a

Copilot AI review requested due to automatic review settings March 11, 2026 15:23

jamiebenstead temporarily deployed to previews/1378/merge March 11, 2026 15:23 — with GitHub Actions Inactive

Copilot started reviewing on behalf of jamiebenstead March 11, 2026 15:24 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

src/assets/stylesheets/InternalStyles.scss Outdated Show resolved Hide resolved

jamiebenstead marked this pull request as draft March 12, 2026 15:57

jamiebenstead added 2 commits March 13, 2026 14:05

Update style colours

a77ba3d

Add tests around useEditorStyles being applied

5aa13d7

jamiebenstead requested a review from Copilot March 13, 2026 14:08

Copilot started reviewing on behalf of jamiebenstead March 13, 2026 14:09 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

src/assets/stylesheets/InternalStyles.scss Outdated Show resolved Hide resolved

src/assets/stylesheets/InternalStyles.scss Show resolved Hide resolved

src/assets/stylesheets/index.scss Show resolved Hide resolved

src/assets/stylesheets/index.scss Outdated Show resolved Hide resolved

jamiebenstead and others added 13 commits March 13, 2026 14:46

Remove space

3d580d9

Remove duplicate

f21ec99

Remove duplicate

1eaa80f

Tidy up

85e43d9

New translations en.json (French)

d1c7bfb

New translations en.json (Greek)

f24b15d

New translations en.json (Japanese)

a70e9da

New translations en.json (Dutch)

2442e8f

New translations en.json (Ukrainian)

01621f8

New translations en.json (English, United States)

7d6152a

New translations en.json (Spanish, Latin America)

fa4d375

set task block background colour to white in instructions (#1370)

a6f12d3

Adds styling for task block body (previously didn't exist) and sets background colour to rpf-white to match the instruction panel background

abcampo-iry and others added 3 commits March 13, 2026 15:04

update package version to prep release v0.34.9 (#1376)

e099d1c

1318-integrate-stylelint-into-ci (#1367)

dc64a0b

Closes: #1318

jamiebenstead marked this pull request as ready for review March 13, 2026 15:08

danhalson and others added 4 commits March 13, 2026 15:13

1318-integrate-stylelint-into-ci (#1367)

af01ab7

Closes: #1318

Move styles over to InternalStyles

905ddb4

Merge branch 'main' into 1174-fix-broken-defaults

9b62d31

jamiebenstead temporarily deployed to previews/1378/merge March 13, 2026 15:17 — with GitHub Actions Inactive

Remove duplicate

724c058

jamiebenstead deployed to previews/1378/merge March 13, 2026 15:19 — with GitHub Actions View deployment

jamiebenstead requested a review from Copilot March 13, 2026 16:05

Copilot started reviewing on behalf of jamiebenstead March 13, 2026 16:06 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

zetter-rpf approved these changes Mar 16, 2026

View reviewed changes

jamiebenstead changed the title ~~Move styles over to InternalStyles~~ Update the default code editor styles Mar 16, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update the default code editor styles#1378

Update the default code editor styles#1378
jamiebenstead wants to merge 24 commits intomainfrom
1174-fix-broken-defaults

jamiebenstead commented Mar 11, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

zetter-rpf commented Mar 12, 2026

Uh oh!

zetter-rpf commented Mar 12, 2026 •

edited

Loading

Uh oh!

zetter-rpf commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

zetter-rpf left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Conversation

jamiebenstead commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

zetter-rpf commented Mar 12, 2026

Uh oh!

zetter-rpf commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zetter-rpf commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

jamiebenstead commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

zetter-rpf left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

jamiebenstead commented Mar 11, 2026 •

edited

Loading

zetter-rpf commented Mar 12, 2026 •

edited

Loading