refactor(clerk-js): Update text/icon color usages pt1 (#6697)

Author: alexcarpenter

.changeset/petite-donkeys-leave.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update search icon, payment source icon, and user preview identifier colors.

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

@@ -102,6 +102,7 @@ export const MembersSearch = ({ query, value, memberships, onSearchChange, onQue
               <Icon
                 icon={MagnifyingGlass}
                 elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}
+                sx={t => ({ color: t.colors.$colorMutedForeground })}
               />
             )
           }

packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx

@@ -13,7 +13,7 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePay
     >
       <Icon
         icon={paymentSource.paymentMethod === 'card' ? CreditCard : GenericPayment}
-        sx={{ alignSelf: 'center' }}
+        sx={t => ({ alignSelf: 'center', color: t.colors.$colorMutedForeground })}
         elementDescriptor={descriptors.paymentSourceRowIcon}
       />
       <Text

packages/clerk-js/src/ui/elements/UserPreview.tsx

@@ -170,6 +170,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             truncate
             as='span'
             localizationKey={subtitle || identifier}
+            colorScheme='secondary'
           />
         )}
       </Flex>