Adjust border-radius values and add some new utilities

[mdo]

• Updates global border-radius values for a more modern appearance
• New .fw-semibold
• New .rounded-4 and .rounded-5

Cherry-picked from #35736. /cc @XhmikosR

[fitcwill]

@mdo signposted me to this PR when raising a point elsewhere (#36168) about something that related to this one...

Since upgrading to 5.2.0 to take advantage of some of the specific changes the border radius for a button and a card looked different.

In my case a btn-lg class is in use for the button as it's trying to help with the accessibility to have it a little larger... before the change the difference between the card and button radius was 0.05rem so although they look the same there is actually a slight difference.

Since the change the difference between the card and button is more prominent as it's different by 0.125rem. That difference is catching my eye more easily and not looking quite right. I couldn't see a class for altering the card radius to a large equivalent and imagine there isn't one.

I'm not really sure where else to continue discussing this as creating an issue to discuss it further didn't seem right either (or doesn't anymore at least). Happy to do that if you think best or wait for further guidance. Maybe a discussion is not worthwhile and it's just my tough luck and something I'll have to work around.

FWIW...

5.1.0 codepen - https://codepen.io/fitcwill/pen/ZExyvqM

5.2.0 codepen - https://codepen.io/fitcwill/pen/QWmgaZO

Ironically, the change I was starting to upgrade for makes the button look disabled when hovering over it and is similar to the disabled style itself. I actually feel more strongly about raising something for that!

[fitcwill]

I notice there was some discussion on this being seen as a breaking change by some... in this particular situation it does feel like it looks a bit broken and needs a work around / fix at least in my code now.

[mdo]

If you need a larger border-radius to hatch the large buttons, consider using a border radius utility class. Or you can update the card Sass or CSS variables.

[fitcwill]

Thanks @mdo. I'll look at doing exactly that when back on to that this week.

[fitcwill]

Regarding the style clash with the disabled style... any thoughts on me raising something for this?

[mdo]

I assume the disabled button thing you're talking about is that dark buttons appear slightly lighter on click/hover/focus. This was intentional as the previous states had too little of a change, so it was difficult to tell if they were clicked or focused. But if you have more questions on that, please open a new issue.