Design fixes for text styles for codemirror
Closed, ResolvedPublic1 Story Points

Description

Change the following text styles including color for codemirror extension.

This will include tweaking shades of RGB and grays used in codemirror. this won't have a large change but it will align color schemes to wikimedia colors.

Changes

font size for code

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

Color guideline

  • Use text color related to elements i.e. blue for links, gray for comments
  • Brackets or Tag open/close use darker shade of the content inside brackets i.e. [[ is darker blue of the page name inside
  • Use wmf colors wherever possible
  • Use accessible colors wherever possible
.cm-mw-template-delimiter {
    color: #803e9d;
}

.cm-mw-template-bracket {
    color: #5b2c6f;
}

.cm-mw-link-pagename  {
    color: #36c; 
}

.cm-mw-link-bracket {
    color: #2a4b8d;
}
Nirzar created this task.May 12 2017, 5:31 PM
Nirzar updated the task description. (Show Details)May 12 2017, 6:48 PM

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

DannyH renamed this task from Evaluate text styles for codemirror to Design fixes for text styles for codemirror.May 16 2017, 6:09 PM
DannyH updated the task description. (Show Details)
DannyH updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)May 16 2017, 6:16 PM

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.

DannyH removed Nirzar as the assignee of this task.May 16 2017, 9:50 PM
kaldari set the point value for this task to 1.May 16 2017, 11:07 PM

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

Niharika moved this task from Ready to Needs Review/Feedback on the Community-Tech-Sprint board.

@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?

DannyH raised the priority of this task from Normal to High.Jul 3 2017, 11:47 PM

@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...

@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

Niharika closed this task as Resolved.Jul 7 2017, 6:35 PM
Niharika moved this task from Needs Review/Feedback to Done on the Community-Tech-Sprint board.
DannyH moved this task from Backlog to Archive on the Community-Tech board.Jul 18 2017, 10:46 PM