feat(clerk-js): Retheme inputs (#2214)

* feat(clerk-js): Retheme input border radius * feat(clerk-js): Retheme Input focus ring
clerk · Nov 27, 2023 · bfcc3c3 · bfcc3c3
1 parent 12962bc
commit bfcc3c3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/.changeset/heavy-horses-nail.md 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
@@ -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
@@ -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
@@ -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,