Amsterdam: better code block contrast

[snide]

Summary

Improves the contrast of code blocks in EUI's Amsterdam theme:

• Changed the inline code color to our brand pink. Lots of trial and error here. It felt like it needed to be something that wouldn't be confused for a button / link. Purple felt like it stood out without being overpowering. The browns were an OK alternative.
• Increased the font-weight of code to 500, from 400. Because code already comes in at smaller 90% sizing, the extra weight makes them stand out a bit here.

Why

It was pretty apparent in the docs project that the inline code bits were hard to see.

Before

After

Darkmode

Alternatives considered

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs
• Added documentation
• Checked Code Sandbox works for the any docs 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

[snide]

Added these to mainline as well without changing their values. Felt like we needed the separation.

[kibanamachine]

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

[cchaos]

I really wish there was some weight in between these two (there is if could go variable). The 500 feels way to hefty to me. And I think this is attributed to the different OS's. I also faked using the 700 on a particular selector and now there is no discernable difference. Here's an example of changing that purple selector to bold.

Perhaps we leave it as it were in EuiCodeBlock, but the inline version gets bold (700)?

[snide]

Perhaps we leave it as it were in EuiCodeBlock, but the inline version gets bold (700)?

@cchaos I think you meant 500 here (for inline), which I think is fine. I actually noticed a bug with the inter css I was importing in the docs repo that seemed to make overly light weights in roboto somehow. Changing it to the all google fonts method you're using fixes the issues I was seeing. I still think the purple helps as well (for inline), so I'm going to keep that.

[snide]

@cchaos 500 for inline, 400 for blocks, which then still allows the 700 difference for bold.

v7 theme still remains unchanged.

[snide]

Only negative to this approach is that we add the extra weight, but meh... seems worth it.

[kibanamachine]

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

[cchaos]

I think you meant 500 here (for inline), which I think is fine.

Yeah, no I did actually mean 700 for the same reason as you mentioned earlier of not adding another font weight to the stack.

[snide]

@cchaos updated. It's a little chunky, but I'll live with it 😈

[kibanamachine]

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

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

I agree it's hefty, but I think we can go with this for now and since it only affects Amsterdam, we can decide if we really want to add that third weight.

[cchaos]

Maybe use a code variable that is the same?

Suggested change

	color: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor);
	color: $euiCodeBlockKeywordColor;

[snide]

Gonna leave this. I prefer using the root variable until there is more than one usage that exists.

[kibanamachine]

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

[kibanamachine]

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