clerk · nikosdouvlis · Mar 13, 2024 · Mar 8, 2024
diff --git a/.changeset/polite-beds-juggle.md b/.changeset/polite-beds-juggle.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Remove the unused appearance keys for accordion and breadcrumb elements.
diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx
@@ -36,7 +36,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
         />
         <Col gap={4}>
           <Text
-            colorScheme='neutral'
+            colorScheme='secondary'
             sx={textSx}
             localizationKey={text}
           >

diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx
@@ -71,7 +71,7 @@ const StatusRow = (props: { status: VerificationStatus }) => {
           <StatusIcon status={props.status} />
           <Text
             elementDescriptor={descriptors.verificationLinkStatusText}
-            colorScheme='neutral'
+            colorScheme='secondary'
             localizationKey={localizationKeys('signIn.emailLink.unusedTab.title')}
           />
         </>

diff --git a/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx b/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx
@@ -32,7 +32,7 @@ export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps)
       <Form.Root onSubmit={handleSubmit}>
         {messageLine2 ? (
           <Text
-            colorScheme='neutral'
+            colorScheme='secondary'
             localizationKey={messageLine2}
           />
         ) : null}

diff --git a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx
@@ -71,7 +71,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
       })}
     >
       <Text
-        colorScheme='neutral'
+        colorScheme='secondary'
         elementDescriptor={descriptors.impersonationFabTitle}
         variant='buttonLarge'
         truncate

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
@@ -27,7 +27,7 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
   if (props.status === 'accepted') {
     return (
       <Text
-        colorScheme='neutral'
+        colorScheme='secondary'
         localizationKey={localizationKeys('organizationList.suggestionsAcceptedLabel')}
       />
     );

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -159,7 +159,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <Col>
             <Text
               localizationKey={messageLine1}
-              colorScheme='neutral'
+              colorScheme='secondary'
             />
             <Text
               localizationKey={messageLine2}

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx
@@ -82,7 +82,7 @@ const InvitationRow = (props: {
       <Td>{invitation.createdAt.toLocaleDateString()}</Td>
       <Td>
         <Text
-          colorScheme={'neutral'}
+          colorScheme='secondary'
           localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -205,7 +205,7 @@ export const RoleSelect = (props: {
             {prefixLocalizationKey && (
               <Text
                 as='span'
-                colorScheme='neutral'
+                colorScheme='secondary'
                 localizationKey={prefixLocalizationKey}
               />
             )}
@@ -245,7 +245,7 @@ const RolesListItem = memo((props: RolesListItemProps) => {
       ]}
       {...rest}
     >
-      <Text colorScheme='neutral'>{option?.label}</Text>
+      <Text colorScheme='secondary'>{option?.label}</Text>
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
@@ -161,7 +161,7 @@ const OrganizationDomainsSection = () => {
                 sx={t => ({
                   paddingLeft: t.space.$9,
                 })}
-                colorScheme='neutral'
+                colorScheme='secondary'
               />
             </Col>
           </Action.Trigger>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useProtect } from '../../common';
 import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants';
 import { useOrganizationProfileContext } from '../../contexts';
-import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
+import { NavBar, NavbarContextProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import type { PropsOfComponent } from '../../styledSystem';
 
@@ -41,13 +41,3 @@ export const OrganizationProfileNavbar = (
     </NavbarContextProvider>
   );
 };
-
-export const OrganizationProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
-  const { pages } = useOrganizationProfileContext();
-  return (
-    <Breadcrumbs
-      {...props}
-      pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -57,7 +57,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   if (props.status === 'accepted') {
     return (
       <Text
-        colorScheme='neutral'
+        colorScheme='secondary'
         localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
       />
     );

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx
@@ -109,7 +109,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) =>
       {isResettingPassword(signIn) && (
         <Text
           localizationKey={localizationKeys('signIn.resetPasswordMfa.detailsLabel')}
-          colorScheme='neutral'
+          colorScheme='secondary'
         />
       )}
     </VerificationCodeCard>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx
@@ -139,11 +139,11 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => {
             />
           )}
         </Flex>
-        <Text colorScheme='neutral'>{browser}</Text>
-        <Text colorScheme='neutral'>
+        <Text colorScheme='secondary'>{browser}</Text>
+        <Text colorScheme='secondary'>
           {ipAddress} ({location})
         </Text>
-        <Text colorScheme='neutral'>{t(getRelativeToNowDateKey(props.session.lastActiveAt))}</Text>
+        <Text colorScheme='secondary'>{t(getRelativeToNowDateKey(props.session.lastActiveAt))}</Text>
       </Col>
     </Flex>
   );

diff --git a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx
@@ -66,7 +66,7 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
             {displayFormat == 'uri' && (
               <>
                 <Text
-                  colorScheme='neutral'
+                  colorScheme='secondary'
                   localizationKey={localizationKeys(
                     'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan1',
                   )}
@@ -75,7 +75,7 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato
                 <ClipboardInput value={totp.secret} />
 
                 <Text
-                  colorScheme='neutral'
+                  colorScheme='secondary'
                   localizationKey={localizationKeys(
                     'userProfile.mfaTOTPPage.authenticatorApp.inputLabel__unableToScan2',
                   )}

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -84,7 +84,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
                         <Text
                           truncate
                           as='span'
-                          colorScheme='neutral'
+                          colorScheme='secondary'
                         >
                           {label ? `• ${label}` : ''}
                         </Text>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx
@@ -43,7 +43,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps)
       <Form.Root onSubmit={deleteUser}>
         <Col gap={1}>
           <Text
-            colorScheme='neutral'
+            colorScheme='secondary'
             localizationKey={localizationKeys('userProfile.deletePage.messageLine1')}
           />
           <Text

diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -45,14 +45,14 @@ export const EnterpriseAccountsSection = () => {
                 >
                   <Text
                     truncate
-                    colorScheme='primary'
+                    colorScheme='body'
                   >
                     {providerName}
                   </Text>
                   <Text
                     truncate
                     as='span'
-                    colorScheme='neutral'
+                    colorScheme='secondary'
                   >
                     {label ? `• ${label}` : ''}
                   </Text>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx b/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx
@@ -39,7 +39,7 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
         <Text
           localizationKey={subtitle}
           variant='caption'
-          colorScheme='neutral'
+          colorScheme='secondary'
         />
       </Col>
       {actionLabel && (

diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx
diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
@@ -52,7 +52,7 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
         <Text
           localizationKey={subtitle}
           variant='caption'
-          colorScheme='neutral'
+          colorScheme='secondary'
         />
       </Col>
       <Box

diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaPhoneCodeScreen.tsx
@@ -116,7 +116,7 @@ const AddMfa = (props: AddMfaProps) => {
             ? 'userProfile.mfaPhoneCodePage.subtitle__availablePhoneNumbers'
             : 'userProfile.mfaPhoneCodePage.subtitle__unavailablePhoneNumbers',
         )}
-        colorScheme='neutral'
+        colorScheme='secondary'
       />
       {availableMethods.length > 0 && (
         <Col gap={2}>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx
@@ -81,7 +81,7 @@ export const AddPhone = (props: AddPhoneProps) => {
       >
         <Text
           localizationKey={localizationKeys('userProfile.phoneNumberPage.infoText')}
-          colorScheme='neutral'
+          colorScheme='secondary'
         />
         <Form.ControlRow elementId={phoneField.id}>
           <Form.PhoneInput

diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileAccordion.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileAccordion.tsx
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useUserProfileContext } from '../../contexts';
-import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements';
+import { NavBar, NavbarContextProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import type { PropsOfComponent } from '../../styledSystem';
 
@@ -22,13 +22,3 @@ export const UserProfileNavbar = (
     </NavbarContextProvider>
   );
 };
-
-export const UserProfileBreadcrumbs = (props: Pick<PropsOfComponent<typeof Breadcrumbs>, 'title'>) => {
-  const { pages } = useUserProfileContext();
-  return (
-    <Breadcrumbs
-      {...props}
-      pageToRootNavbarRoute={pages.pageToRootNavbarRouteMap}
-    />
-  );
-};
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -225,13 +225,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'formattedPhoneNumberFlag',
   'formattedPhoneNumberText',
 
-  'breadcrumbs',
-  'breadcrumbsItems',
-  'breadcrumbsItemBox',
-  'breadcrumbsItem',
-  'breadcrumbsItemIcon',
-  'breadcrumbsItemDivider',
-
   'scrollBox',
 
   'navbar',
@@ -258,9 +251,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'invitationsSentIconBox',
   'invitationsSentIcon',
 
-  'accordionTriggerButton',
-  'accordionContent',
-
   'qrCodeRow',
   'qrCodeContainer',
 
@@ -269,8 +259,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'buttonArrowIcon',
   'providerIcon',
   'spinner',
-  // Decide if we want to keep the keys as camel cased in HTML as well,
-  // if yes, refactor and remove the .map(camelize) method
 ] as const).map(camelize) as (keyof ElementsConfig)[];
 
 type TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;