New root defaults for inputs and buttons (#42139)

* New root defaults for inputs and buttons

Both the buttons and the inputs are too large for what they're designed for.

This PR normalizes the difference between variants by making them more uniform.

It also makes it match more closely to BS4, BS5, Tailwind, Catalyst, etc.

I don't want to repeat everything that I've wrote in the v6 feedback, so kindly please have a read at: https://github.com/orgs/twbs/discussions/42138

Feel free to decline this PR if you believe the current defaults are fine.

* Adjust button input vertical padding

Since line-height is `1.5`, the `-y` padding should have stayed the same at `.375rem` (that totals to `2.25rem` (`36px`) plus the borders, it's `2.375rem` (`38px)).

diff --git a/scss/_root.scss b/scss/_root.scss
index 221caae814a69056efc7f301b1ae63597d024cef..400d911f6c2c38ec23e3dda89467912ebc92d9eb 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -119,7 +119,7 @@ $root-tokens: defaults(
     --btn-input-fg: var(--fg-body),
     --btn-input-bg: var(--bg-body),
 
-    --btn-input-min-height: 2.5rem,
+    --btn-input-min-height: 2.375rem,
     --btn-input-padding-y: .375rem,
     --btn-input-padding-x: .75rem,
     --btn-input-font-size: var(--font-size-base),
@@ -133,14 +133,14 @@ $root-tokens: defaults(
     --btn-input-xs-line-height: 1.125,
     --btn-input-xs-border-radius: var(--border-radius-xs),
 
-    --btn-input-sm-min-height: 2.25rem,
+    --btn-input-sm-min-height: 2rem,
     --btn-input-sm-padding-y: .25rem,
     --btn-input-sm-padding-x: .625rem,
     --btn-input-sm-font-size: var(--font-size-sm),
     --btn-input-sm-line-height: var(--line-height-sm),
     --btn-input-sm-border-radius: var(--border-radius-sm),
 
-    --btn-input-lg-min-height: 3rem,
+    --btn-input-lg-min-height: 2.75rem,
     --btn-input-lg-padding-y: .5rem,
     --btn-input-lg-padding-x: 1rem,
     --btn-input-lg-font-size: var(--font-size-md),