feat(clerk-js): Retheme design and arrow on primary button

packages/clerk-js/src/ui/elements/Form.tsx

@@ -79,7 +79,8 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
-      textVariant='buttonExtraSmallBold'
+      hasArrow
+      textVariant='buttonSmallRegular'
       isLoading={isLoading}
       isDisabled={isDisabled}
       type='submit'

packages/clerk-js/src/ui/foundations/colors.ts

@@ -45,16 +45,22 @@ export const colors = Object.freeze({
   transparent: 'transparent',
   white: 'white',
   black: 'black',
-  primary50: '#f0f3ff',
-  primary100: '#d1dcff',
-  primary200: '#91A7F7',
-  primary300: '#6684F5',
-  primary400: '#3B62F2',
-  primary500: '#103FEF',
-  primary600: '#0D33BF',
-  primary700: '#0A268F',
-  primary800: '#07195F',
-  primary900: '#030D30',
+  // TODO: Primary colors below aren't final yet (6 November 2023)
+  primary25: '#FAFAFB',
+  primary50: '#F7F7F8',
+  primary100: '#EEEEF0',
+  primary150: '#E3E3E7',
+  primary200: '#D9D9DE',
+  primary300: '#B7B8C2',
+  primary400: '#9394A1',
+  primary500: '#747686',
+  primary600: '#5E5F6E',
+  primary700: '#42434D',
+  primary750: '#373840',
+  primary800: '#2F3037',
+  primary850: '#27272D',
+  primary900: '#212126',
+  primary950: '#131316',
   danger50: '#FEF3F2',
   danger100: '#FEE4E2',
   danger200: '#FECDCA',

packages/clerk-js/src/ui/foundations/typography.ts

@@ -9,7 +9,7 @@ const lineHeights = Object.freeze({
   none: 1,
   shortest: 1.1,
   shorter: 1.25,
-  short: 1.375,
+  short: 1.385,
   base: 1.5,
   tall: 1.625,
   taller: 2,
@@ -43,4 +43,4 @@ const fonts = Object.freeze({
   buttons: 'inherit',
 } as const);
 
-export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles };
+export { fontSizes, fontStyles, fontWeights, fonts, letterSpacings, lineHeights };

packages/clerk-js/src/ui/icons/v5/index.ts

@@ -0,0 +1,10 @@
+// ❗️ Temp folder while we build the new components design.
+// ❗️ TODO: Move to the folder above and replace the current files once ready.
+
+// @ts-nocheck
+/**
+ * TypeScript configuration (typings) is not correctly configured for all projects.
+ * Consequently, the files are correctly imported but the TS checker emits errors.
+ * The above no-check is safe, as webpack will not allow compilation if for example a file is not resolved.
+ */
+export { default as ArrowRightIcon } from './arrow-right.svg';

packages/clerk-js/src/ui/primitives/Button.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Icon } from '../customizables';
+import { ArrowRightIcon } from '../icons/v5';
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
 import { common, createCssVariables, createVariants } from '../styledSystem';
 import { colors } from '../utils';
@@ -21,6 +23,8 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       backgroundColor: 'unset',
       color: 'currentColor',
       borderRadius: theme.radii.$md,
+      position: 'relative',
+      isolation: 'isolate',
       ...common.centeredFlex('inline-flex'),
       ...common.disabled(theme),
       transitionProperty: theme.transitionProperty.$common,
@@ -32,8 +36,8 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
         iconLg: { minHeight: theme.sizes.$14, width: theme.sizes.$14 },
         xs: { minHeight: theme.sizes.$1x5, padding: `${theme.space.$1x5} ${theme.space.$1x5}` },
         sm: {
-          minHeight: theme.sizes.$8,
-          padding: `${theme.space.$2} ${theme.space.$3x5}`,
+          minHeight: theme.sizes.$7,
+          padding: `${theme.space.$1x5} ${theme.space.$3x5}`,
         },
         md: {
           minHeight: theme.sizes.$9,
@@ -43,11 +47,11 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       },
       colorScheme: {
         primary: {
-          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3),
-          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary500, 0.3),
-          [vars.accent]: theme.colors.$primary500,
-          [vars.accentDark]: theme.colors.$primary600,
-          [vars.accentDarker]: theme.colors.$primary700,
+          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3), // TODO
+          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary800, 0.3), // Updated to new color palette; previously `$primary500`
+          [vars.accent]: theme.colors.$primary800, // Updated to new color palette; previously `$primary500`
+          [vars.accentDark]: theme.colors.$primary600, // TODO
+          [vars.accentDarker]: theme.colors.$primary700, // TODO
         },
         danger: {
           [vars.accentLightest]: colors.setAlpha(theme.colors.$danger400, 0.3),
@@ -69,9 +73,18 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
         solid: {
           backgroundColor: vars.accent,
           color: theme.colors.$colorTextOnPrimaryBackground,
-          '&:hover': { backgroundColor: vars.accentDark },
+          boxShadow: `0px 0px 0px 1px ${theme.colors.$primary800}, 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)`,
+          // '&:hover': { backgroundColor: vars.accentDark }, // TODO
           '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
-          '&:active': { backgroundColor: vars.accentDarker },
+          // '&:active': { backgroundColor: vars.accentDarker }, // TODO
+          ':after': {
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+          },
         },
         outline: {
           border: theme.borders.$normal,
@@ -130,7 +143,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       textVariant: 'buttonRegularRegular',
       colorScheme: 'primary',
       variant: 'solid',
-      size: 'md',
+      size: 'sm',
       focusRing: true,
     },
   };
@@ -141,6 +154,7 @@ type OwnProps = PrimitiveProps<'button'> & {
   isDisabled?: boolean;
   isActive?: boolean;
   hoverAsFocus?: boolean;
+  hasArrow?: boolean;
 };
 type ButtonProps = OwnProps & StyleVariants<typeof applyVariants>;
 
@@ -149,10 +163,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
   const {
     isLoading,
     isDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     hoverAsFocus,
     loadingText,
     children,
+    hasArrow,
     onClick: onClickProp,
     ...rest
   } = filterProps(parsedProps);
@@ -192,14 +207,32 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           {loadingText || <span style={{ opacity: 0 }}>{children}</span>}
         </Flex>
       )}
-      {!isLoading && children}
+
+      {!isLoading && (
+        <Flex
+          align='center'
+          gap={2}
+        >
+          {children}
+          {hasArrow && (
+            <Icon
+              icon={ArrowRightIcon}
+              sx={{
+                width: '0.625rem',
+                height: '0.625rem',
+                opacity: 0.6,
+              }}
+            />
+          )}
+        </Flex>
+      )}
     </button>
   );
 });
 
 const SimpleButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const parsedProps: ButtonProps = { ...props, isDisabled: props.isDisabled || props.isLoading };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const { loadingText, isDisabled, hoverAsFocus, children, onClick: onClickProp, ...rest } = filterProps(parsedProps);
 
   const onClick: React.MouseEventHandler<HTMLButtonElement> = e => {

packages/clerk-js/src/ui/styledSystem/common.ts

@@ -4,6 +4,7 @@ const textVariants = (t: InternalTheme) => {
   const base = {
     WebkitFontSmoothing: t.options.$fontSmoothing,
     fontFamily: 'inherit',
+    letterSpacing: t.letterSpacings.$normal,
   };
 
   const smallRegular = {
@@ -84,6 +85,7 @@ const textVariants = (t: InternalTheme) => {
   const buttonSmallRegular = {
     ...smallRegular,
     fontFamily: t.fonts.$buttons,
+    lineHeight: t.lineHeights.$short,
   };
 
   const buttonRegularRegular = {