You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
So... I've found tweaked the colours so they are AAA normally and when using the difference blend mode (highlighted).
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.
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.
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.When inverted the pink becomes a green with very poor contrast:
The text was updated successfully, but these errors were encountered: