Increase contrast for EuiCodeBlock colors by ryankeairns · Pull Request #3309 · elastic/eui

ryankeairns · 2020-04-13T22:15:14Z

Summary

The color variables used by EuiCodeBlock produce insufficient color contrast largely due to the slightly darker background color ($euiColorLightestShade vs $euiPageColorBackground).

This PR:

increases color contrast by adjusting the color variables using the makeHighContrastColor mixin as prescribed in the underlying issue.
substitutes EUI text colors directly, where possible
removes a few colors that were not used by any components
changes the addition/deletion styles from a background color to a left-border. This border approach saves a lot of hassle by not having to adjust the text color again given another bg color variation.

Testing

It's a little cumbersome to test all the color variables. You can do a couple of things to render the less used colors:

Use the Chrome inspector to override classes on the existing docs examples (adding/chaning to hljs-meta, hljs-title, hljs-section, hljs-addition, hljs-deletion, etc.) See the _code_block.scss file for the full set; many of these render in the existing examples already.
Change the docs examples. For example, I sued this c++ example from the hljs docs to render several of the aforementioned classes:

Renders as... (and all passed 4.5):

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

kibanamachine · 2020-04-13T22:54:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

ryankeairns · 2020-04-14T16:04:00Z

Need to merge master...

kibanamachine · 2020-04-14T16:31:50Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

cchaos

Thanks for taking this one on. 🎨 Color!!! 👨‍🎨

Just had a few comments on ways to improve the code and possibly dark theme.

Eventually we'll want to follow up with some actual thinking of the different selectors. For instance here is our (pretty simple) color scheme for CSS vs Github's.

src/global_styling/variables/_colors.scss

src/themes/eui/eui_colors_dark.scss

src/components/code/_code_block.scss

CHANGELOG.md

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

…k-colors

kibanamachine · 2020-05-25T14:49:27Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

kibanamachine · 2020-05-26T16:17:34Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

kibanamachine · 2020-05-26T17:55:15Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

kibanamachine · 2020-05-27T14:05:12Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

kibanamachine · 2020-05-27T15:25:20Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

elizabetdev · 2020-05-27T15:40:40Z

@cchaos and @ryankeairns,

Here are a few design decisions that I took to complete this PR:

I tried to maintain the same hue as suggested by @cchaos. Both dark and light themes now have similar colors.
I'm using the makeHighContrastColor() function for all colors.
I removed the bold of the .hljs-keyword. I researched other similar code highlighters and none of them had the keywords with bold. This class was using the same color as the normal text and I changed it to purple. I think it looks better to have a different color.
The .hljs-addition and .hljs-deletion are now using a box-shadow instead of a border. But I'm not sure consumers are able to use it. Just passing one of these classes to the EuiCodeBlock component doesn't do anything because the class is added to the wrapper div instead of the <code> tag. We can address this issue in a different PR.
Added an orange to highlight the symbols. In the past, the symbols had the same colors as the text. I think it looks better if they are highlighted in a different color.
Added a SQL example in the docs.

kibanamachine · 2020-05-27T16:12:45Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

snide

I love it! This looks soooooo much better. Small comment about a couple of your additional variable names. Also for the addition / deletion stuff there's no rendering in the actual docs, but I'm guessing that's what you meant by making a separate issue for it?

snide · 2020-05-27T18:34:33Z

src/global_styling/variables/_colors.scss

+$euiCodeBlockPurple: #6F42C1;
+$euiCodeBlockOrange: #E36209;


I would name these not by their color but by their purpose.

Ugh. Github ate my full comment. This one is tricky. On one hand these are being used how we'd normally use a core value like $euiPrimary, or they are just one offs for use in the code blocks alone. It's hard to make a name for these things without writing the descriptive name like euiCodeBlockKeywordColor over again. Whichever direction we go, I think it's safe to say it should be the name of the color. Even something like $euiColorCodeBlock01 and $euiColorCodeBlock02 feels more flexible.

I'm sure @cchaos has opinions.

Related yet tangental thought to this. Maybe we should be using the color blind palette instead of our primary, secondary, etc... colors which are more specific to our brand whereas the code block coloring is more specific to visually distinguishing between elements of code. We even have purple and orange colors in there where we then won't have to redefine new hexes for those.

