RaspberryPiFoundation / editor-ui

Code Editor web component
https://editor-static.raspberrypi.org
Apache License 2.0
36 stars 8 forks source link

Improve instructions syntax highlighting #825

Open loiswells97 opened 6 months ago

loiswells97 commented 6 months ago
$rpf-syntax-blue: #1498D0;
$rpf-syntax-green: #6CE68D;
$rpf-syntax-grey: #C1C1C1;
$rpf-syntax-pink: #FF00A4;

When inverted the pink becomes a green with very poor contrast:

Screenshot 2023-12-14 at 09 38 50

maxelkins commented 6 months ago

Overview

So... I've found tweaked the colours so they are AAA normally and when using the difference blend mode (highlighted).

image Last line is pure white for reference.

Colour codes:

I suggest that we make the variabled more generic as if and when we theme these the colours might not match the variable names. In this case I've changed 'grey' to an orange because it was too similar to the white normally used.

$rpf-syntax-blue: #9EE8FF;
$rpf-syntax-green: #94F9AF;
$rpf-syntax-grey: #FFCA99;
$rpf-syntax-pink: #EECCFF;

$rpf-syntax-1: #9EE8FF;
$rpf-syntax-2: #94F9AF;
$rpf-syntax-3: #FFCA99;
$rpf-syntax-4: #EECCFF;

Figma ref

Other notes

This is a bit magic numbery, I kinda just messed around with it, I'd like the highlight colour to be brighter (white if possible) but I can't figure out how to do that with the difference blend mode (or another blend mode). More research required, but these colours should help a11y in dark mode for now.

Light mode colours still need to be checked.