Style: Fix colors and style for all admonitions

[CAM-Gerlach]

Since the basic admonition admonition styles are just applied to a couple individual admonitions, rather than admonitions in general, those other than "warning" and "note" won't display as admonitions at all. In addition to fixing that, this PR adds appropriate, standard colors for each of the additional admonition types in both light and dark mode.

Discovered in and required by #2690 .

Slightly outdated screenshots also showing status quo

[hugovk]

Accessibility:

In dark and light mode, the link colour on the warning background has low contrast:

And also in light mode for the link colour on the error background:

Can we increase the ratio?

[CAM-Gerlach]

I first took a look at tweaking the link color; in light code I was able to darken it a little to #006699 from #0072aa, which helps across the board, though I didn't want to go too much darker to avoid contrast problems with the regular text. In dark mode, however, the link color is already pretty light, to the point where increasing it any more would make it hard to distinguish from normal text, and users have already mentioned that it is bright/high contrast enough to fatigue their vision, so I didn't push it any further for now.

In dark and light mode, the link colour on the warning background has low contrast

I darkened the dark mode color to #804000 from #884400, which gets the contrast ratio up to 4.00 from 3.68. The problem with going any darker (or even to some extent that dark, and is why I set it that high in the first place) makes the color brown instead of orange, which doesn't communicate the desired meaning, as well as reducing contrast with the background.

Likewise, I lightened the light mode color to #ffddbb from #ffccaa, which increases contrast to 4.85 (with the link change) vs 3.6. Likewise, making this any lighter will not give the admonition the appropriate semantic meaning/priority and significantly impair contrast with the background, making it hard to spot at a glance especially for said users who need the higher contrast.

And also in light mode for the link colour on the error background

I lightened the light mode color from #ffaaaa to #ffcccc, which combined with the link change raises contrast to 4.4 from 2.9. Again, any lighter and it won't visually communicate the gravity of the message, and will also be difficult or impossible to spot due to low contrast against the background.

Also, I bumped the light mode attention/important color from #bbccff to #bbddff, which increases contrast from 3.3 to 4.5.

The others I checked all were at to well above these latter levels, especially with the across the board link change.

[hugovk]

Thanks!

We don't have to only adjust the "global" link colour, we can tailor it specifically for each admonition.

The problem with going any darker (or even to some extent that dark, and is why I set it that high in the first place) makes the color brown instead of orange, which doesn't communicate the desired meaning, as well as reducing contrast with the background.

Yeah... One option with orange background is to have dark foreground text, then we can get a bright orange:

Or this looks like a a good tool for finding contrast (with a guide here), you give it a foreground and background colours and tell it which one to edit, and it can give you a range of options.

[CAM-Gerlach]

I made some further tweaks, making the link color higher contrast inside annotations only, while using some of the additional leeway to re-adjust the admonition colors to a more optimal sequence and modestly higher contrast from the background and each other, while still preserving at least a 4.5 contrast ratio between all of them (including, now, orange on the dark BG).

Updated screenshot (also in OP)

We don't have to only adjust the "global" link colour, we can tailor it specifically for each admonition.

Yeah, I thought about that before, but didn't go for it at the time since it would require more theme variables, would still reduce the contrast between links and normal text, and it could look a little inconsistent. But that is probably the simplest and least impactful solution and less sub-optimal the shifting the BG colors more, so I went with it.

Yeah... One option with orange background is to have dark foreground text, then we can get a bright orange:

We could do that, but we'd have to switch all the other colors that might appear in the warning too, which is pretty non-trivial, and the background would have to be very bright compared to rest of the page and the other admonitions; we'd have to make at least error/danger do that as well to not have warning outshine it.

Or this looks like a a good tool for finding contrast

Great tool, thanks! Very handy.

[hugovk]

Thank you!

[CAM-Gerlach]

If no one has any objections, I'll merge this in a ≈day so #2690 is ready to go whenever it gets merged.

[CAM-Gerlach]

Going ahead and merging this so I can update #2690 with it