fix(clerk-js): UI fixes on <SignIn/> and <SignUp/> to match new design (

#2512) * fix(clerk-js): Divider text font-weight * fix(clerk-js): Input box-shadow * fix(clerk-js): Primary button background and box-shadow * fix(clerk-js): Form secondary action text size and weight * fix(clerk-js): Font sizes for xs and sm and "optional" label color * fix(clerk-js): Phone input box-shadow * fix(clerk-js): Alternative methods back button text * fix(clerk-js): Update tests * fix(clerk-js): Revert font-size change for xs and sm * fix(clerk-js): Reduce breaking changes in localization * fix(clerk-js): Revert wrongly removed disabled styles from Input component --------- Co-authored-by: Vaggelis Yfantis <[email protected]>
clerk · Jan 11, 2024 · 87022dd · 87022dd
1 parent 84d1850
commit 87022dd
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/light-apples-joke.md b/.changeset/light-apples-joke.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/soft-rats-grab.md b/.changeset/soft-rats-grab.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/yellow-frogs-teach.md b/.changeset/yellow-frogs-teach.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx
@@ -18,7 +18,7 @@ export const Divider = (props: DividerProps) => {
       <Text
         localizationKey={!dividerText ? localizationKeys('dividerText') : dividerText}
         elementDescriptor={descriptors.dividerText}
-        variant='subtitle'
+        variant='body'
         colorScheme='neutral'
         sx={t => ({ margin: `0 ${t.space.$4}` })}
       />

diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
@@ -59,6 +59,7 @@ const FieldAction = (
       elementId={descriptors.formFieldLabel.setId(fieldId)}
       isDisabled={isDisabled}
       colorScheme='primary'
+      variant='buttonSmall'
       onClick={e => {
         e.preventDefault();
         props.onClick?.(e);
@@ -78,7 +79,7 @@ const FieldOptionalLabel = () => {
       elementId={descriptors.formFieldHintText.setId(fieldId)}
       as='span'
       variant='caption'
-      colorScheme='neutral'
+      colorScheme='tertiary'
       isDisabled={isDisabled}
     />
   );

diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -54,7 +54,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
             borderRadius: 'inherit',
             zIndex: -1,
             inset: 0,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha150} 0%, ${theme.colors.$transparent} 100%)`,
           },
           ':after': {
             position: 'absolute',
@@ -65,7 +65,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
             opacity: 0,
             transitionProperty: theme.transitionProperty.$common,
             transitionDuration: theme.transitionDuration.$controls,
-            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha100} 0%, ${theme.colors.$transparent} 100%)`,
           },
           ':hover::after': {
             opacity: 1,

diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx
@@ -23,6 +23,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
         danger: { color: theme.colors.$danger500 },
         success: { color: theme.colors.$success500 },
         neutral: { color: theme.colors.$colorTextSecondary },
+        tertiary: { color: theme.colors.$colorTextTertiary },
         inherit: { color: 'inherit' },
       },
       truncate: {