From 5d8d32457e32870a340369c37ed50efce522b5ad Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 7 Oct 2025 10:20:46 -0400 Subject: [PATCH 1/6] chore: Adjust checkbox background color --- packages/clerk-js/src/ui/baseTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/baseTheme.ts b/packages/clerk-js/src/ui/baseTheme.ts index f10fbb86a82..6062c5102fa 100644 --- a/packages/clerk-js/src/ui/baseTheme.ts +++ b/packages/clerk-js/src/ui/baseTheme.ts @@ -194,7 +194,7 @@ const clerkTheme: Appearance = { '&: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")`, borderColor: theme.colors.$transparent, - backgroundColor: theme.colors.$primary900, + backgroundColor: theme.colors.$primary500, backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', From 7c8e6c44abc3c1510401527c450d145a37765524 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 7 Oct 2025 10:21:50 -0400 Subject: [PATCH 2/6] chore: Adjust role select option styles --- .../ui/components/OrganizationProfile/MemberListTable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx index b6ed9140d68..eee4c9ed718 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx +++ b/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} > - {option?.label} + {option?.label} ); }); From 396da13b17fb3e62914543160e2fc79c6f5bf8b2 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 7 Oct 2025 10:22:09 -0400 Subject: [PATCH 3/6] chore: Adjust user preview text variant --- packages/clerk-js/src/ui/elements/UserPreview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx index 7e51e0e5dd3..c2c7d18f551 100644 --- a/packages/clerk-js/src/ui/elements/UserPreview.tsx +++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx @@ -171,6 +171,7 @@ export const UserPreview = (props: UserPreviewProps) => { as='span' localizationKey={subtitle || identifier} colorScheme='secondary' + variant='caption' /> )} From bce0160bb5e689695bc1ab671357ee05941c0dfb Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 7 Oct 2025 10:46:11 -0400 Subject: [PATCH 4/6] chore: Update checkmark --- packages/clerk-js/src/ui/baseTheme.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/clerk-js/src/ui/baseTheme.ts b/packages/clerk-js/src/ui/baseTheme.ts index 6062c5102fa..ce2b7a47fb2 100644 --- a/packages/clerk-js/src/ui/baseTheme.ts +++ b/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.$primary500, - backgroundSize: '100% 100%', - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat', }, }, tagInputContainer: { From 0c9d50bdf77c20bbd91629fb31daa95794a6bc0e Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 7 Oct 2025 10:50:38 -0400 Subject: [PATCH 5/6] add changeset --- .changeset/huge-feet-enter.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/huge-feet-enter.md diff --git a/.changeset/huge-feet-enter.md b/.changeset/huge-feet-enter.md new file mode 100644 index 00000000000..0c052f932f4 --- /dev/null +++ b/.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 From 10ae43fe030d48903c2fe88e528b0a5bda1715e2 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Wed, 8 Oct 2025 10:18:49 -0400 Subject: [PATCH 6/6] scope caption variant within tables --- .../ui/components/OrganizationProfile/ActiveMembersList.tsx | 1 + .../ui/components/OrganizationProfile/InvitedMembersList.tsx | 1 + .../ui/components/OrganizationProfile/RequestToJoinList.tsx | 1 + packages/clerk-js/src/ui/elements/UserPreview.tsx | 4 +++- 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx index 5b921bd5304..b5f5ffc62c1 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx +++ b/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 && } /> diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx index 703dc5dd748..3eada9469b9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InvitedMembersList.tsx @@ -80,6 +80,7 @@ const InvitationRow = (props: { diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx index 7117a26d304..368a9672647 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx +++ b/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' }} /> diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx index c2c7d18f551..73b52fc2ebf 100644 --- a/packages/clerk-js/src/ui/elements/UserPreview.tsx +++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx @@ -25,6 +25,7 @@ export type UserPreviewProps = Omit, 'title' | 'el mainIdentifierVariant?: PropsOfComponent['variant']; title?: LocalizationKey | string; subtitle?: LocalizationKey | string; + subtitleProps?: PropsOfComponent; showAvatar?: boolean; } & ( | { @@ -63,6 +64,7 @@ export const UserPreview = (props: UserPreviewProps) => { avatarSx, mainIdentifierSx, mainIdentifierVariant, + subtitleProps, ...rest } = props; const { t } = useLocalizations(); @@ -171,7 +173,7 @@ export const UserPreview = (props: UserPreviewProps) => { as='span' localizationKey={subtitle || identifier} colorScheme='secondary' - variant='caption' + {...subtitleProps} /> )}