From 4e45ab344c78be79ea4270935b6fa9fe9569fee8 Mon Sep 17 00:00:00 2001 From: George Desipris Date: Sat, 20 Jan 2024 03:12:51 +0200 Subject: [PATCH] fix(clerk-js): Fix color usage and redo variable api --- .changeset/violet-roses-look.md | 2 + .../CreateOrganizationForm.tsx | 2 +- .../ui/components/OrganizationList/shared.tsx | 4 +- .../OrganizationProfile/MemberListTable.tsx | 6 +- .../OrganizationGeneralPage.tsx | 26 ++-- .../OrganizationMembersTabInvitations.tsx | 2 +- .../OrganizationMembersTabRequests.tsx | 2 +- .../OrganizationProfileAvatarUploader.tsx | 2 +- .../OrganizationSwitcherPopover.tsx | 2 +- .../OrganizationSwitcherTrigger.tsx | 7 +- .../OtherOrganizationActions.tsx | 4 - .../UserInvitationSuggestionList.tsx | 8 +- .../UserMembershipList.tsx | 12 -- .../SignIn/SignInAccountSwitcher.tsx | 5 +- .../components/UserButton/SessionActions.tsx | 11 +- .../UserButton/UserButtonPopover.tsx | 7 +- .../UserButton/UserButtonTrigger.tsx | 2 +- .../ui/components/UserProfile/AccountPage.tsx | 5 +- .../UserProfile/ConnectedAccountsSection.tsx | 9 +- .../components/UserProfile/EmailsSection.tsx | 3 +- .../UserProfile/EnterpriseAccountsSection.tsx | 4 +- .../components/UserProfile/PhoneSection.tsx | 2 +- .../UserProfile/UserProfileSection.tsx | 2 +- .../UserProfile/UsernameSection.tsx | 2 +- .../__tests__/makeCustomizable.test.tsx | 8 +- .../__tests__/parseAppearance.test.tsx | 84 ++++++----- .../src/ui/customizables/parseVariables.ts | 47 +++--- .../src/ui/elements/Action/ActionCard.tsx | 2 +- packages/clerk-js/src/ui/elements/Actions.tsx | 1 - packages/clerk-js/src/ui/elements/Avatar.tsx | 4 +- .../src/ui/elements/AvatarUploader.tsx | 2 +- .../ui/elements/Card/CardClerkAndPagesTag.tsx | 2 +- .../src/ui/elements/Card/CardContent.tsx | 4 +- .../src/ui/elements/Card/CardFooter.tsx | 5 +- .../src/ui/elements/Card/CardRoot.tsx | 2 +- .../clerk-js/src/ui/elements/FieldControl.tsx | 2 +- .../src/ui/elements/InformationBox.tsx | 2 +- packages/clerk-js/src/ui/elements/Menu.tsx | 2 +- packages/clerk-js/src/ui/elements/Navbar.tsx | 19 +-- .../clerk-js/src/ui/elements/Pagination.tsx | 4 +- .../clerk-js/src/ui/elements/PopoverCard.tsx | 7 +- .../src/ui/elements/PreviewButton.tsx | 2 +- .../ProfileCard/ProfileCardContent.tsx | 2 +- .../elements/ProfileCard/ProfileCardRoot.tsx | 2 +- packages/clerk-js/src/ui/elements/RootBox.tsx | 2 +- packages/clerk-js/src/ui/elements/Select.tsx | 8 +- .../clerk-js/src/ui/elements/TagInput.tsx | 8 +- .../clerk-js/src/ui/elements/UserPreview.tsx | 6 +- .../src/ui/elements/withAvatarShimmer.tsx | 2 +- .../clerk-js/src/ui/foundations/colors.ts | 29 +++- .../clerk-js/src/ui/foundations/shadows.ts | 2 +- .../src/ui/foundations/transitions.ts | 2 +- .../clerk-js/src/ui/primitives/Button.tsx | 64 +++++--- .../clerk-js/src/ui/primitives/FormLabel.tsx | 2 +- .../clerk-js/src/ui/primitives/Heading.tsx | 2 +- packages/clerk-js/src/ui/primitives/Input.tsx | 4 +- packages/clerk-js/src/ui/primitives/Link.tsx | 2 +- .../src/ui/primitives/NotificationBadge.tsx | 2 +- packages/clerk-js/src/ui/primitives/Td.tsx | 2 +- packages/clerk-js/src/ui/primitives/Text.tsx | 10 +- packages/clerk-js/src/ui/primitives/Th.tsx | 2 +- .../src/ui/utils/colorOptionToHslaScale.ts | 3 +- packages/themes/src/themes/dark.ts | 23 +-- packages/themes/src/themes/neobrutalism.ts | 9 +- packages/themes/src/themes/shadesOfPurple.ts | 14 +- packages/types/src/appearance.ts | 140 ++++++++++-------- playground/nextjs/pages/_app.tsx | 4 +- 67 files changed, 350 insertions(+), 326 deletions(-) create mode 100644 .changeset/violet-roses-look.md diff --git a/.changeset/violet-roses-look.md b/.changeset/violet-roses-look.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/violet-roses-look.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx index daa9ad7d683..5d5da2f863a 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx @@ -148,7 +148,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani size='md' icon={Upload} sx={t => ({ - color: t.colors.$blackAlpha400, + color: t.colors.$textTertiary, transitionDuration: t.transitionDuration.$controls, })} /> diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx index 3bd6e1d920b..b930e7cd8b6 100644 --- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx @@ -29,9 +29,9 @@ const sharedStyles: ThemableCssProp = t => ({ }); export const sharedMainIdentifierSx: ThemableCssProp = t => ({ - color: t.colors.$blackAlpha950, + color: t.colors.$text, ':hover': { - color: t.colors.$blackAlpha950, + color: t.colors.$text, }, }); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx index 901817a1a88..67a676d8b37 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx @@ -190,7 +190,7 @@ export const RoleSelect = (props: { sx={ triggerSx || (t => ({ - color: t.colors.$colorTextSecondary, + color: t.colors.$text, backgroundColor: 'transparent', textWrap: 'nowrap', })) @@ -205,13 +205,13 @@ export const RoleSelect = (props: { {prefixLocalizationKey && ( ({ color: t.colors.$blackAlpha400 })} + sx={t => ({ color: t.colors.$textTertiary })} localizationKey={prefixLocalizationKey} /> )} ({ color: t.colors.$blackAlpha950 })} + sx={t => ({ color: t.colors.$text })} > {localizeCustomRole(selectedRole?.value) || selectedRole?.label} diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx index 484d9c3d34a..6c4c0b68b94 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx @@ -148,20 +148,20 @@ const OrganizationDomainsSection = () => { - - - ({ - paddingLeft: t.space.$9, - color: t.colors.$colorTextSecondary, - })} - /> - + + + ({ + paddingLeft: t.space.$9, + color: t.colors.$textSecondary, + })} + /> + diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx index 1a206e7988b..2a3e70459da 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx @@ -65,7 +65,7 @@ export const OrganizationMembersTabInvitations = () => { )} sx={t => ({ paddingLeft: t.space.$10, - color: t.colors.$colorTextSecondary, + color: t.colors.$textSecondary, [mqu.md]: { paddingLeft: 0, }, diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx index 4d817ce9e16..7bae94507af 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx @@ -65,7 +65,7 @@ export const OrganizationMembersTabRequests = () => { )} sx={t => ({ paddingLeft: t.space.$10, - color: t.colors.$colorTextSecondary, + color: t.colors.$textSecondary, [mqu.md]: { paddingLeft: 0, }, diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx index b605be8dce4..0441b93d7d9 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx @@ -17,7 +17,7 @@ export const OrganizationProfileAvatarUploader = ( sx={t => ({ textAlign: 'left', marginBottom: t.space.$2, - color: t.colors.$blackAlpha700, + color: t.colors.$textSecondary, })} localizationKey={localizationKeys('organizationProfile.start.profileSection.uploadAction__title')} /> diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx index 7059868d528..1dd0d9dc745 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx @@ -185,7 +185,7 @@ export const OrganizationSwitcherPopover = React.forwardRef - {manageOrganizationSmallIconButton} + {manageOrganizationSmallIconButton} ); diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index 06c1a3ceef6..7394ce6d458 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -37,7 +37,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( t => ({ padding: `${t.space.$1} ${t.space.$2}`, position: 'relative', - color: t.colors.$colorText, }), sx, ]} @@ -54,7 +53,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( size='xs' fetchRoles organization={organization} - sx={t => ({ maxWidth: '30ch', color: t.colors.$blackAlpha600 })} + sx={{ maxWidth: '30ch' }} /> )} {!organization && ( @@ -63,7 +62,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( gap={3} user={userWithoutIdentifiers} showAvatar={!hidePersonal} - sx={t => ({ color: t.colors.$blackAlpha600 })} + sx={t => ({ color: t.colors.$textSecondary })} title={ hidePersonal ? localizationKeys('organizationSwitcher.notSelected') @@ -77,7 +76,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer( ({ color: t.colors.$blackAlpha400, marginLeft: `${t.space.$2}` })} + sx={t => ({ marginLeft: `${t.space.$2}` })} /> ); diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx index 3cebe146409..ee9fdb578a4 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx @@ -34,11 +34,7 @@ const CreateOrganizationButton = ({ onClick={onCreateOrganizationClick} sx={t => ({ borderBottom: 'none', - color: t.colors.$blackAlpha500, padding: `${t.space.$5} ${t.space.$5}`, - ':hover': { - color: t.colors.$blackAlpha600, - }, })} iconSx={t => ({ width: t.sizes.$9, diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx index f0b7eca3cb6..57bb3ce80da 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx @@ -114,9 +114,9 @@ const Preview = ( elementId='organizationSwitcherListedOrganization' organization={publicOrganizationData} sx={t => ({ - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, ':hover': { - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, }, })} /> @@ -177,9 +177,9 @@ const InvitationPreview = withCardStateProvider( elementId='organizationSwitcherListedOrganization' organization={publicOrganizationData} sx={t => ({ - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, ':hover': { - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, }, })} /> diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx index 349db5141c9..e3891471885 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx @@ -80,12 +80,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => { user={userWithoutIdentifiers} mainIdentifierVariant={'buttonLarge'} title={localizationKeys('organizationSwitcher.personalWorkspace')} - mainIdentifierSx={t => ({ - color: t.colors.$blackAlpha600, - ':hover': { - color: t.colors.$blackAlpha600, - }, - })} /> )} @@ -100,12 +94,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => { ({ - color: t.colors.$blackAlpha600, - ':hover': { - color: t.colors.$blackAlpha600, - }, - })} /> ))} diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx index fe3e81607ea..e28314005a2 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx @@ -44,7 +44,7 @@ const _SignInAccountSwitcher = () => { justifyContent: 'flex-start', borderRadius: 0, borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}`, - backgroundColor: theme.colors.$colorBackground, + backgroundColor: theme.colors.$background, })} icon={SwitchArrowRight} > @@ -68,7 +68,6 @@ const _SignInAccountSwitcher = () => { label={localizationKeys('userButton.action__addAccount')} onClick={handleAddAccountClicked} iconSx={t => ({ - color: t.colors.$blackAlpha400, width: t.sizes.$9, height: t.sizes.$6, })} @@ -107,7 +106,7 @@ const _SignInAccountSwitcher = () => { onClick={handleSignOutAllClicked} variant='ghostDanger' sx={t => ({ - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, padding: `${t.space.$2} ${t.space.$3}`, borderBottom: 'none', width: '100%', diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx index 35ce409e777..cd4c724a93e 100644 --- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx @@ -31,7 +31,7 @@ export const SingleSessionActions = (props: SessionActionsProps) => { onClick={handleManageAccountClicked} sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`, - backgroundColor: t.colors.$colorBackground, + backgroundColor: t.colors.$background, padding: `${t.space.$4} ${t.space.$5}`, })} /> @@ -51,8 +51,7 @@ export const SingleSessionActions = (props: SessionActionsProps) => { borderBottomRightRadius: t.radii.$lg, padding: `${t.space.$4} ${t.space.$5}`, ':hover': { - backgroundColor: t.colors.$dangerAlpha50, - color: t.colors.$danger400, + background: t.colors.$dangerAlpha50, }, }), ]} @@ -98,11 +97,9 @@ export const MultiSessionActions = (props: SessionActionsProps) => { icon={SignOut} label={localizationKeys('userButton.action__signOut')} onClick={handleSignOutSessionClicked(session)} + variant='secondaryDanger' sx={t => ({ - ':hover': { - backgroundColor: t.colors.$dangerAlpha50, - color: t.colors.$danger400, - }, + color: t.colors.$secondaryForeground, })} /> diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx index adaf1ff0f72..ec27d6bf8c8 100644 --- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx @@ -38,11 +38,10 @@ export const UserButtonPopover = React.forwardRef ({ - backgroundColor: t.colors.$colorBackground, + backgroundColor: t.colors.$background, borderBottom: 'none', })} iconSx={t => ({ - color: t.colors.$blackAlpha400, width: t.sizes.$9, height: t.sizes.$6, })} @@ -75,7 +74,7 @@ export const UserButtonPopover = React.forwardRef ({ - color: t.colors.$blackAlpha600, + color: t.colors.$textSecondary, padding: `${t.space.$2} ${t.space.$3}`, borderBottom: 'none', borderRadius: t.radii.$lg, @@ -94,7 +93,7 @@ export const UserButtonPopover = React.forwardRef ({ borderRadius: 0, borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`, - backgroundColor: t.colors.$colorBackground, + backgroundColor: t.colors.$background, })} onClick={handleSessionClicked(session)} role='menuitem' diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx index 40defd3dfe9..624ceb36e54 100644 --- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx +++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx @@ -21,7 +21,7 @@ export const UserButtonTrigger = withAvatarShimmer(