feat(clerk-js): Refactor Typography for UI Retheme (#2297)

* feat(clerk-js): Refactor Typography for UI Retheme * fix(clerk-js): Fix some old leftover variants
clerk · Dec 8, 2023 · 84ac8e5 · 84ac8e5
1 parent e98e35c
commit 84ac8e5
Show file tree

Hide file tree

Showing 84 changed files with 155 additions and 374 deletions.
diff --git a/.changeset/gold-fireants-sort.md b/.changeset/gold-fireants-sort.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui.retheme/common/CalloutWithAction.tsx
@@ -37,12 +37,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
         <Col gap={4}>
           <Text
             colorScheme='neutral'
-            sx={[
-              t => ({
-                lineHeight: t.lineHeights.$base,
-              }),
-              textSx,
-            ]}
+            sx={textSx}
             localizationKey={text}
           >
             {props.children}
@@ -51,7 +46,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
           {actionLabel && (
             <Link
               colorScheme={'primary'}
-              variant='regularMedium'
+              variant='subtitle'
               localizationKey={actionLabel}
               onClick={onClick}
             />

diff --git a/packages/clerk-js/src/ui.retheme/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui.retheme/common/EmailLinkStatusCard.tsx
@@ -68,7 +68,6 @@ const StatusRow = (props: { status: VerificationStatus }) => {
           <StatusIcon status={props.status} />
           <Text
             elementDescriptor={descriptors.verificationLinkStatusText}
-            variant='regularRegular'
             colorScheme='neutral'
             localizationKey={localizationKeys('signIn.emailLink.unusedTab.title')}
           />

diff --git a/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx b/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx
@@ -37,14 +37,8 @@ export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps)
         Breadcrumbs={props.Breadcrumbs}
       >
         <Form.Root onSubmit={handleSubmit}>
-          <Text
-            localizationKey={messageLine1}
-            variant='regularRegular'
-          />
-          <Text
-            localizationKey={messageLine2}
-            variant='regularRegular'
-          />
+          <Text localizationKey={messageLine1} />
+          <Text localizationKey={messageLine2} />
           <FormButtons variant='primaryDanger' />
         </Form.Root>
       </ContentPage>

diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -104,8 +104,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
     slugField.setValue(val);
   };
 
-  const headerTitleTextVariant = props.flow === 'organizationList' ? 'xlargeMedium' : undefined;
-  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'headingRegularRegular' : undefined;
+  const headerTitleTextVariant = props.flow === 'organizationList' ? 'h2' : undefined;
+  const headerSubtitleTextVariant = props.flow === 'organizationList' ? 'subtitle' : undefined;
 
   return (
     <Wizard {...wizard.props}>

diff --git a/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui.retheme/components/ImpersonationFab/ImpersonationFab.tsx
@@ -73,12 +73,12 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
       <Text
         colorScheme='neutral'
         elementDescriptor={descriptors.impersonationFabTitle}
-        variant='regularMedium'
+        variant='buttonLarge'
         truncate
         localizationKey={title}
       />
       <Link
-        variant='regularMedium'
+        variant='buttonLarge'
         elementDescriptor={descriptors.impersonationFabActionLink}
         sx={t => ({
           alignSelf: 'flex-start',

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -206,7 +206,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
             elementDescriptor={descriptors.button}
             block
             variant='secondary'
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             onClick={handleCreateOrganizationClicked}
             localizationKey={localizationKeys('organizationList.action__createOrganization')}
           />

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/UserSuggestionList.tsx
@@ -24,7 +24,6 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
   if (props.status === 'accepted') {
     return (
       <Text
-        variant='smallRegular'
         colorScheme='neutral'
         localizationKey={localizationKeys('organizationList.suggestionsAcceptedLabel')}
       />

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/shared.tsx
@@ -96,7 +96,7 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
   return (
     <Button
       elementDescriptor={descriptors.organizationListPreviewItemActionButton}
-      textVariant='buttonExtraSmallBold'
+      textVariant='buttonSmall'
       variant='secondary'
       size='sm'
       {...props}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -88,14 +88,7 @@ const MemberRow = (props: {
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
           subtitle={membership.publicUserData.identifier}
-          badge={
-            isCurrentUser && (
-              <Badge
-                textVariant={'extraSmallMedium'}
-                localizationKey={localizationKeys('badge__you')}
-              />
-            )
-          }
+          badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>
       <Td>{membership.createdAt.toLocaleDateString()}</Td>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/BillingWidget.tsx
@@ -20,17 +20,10 @@ export const BillingWidget = ({
         colorScheme='danger'
         sx={t => ({ marginTop: t.space.$1 })}
       />
-      <Text
-        variant='regularRegular'
-        sx={t => ({
-          fontWeight: t.fontWeights.$normal,
-          lineHeight: t.lineHeights.$tall,
-        })}
-      >
+      <Text>
         This organization is limited to {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit)} members.
         <br />
         <Link
-          variant='regularRegular'
           sx={t => ({
             alignSelf: 'flex-start',
             color: t.colors.$primary500,

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/EnrollmentBadge.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/EnrollmentBadge.tsx
@@ -19,7 +19,6 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
     return (
       <Badge
         localizationKey={localizationKeys('organizationProfile.badge__unverified')}
-        textVariant={'extraSmallMedium'}
         colorScheme={'danger'}
       />
     );
@@ -29,7 +28,6 @@ export const EnrollmentBadge = (props: { organizationDomain: OrganizationDomainR
     <Badge
       localizationKey={badgeLabelsMap[organizationDomain.enrollmentMode]}
       colorScheme={organizationDomain.enrollmentMode === 'manual_invitation' ? 'neutral' : 'primary'}
-      textVariant={'extraSmallMedium'}
     />
   );
 };
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/MembershipWidget.tsx
@@ -29,22 +29,14 @@ export const MembershipWidget = () => {
       })}
     >
       <Col>
-        <Text
-          sx={t => ({
-            lineHeight: t.lineHeights.$tall,
-          })}
-        >
-          Members can be given access to applications.
-        </Text>
+        <Text>Members can be given access to applications.</Text>
 
         {runIfFunctionOrReturn(__unstable_manageBillingMembersLimit) > 0 && (
           <Link
-            variant='regularRegular'
             sx={t => ({
               alignSelf: 'flex-start',
               color: t.colors.$primary500,
               marginTop: t.space.$1,
-              fontWeight: t.fontWeights.$normal,
             })}
             onClick={() => router.navigate(runIfFunctionOrReturn(__unstable_manageBillingUrl))}
           >
@@ -54,10 +46,7 @@ export const MembershipWidget = () => {
       </Col>
       <Col>
         <Text
-          variant='regularRegular'
           sx={t => ({
-            fontWeight: t.fontWeights.$normal,
-            lineHeight: t.lineHeights.$tall,
             color: t.colors.$blackAlpha600,
           })}
         >

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembers.tsx
@@ -52,7 +52,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
-            textVariant='xxlargeMedium'
+            textVariant='h1'
           />
         </Header.Root>
         <Tabs>

diff --git a/...rk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/...rk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -38,13 +38,13 @@ export const OrganizationMembersTabInvitations = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.invitationsTab.autoInvitations.headerTitle',
                 )}
-                textVariant='largeMedium'
+                textVariant='h2'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
                 )}
-                variant='regularRegular'
+                variant='subtitle'
               />
             </Header.Root>
             <DomainList
@@ -81,13 +81,13 @@ export const OrganizationMembersTabInvitations = () => {
               localizationKey={localizationKeys(
                 'organizationProfile.membersPage.invitationsTab.manualInvitations.headerTitle',
               )}
-              textVariant='largeMedium'
+              textVariant='h2'
             />
             <Header.Subtitle
               localizationKey={localizationKeys(
                 'organizationProfile.membersPage.invitationsTab.manualInvitations.headerSubtitle',
               )}
-              variant='regularRegular'
+              variant='subtitle'
             />
           </Header.Root>
 
@@ -102,7 +102,7 @@ export const OrganizationMembersTabInvitations = () => {
                 sx={t => ({ marginRight: t.space.$2 })}
               />
             }
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
           />
         </Flex>

diff --git a/...clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/...clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -37,13 +37,13 @@ export const OrganizationMembersTabRequests = () => {
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
                 )}
-                textVariant='largeMedium'
+                textVariant='h2'
               />
               <Header.Subtitle
                 localizationKey={localizationKeys(
                   'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
                 )}
-                variant='regularRegular'
+                variant='subtitle'
               />
             </Header.Root>
             <DomainList
@@ -78,11 +78,11 @@ export const OrganizationMembersTabRequests = () => {
           <Header.Root>
             <Header.Title
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerTitle')}
-              textVariant='largeMedium'
+              textVariant='h2'
             />
             <Header.Subtitle
               localizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.requests.headerSubtitle')}
-              variant='regularRegular'
+              variant='subtitle'
             />
           </Header.Root>
         </Flex>

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
@@ -23,7 +23,7 @@ export const OrganizationSettings = () => {
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.start.headerTitle__settings')}
-            textVariant='xxlargeMedium'
+            textVariant='h1'
           />
         </Header.Root>
         <OrganizationProfileSection />
@@ -127,7 +127,7 @@ const OrganizationDangerSection = () => {
             />
           }
           variant='secondaryDanger'
-          textVariant='buttonExtraSmallBold'
+          textVariant='buttonSmall'
           onClick={() => navigate('leave')}
           localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
         />
@@ -142,7 +142,7 @@ const OrganizationDangerSection = () => {
               />
             }
             variant='secondaryDanger'
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             onClick={() => navigate('delete')}
             localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
           />

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/RequestToJoinList.tsx
@@ -99,7 +99,7 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
   return (
     <Flex gap={2}>
       <Button
-        textVariant='buttonExtraSmallBold'
+        textVariant='buttonSmall'
         variant='ghost'
         isLoading={card.isLoading && card.loadingMetadata === 'reject'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'reject'}
@@ -108,7 +108,7 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
       />
 
       <Button
-        textVariant='buttonExtraSmallBold'
+        textVariant='buttonSmall'
         variant='primary'
         isLoading={card.isLoading && card.loadingMetadata === 'accept'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -236,13 +236,10 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                       <Text
                         key={index}
                         as={'span'}
-                        sx={[
-                          t => ({
-                            lineHeight: t.lineHeights.$short,
-                            color: 'inherit',
-                            display: 'block',
-                          }),
-                        ]}
+                        sx={{
+                          color: 'inherit',
+                          display: 'block',
+                        }}
                         localizationKey={label}
                       />
                     ))}
@@ -251,7 +248,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                 <Header.Root>
                   <Header.Subtitle
                     localizationKey={localizationKeys('organizationProfile.verifiedDomainPage.enrollmentTab.subtitle')}
-                    variant='regularRegular'
+                    variant='subtitle'
                   />
                 </Header.Root>
                 <Form.Root
@@ -289,13 +286,10 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                       <Text
                         key={index}
                         as={'span'}
-                        sx={[
-                          t => ({
-                            lineHeight: t.lineHeights.$short,
-                            color: 'inherit',
-                            display: 'block',
-                          }),
-                        ]}
+                        sx={{
+                          color: 'inherit',
+                          display: 'block',
+                        }}
                         localizationKey={label}
                       />
                     ))}

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifyDomainPage.tsx
@@ -159,7 +159,7 @@ export const VerifyDomainPage = withCardStateProvider(() => {
             elementDescriptor={descriptors.formButtonReset}
             block={false}
             variant='ghost'
-            textVariant='buttonExtraSmallBold'
+            textVariant='buttonSmall'
             type='reset'
             isDisabled={otp.isLoading || otp.otpControl.otpInputProps.feedbackType === 'success'}
             onClick={() => {

diff --git a/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -51,7 +51,6 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   if (props.status === 'accepted') {
     return (
       <Text
-        variant='smallRegular'
         colorScheme='neutral'
         localizationKey={localizationKeys('organizationSwitcher.suggestionsAcceptedLabel')}
       />
@@ -61,7 +60,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   return (
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-      textVariant='buttonExtraSmallBold'
+      textVariant='buttonSmall'
       variant='secondary'
       size='sm'
       isLoading={card.isLoading}
@@ -87,7 +86,7 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
   return (
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
-      textVariant='buttonExtraSmallBold'
+      textVariant='buttonSmall'
       variant='secondary'
       size='sm'
       isLoading={card.isLoading}