FYI: According to Nirzar, the ref screenshot above is slightly wrong as it isn't supposed to be in italics.

As we discussed earlier today, I think what we have now is clearer -- using green for the ref tag, and purple for the template inside the tag.

Also background colors in tags and templates reserved for tag matcher.
For example when the cursor on or inside a pair of tags the CodeMirror highlights them. Demo

@Pastakhov oh that's cool i didn't know code mirror had that feature

Moving this from design evaluation to making the changes. Bringing it back to the workboard for estimation.

I took out Nirzar's recommendation to have content between <ref> tags the same color -- we want to keep that content the same as current behavior.

Change 362311 had a related patch set uploaded (by Niharika29; owner: Niharika29):
[mediawiki/extensions/CodeMirror@master] Design fixes for Codemirror

https://gerrit.wikimedia.org/r/362311

@Nirzar: I don't understand this part:

.CodeMirror.CodeMirror-wrap {
 font-size:12px;
 line-height:20px;
}

AFAIK, CodeMirror automatically sets the font-size and line-height to match the underlying textarea (which seems like the correct behavior). Why would we want to change them in CodeMirror, but not in the underlying non-highlighted version?

@Nirzar: Also the new color for the template brackets (#5b2c6f) is nearly black:

I'm worried that we're losing distinction from the non-highlighted text here.

I guess this was caused by the fact that the original purple color used in CodeMirror was pretty dark to start with, and now we're making the delimiters even darker. Maybe the best solution is to start with a lighter base purple, so that the delimiters aren't super dark.

I'd appreciate a clearer consensus on the color shades. The extension is rolling out to testwiki later today.

@Niharika: Danny and I discussed with Nirzar. We decided that it would be better to make things lighter instead of darker since purple and blue are inherently dark colors and making them darker starts to approach looking black. Probably easier for me just to post a new patch than elaborate in detail...

In T165178#3409590, @kaldari wrote:

@Niharika: Danny and I discussed with Nirzar. We decided that it would be better to make things lighter instead of darker since purple and blue are inherently dark colors and making them darker starts to approach looking black. Probably easier for me just to post a new patch than elaborate in detail...

Sure. I'd also encourage going towards the other end of the spectrum and using something like orange or pink if we can.

Change 362311 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Design fixes for Codemirror

https://gerrit.wikimedia.org/r/362311