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

Author: desiprisg

.changeset/blue-garlics-remain.md

@@ -0,0 +1,2 @@
+---
+---

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

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')}

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}
     />

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}`,

packages/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`}

packages/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}

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>

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}

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}