fix(clerk-js): Button variants and color alignments (clerk#2711)

* fix(clerk-js): Remove usage of the secondaryDanger button

* fix(clerk-js): Align primary button with designs

* feat(clerk-js): Add colorTextLabel variable

* feat(clerk-js): Auto generated secondary button hover color

* fix(clerk-js): Remove ghost primary button variant

* chore(clerk-js): Have all session actions in one place

* refactor(clerk-js): Refactor button variants into variants and color schemes

Author: desiprisg

.changeset/funny-pianos-double.md

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

packages/clerk-js/src/ui/common/RemoveResourceForm.tsx

@@ -35,7 +35,7 @@ export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps)
           localizationKey={messageLine2}
         />
         <FormButtons
-          variant='primaryDanger'
+          colorScheme='danger'
           onReset={onReset}
         />
       </Form.Root>

packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { useEnvironment, useOrganizationListContext } from '../../contexts';
 import { Box, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
-import { Action, Card, Header, SecondaryActions, useCardState, withCardStateProvider } from '../../elements';
+import { Action, Actions, Card, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
 import { Add } from '../../icons';
 import { CreateOrganizationForm } from '../CreateOrganization/CreateOrganizationForm';
@@ -149,7 +149,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
         sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
       >
         <PreviewListItems>
-          <SecondaryActions role='menu'>
+          <Actions role='menu'>
             <PersonalAccountPreview />
             {(userMemberships.count || 0) > 0 &&
               userMemberships.data?.map(inv => {
@@ -183,7 +183,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
               })}
 
             {(hasNextPage || isLoading) && <PreviewListSpinner ref={ref} />}
-          </SecondaryActions>
+          </Actions>
         </PreviewListItems>
 
         <Action

packages/clerk-js/src/ui/components/OrganizationList/shared.tsx

@@ -97,7 +97,7 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
     <Button
       elementDescriptor={descriptors.organizationListPreviewItemActionButton}
       textVariant='buttonSmall'
-      variant='secondary'
+      variant='outline'
       size='xs'
       {...props}
     />

packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx

@@ -107,7 +107,7 @@ type ActionConfirmationPageProps = FormProps & {
   successMessage: LocalizationKey;
   submitLabel: LocalizationKey;
   onConfirmation: () => Promise<any>;
-  variant?: 'primaryDanger' | 'primary';
+  colorScheme?: 'danger' | 'primary';
 };
 
 const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
@@ -122,7 +122,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     onSuccess,
     onReset,
     onConfirmation,
-    variant = 'primaryDanger',
+    colorScheme = 'danger',
   } = props;
   const wizard = useWizard();
   const card = useCardState();
@@ -174,7 +174,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <FormButtonContainer>
             <Form.SubmitButton
               block={false}
-              variant={variant}
+              colorScheme={colorScheme}
               localizationKey={submitLabel}
               isDisabled={!canSubmit}
             />

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx

@@ -192,7 +192,8 @@ const OrganizationLeaveSection = () => {
             <Action.Trigger value='leave'>
               <ProfileSection.Button
                 id='organizationDanger'
-                variant='ghostDanger'
+                variant='ghost'
+                colorScheme='danger'
                 localizationKey={localizationKeys(
                   'organizationProfile.profilePage.dangerSection.leaveOrganization.title',
                 )}
@@ -237,7 +238,8 @@ const OrganizationDeleteSection = () => {
             <Action.Trigger value='delete'>
               <ProfileSection.Button
                 id='organizationDanger'
-                variant='ghostDanger'
+                variant='ghost'
+                colorScheme='danger'
                 localizationKey={localizationKeys(
                   'organizationProfile.profilePage.dangerSection.deleteOrganization.title',
                 )}

packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx

@@ -109,7 +109,6 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
 
       <Button
         textVariant='buttonSmall'
-        variant='primary'
         isLoading={card.isLoading && card.loadingMetadata === 'accept'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}
         onClick={props.onAccept}

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -31,6 +31,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
         variant='ghost'
+        colorScheme='neutral'
         hoverAsFocus
         focusRing={false}
         sx={[

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -2,7 +2,7 @@ import { useUser } from '@clerk/shared/react';
 import React from 'react';
 
 import { descriptors, localizationKeys } from '../../customizables';
-import { Action, SecondaryActions } from '../../elements';
+import { Action, Actions } from '../../elements';
 import { Add } from '../../icons';
 import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
 import type { UserMembershipListProps } from './UserMembershipList';
@@ -55,13 +55,13 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
   return (
     <>
       <UserInvitationSuggestionList onOrganizationClick={onOrganizationClick} />
-      <SecondaryActions
+      <Actions
         elementDescriptor={descriptors.organizationSwitcherPopoverActions}
         role='menu'
       >
         <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
         <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
-      </SecondaryActions>
+      </Actions>
     </>
   );
 };

packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx

@@ -67,7 +67,8 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonSmall'
-      variant='secondary'
+      variant='outline'
+      colorScheme='neutral'
       size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}
@@ -83,7 +84,8 @@ const AcceptRejectInvitationButtons = (props: { onAccept: () => void }) => {
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonSmall'
-      variant='secondary'
+      variant='outline'
+      colorScheme='neutral'
       size='xs'
       isLoading={card.isLoading}
       onClick={props.onAccept}

packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx

@@ -3,7 +3,8 @@ import { useEnvironment, useSignInContext, useSignOutContext } from '../../conte
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import { Action, Actions, Card, Header, PreviewButton, UserPreview, withCardStateProvider } from '../../elements';
 import { useCardState } from '../../elements/contexts';
-import { Add, SignOut, SwitchArrowRight } from '../../icons';
+import { Add, SwitchArrowRight } from '../../icons';
+import { SignOutAllActions } from '../UserButton/SessionActions';
 import { useMultisessionActions } from '../UserButton/useMultisessionActions';
 
 const _SignInAccountSwitcher = () => {
@@ -44,7 +45,6 @@ const _SignInAccountSwitcher = () => {
                     justifyContent: 'flex-start',
                     borderRadius: 0,
                     borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}`,
-                    backgroundColor: theme.colors.$colorBackground,
                   })}
                   icon={SwitchArrowRight}
                 >
@@ -94,26 +94,7 @@ const _SignInAccountSwitcher = () => {
               width: '100%',
             }}
           >
-            <Action
-              elementDescriptor={descriptors.userButtonPopoverActionButton}
-              elementId={descriptors.userButtonPopoverActionButton.setId('signOutAll')}
-              iconBoxElementDescriptor={descriptors.userButtonPopoverActionButtonIconBox}
-              iconBoxElementId={descriptors.userButtonPopoverActionButtonIconBox.setId('signOutAll')}
-              iconElementDescriptor={descriptors.userButtonPopoverActionButtonIcon}
-              iconElementId={descriptors.userButtonPopoverActionButtonIcon.setId('signOutAll')}
-              icon={SignOut}
-              label={localizationKeys('userButton.action__signOutAll')}
-              onClick={handleSignOutAllClicked}
-              variant='ghostDanger'
-              sx={t => ({
-                color: t.colors.$colorTextSecondary,
-                padding: `${t.space.$2} ${t.space.$3}`,
-                borderBottom: 'none',
-                width: '100%',
-                borderRadius: t.radii.$lg,
-              })}
-              spinnerSize='md'
-            />
+            <SignOutAllActions handleSignOutAllClicked={handleSignOutAllClicked} />
           </Card.Action>
         </Card.Footer>
       </Card.Root>