Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve instructions syntax highlighting #825

Open
1 of 3 tasks
loiswells97 opened this issue Dec 14, 2023 · 1 comment
Open
1 of 3 tasks

Improve instructions syntax highlighting #825

loiswells97 opened this issue Dec 14, 2023 · 1 comment

Comments

@loiswells97
Copy link
Contributor

loiswells97 commented Dec 14, 2023

  • Make the syntax highlighting in the instructions have corresponding colours to those used in the editor. This is mostly already in place but there are a few discrepancies caused by the difference in parsing between prism (used in the instructions) and codemirror (used in the editor). In CSS mode, prism does not parse the properties. so it's not currently possible to style the units, numbers and variables differently from standard properties. There may be other examples that pop up as more projects get simplified.
  • HTML snippets where the context is not shown are not highlighted e.g. class="classname" should have the string highlighted, but it isn't because it's not detected as being a tag attribute since the rest of the tag is not present.
  • Colour contrast in the highlighted blocks and snippets isn't great, especially on selected lines where the colours are inverted. The colours we're currently using for dark mode are:
$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
Copy link
Contributor

maxelkins commented Dec 14, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants