Refactor border-radius styles to use CSS variable for consistency

[hichemfantar]

I noticed border radius inconsistencies so i addressed them via a single variable.
Update border-radius styles across various components to utilize a CSS variable, ensuring consistency in design. Adjust the variable value for improved appearance.

[github-actions]

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

[josevalim]

Thank you! I like the consistency but I think the inline styles, such as code, should have a --inlineBorderRadius or similar, and be indeed smaller. Probably keeping it at 2px. Can you please update it?

[hichemfantar]

are you saying codeblocks like this one should have a smaller radius?

[hichemfantar]

oh my bad i understand now i'll make the change

[josevalim]

Suggested change

	background-color: transparent;
	backdrop-filter: blur(2px);
	background-color: var(--codeBackground);

I tried it in a couple places but I found the blurred colors confusing. I did like the border though, can we revert it partially?

[hichemfantar]

understandable, i increased the contrast. if you still find it confusing i'll revert the change

before

after

[josevalim]

To be clear, I meant the one for mix help docs should stay with 2px:

[hichemfantar]

i find 4px to be well balanced and closer to the theme, what do you think?

2px

4px

[hichemfantar]

@josevalim another example zoomed out

2px

4px

[josevalim]

💚 💙 💜 💛 ❤️

[DavidOliver]

@hichemfantar, @josevalim, did you mean for the tabs to be affected?

Although the tabs are now more visually distinguished from each other, the flatter look feels neater to me.

[hichemfantar]

looks better with a gap, i'll push a fix

[hichemfantar]

#2027

[DavidOliver]

Do you prefer the new corner style?

Separately to preferring the visual feel of how it was, a (minor) concern I have is that on narrow/mobile screens this approach is more likely to see the tabs taking up more space than is available. Would you be averse to reverting the tabs style?

But if you and @josevalim are happy, not to worry.

[hichemfantar]

I prefer the one with spacing because it gives the elements room to breathe and is more aligned with the theme thanks to the rounded corners.
Also the original design was also broken despite the small radius because you could see the rounded corners clashing with each other due to the lack of spacing

[hichemfantar]

Wrote a new a implementation that's pretty much better that all the ones we discussed
Pretty clean right? opening a pr soon