Improve tabset corners; rework border-radius across styles

[DavidOliver]

One reason for this suggestion is avoiding the optical mismatch between inner and outer frames:

This introduces an inner radius and an outer radius:

Summary:

• Most elements' border radii are reduced to 3px; nearer to what they were before, but still very slightly rounder if I'm not mistaken, and so not such a stark change.
• Tabset frames' border radius is increased to 12px.
• Admonitions being set to the 'inner', smaller radius is the biggest difference to the last release; here they are more square, despite, of course, not always appearing within another frame. I don't mind this, but thought it worth flagging.

This also introduces the inner/small radius to callback/function headings:

Draft status as there are likely more outers to change to inners. I'll wait to hear whether or not this approach is desired.

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/13014732279/artifacts/2498536953

[josevalim]

I'd propose for admonitions to be either:

1. outer radius, as that's how they will appear most times
2. being inner conditionally, only if they are inside another frame?

Regarding functions, I don't think they should have radius. The border with radius don't work well IMO. :)

[DavidOliver]

I'd propose for admonitions to be either:

1. outer radius, as that's how they will appear most times
2. being inner conditionally, only if they are inside another frame?

Maybe we make them 'outer' when not nested, and something between 'outer' and 'inner' when they are inner? This might be a reasonable way of maintaining their current feel while still moving them toward optical radius consistency when they're inner. I'll give that a go and post some screenshots.

Regarding functions, I don't think they should have radius. The border with radius don't work well IMO. :)

Okay, I'll revert.

Thanks.

[DavidOliver]

After a little experimentation, it seems to me that a good approach would be to simply use an in-between radius for all admonitions. (Currently 8px.) This allows all admonition boxes, regardless of context, to maintain a more rounded feel relative to the code boxes, which I think helps differentiate them. (Not everything has to be the same.) Deviation of border radius for admonitions due to being in a tabset would likely feel slightly jarring as their coloured top bars would emphasise the difference.

Code boxes are still 3px, which is just rounded enough to nicely soften the corners.

Tabset boxes are 14px, for the "concentric" consideration.

Callback/function headings border radius has been removed.

---

I've compared with how it is in main again (all with the same radius), and I feel that having three radii used consistently, with a view to the concentric effect of the corners, gives a better feel on balance.

And I've realised that I like the code boxes having a far more modest radius than the admonition boxes, which somehow feels a little stronger/refined(?). It's not that it's objectively good or bad either way in this respect - just that one pro of this approach is greater differentiation between the two different kinds of elements.

[josevalim]

Sounds good to me!

[DavidOliver]

Do you like the way using the three radii looks? If so, and you're happy to proceed, I'll check everywhere else border radius is used and select the most appropriate of the three custom properties.

[josevalim]

Yes, if you are happy, I am happy! Feel free to merge and please let me know once you think we are ready for the final release. :)

[DavidOliver]

I believe all border radiuses are now properly set, given the new approach, but it would be great if you get a chance to have a quick test, too. When choosing one of the three options for each element, I've tended to match/choose the closest to the last release's radius values.

I'm now doubting the use of inner, middle and outer for custom property names as there's only one place this scheme is actually used in that way - in the tabsets. Shall I rename to sm, md and lg or similar?

[josevalim]

Shall I rename to sm, md and lg or similar?

Sounds good to me!

[josevalim]

I went over the changes and they look good to me. Honestly, I don't have a strong opinion on this matter, as long as we have a proper mental model to move forward, I am happy. :)

[DavidOliver]

Okay, thanks. For simplicity for others who may make edits without seeing the reason for the naming scheme, I'll convert to plain size names.