Make locations visible (Intellij)

[daniilsapa]

Resolves #140

@illright
I replaced chalk with pinocolours as you suggested in the issue description.

Here you can compare the diagnostics (I used dim method)

Light theme before/after:

Dark theme before/after:

[changeset-bot]

🦋 Changeset detected

Latest commit: 547bca1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@steiger/pretty-reporter	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[daniilsapa]

The font looks a bit lighter, so it's a bit more readable in the dark theme now. Do you think it's enough?

[daniilsapa]

Also, here's the difference for VS Code

Dark theme before/after:

Light theme before/after:

[illright]

I like it more in the dark mode of IntelliJ, but I like it less in the light mode of VS Code, seems a bit too pale there. I'll also play around some more. My main target here is sufficient contrast between the background and the text, we can use https://webaim.org/resources/contrastchecker/ to check

[daniilsapa]

Yeah, makes sense, I'll play around with the contrast a bit and send you some screenshots. I also thought about coloring the location according to severity, e.g. dark yellow/red for warn/error.

[daniilsapa]

Here you can see the variant of locations colored according to the severity:

Error:

Warning:

[illright]

Nah, this ain't it either. The red color is too attention-grabbing, we don't want the path to draw attention away from the error text

[daniilsapa]

Also, #757575 looks quite contrasty against both white and black backgrounds. But unfortunately, picocolors does not allow us to set arbitrary hex values for colors. Additionally, we could make the font bolder, it helps with readability a bit

Intellij

VS Code

[illright]

Just played around with it myself, seems like #757575 is pc.dim, which doesn't pass the contrast check against the default dark theme of VS Code. pc.gray, however, is #919191, and that's better

https://webaim.org/resources/contrastchecker/?fcolor=919191&bcolor=1E1E1E

[illright]

suggestion (non-blocking): I think the convention is to import is as pc, also helps make the code shorter

Suggested change

	import picocolors from 'picocolors'
	import pc from 'picocolors'

[daniilsapa]

Yep, I'll shorten the variable name

[daniilsapa]

Just played around with it myself, seems like #757575 is pc.dim, which doesn't pass the contrast check against the default dark theme of VS Code. pc.gray, however, is #919191, and that's better

Yes, pc.gray looks better for the default dark theme of VS Code. But it does not look readable in dark themes of IntelliJ. Also, these colors have different values in different themes. Here's a table where you can see all color values and their contrast rates. pc.gray has better overall results but looks very unreadable on dark themes in IntelliJ. pc.dim is bad everywhere, but I would say it's "average bad", it has values that are a bit lower than the pass criteria almost everywhere.

Theme	Dim (actual color, contrast rate)	Gray (actual color, contrast rate)
VS Code Dark (bg #1e1e1e)	#737373, 3.51:1	#919191, 5.28:1 - pass
VS Code Dark Modern (bg #181818)	#707070, 3.58:1	#828282, 4.62:1 - pass
VS Code Light (bg #ffffff)	#a0a0a0, 2.61:1	#666666, 5.74:1 - pass
VS Code Light Modern (bg #f8f8f8)	#a0a0a0, 2.46:1	#6C6C6C, 4.94:1 - pass
Intellij Dark (bg #1e1f22)	#757679, 3.62:1	#4a4c51, 1.91:1
IntelliJ Dracula (bg #2b2b2b)	#858688, 3.88:1	#4f5156, 1.78:1
Intellij Light (bg #ffffff)	#7f7f7f, 4:1	#6d707d, 4.92:1 - pass

I'll try to do something with pc.gray in IntelliJ