fix: refine scratch block category styles

[maxelkins]

Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1687

Summary

Add Scratch block category colours as CSS custom properties, uses them and update the code style (used for the highlighted text).

Pulled from the discovery prototype on experience-cs-instructions-prototype (RaspberryPiFoundation/digital-editor-issues#1687).

The custom attribute syntax and marked extension explored on that branch are deliberately left out — they'll land as a separate follow-up issue.

Changes

--scratch-* custom properties

Adds the Scratch block category colours in instructions from --scratch-* CSS custom properties instead of hardcoded hex values.

High contrast details

Scratch has an option to turn on high contrast block colours. This is enabled when the users OS preference is set to prefers-contrast: more. It normally can also be turn on in the Scratch settings UI (which we don't have).

So to make sure that the colours in the instructions match the blocks when prefers-contrast: more is true, I've also added support of the high contrast colours in the instructions when the preference is set.

Code styles

Also tidies the inline code snippet padding to use the design system's spacing tokens.

Now uses the --space-0-25/--space-0-5 tokens

Notes

• New --scratch-* custom properties currently scoped to the instructions panel, but could be moved in future if needed elsewhere.

Viewing these changes

Enable editable instructions in the preview:

newWebComp.setAttribute("editable_instructions", "true");

Code element padding changes can be seen by adding a code snippet to the user editable (teacher) instructions.

Currently the Scratch colours can only been seen in 2 ways

1. By using the non-editable instructions like the Projects site (see example below)
2. By adding support for the inline kramdown styles proposed in the epic. This is in the current prototype and will in done in a follow up PR.

Screenshots

Code style refinement:

Categories:

Categories (high contrast):

Non-editable instructions demo (like Code Club Projects)

Demo code used

newWebComp.setAttribute(
  "instructions",
  JSON.stringify({
    project: {
      steps: [
        {
          title: "Step 1",
          content: `
  <h2>Move the sprite</h2>
  <p>Drag out a <code class="block3motion">move 10 steps</code> block and click it a few times.</p>
  <p>Then add a <code class="block3looks">say Hello!</code> block underneath.</p>
`,
        },
      ],
    },
  }),
);

[maxelkins]

Putting back to draft for a sec while I tweak something...