feat(clerk-js,themes): Introduce and theme providerIcon descriptor

Author: nikosdouvlis

packages/clerk-js/src/v4/UserProfile/ConnectedAccountsSection.tsx

@@ -3,7 +3,7 @@ import { ExternalAccountResource } from '@clerk/types/src';
 
 import { useCoreUser } from '../../ui/contexts';
 import { useNavigate } from '../../ui/hooks/useNavigate';
-import { Badge, Col, Flex, Image } from '../customizables';
+import { Badge, Col, descriptors, Flex, Image } from '../customizables';
 import { useCardState, UserPreview } from '../elements';
 import { useEnabledThirdPartyProviders } from '../hooks';
 import { handleError } from '../utils';
@@ -53,6 +53,8 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
     <UserProfileAccordion
       icon={
         <Image
+          elementDescriptor={[descriptors.providerIcon]}
+          elementId={descriptors.socialButtonsProviderIcon.setId(account.provider)}
           alt={providerToDisplayData[account.provider].name}
           src={providerToDisplayData[account.provider].iconUrl}
           sx={theme => ({ width: theme.sizes.$4 })}

packages/themes/src/themes/dark.ts

@@ -10,8 +10,8 @@ export const dark = unstable_createTheme({
   },
   elements: () => {
     return {
-      socialButtonsLogo__apple: { filter: 'invert(1)' },
-      socialButtonsLogo__github: { filter: 'invert(1)' },
+      providerIcon__apple: { filter: 'invert(1)' },
+      providerIcon__github: { filter: 'invert(1)' },
       activeDeviceIcon: {
         '--cl-chassis-bottom': '#d2d2d2',
         '--cl-chassis-back': '#e6e6e6',