From bfcc3c35fe3e35f7e90791db8acd124585ba62ab Mon Sep 17 00:00:00 2001
From: George Desipris <73396808+desiprisg@users.noreply.github.com>
Date: Mon, 27 Nov 2023 16:01:17 +0200
Subject: [PATCH] feat(clerk-js): Retheme inputs (#2214)

* feat(clerk-js): Retheme input border radius

* feat(clerk-js): Retheme Input focus ring
---
 .changeset/heavy-horses-nail.md                            | 2 ++
 .../src/ui.retheme/elements/PhoneInput/PhoneInput.tsx      | 7 ++++---
 packages/clerk-js/src/ui.retheme/foundations/shadows.ts    | 1 -
 packages/clerk-js/src/ui.retheme/styledSystem/common.ts    | 6 +++---
 4 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/heavy-horses-nail.md

diff --git a/.changeset/heavy-horses-nail.md b/.changeset/heavy-horses-nail.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/heavy-horses-nail.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
index 9f1276c25a..4b0320cda5 100644
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
@@ -100,12 +100,13 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         comparator={(term, option) => option.searchTerm.toLowerCase().includes(term.toLowerCase())}
       >
         <SelectButton
-          sx={{
+          sx={t => ({
             border: 'none',
+            borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
             borderBottomRightRadius: '0',
             borderTopRightRadius: '0',
             zIndex: 2,
-          }}
+          })}
           isDisabled={rest.isDisabled}
         >
           <Text
@@ -122,7 +123,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         />
       </Select>
 
-      <Flex sx={{ position: 'relative', width: '100%', marginLeft: 1 }}>
+      <Flex sx={{ position: 'relative', width: '100%', marginLeft: 3 /* same as focus ring width */ }}>
         <Text
           variant='smallRegular'
           sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)' }}
diff --git a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
index 861cf4b13d..18c7c9a68b 100644
--- a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
@@ -4,7 +4,6 @@ export const shadows = Object.freeze({
   boxShadow1: '0px 24px 48px rgba(0, 0, 0, 0.16)',
   fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
   focusRing: '0 0 0 3px {{color}}',
-  focusRingInput: '0 0 0 1px {{color}}',
   buttonShadow:
     '0px 0px 0px 1px {{color}}, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
   shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
diff --git a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts b/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
index 64b6fdfbca..c92754f260 100644
--- a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
@@ -136,7 +136,7 @@ const fontSizeVariants = (t: InternalTheme) => {
 const borderVariants = (t: InternalTheme, props?: any) => {
   return {
     normal: {
-      borderRadius: t.radii.$md,
+      borderRadius: t.radii.$lg,
       border: t.borders.$normal,
       ...borderColor(t, props),
     },
@@ -166,9 +166,9 @@ const focusRingInput = (t: InternalTheme, props?: any) => {
   return {
     '&:focus': {
       WebkitTapHighlightColor: 'transparent',
-      boxShadow: t.shadows.$focusRingInput.replace(
+      boxShadow: t.shadows.$focusRing.replace(
         '{{color}}',
-        props?.hasError ? t.colors.$danger200 : t.colors.$primary200,
+        props?.hasError ? t.colors.$danger400 : t.colors.$primary400,
       ),
       transitionProperty: t.transitionProperty.$common,
       transitionTimingFunction: t.transitionTiming.$common,