Description
TLDR: Way too much text to suggest two things :
- differenciate "caution" depending on the level (or soften the "red")
- minor CSS adaptations on mobile (see the screenshots at the end)
While reading the bundle docs, I felt a bit... "attacked" (big quotes around, I'm all right haha..) This is a minor topic. But even on an tiny tiny level, i think there may be something there to improve easily.
Why "attacked" ? As the perfect human beeing i am (**cough**), when it's red, in my head i understand "this is a danger, a risk and i must read this right now".
It was neither a danger, neither something i had to read. And when it happens a lot, i really feel patronized / yelled at.
So maybe a softer red could be used (see suggestions at the end of this message), or ....
Differenciate DANGER and... ??
I think there is a semantic difference between "danger/alert/caution" and "warning"(?).
To illustrate, the following blocs should be (in my mind) on two really different levels of importance.
| Profiler | Bundles |
|---|---|
 |
 |
We had a similar discussion recently on the UX repository about the UX packages docs. I was not keen to display a big red/caution block to give an information. But that information was a pretty highly important one.
So i suggest to differenciate CAUTION either by
- introducing a lower level
- introducting a higher level
But in both case i don't find the "perfect word" for it.
Style on mobile
On mobile, i find the admonition-* blocks really large. Maybe some small modifications could be made to ease the reading:
- remove the
margin-bottomafter the title - diminish the
font-size(as it's done for the "since-version" blocks) - use a smaller
border-width(2px currently)
See how it compares in the following before/after table.
Suggestion
Here a 3 screens to visualise what those ideas could render
| - | Profiler | Bundles | Content |
|---|---|---|---|
| Before |  |
 |
 |
| After |  |
 |
 |