refactor(clerk-js): Tackle design feedback adjustments (#6934)

Author: alexcarpenter

.changeset/huge-feet-enter.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+---
+
+- Update checkbox checked background color and icon
+- Increase role select options contrast
+- Updates user preview subtitle text variant

packages/clerk-js/src/ui/baseTheme.ts

@@ -191,13 +191,13 @@ const clerkTheme: Appearance = {
         appearance: 'none',
         borderRadius: theme.radii.$sm,
         border: 'none',
+        backgroundSize: `${theme.sizes.$2} ${theme.sizes.$2}`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
         '&:checked': {
-          backgroundImage: `url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 8L6.5 9.75L9.75 4.25' stroke='${theme.colors.$whiteAlpha900}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E")`,
+          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='${theme.colors.$white}' fill-rule='evenodd' d='M7.712.233a.889.889 0 0 1 .055 1.256C6.742 2.61 6.249 3.291 5.508 4.615c-.279.5-.589 1.194-.835 1.784a36.761 36.761 0 0 0-.382.95l-.021.057-.006.014-.001.003a.89.89 0 0 1-1.504.27L.218 4.765A.889.889 0 1 1 1.56 3.6l1.591 1.834c.235-.548.524-1.181.806-1.685.807-1.445 1.38-2.239 2.499-3.46A.889.889 0 0 1 7.712.234Z' clip-rule='evenodd'/%3E%3C/svg%3E")`,
           borderColor: theme.colors.$transparent,
-          backgroundColor: theme.colors.$primary900,
-          backgroundSize: '100% 100%',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
+          backgroundColor: theme.colors.$primary500,
         },
       },
       tagInputContainer: {

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

@@ -89,6 +89,7 @@ const MemberRow = (props: {
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
           subtitle={membership.publicUserData?.identifier}
+          subtitleProps={{ variant: 'caption' }}
           badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>

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

@@ -80,6 +80,7 @@ const InvitationRow = (props: {
         <UserPreview
           sx={{ maxWidth: '30ch' }}
           user={{ primaryEmailAddress: { emailAddress: invitation.emailAddress } } as any}
+          subtitleProps={{ variant: 'caption' }}
         />
       </Td>
       <Td>

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

@@ -20,7 +20,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
-import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
+import { common, type PropsOfComponent, type ThemableCssProp } from '../../styledSystem';
 
 type MembersListTableProps = {
   headers: LocalizationKey[];
@@ -174,10 +174,10 @@ export const RoleSelect = (props: {
           option={option}
           sx={theme => ({
             '&:hover': {
-              backgroundColor: theme.colors.$neutralAlpha100,
+              background: common.mutedBackground(theme),
             },
             '&[data-focused="true"]': {
-              backgroundColor: theme.colors.$neutralAlpha150,
+              background: common.mutedBackground(theme),
             },
           })}
         />
@@ -255,7 +255,7 @@ const RolesListItem = memo((props: RolesListItemProps) => {
       ]}
       {...rest}
     >
-      <Text colorScheme='secondary'>{option?.label}</Text>
+      <Text variant='subtitle'>{option?.label}</Text>
     </Flex>
   );
 });

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

@@ -84,6 +84,7 @@ const RequestRow = withCardStateProvider(
             sx={{ maxWidth: '30ch' }}
             showAvatar={false}
             user={{ primaryEmailAddress: { emailAddress: request.publicUserData.identifier } } as any}
+            subtitleProps={{ variant: 'caption' }}
           />
         </Td>
         <Td>

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

@@ -25,6 +25,7 @@ export type UserPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'title' | 'el
   mainIdentifierVariant?: PropsOfComponent<typeof Text>['variant'];
   title?: LocalizationKey | string;
   subtitle?: LocalizationKey | string;
+  subtitleProps?: PropsOfComponent<typeof Text>;
   showAvatar?: boolean;
 } & (
     | {
@@ -63,6 +64,7 @@ export const UserPreview = (props: UserPreviewProps) => {
     avatarSx,
     mainIdentifierSx,
     mainIdentifierVariant,
+    subtitleProps,
     ...rest
   } = props;
   const { t } = useLocalizations();
@@ -171,6 +173,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             as='span'
             localizationKey={subtitle || identifier}
             colorScheme='secondary'
+            {...subtitleProps}
           />
         )}
       </Flex>