diff --git a/.changeset/tall-buttons-inputs.md b/.changeset/tall-buttons-inputs.md new file mode 100644 index 00000000000..4bb45acb250 --- /dev/null +++ b/.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. diff --git a/packages/ui/src/foundations/sizes.ts b/packages/ui/src/foundations/sizes.ts index 5ca3de87f4b..f4dc87aeba3 100644 --- a/packages/ui/src/foundations/sizes.ts +++ b/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, diff --git a/packages/ui/src/primitives/Button.tsx b/packages/ui/src/primitives/Button.tsx index 3a10dd034cc..551c82ed944 100644 --- a/packages/ui/src/primitives/Button.tsx +++ b/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}`, diff --git a/packages/ui/src/primitives/Input.tsx b/packages/ui/src/primitives/Input.tsx index 6ef03a6e9f2..d63f3827004 100644 --- a/packages/ui/src/primitives/Input.tsx +++ b/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