handle simple theme spacing

Author: alexcarpenter

packages/ui/src/baseTheme.ts

@@ -305,6 +305,14 @@ const clerkTheme: Appearance = {
         borderWidth: 0,
         boxShadow: `0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px ${theme.colors.$borderAlpha100}`,
       },
+      formFieldInputShowPasswordButton: {
+        insetInlineEnd: theme.space.$0x75,
+        insetBlock: theme.space.$0x75,
+        borderRadius: `calc(${theme.radii.$md} - ${theme.space.$0x75})`,
+        '&::before': {
+          inset: `calc(${theme.space.$0x75} * -1)`,
+        },
+      },
     };
   },
 } satisfies Appearance;

packages/ui/src/elements/PasswordInput.tsx

@@ -114,15 +114,15 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',
-          insetInlineEnd: theme.space.$0x75,
-          insetBlock: theme.space.$0x75,
-          borderRadius: theme.radii.$sm,
+          insetInlineEnd: theme.space.$1,
+          insetBlock: theme.space.$1,
+          borderRadius: `calc(${theme.radii.$md} - ${theme.space.$1})`,
           color: theme.colors.$neutralAlpha400,
           paddingInline: theme.space.$2,
           '&::before': {
             content: '""',
             position: 'absolute',
-            inset: `calc(${theme.space.$0x75} * -1)`,
+            inset: `calc(${theme.space.$1} * -1)`,
             display: 'block',
             borderRadius: theme.radii.$md,
           },