Code looks jarring within tooltip

[cjcenizal]

The light background makes the code contrast too sharply against the tooltip's background color. If we used opacity for the code background then it would blend nicely.

[snide]

Yep, not so hot.

We've tried to stay away from opacity when possible for performance and accessibility reasons. Not that one piece of opacity can cause problems, but when it becomes a habit and lots of elements on the page use it, things can bog down a bit. It's also hard to do contrast audits / manipulations with opacity.

You probably remember, but we used to have the ability to set the theme for code blocks so it had a "dark" theme. I think I'd prefer something like that for this situation. Ends up being a slipery slope if every component needs an invert mode though.

[snide]

Also, somewhat related. the transparentBackground prop doesn't seem to work anymore. Hmm...

[cjcenizal]

Good points about the downsides on opacity.

Here's another example where the contrast between the colors can be a bit weird, when code is within a callout:

[snide]

I'd generally say in that example the callout and the error should be separated.

[cchaos]

The problem with making the code block's background transparent is that it still wouldn't work on dark backgrounds since the text would still be black. So instead of dark tooltip, light gray then black text, it would be dark tooltip, dark gray, black text. There'd be a total lack of contrast.

I think we just need to be able to send a prop to the codeblock to "invert" colors to essentially render the dark mode color version.

[snide]

Yeah, I was more mentioning that the transparentBackground prop currently isn't doing anything and is broken in our docs, not that we should use it for this example 😆

Agree the invert is the direction to go here.

[cjcenizal]

We should also consider that people will find a use-case for code pretty much anywhere we allow text, since there are so many uses for it (e.g. API endpoints, HTTP status codes, config setting names, file names, file extensions).

I have an idea... how about we add a color prop to EuiCode which supports primary, danger, etc? We could also have ghost (or whatever the right name is) for when you use it in a tooltip. Seems like a versatile solution which follows patterns we've already established. What do you think @snide @cchaos ?

[snide]

@cjcenizal do you mean that for the background? I assume not for the text?

[cjcenizal]

Yeah for the background mostly. Up to you designers to decide if the text should change color too. 😄

[cchaos]

This will be resolved when we finally have a color mode context with Emotion and can full reverse theme in tooltips. So I'm closing this one in favor of that Meta #3912