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

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/components/UserButton/SessionActions.tsx

@@ -139,6 +139,14 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
 
   const { menutItems } = useUserButtonContext();
 
+  const commonActionSx: ThemableCssProp = t => ({
+    color: t.colors.$colorForeground,
+  });
+
+  const commonActionIconSx: ThemableCssProp = t => ({
+    color: t.colors.$colorMutedForeground,
+  });
+
   const handleActionClick = async (route: MenuItem) => {
     if (route?.path) {
       await navigate(route.path);
@@ -182,6 +190,8 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
               icon={CogFilled}
               label={localizationKeys('userButton.action__manageAccount')}
               onClick={handleManageAccountClicked}
+              sx={commonActionSx}
+              iconSx={commonActionIconSx}
               focusRing
             />
             <SmallAction
@@ -194,6 +204,8 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
               icon={SignOut}
               label={localizationKeys('userButton.action__signOut')}
               onClick={handleSignOutSessionClicked(session)}
+              sx={commonActionSx}
+              iconSx={commonActionIconSx}
               focusRing
             />
           </Flex>

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>