feat(ui): increase default button and input height by 2px

Author: alexcarpenter

.changeset/tall-buttons-inputs.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Increase the default height of buttons and inputs by 2px for larger, easier-to-tap touch targets, especially on mobile.

packages/ui/src/foundations/sizes.ts

@@ -18,6 +18,7 @@ const spacingScale = Object.freeze({
   '0x5': { rem: '0.125rem', multiplier: 0.5 },
   '1': { rem: '0.25rem', multiplier: 1 },
   '1x5': { rem: '0.375rem', multiplier: 1.5 },
+  '1x75': { rem: '0.4375rem', multiplier: 1.75 },
   '2': { rem: '0.5rem', multiplier: 2 },
   '2x5': { rem: '0.625rem', multiplier: 2.5 },
   '3': { rem: '0.75rem', multiplier: 3 },
@@ -96,6 +97,7 @@ const spaceUnits = Object.freeze({
   '0x5': spacingScale['0x5'].rem,
   '1': spacingScale['1'].rem,
   '1x5': spacingScale['1x5'].rem,
+  '1x75': spacingScale['1x75'].rem,
   '2': spacingScale['2'].rem,
   '2x5': spacingScale['2x5'].rem,
   '3': spacingScale['3'].rem,

packages/ui/src/primitives/Button.tsx

@@ -40,7 +40,7 @@ const { applyVariants, filterProps } = createVariants(
             padding: `${theme.space.$1} ${theme.space.$3}`,
           },
           sm: {
-            padding: `${theme.space.$1x5} ${theme.space.$3}`,
+            padding: `${theme.space.$1x75} ${theme.space.$3}`,
           },
           md: {
             padding: `${theme.space.$2x5} ${theme.space.$5}`,

packages/ui/src/primitives/Input.tsx

@@ -10,7 +10,7 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
   base: {
     boxSizing: 'border-box',
     margin: 0,
-    padding: `${theme.space.$1x5} ${theme.space.$3}`,
+    padding: `${theme.space.$1x75} ${theme.space.$3}`,
     backgroundColor: theme.colors.$colorInput,
     color: theme.colors.$colorInputForeground,
     // outline support for Windows contrast themes