fix(clerk-js): Fix color usage and redo variable api

clerk · Jan 30, 2024 · 4e45ab3 · 4e45ab3
1 parent da0f507
commit 4e45ab3
Show file tree

Hide file tree

Showing 67 changed files with 350 additions and 326 deletions.
diff --git a/.changeset/violet-roses-look.md 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
@@ -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
@@ -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
@@ -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 && (
               <Text
                 as='span'
-                sx={t => ({ color: t.colors.$blackAlpha400 })}
+                sx={t => ({ color: t.colors.$textTertiary })}
                 localizationKey={prefixLocalizationKey}
               />
             )}
             <Text
               as='span'
-              sx={t => ({ color: t.colors.$blackAlpha950 })}
+              sx={t => ({ color: t.colors.$text })}
             >
               {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
             </Text>

diff --git 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 = () => {
 
         <Protect permission='org:sys_domains:manage'>
           <Action.Trigger value='add'>
-            <Col>
-              <ProfileSection.ArrowButton
-                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-                id='organizationDomains'
-              />
-              <Text
-                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
-                sx={t => ({
-                  paddingLeft: t.space.$9,
-                  color: t.colors.$colorTextSecondary,
-                })}
-              />
-            </Col>
+            <ProfileSection.ArrowButton
+              localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
+              id='organizationDomains'
+            />
           </Action.Trigger>
+          <Action.Closed value='add'>
+            <Text
+              localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
+              sx={t => ({
+                paddingLeft: t.space.$9,
+                color: t.colors.$textSecondary,
+              })}
+            />
+          </Action.Closed>
 
           <Action.Open value='add'>
             <Action.Card>

diff --git a/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/...ages/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
@@ -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/...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/...ages/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
@@ -185,7 +185,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
               padding: `${t.space.$4} ${t.space.$5}`,
             })}
           />
-          <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
+          {manageOrganizationSmallIconButton}
         </Flex>
       );
 

diff --git 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(
         <Icon
           elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
           icon={ChevronDown}
-          sx={t => ({ color: t.colors.$blackAlpha400, marginLeft: `${t.space.$2}` })}
+          sx={t => ({ marginLeft: `${t.space.$2}` })}
         />
       </Button>
     );

diff --git 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
@@ -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
@@ -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,
-              },
-            })}
           />
         </PreviewButton>
       )}
@@ -100,12 +94,6 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           <OrganizationPreview
             elementId='organizationSwitcherListedOrganization'
             organization={organization}
-            sx={t => ({
-              color: t.colors.$blackAlpha600,
-              ':hover': {
-                color: t.colors.$blackAlpha600,
-              },
-            })}
           />
         </PreviewButton>
       ))}

diff --git 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
@@ -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,
           })}
         />
       </Flex>

diff --git 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<HTMLDivElement, UserButtonPopo
       label={localizationKeys('userButton.action__addAccount')}
       onClick={handleAddAccountClicked}
       sx={t => ({
-        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<HTMLDivElement, UserButtonPopo
         onClick={handleSignOutAllClicked}
         variant='ghostDanger'
         sx={t => ({
-          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<HTMLDivElement, UserButtonPopo
           sx={t => ({
             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
@@ -21,7 +21,7 @@ export const UserButtonTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.userButtonTrigger}
         variant='roundWrapper'
-        sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$colorText }), sx]}
+        sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$text }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
         aria-expanded={props.isOpen}

diff --git a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
@@ -25,10 +25,7 @@ export const AccountPage = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      sx={t => ({
-        gap: t.space.$8,
-        color: t.colors.$blackAlpha950,
-      })}
+      sx={t => ({ gap: t.space.$8, color: t.colors.$text })}
     >
       <Card.Alert>{card.error}</Card.Alert>
       <Col

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -73,14 +73,13 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
                         gap={2}
                         center
                       >
-                        <Text
-                          truncate
-                          sx={t => ({ color: t.colors.$blackAlpha700 })}
-                        >{`${providerToDisplayData[account.provider].name}`}</Text>
+                        <Text sx={t => ({ color: t.colors.$text })}>{`${
+                          providerToDisplayData[account.provider].name
+                        }`}</Text>
                         <Text
                           truncate
                           as='span'
-                          sx={t => ({ color: t.colors.$blackAlpha400 })}
+                          sx={t => ({ color: t.colors.$textTertiary })}
                         >
                           {label ? `• ${label}` : ''}
                         </Text>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -54,7 +54,7 @@ export const EmailsSection = () => {
                   sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}
                 >
                   <Text
-                    sx={t => ({ color: t.colors.$blackAlpha700 })}
+                    sx={t => ({ color: t.colors.$text })}
                     truncate
                   >
                     {email.emailAddress}
@@ -66,7 +66,6 @@ export const EmailsSection = () => {
                     <Badge localizationKey={localizationKeys('badge__unverified')} />
                   )}
                 </Flex>
-
                 <EmailMenu email={email} />
               </ProfileSection.Item>
 

diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -43,9 +43,7 @@ export const EnterpriseAccountsSection = () => {
                   gap={2}
                   center
                 >
-                  <Text sx={t => ({ color: t.colors.$blackAlpha700 })}>{`${providerName} ${
-                    label ? `(${label})` : ''
-                  }`}</Text>
+                  <Text sx={t => ({ color: t.colors.$text })}>{`${providerName} ${label ? `(${label})` : ''}`}</Text>
                   {error && (
                     <Badge
                       colorScheme='danger'

diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -55,7 +55,7 @@ export const PhoneSection = () => {
                       gap={2}
                       center
                     >
-                      <Text sx={t => ({ color: t.colors.$blackAlpha700 })}>
+                      <Text sx={t => ({ color: t.colors.$text })}>
                         {stringToFormattedPhoneString(phone.phoneNumber)}
                       </Text>
                       {user?.primaryPhoneNumberId === phone.id && (

diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
@@ -39,7 +39,7 @@ export const UserProfileSection = () => {
               user={userWithoutIdentifiers}
               size='lg'
               mainIdentifierVariant='subtitle'
-              sx={t => ({ color: t.colors.$blackAlpha700 })}
+              sx={t => ({ color: t.colors.$text })}
             />
 
             <Action.Trigger value='edit'>
-Original file line number
+Diff line change
@@ Expand Up @@
                   padding: `${t.space.$4} ${t.space.$5}`,
                 })}
               />
-              <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
+              {manageOrganizationSmallIconButton}
             </Flex>
           );
@@ Expand Down @@