feat(clerk-js): Input border retheme (#2218)

clerk · Nov 28, 2023 · 86d0a58 · 86d0a58
1 parent daaf770
commit 86d0a58
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/.changeset/ten-mugs-film.md b/.changeset/ten-mugs-film.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
@@ -3,9 +3,11 @@ export const shadows = Object.freeze({
   cardDropShadow: '0px 24px 48px rgba(0, 0, 0, 0.16)',
   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}}',
   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)',
   sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
+  input: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
+  inputHover: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
+  focusRing: '0px 0px 0px 4px {{color}}',
 } as const);
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Input.tsx b/packages/clerk-js/src/ui.retheme/primitives/Input.tsx
@@ -20,7 +20,6 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     accentColor: theme.colors.$primary500,
     ...common.textVariants(theme).smallRegular,
     ...common.borderVariants(theme, props).normal,
-    ...(props.focusRing === false ? {} : common.focusRingInput(theme, props)),
     ...common.disabled(theme),
     [mqu.ios]: {
       fontSize: theme.fontSizes.$md,

diff --git a/packages/clerk-js/src/ui.retheme/styledSystem/common.ts b/packages/clerk-js/src/ui.retheme/styledSystem/common.ts
@@ -134,11 +134,41 @@ const fontSizeVariants = (t: InternalTheme) => {
 };
 
 const borderVariants = (t: InternalTheme, props?: any) => {
+  const defaultBoxShadow = t.shadows.$input
+    .replace('{{color1}}', t.colors.$blackAlpha200)
+    .replace('{{color2}}', t.colors.$blackAlpha300);
+  const hoverBoxShadow = t.shadows.$inputHover
+    .replace('{{color1}}', t.colors.$blackAlpha300)
+    .replace('{{color2}}', t.colors.$blackAlpha400);
+  const hoverStyles = {
+    '&:hover': {
+      WebkitTapHighlightColor: 'transparent',
+      boxShadow: [defaultBoxShadow, hoverBoxShadow].toString(),
+    },
+  };
+  const focusStyles =
+    props?.focusRing === false
+      ? {}
+      : {
+          '&:focus': {
+            WebkitTapHighlightColor: 'transparent',
+            boxShadow: [
+              defaultBoxShadow,
+              hoverBoxShadow,
+              t.shadows.$focusRing.replace('{{color}}', props?.hasError ? t.colors.$danger300 : t.colors.$primary300),
+            ].toString(),
+          },
+        };
   return {
     normal: {
       borderRadius: t.radii.$lg,
-      border: t.borders.$normal,
-      ...borderColor(t, props),
+      border: 'none',
+      boxShadow: defaultBoxShadow,
+      transitionProperty: t.transitionProperty.$common,
+      transitionTimingFunction: t.transitionTiming.$common,
+      transitionDuration: t.transitionDuration.$focusRing,
+      ...hoverStyles,
+      ...focusStyles,
     },
   } as const;
 };