@cchaos and @snide,

Here are the new updates:

As suggested, I replaced the colors with the color blind palette.

The colors $euiTextSubduedColor and $euiTextColor were not replaced because the color blind palette doesn't have colors for texts.

I didn't replace the $euiColorDanger because we don't have a red in the color blind palette.

I checked the contrast levels and all of them passed 4.5.

Let me know what you think of this new version:

ryankeairns · 2020-05-27T18:59:10Z

Thanks @miukimiu , the color contrast levels check out and it looks much better!

…k-colors

kibanamachine · 2020-05-28T16:31:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3309/

cchaos

It is too bad that we do loose some saturation in the colors, but I think it's really only noticeable when doing a directly comparison. In the long run, it's a much better correlation to use the vis colors instead of the brand colors.

👍 LGTM!

Increase contrast for EuiCodeBlock colors

62b9d6d

ryankeairns added accessibility WCAG AA labels Apr 13, 2020

add CL

9f08b6e

ryankeairns marked this pull request as ready for review April 14, 2020 16:00

Merge master branch into rk/3243-code-block-colors

3c5870a

cchaos self-requested a review April 15, 2020 19:04

cchaos suggested changes Apr 15, 2020

View reviewed changes

elizabetdev self-assigned this May 8, 2020

elizabetdev and others added 2 commits May 25, 2020 15:27

Update CHANGELOG.md

23fdc84

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Merge remote-tracking branch 'upstream/master' into rk/3243-code-bloc…

e36460e

…k-colors

elizabetdev added 2 commits May 25, 2020 16:00

update changelog

abb0893

Improving colors and examples

c4e579b

elizabetdev added 2 commits May 26, 2020 18:31

Adding more colors

ea410f2

remove unused classname

a20f66a

Addition and deletion shadow position

2d60eba

elizabetdev added 2 commits May 27, 2020 16:00

Separate tag and name classes

1ada3d6

Improving html example

508a220

elizabetdev requested a review from cchaos May 27, 2020 15:41

Removing unecessary empty space

bb61da9

snide reviewed May 27, 2020

View reviewed changes

elizabetdev added 2 commits May 28, 2020 16:04

Merge remote-tracking branch 'upstream/master' into rk/3243-code-bloc…

3e35c12

…k-colors

Color blind palette

f8dcf15

elizabetdev requested a review from snide May 28, 2020 16:30

cchaos approved these changes May 28, 2020

View reviewed changes

elizabetdev merged commit a3c80cc into elastic:master May 28, 2020

thompsongl mentioned this pull request Jun 3, 2020

Upgrade EUI to v24.1.0 elastic/kibana#68141

Merged

myasonik mentioned this pull request Jul 27, 2020

(Accessibility) - Home/Tutorial (probably multiple places) Color Contrast Issue elastic/kibana#72315

Closed

		$euiCodeBlockPurple: #6F42C1;
		$euiCodeBlockOrange: #E36209;

Conversation

ryankeairns commented Apr 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Checklist

Uh oh!

kibanamachine commented Apr 13, 2020

Uh oh!

ryankeairns commented Apr 14, 2020

Uh oh!

kibanamachine commented Apr 14, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented May 25, 2020

Uh oh!

kibanamachine commented May 26, 2020

Uh oh!

kibanamachine commented May 26, 2020

Uh oh!

kibanamachine commented May 27, 2020

Uh oh!

kibanamachine commented May 27, 2020

Uh oh!

elizabetdev commented May 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented May 27, 2020

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

snide May 27, 2020

Choose a reason for hiding this comment

Uh oh!

snide May 27, 2020

Choose a reason for hiding this comment

Uh oh!

cchaos May 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elizabetdev May 28, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented May 27, 2020

Uh oh!

kibanamachine commented May 28, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ryankeairns commented Apr 13, 2020 •

edited

Loading

elizabetdev commented May 27, 2020 •

edited

Loading

cchaos May 27, 2020 •

edited

Loading

elizabetdev May 28, 2020 •

edited

Loading