Input & button height adjustments

[pricop]

I've looked over the new v6 docs, and the -sm input's height is too big in my opinion.

While other -sm components, such as pagination are around 2rem (32px), inputs and buttons have been increased to 2.25rem (36px).

Generally, for sm variants of input and button components, frameworks such as Bootstrap 4, Boostrap 5, Tailwind, Catalyst, and others, default to 32px for sm variants. While I understand that Bootstrap 6 can be opinionated, I believe this is overexaggerated for a sm variant. The sm variants generally are for dense UIs where space is of the essence.bad.

I'd like to propose changing:

xs: 24px
sm: 36px (12px gap compared to xs variant)
md: 40px, (4px gap compared to sm variant)
lg: 48px (8px gap compared to md variant)

to the following values:

xs: 24px
sm: 32px (8px gap compared to xs)
md: 38px, (6px gap compared to sm)
lg: 44px (6px gap compared to md)

Please note how the gap between variants is more uniform now, from 12 → 4 → 8 to 8 → 6 → 6.

Visual comparison:

---

Real-world case examples:

Here's a screenshot with -sm input and button at 2rem height (32px), which has very good proportions.

Now, here's the same dashboard with sm input and buttons in the header, which currently defaults to 2.25rem (36px). You can probably observe that it looks out of proportions.

---

Another use case is for sm variants for input and button components is to be used alongside pagination component, which currently sits at around 2rem (31px to be more precise, but that's due to a bug, I've submmitted a PR for that as well at https://github.com/orgs/twbs/discussions/42136)

So in my opinion, it would be much better to make the sm variants have a height of 2rem (32px), which in turn will also make it look nice when used in table headers, as well as table footers, and other denser UIs, see:

---

I've opened a PR at: #42139 for you to review.

Thank you.

[abhayclasher]

man ur logic on the uniform gaps (8->6->6) makes way more sense for dense UIs. 36px for sm does feel a bit chunky compared to 32px. saw the PR too, hopefully they merge it bc that consistency is key for tables 👍

[mdo]

Thank you! I spent some time trying to standardize and wanted to hit 38px originally, but font the 16px font-size rough to get used to again with that across the inputs and buttons. I'll review your PR and get something merged soon because I do agree, things feel a little off right now to me.

[pricop]

Awesome, 38px will match BS4 and BS5, so should feel very familiar when people will migrate. I always felt like BS was on point when it came to button sizing. BaseUI & others are at 40px for md variants, while Tailwind & others are at 36px for md variants, so for me, Bootstrap always struck a nice balance, fitting right in between. Not too small, not too big 😁.

One thing that always bothered me on BS4 and BS5 is that the sm variants on button, input, and pagination computed to 31px in height. If your time allows, my PR also sets the min-height for sm variants to 32px (2rem), perhaps you can investigate this too, it's so close to 2rem that it almost feels like a shame not to increase it by 1px, and conicidently 32px is kinda the standard for small elements 😅.

[mdo]

Merged the changes from @pricop's PRs into v6-dev. Thanks!