From 541eadfffa0a8394f513b7563a4fd0f1f90a37b3 Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Thu, 30 Nov 2023 15:07:35 +0200
Subject: [PATCH] feat(clerk-js): Add rethemed button variant and colorSchemes

---
 .changeset/blue-garlics-remain.md             |   2 +
 .../CreateOrganizationForm.tsx                |   2 +-
 .../OrganizationList/OrganizationListPage.tsx |   5 +-
 .../components/OrganizationList/shared.tsx    |   2 +-
 .../OrganizationProfile/DomainList.tsx        |   2 +-
 .../OrganizationSwitcherTrigger.tsx           |   2 +-
 .../UserInvitationSuggestionList.tsx          |   4 +-
 .../UserButton/UserButtonPopover.tsx          |  12 +-
 .../UserProfile/MfaBackupCodeCreatePage.tsx   |   1 -
 .../src/ui.retheme/elements/Accordion.tsx     |   2 +-
 .../src/ui.retheme/elements/Actions.tsx       |   5 +-
 .../ui.retheme/elements/ArrowBlockButton.tsx  |   4 +-
 .../clerk-js/src/ui.retheme/elements/Card.tsx |   2 +-
 .../ui.retheme/elements/ClipboardInput.tsx    |   2 +-
 .../ui.retheme/elements/IdentityPreview.tsx   |   2 +-
 .../src/ui.retheme/elements/Navbar.tsx        |   2 +-
 .../src/ui.retheme/elements/Pagination.tsx    |   2 +-
 .../src/ui.retheme/elements/PasswordInput.tsx |   4 +-
 .../src/ui.retheme/elements/PreviewButton.tsx |   2 +-
 .../src/ui.retheme/elements/Select.tsx        |   2 +-
 .../src/ui.retheme/elements/SocialButtons.tsx |   8 +-
 .../src/ui.retheme/elements/SuccessPage.tsx   |   1 -
 .../src/ui.retheme/elements/ThreeDotsMenu.tsx |   2 +-
 .../src/ui.retheme/elements/TileButton.tsx    |   4 +-
 .../src/ui.retheme/primitives/Button.tsx      | 122 ++++++++++--------
 25 files changed, 101 insertions(+), 97 deletions(-)
 create mode 100644 .changeset/blue-garlics-remain.md

diff --git a/.changeset/blue-garlics-remain.md b/.changeset/blue-garlics-remain.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/blue-garlics-remain.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui.retheme/components/CreateOrganization/CreateOrganizationForm.tsx
index 6ad0557d02..d3b9142f82 100644
--- 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
index ad55613662..7358c870b2 100644
--- 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
index 7467687a2c..661ad9f080 100644
--- 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
index 8fc7e3bb50..a395d4bc1d 100644
--- 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/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 6119738cf5..5c880478a5 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/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/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index fd7ca0e25f..5351377f3a 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/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/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
index d367ee94c3..822fbdde7e 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -42,6 +42,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       sx={t => ({
         borderBottomLeftRadius: t.radii.$lg,
         borderBottomRightRadius: t.radii.$lg,
+        backgroundColor: t.colors.$colorBackground,
       })}
     />
   );
@@ -67,20 +68,11 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         icon={SignOut}
         label={localizationKeys('userButton.action__signOutAll')}
         onClick={handleSignOutAllClicked}
+        colorScheme='danger'
         sx={t => ({
           padding: `${t.space.$2} ${t.space.$3}`,
-          backgroundColor: t.colors.$transparent,
           borderBottom: 'none',
           borderRadius: t.radii.$lg,
-          ':hover': {
-            backgroundColor: t.colors.$danger50,
-          },
-          ':hover .cl-userButtonPopoverActionButtonText__signOutAll': {
-            color: t.colors.$danger400,
-          },
-          ':hover .cl-userButtonPopoverActionButtonIcon__signOutAll': {
-            color: t.colors.$danger400,
-          },
         })}
       />
     </Actions>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeCreatePage.tsx
index 179a830efd..a8f699614f 100644
--- 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
index 863b4e3be1..4724317cad 100644
--- 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/Actions.tsx b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
index 45228dc3a0..3c55a7c731 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
@@ -60,7 +60,7 @@ export const Action = (props: ActionProps) => {
     <Button
       size='md'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonSmallRegular'
       focusRing={false}
       hoverAsFocus
@@ -73,7 +73,6 @@ export const Action = (props: ActionProps) => {
           gap: theme.space.$3,
           padding: `${theme.space.$4} ${theme.space.$5}`,
           justifyContent: 'flex-start',
-          backgroundColor: theme.colors.$white,
         }),
         sx,
       ]}
@@ -153,7 +152,7 @@ export const SmallAction = (props: ActionProps) => {
     <Button
       size='xs'
       variant='ghost'
-      colorScheme='neutral'
+      colorScheme='secondary'
       textVariant='buttonSmallRegular'
       focusRing={false}
       hoverAsFocus
diff --git a/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
index 6f98aeed51..2ad793610c 100644
--- 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
index 721e04678b..c03939c66d 100644
--- 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
index 4428321605..b8a752aa61 100644
--- 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
index 75c7e9e667..41160d693e 100644
--- 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
index 0148b538c2..e7acad7ebd 100644
--- 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
index 81a358cbbd..ef16c2ac53 100644
--- 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
index 251bc7a149..32313022d1 100644
--- 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
index e5dddf9c5d..48b261aad2 100644
--- 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
index 05b0f5ee41..de4c43641e 100644
--- 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
index a7e05e1a4e..eb5b8e0ea6 100644
--- 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
index a97449e4f0..325d457444 100644
--- 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
index b1c2d08479..a66363a9d1 100644
--- 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
index 27c64288af..db11a7df32 100644
--- 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
index 66db151d01..0eb072a61a 100644
--- 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', 'textHover', 'borderShadow');
 
 const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) => {
   return {
@@ -47,75 +46,90 @@ 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, //we should ideally make this primary500
+          [vars.hover]: theme.colors.$primary800, //same on purpose
+          [vars.text]: theme.colors.$colorTextOnPrimaryBackground,
+          [vars.textHover]: 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.textHover]: 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.$transparent,
+          [vars.hover]: theme.colors.$danger50,
+          [vars.text]: theme.colors.$colorText,
+          [vars.textHover]: theme.colors.$danger400,
+          [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)',
         },
       },
       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,
+          '&:hover': {
+            backgroundColor: vars.hover,
+            color: vars.textHover,
+          },
+          ':before': {
+            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,
+            color: vars.textHover,
+          },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover, color: vars.textHover } : 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.text,
+          '&:hover': { backgroundColor: vars.hover, color: vars.textHover },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover, color: vars.textHover } : 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 +138,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 +155,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
     defaultVariants: {
       textVariant: 'buttonRegularRegular',
       colorScheme: 'primary',
-      variant: 'solid',
+      variant: 'primary',
       size: 'sm',
       focusRing: true,
     },