feat(clerk-js): Add rethemed button variant and colorSchemes

clerk · Nov 30, 2023 · 81f03f0 · 81f03f0
1 parent 0551488
commit 81f03f0
Show file tree

Hide file tree

Showing 23 changed files with 85 additions and 85 deletions.
diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -125,7 +125,7 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'
-                colorScheme='neutral'
+                colorScheme='secondary'
                 aria-label='Upload organization logo'
                 icon={
                   <Icon

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -205,9 +205,8 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
           <Button
             elementDescriptor={descriptors.button}
             block
-            colorScheme='neutral'
-            // size='sm'
-            variant='outline'
+            variant='secondary'
+            colorScheme='secondary'
             textVariant='buttonExtraSmallBold'
             onClick={handleCreateOrganizationClicked}
             localizationKey={localizationKeys('organizationList.action__createOrganization')}

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

diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
@@ -157,7 +157,7 @@ export const DomainList = withGate(
             <ArrowBlockButton
               key={d.id}
               variant='ghost'
-              colorScheme='neutral'
+              colorScheme='secondary'
               badge={!verificationStatus ? <EnrollmentBadge organizationDomain={d} /> : undefined}
               sx={t => ({
                 padding: `${t.space.$3} ${t.space.$4}`,

diff --git a/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -31,7 +31,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
         variant='ghost'
-        colorScheme='neutral'
+        colorScheme='secondary'
         sx={[t => ({ minHeight: 0, padding: `0 ${t.space.$2} 0 0`, position: 'relative' }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} organization switcher`}

diff --git a/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/.../clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -62,8 +62,8 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
     <Button
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonExtraSmallBold'
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}

diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
@@ -61,7 +61,6 @@ export const MfaBackupCodeCreatePage = withCardStateProvider(() => {
 
           <FormButtonContainer>
             <NavigateToFlowStartButton
-              variant='solid'
               autoFocus
               localizationKey={localizationKeys('userProfile.formButtonPrimary__finish')}
               elementDescriptor={descriptors.formButtonPrimary}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx b/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
@@ -62,7 +62,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'
-        colorScheme='neutral'
+        colorScheme='secondary'
         textVariant='smallRegular'
         leftIcon={icon}
         rightIcon={Caret}

diff --git a/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
@@ -48,8 +48,8 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
 
   return (
     <SimpleButton
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       block
       isLoading={isLoading}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Card.tsx b/packages/clerk-js/src/ui.retheme/elements/Card.tsx
@@ -128,7 +128,7 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
           variant='ghost'
-          colorScheme='neutral'
+          colorScheme='secondary'
           aria-label='Close modal'
           onClick={toggle}
           icon={

diff --git a/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx b/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
@@ -22,7 +22,7 @@ export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
 
       <Button
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
-        variant='ghostIcon'
+        variant='secondary'
         tabIndex={-1}
         colorScheme={'primary'}
         onClick={onCopy}

diff --git a/packages/clerk-js/src/ui.retheme/elements/IdentityPreview.tsx b/packages/clerk-js/src/ui.retheme/elements/IdentityPreview.tsx
@@ -19,7 +19,7 @@ export const IdentityPreview = (props: IdentityPreviewProps) => {
   const edit = onClick && (
     <Button
       elementDescriptor={descriptors.identityPreviewEditButton}
-      variant='ghostIcon'
+      variant='secondary'
       onClick={onClick}
       aria-label={'Edit'}
     >

diff --git a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
@@ -257,7 +257,7 @@ const NavButton = (props: NavButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonRegularMedium'
       isActive={isActive}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx b/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
@@ -23,7 +23,7 @@ const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolea
     <Button
       size='xs'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       sx={t => [
         {
           color: t.colors.$colorText,

diff --git a/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx
@@ -101,9 +101,9 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         elementDescriptor={descriptors.formFieldInputShowPasswordButton}
         iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
-        variant='ghostIcon'
+        variant='secondary'
+        colorScheme={'secondary'}
         tabIndex={-1}
-        colorScheme={'neutral'}
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',

diff --git a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx b/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
@@ -17,7 +17,7 @@ export const PreviewButton = (props: PreviewButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       focusRing={false}
       block
       hoverAsFocus

diff --git a/packages/clerk-js/src/ui.retheme/elements/Select.tsx b/packages/clerk-js/src/ui.retheme/elements/Select.tsx
@@ -372,7 +372,7 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.selectButton}
       elementId={descriptors.selectButton.setId(elementId)}
       ref={reference}
-      colorScheme='neutral'
+      colorScheme='secondary'
       variant='ghost'
       textVariant='smallMedium'
       onClick={onTriggerClick}

diff --git a/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx b/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
@@ -164,8 +164,8 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       ref={ref}
       elementDescriptor={descriptors.socialButtonsIconButton}
       elementId={descriptors.socialButtonsIconButton.setId(id)}
-      variant='icon'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       sx={t => ({
         minHeight: t.sizes.$7x5,
         width: '100%',
@@ -185,8 +185,8 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
     <SimpleButton
       elementDescriptor={descriptors.socialButtonsBlockButton}
       elementId={descriptors.socialButtonsBlockButton.setId(id)}
-      variant='outline'
-      colorScheme='neutral'
+      variant='secondary'
+      colorScheme='secondary'
       block
       isLoading={isLoading}
       {...rest}

diff --git a/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx b/packages/clerk-js/src/ui.retheme/elements/SuccessPage.tsx
@@ -48,7 +48,6 @@ export const SuccessPage = (props: SuccessPageProps) => {
 
       <FormButtonContainer>
         <NavigateToFlowStartButton
-          variant='solid'
           autoFocus
           //Do we need a separate key here?
           localizationKey={finishLabel || localizationKeys('userProfile.formButtonPrimary__finish')}

diff --git a/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
@@ -30,7 +30,7 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
               opacity: 1,
             },
           })}
-          colorScheme='neutral'
+          colorScheme='secondary'
           variant='ghost'
         >
           <Icon icon={ThreeDots} />

diff --git a/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx b/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx
@@ -8,8 +8,8 @@ export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: Reac
 
   return (
     <Button
-      colorScheme='neutral'
-      variant='outline'
+      variant='secondary'
+      colorScheme='secondary'
       sx={[
         t => ({
           borderColor: t.colors.$blackAlpha200,

diff --git a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
@@ -5,11 +5,10 @@ import { descriptors, Icon, Spinner } from '../customizables';
 import { ArrowRightButtonIcon } from '../icons';
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
 import { common, createCssVariables, createVariants } from '../styledSystem';
-import { colors } from '../utils';
 import { applyDataStateProps } from './applyDataStateProps';
 import { Flex } from './Flex';
 
-const vars = createCssVariables('accent', 'accentDark', 'accentDarker', 'accentLighter', 'accentLightest', 'border');
+const vars = createCssVariables('idle', 'hover', 'text', 'borderShadow');
 
 const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) => {
   return {
@@ -47,75 +46,80 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       },
       colorScheme: {
         primary: {
-          [vars.accentLightest]: colors.setAlpha(theme.colors.$primary400, 0.3), // TODO: once we have the new color palette
-          [vars.accentLighter]: colors.setAlpha(theme.colors.$primary800, 0.3), // WIP reference: Updated to new color palette; previously `$primary500`
-          [vars.accent]: theme.colors.$primary800, // WIP reference: Updated to new color palette; previously `$primary500`
-          [vars.accentDark]: theme.colors.$primary600, // TODO: once we have the new color palette
-          [vars.accentDarker]: theme.colors.$primary700, // TODO: once we have the new color palette
+          [vars.idle]: theme.colors.$primary800,
+          [vars.hover]: theme.colors.$primary800, //same on purpose
+          [vars.text]: theme.colors.$colorTextOnPrimaryBackground,
+          [vars.borderShadow]:
+            '0px 0px 0px 1px #2F3037, 0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
         },
-        danger: {
-          [vars.accentLightest]: colors.setAlpha(theme.colors.$danger400, 0.3),
-          [vars.accentLighter]: colors.setAlpha(theme.colors.$danger500, 0.3),
-          [vars.accent]: theme.colors.$danger500,
-          [vars.accentDark]: theme.colors.$danger600,
-          [vars.accentDarker]: theme.colors.$danger700,
+        secondary: {
+          [vars.idle]: theme.colors.$transparent,
+          [vars.hover]: theme.colors.$blackAlpha50,
+          [vars.text]: theme.colors.$colorText,
+          [vars.borderShadow]:
+            '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)',
         },
-        neutral: {
-          [vars.border]: theme.colors.$blackAlpha200,
-          [vars.accentLightest]: theme.colors.$blackAlpha50, // TODO: once we have the new color palette and style for pseudo classes
-          [vars.accentLighter]: theme.colors.$blackAlpha300, // TODO: once we have the new color palette and style for pseudo classes
-          [vars.accent]: theme.colors.$blackAlpha800, // WIP reference: Updated to new color palette; previously `$colorText`
-          [vars.accentDark]: theme.colors.$blackAlpha600, // TODO: once we have the new color palette and style for pseudo classes
-          [vars.accentDarker]: theme.colors.$blackAlpha700, // TODO: once we have the new color palette and style for pseudo classes
+        danger: {
+          [vars.idle]: theme.colors.$danger500,
+          [vars.hover]: theme.colors.$danger600,
         },
       },
       variant: {
-        solid: {
-          backgroundColor: vars.accent,
-          color: theme.colors.$colorTextOnPrimaryBackground,
-          ...common.buttonShadow(theme),
-          // '&:hover': { backgroundColor: vars.accentDark }, // TODO: once we have the new color palette
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
-          // '&:active': { backgroundColor: vars.accentDarker }, // TODO: once we have the new color palette
+        primary: {
+          backgroundColor: vars.idle,
+          color: vars.text,
+          boxShadow: vars.borderShadow,
+          ':before': {
+            backgroundColor: vars.hover,
+            position: 'absolute',
+            content: '""',
+            borderRadius: 'inherit',
+            zIndex: -1,
+            inset: 0,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%)`,
+          },
           ':after': {
             position: 'absolute',
             content: '""',
             borderRadius: 'inherit',
             zIndex: -1,
             inset: 0,
-            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)',
+            opacity: 0,
+            transitionProperty: theme.transitionProperty.$common,
+            transitionDuration: theme.transitionDuration.$controls,
+            background: `linear-gradient(180deg, ${theme.colors.$whiteAlpha200} 0%, ${theme.colors.$transparent} 100%)`,
+          },
+          ':hover::after': {
+            opacity: 1,
+          },
+          ':active::after': {
+            opacity: 0,
           },
         },
-        outline: {
-          color: vars.accent,
-          boxShadow:
-            '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(25, 28, 33, 0.02), 0px 0px 0px 1px rgba(25, 28, 33, 0.08)', // TODO: Move to theme once we have the shadows defined
-          '&:hover': { backgroundColor: vars.accentLightest },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
-          '&:active': { backgroundColor: vars.accentLighter },
+        secondary: {
+          backgroundColor: vars.idle,
+          color: vars.text,
+          boxShadow: vars.borderShadow,
+          '&:hover': {
+            backgroundColor: vars.hover,
+          },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover } : undefined,
+          '&:active': { backgroundColor: vars.idle },
         },
         ghost: {
-          color: vars.accent,
-          '&:hover': { backgroundColor: vars.accentLightest },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
-          '&:active': { backgroundColor: vars.accentLighter },
-        },
-        icon: {
-          color: vars.accent,
-          boxShadow:
-            '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(25, 28, 33, 0.02), 0px 0px 0px 1px rgba(25, 28, 33, 0.08)', // TODO: Move to theme once we have the shadows defined
-          '&:hover': { backgroundColor: vars.accentLightest },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentLightest } : undefined,
-          '&:active': { backgroundColor: vars.accentLighter },
+          color: vars.idle,
+          '&:hover': { backgroundColor: vars.hover },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover } : undefined,
+          '&:active': { backgroundColor: vars.idle },
         },
         ghostIcon: {
-          color: vars.accent,
+          color: vars.idle,
           minHeight: theme.sizes.$6,
           width: theme.sizes.$6,
           padding: `${theme.space.$1} ${theme.space.$1}`,
-          '&:hover': { color: vars.accentDark },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.accentDark } : undefined,
-          '&:active': { color: vars.accentDarker },
+          '&:hover': { color: vars.hover },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover } : undefined,
+          '&:active': { color: vars.idle },
         },
         link: {
           ...common.textVariants(theme).smallRegular,
@@ -124,10 +128,10 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           width: 'fit-content',
           textTransform: 'none',
           padding: 0,
-          color: vars.accent,
+          color: vars.idle,
           '&:hover': { textDecoration: 'underline' },
           '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
-          '&:active': { color: vars.accentDark },
+          '&:active': { color: vars.idle },
         },
         roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
       },
@@ -141,7 +145,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
     defaultVariants: {
       textVariant: 'buttonRegularRegular',
       colorScheme: 'primary',
-      variant: 'solid',
+      variant: 'primary',
       size: 'sm',
       focusRing: true,
     },

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -109,7 +109,6 @@ const AcceptRejectRequestButtons = (props: { onAccept: () => unknown; onReject:
 
       <Button
         textVariant='buttonExtraSmallBold'
-        variant='solid'
         isLoading={card.isLoading && card.loadingMetadata === 'accept'}
         isDisabled={card.isLoading && card.loadingMetadata !== 'accept'}
         onClick={props.onAccept}