Simplifying admonition blocks

[DavidOliver]

I wanted to float the idea of simplifing the admonition blocks. Removing the title bar moves the feel closer to that of the relatively recently updated tab group styling, which I feel is more modern and less visually abrasive.

I may have gone too dark/subdued with the dark theme's background colours here, but they can, of course, be tweaked if this approach is one you'd like me to explore further.

[josevalim]

I am fine with those, perhaps i would only increase the spacing between the title and first paragraph a tiny bit more. We can definitely give it a try and collect feedback.

[DavidOliver]

Okay - thanks. Do you mean to go ahead with the HTML and CSS changes or to just do some more visuals?

[josevalim]

With HTML and CSS! As you prefer!

[DavidOliver]

Okay, I'll go ahead with a PR then. 👍

[DavidOliver]

@josevalim, absolutely no urgency on this from my point of view - feel free to ignore until after you're back/whenever convenient.

I think I'm now happy with where the HTML docs output is. It's involved some tweaking of how code-related colours work and some related CSS moving/being simplified.

If you're happy with the look and choices of colours in general, I'll check the epub and print output before submitting the PR.

[josevalim]

Thank you, I have asked some folks to drop their feedback.

Although I am a bit worried about the visibility of header of the red header on red and yellow header on yellow, especially on the dark ones. Are we getting at least AA accessibility on them?

[maennchen]

Agree as well on the contrast. Otherwise this looks great. 👍

[halostatue]

It's a minor thing, but might it not be good to have a border under the admonition title bar? The tabs have a faint bottom border with a thicker bottom border under the selected tab. Because it's a subtle hint, I don't even think that the border has to be high contrast, but I think it would look better present than not.

[zachdaniel]

My current thinking is that this draws slightly too much attention away from the title of the admonition block, which is usually a hook to get the reader to focus on something they might not otherwise focus on (or to give them a way to ignore it if it doesn't matter).

With that in mind I think @halostatue's idea of having a slight border under the title would be great :)

[DavidOliver]

Although I am a bit worried about the visibility of header of the red header on red and yellow header on yellow, especially on the dark ones. Are we getting at least AA accessibility on them?

It was a pass for AA Large (120% larger than main text) but not for body text. I've increased the contrast for a few of the headings and I think we're now passing for AA any size.

It's a minor thing, but might it not be good to have a border under the admonition title bar? The tabs have a faint bottom border with a thicker bottom border under the selected tab. Because it's a subtle hint, I don't even think that the border has to be high contrast, but I think it would look better present than not.

Good shout! Border-bottom added.

My current thinking is that this draws slightly too much attention away from the title of the admonition block, which is usually a hook to get the reader to focus on something they might not otherwise focus on (or to give them a way to ignore it if it doesn't matter).

I see what you mean, but my hope is that the upper and lower limits of a block are now easier to interpret due to the background colour, making parsing easier overall.

Light preview

Dark preview

In use:

[zachdaniel]

That most recent variant looks great to me 👍

[josevalim]

Love it too! Excellent feedback folks! @DavidOliver please ship it!