feat(clerk-js): Add rethemed button variant and colorSchemes (#2241)

clerk · Dec 1, 2023 · 56d30c4 · 56d30c4
1 parent 2d383e4
commit 56d30c4
Show file tree

Hide file tree

Showing 25 changed files with 101 additions and 97 deletions.
diff --git a/.changeset/blue-garlics-remain.md b/.changeset/blue-garlics-remain.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -125,7 +125,7 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'
-                colorScheme='neutral'
+                colorScheme='secondary'
                 aria-label='Upload organization logo'
                 icon={
                   <Icon

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -205,9 +205,8 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
           <Button
             elementDescriptor={descriptors.button}
             block
-            colorScheme='neutral'
-            // size='sm'
-            variant='outline'
+            variant='secondary'
+            colorScheme='secondary'
             textVariant='buttonExtraSmallBold'
             onClick={handleCreateOrganizationClicked}
             localizationKey={localizationKeys('organizationList.action__createOrganization')}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx
@@ -98,7 +98,7 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
       elementDescriptor={descriptors.organizationListPreviewItemActionButton}
       textVariant='buttonExtraSmallBold'
       variant='outline'
-      colorScheme='neutral'
+      colorScheme='secondary'
       size='sm'
       {...props}
     />

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
@@ -157,7 +157,7 @@ export const DomainList = withGate(
             <ArrowBlockButton
               key={d.id}
               variant='ghost'
-              colorScheme='neutral'
+              colorScheme='secondary'
               badge={!verificationStatus ? <EnrollmentBadge organizationDomain={d} /> : undefined}
               sx={t => ({
                 padding: `${t.space.$3} ${t.space.$4}`,

diff --git a/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -31,7 +31,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
         variant='ghost'
-        colorScheme='neutral'
+        colorScheme='secondary'
         sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}

diff --git a/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -62,8 +62,8 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonExtraSmallBold'
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}

diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -42,6 +42,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       sx={t => ({
         borderBottomLeftRadius: t.radii.$lg,
         borderBottomRightRadius: t.radii.$lg,
+        backgroundColor: t.colors.$colorBackground,
       })}
     />
   );
@@ -67,20 +68,11 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         icon={SignOut}
         label={localizationKeys('userButton.action__signOutAll')}
         onClick={handleSignOutAllClicked}
+        colorScheme='danger'
         sx={t => ({
           padding: `${t.space.$2} ${t.space.$3}`,
-          backgroundColor: t.colors.$transparent,
           borderBottom: 'none',
           borderRadius: t.radii.$lg,
-          ':hover': {
-            backgroundColor: t.colors.$danger50,
-          },
-          ':hover .cl-userButtonPopoverActionButtonText__signOutAll': {
-            color: t.colors.$danger400,
-          },
-          ':hover .cl-userButtonPopoverActionButtonIcon__signOutAll': {
-            color: t.colors.$danger400,
-          },
         })}
       />
     </Actions>

diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -61,7 +61,6 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
 
           <FormButtonContainer>
             <NavigateToFlowStartButton
-              variant='solid'
               autoFocus
               localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
               elementDescriptor={descriptors.formButtonPrimary}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx b/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
@@ -62,7 +62,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'
-        colorScheme='neutral'
+        colorScheme='secondary'
         textVariant='smallRegular'
         leftIcon={icon}
         rightIcon={Caret}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
@@ -60,7 +60,7 @@ export const Action = (props: ActionProps) => {
     <Button
       size='md'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonSmallRegular'
       focusRing={false}
       hoverAsFocus
@@ -73,7 +73,6 @@ export const Action = (props: ActionProps) => {
           gap: theme.space.$3,
           padding: `${theme.space.$4} ${theme.space.$5}`,
           justifyContent: 'flex-start',
-          backgroundColor: theme.colors.$white,
         }),
         sx,
       ]}
@@ -153,7 +152,7 @@ export const SmallAction = (props: ActionProps) => {
     <Button
       size='xs'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonSmallRegular'
       focusRing={false}
       hoverAsFocus

diff --git a/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
@@ -48,8 +48,8 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
 
   return (
     <SimpleButton
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       block
       isLoading={isLoading}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Card.tsx b/packages/clerk-js/src/ui.retheme/elements/Card.tsx
@@ -128,7 +128,7 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
           variant='ghost'
-          colorScheme='neutral'
+          colorScheme='secondary'
           aria-label='Close modal'
           onClick={toggle}
           icon={

diff --git a/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx b/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
@@ -22,7 +22,7 @@ export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
 
       <Button
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
-        variant='ghostIcon'
+        variant='secondary'
         tabIndex={-1}
         colorScheme={'primary'}
         onClick={onCopy}

diff --git a/packages/clerk-js/src/ui.retheme/elements/IdentityPreview.tsx b/packages/clerk-js/src/ui.retheme/elements/IdentityPreview.tsx
@@ -19,7 +19,7 @@ export const IdentityPreview = (props: IdentityPreviewProps) => {
   const edit = onClick && (
     <Button
       elementDescriptor={descriptors.identityPreviewEditButton}
-      variant='ghostIcon'
+      variant='secondary'
       onClick={onClick}
       aria-label={'Edit'}
     >

diff --git a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
@@ -257,7 +257,7 @@ const NavButton = (props: NavButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonRegularMedium'
       isActive={isActive}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx b/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
@@ -23,7 +23,7 @@ const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolea
     <Button
       size='xs'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       sx={t => [
         {
           color: t.colors.$colorText,

diff --git a/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx
@@ -101,9 +101,9 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         elementDescriptor={descriptors.formFieldInputShowPasswordButton}
         iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
-        variant='ghostIcon'
+        variant='secondary'
+        colorScheme={'secondary'}
         tabIndex={-1}
-        colorScheme={'neutral'}
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',

diff --git a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx b/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
@@ -17,7 +17,7 @@ export const PreviewButton = (props: PreviewButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       focusRing={false}
       block
       hoverAsFocus

diff --git a/packages/clerk-js/src/ui.retheme/elements/Select.tsx b/packages/clerk-js/src/ui.retheme/elements/Select.tsx
@@ -372,7 +372,7 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.selectButton}
       elementId={descriptors.selectButton.setId(elementId)}
       ref={reference}
-      colorScheme='neutral'
+      colorScheme='secondary'
       variant='ghost'
       textVariant='smallMedium'
       onClick={onTriggerClick}

diff --git a/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx b/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
@@ -164,8 +164,8 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       ref={ref}
       elementDescriptor={descriptors.socialButtonsIconButton}
       elementId={descriptors.socialButtonsIconButton.setId(id)}
-      variant='icon'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       sx={t => ({
         minHeight: t.sizes.$7x5,
         width: '100%',
@@ -185,8 +185,8 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
     <SimpleButton
       elementDescriptor={descriptors.socialButtonsBlockButton}
       elementId={descriptors.socialButtonsBlockButton.setId(id)}
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       block
       isLoading={isLoading}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx b/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx
@@ -48,7 +48,6 @@ export const SuccessPage = (props: SuccessPageProps) => {
 
       <FormButtonContainer>
         <NavigateToFlowStartButton
-          variant='solid'
           autoFocus
           //Do we need a separate key here?
           localizationKey={finishLabel || localizationKeys('userProfile.formButtonPrimary__finish')}

diff --git a/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
@@ -30,7 +30,7 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
               opacity: 1,
             },
           })}
-          colorScheme='neutral'
+          colorScheme='secondary'
           variant='ghost'
         >
           <Icon icon={ThreeDots} />

diff --git a/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx b/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx
@@ -8,8 +8,8 @@ export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: Reac
 
   return (
     <Button
-      colorScheme='neutral'
-      variant='outline'
+      variant='secondary'
+      colorScheme='secondary'
       sx={[
         t => ({
           borderColor: t.colors.$blackAlpha200,