diff --git a/.changeset/slow-eels-fly.md b/.changeset/slow-eels-fly.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/slow-eels-fly.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx b/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx
index 3eb81b00b2..69b203b0d1 100644
--- a/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/common/RemoveResourcePage.tsx
@@ -45,7 +45,7 @@ export const RemoveResourcePage = withCardStateProvider((props: RemovePageProps)
             localizationKey={messageLine2}
             variant='regularRegular'
           />
-          <FormButtons colorScheme={'danger'} />
+          <FormButtons variant='primaryDanger' />
         </Form.Root>
       </ContentPage>
       <SuccessPage
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 d3b9142f82..feab98285d 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,6 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'
-                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 7358c870b2..b629e774f1 100644
--- 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,6 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
             elementDescriptor={descriptors.button}
             block
             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 c2f602ddf4..2c5d829aa6 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,6 @@ export const PreviewListItemButton = (props: Parameters<typeof Button>[0]) => {
       elementDescriptor={descriptors.organizationListPreviewItemActionButton}
       textVariant='buttonExtraSmallBold'
       variant='secondary'
-      colorScheme='secondary'
       size='sm'
       {...props}
     />
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
index 9dd362f3b1..88868aaf9e 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -90,7 +90,7 @@ type ActionConfirmationPageProps = {
   successMessage: LocalizationKey;
   submitLabel: LocalizationKey;
   onConfirmation: () => Promise<any>;
-  colorScheme?: 'danger' | 'secondary' | 'primary';
+  variant?: 'primaryDanger' | 'primary';
 };
 
 const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationPageProps) => {
@@ -103,7 +103,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
     successMessage,
     submitLabel,
     onConfirmation,
-    colorScheme = 'danger',
+    variant = 'primaryDanger',
   } = props;
   const wizard = useWizard();
   const card = useCardState();
@@ -149,7 +149,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP
           <FormButtonContainer>
             <Form.SubmitButton
               block={false}
-              colorScheme={colorScheme}
+              variant={variant}
               localizationKey={submitLabel}
               isDisabled={!canSubmit}
             />
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 18960d360a..a40f3f9b67 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/DomainList.tsx
@@ -144,7 +144,6 @@ export const DomainList = withGate(
             <ArrowBlockButton
               key={d.id}
               variant='ghost'
-              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/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index a533393fe3..b823250721 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -50,7 +50,6 @@ export const OrganizationMembersTabInvitations = () => {
             <DomainList
               fallback={
                 <BlockButton
-                  colorScheme='primary'
                   textLocalizationKey={localizationKeys(
                     'organizationProfile.membersPage.invitationsTab.autoInvitations.primaryButton',
                   )}
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
index a5078b639d..9b309505ae 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -49,7 +49,6 @@ export const OrganizationMembersTabRequests = () => {
             <DomainList
               fallback={
                 <BlockButton
-                  colorScheme='primary'
                   textLocalizationKey={localizationKeys(
                     'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
                   )}
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
index 1db4efe88a..fea1812a2f 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/OrganizationSettings.tsx
@@ -126,8 +126,7 @@ const OrganizationDangerSection = () => {
               sx={t => ({ marginRight: t.space.$2 })}
             />
           }
-          variant='secondary'
-          colorScheme='danger'
+          variant='secondaryDanger'
           textVariant='buttonExtraSmallBold'
           onClick={() => navigate('leave')}
           localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}
@@ -142,8 +141,7 @@ const OrganizationDangerSection = () => {
                 sx={t => ({ marginRight: t.space.$2 })}
               />
             }
-            variant='secondary'
-            colorScheme='danger'
+            variant='secondaryDanger'
             textVariant='buttonExtraSmallBold'
             onClick={() => navigate('delete')}
             localizationKey={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}
diff --git a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
index 825ff77f60..d5d2dfb34d 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -312,7 +312,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
                     actionLabel={localizationKeys(
                       'organizationProfile.verifiedDomainPage.dangerTab.removeDomainActionLabel__remove',
                     )}
-                    colorScheme='danger'
+                    variant='linkDanger'
                     onClick={() => navigate(`../../domain/${domain.id}/remove`)}
                   />
                 </Col>
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 5c880478a5..f3cd587c30 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,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
         variant='ghost'
-        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 3d35182de4..b85aa71ffe 100644
--- a/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -63,7 +63,6 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonExtraSmallBold'
       variant='secondary'
-      colorScheme='secondary'
       size='sm'
       isLoading={card.isLoading}
       onClick={handleAccept}
@@ -90,7 +89,6 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
       elementDescriptor={descriptors.organizationSwitcherInvitationAcceptButton}
       textVariant='buttonExtraSmallBold'
       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 822fbdde7e..a7c3ccd30e 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -68,8 +68,9 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         icon={SignOut}
         label={localizationKeys('userButton.action__signOutAll')}
         onClick={handleSignOutAllClicked}
-        colorScheme='danger'
+        variant='ghostDanger'
         sx={t => ({
+          color: t.colors.$colorText,
           padding: `${t.space.$2} ${t.space.$3}`,
           borderBottom: 'none',
           borderRadius: t.radii.$lg,
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
index 9a7976ac1a..49bced706f 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ActiveDevicesSection.tsx
@@ -62,7 +62,7 @@ const DeviceAccordion = (props: { session: SessionWithActivitiesResource }) => {
         {!isCurrent && (
           <LinkButtonWithDescription
             actionLabel={localizationKeys('userProfile.start.activeDevicesSection.destructiveAction')}
-            colorScheme='danger'
+            variant='linkDanger'
             onClick={revoke}
             subtitle={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionSubtitle')}
             title={localizationKeys('userProfile.start.activeDevicesSection.destructiveActionTitle')}
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
index 8e9d16359e..0ae779906b 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/ConnectedAccountsSection.tsx
@@ -148,7 +148,7 @@ const ConnectedAccountAccordion = ({ account }: { account: ExternalAccountResour
           actionLabel={localizationKeys(
             'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
           )}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`connected-account/${account.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
index 42148ad68b..007839ccf1 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeletePage.tsx
@@ -55,7 +55,7 @@ export const DeletePage = withCardStateProvider(() => {
         </Form.ControlRow>
         <FormButtons
           submitLabel={localizationKeys('userProfile.deletePage.confirm')}
-          colorScheme='danger'
+          variant='primaryDanger'
           isDisabled={!canSubmit}
         />
       </Form.Root>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeleteSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeleteSection.tsx
index 282b549932..39a7076489 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/DeleteSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/DeleteSection.tsx
@@ -27,7 +27,7 @@ export const DeleteSection = () => {
         </Col>
         <Button
           aria-label='Delete account'
-          colorScheme='danger'
+          variant='primaryDanger'
           textVariant='buttonExtraSmallBold'
           onClick={() => navigate(`delete`)}
           localizationKey={localizationKeys('userProfile.start.dangerSection.deleteAccountButton')}
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
index 28d8a3ac19..04b4c23ef0 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/EmailSection.tsx
@@ -101,7 +101,7 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
           title={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.emailAddressesSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.emailAddressesSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`email-address/${email.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/LinkButtonWithDescription.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/LinkButtonWithDescription.tsx
index ec2e8ea909..c7df8f7cbe 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/LinkButtonWithDescription.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/LinkButtonWithDescription.tsx
@@ -46,7 +46,6 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr
         <Button
           localizationKey={actionLabel}
           loadingText={t(actionLabel)}
-          colorScheme='primary'
           variant='link'
           {...rest}
           isLoading={status.isLoading}
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
index 0ffd4fff74..a2b503383a 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaBackupCodeList.tsx
@@ -75,7 +75,6 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
       <Flex gap={6}>
         <Button
           variant='link'
-          colorScheme='primary'
           onClick={onCopy}
           localizationKey={
             !hasCopied
@@ -86,14 +85,12 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
 
         <Button
           variant='link'
-          colorScheme='primary'
           onClick={onDownloadTxtFile}
           localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__download')}
         />
 
         <Button
           variant='link'
-          colorScheme='primary'
           onClick={print}
           localizationKey={localizationKeys('userProfile.backupCodePage.actionLabel__print')}
         />
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
index 0db4ae82e6..3e4990cd35 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaPhoneCodeAccordion.tsx
@@ -63,7 +63,7 @@ export const MfaPhoneCodeAccordion = ({ phone, showTOTP }: MfaPhoneCodeAccordion
           title={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.mfaSection.phoneCode.destructiveActionLabel')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`multi-factor/${phone.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPAccordion.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPAccordion.tsx
index 4c8dfadab8..8c5815e68f 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPAccordion.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/MfaTOTPAccordion.tsx
@@ -31,7 +31,7 @@ export const MfaTOTPAccordion = () => {
           title={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.mfaSection.totp.destructiveActionLabel')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`multi-factor/totp/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
index 25c1614388..704dbaf77d 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/PhoneSection.tsx
@@ -117,7 +117,7 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
           title={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.phoneNumbersSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.phoneNumbersSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`phone-number/${phone.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
index 39b0c656cc..1548a9e823 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserProfile/Web3Section.tsx
@@ -59,7 +59,7 @@ const Web3WalletAccordion = ({ wallet }: { wallet: Web3WalletResource }) => {
           title={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionTitle')}
           subtitle={localizationKeys('userProfile.start.web3WalletsSection.destructiveActionSubtitle')}
           actionLabel={localizationKeys('userProfile.start.web3WalletsSection.destructiveAction')}
-          colorScheme='danger'
+          variant='linkDanger'
           onClick={() => navigate(`web3-wallet/${wallet.id}/remove`)}
         />
       </Col>
diff --git a/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx b/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
index 4724317cad..1360ff39e5 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Accordion.tsx
@@ -62,7 +62,6 @@ export const AccordionItem = (props: AccordionItemProps) => {
       <ArrowBlockButton
         elementDescriptor={descriptors.accordionTriggerButton}
         variant='ghost'
-        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 3c55a7c731..42852754c6 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
@@ -60,7 +60,6 @@ export const Action = (props: ActionProps) => {
     <Button
       size='md'
       variant='ghost'
-      colorScheme='secondary'
       textVariant='buttonSmallRegular'
       focusRing={false}
       hoverAsFocus
@@ -152,7 +151,6 @@ export const SmallAction = (props: ActionProps) => {
     <Button
       size='xs'
       variant='ghost'
-      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 2ad793610c..7eeccd4155 100644
--- a/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/ArrowBlockButton.tsx
@@ -49,7 +49,6 @@ export const ArrowBlockButton = (props: ArrowBlockButtonProps) => {
   return (
     <SimpleButton
       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 c37602d2c6..13e8d21918 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Card.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Card.tsx
@@ -120,7 +120,6 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
         <IconButton
           elementDescriptor={descriptors.modalCloseButton}
           variant='ghost'
-          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 b8a752aa61..84ea5d9c3e 100644
--- a/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/ClipboardInput.tsx
@@ -24,7 +24,6 @@ export const ClipboardInput = (props: PropsOfComponent<typeof Input>) => {
         elementDescriptor={descriptors.formFieldInputCopyToClipboardButton}
         variant='secondary'
         tabIndex={-1}
-        colorScheme={'primary'}
         onClick={onCopy}
         sx={theme => ({
           position: 'absolute',
diff --git a/packages/clerk-js/src/ui.retheme/elements/Menu.tsx b/packages/clerk-js/src/ui.retheme/elements/Menu.tsx
index 394c610ab5..96e85670d2 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Menu.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Menu.tsx
@@ -173,8 +173,7 @@ export const MenuItem = (props: MenuItemProps) => {
       elementId={descriptors.menuItem.setId(elementId)}
       focusRing={false}
       hoverAsFocus
-      variant='ghost'
-      colorScheme={destructive ? 'danger' : 'secondary'}
+      variant={destructive ? 'secondaryDanger' : 'secondary'}
       role='menuitem'
       onKeyDown={onKeyDown}
       onClick={e => {
diff --git a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
index d916919cac..df5fbef2c2 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Navbar.tsx
@@ -299,7 +299,6 @@ const NavButton = (props: NavButtonProps) => {
   return (
     <Button
       variant='ghost'
-      colorScheme='secondary'
       textVariant='buttonRegularMedium'
       size='md'
       isActive={isActive}
@@ -348,7 +347,6 @@ export const NavbarMenuButtonRow = (props: PropsOfComponent<typeof Button>) => {
         onClick={open}
         size='xs'
         variant='ghost'
-        colorScheme='secondary'
         sx={t => ({
           color: t.colors.$colorText,
           gap: t.space.$1x5,
diff --git a/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx b/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
index ef16c2ac53..2523f3d078 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Pagination.tsx
@@ -23,7 +23,6 @@ const PageButton = (props: PropsOfComponent<typeof Button> & { isActive?: boolea
     <Button
       size='xs'
       variant='ghost'
-      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 32313022d1..213d2f67ee 100644
--- a/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/PasswordInput.tsx
@@ -102,7 +102,6 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         iconElementDescriptor={descriptors.formFieldInputShowPasswordIcon}
         aria-label={`${hidden ? 'Show' : 'Hide'} password`}
         variant='secondary'
-        colorScheme={'secondary'}
         tabIndex={-1}
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
diff --git a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx b/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
index 48b261aad2..545ae8162e 100644
--- a/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/PreviewButton.tsx
@@ -17,7 +17,6 @@ export const PreviewButton = (props: PreviewButtonProps) => {
   return (
     <Button
       variant='ghost'
-      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 de4c43641e..dbb2cc829e 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Select.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Select.tsx
@@ -372,7 +372,6 @@ export const SelectButton = (props: PropsOfComponent<typeof Button>) => {
       elementDescriptor={descriptors.selectButton}
       elementId={descriptors.selectButton.setId(elementId)}
       ref={reference}
-      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 eb5b8e0ea6..376035c259 100644
--- a/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/SocialButtons.tsx
@@ -165,7 +165,6 @@ const SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButt
       elementDescriptor={descriptors.socialButtonsIconButton}
       elementId={descriptors.socialButtonsIconButton.setId(id)}
       variant='secondary'
-      colorScheme='secondary'
       sx={t => ({
         minHeight: t.sizes.$7x5,
         width: '100%',
@@ -186,7 +185,6 @@ const SocialButtonBlock = (props: SocialButtonProps): JSX.Element => {
       elementDescriptor={descriptors.socialButtonsBlockButton}
       elementId={descriptors.socialButtonsBlockButton.setId(id)}
       variant='secondary'
-      colorScheme='secondary'
       block
       isLoading={isLoading}
       {...rest}
diff --git a/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
index a66363a9d1..674091050b 100644
--- a/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/ThreeDotsMenu.tsx
@@ -30,7 +30,6 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
               opacity: 1,
             },
           })}
-          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 db11a7df32..cb53957bdf 100644
--- a/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/TileButton.tsx
@@ -9,7 +9,6 @@ export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: Reac
   return (
     <Button
       variant='secondary'
-      colorScheme='secondary'
       sx={[
         t => ({
           borderColor: t.colors.$blackAlpha200,
diff --git a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
index 92310aeca1..502ddb4e32 100644
--- a/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui.retheme/foundations/shadows.ts
@@ -5,6 +5,8 @@ export const shadows = Object.freeze({
   fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
   buttonShadow:
     '0px 0px 0px 1px {{color}}, 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)',
+  secondaryButtonShadow:
+    '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)',
   shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
   sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
   input: '0px 0px 0px 1px {{color1}}, 0px 1px 1px 0px {{color2}}',
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
index 0eb072a61a..b9fd7d1afe 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
@@ -4,12 +4,10 @@ import React from 'react';
 import { descriptors, Icon, Spinner } from '../customizables';
 import { ArrowRightButtonIcon } from '../icons';
 import type { PrimitiveProps, StyleVariants } from '../styledSystem';
-import { common, createCssVariables, createVariants } from '../styledSystem';
+import { common, createVariants } from '../styledSystem';
 import { applyDataStateProps } from './applyDataStateProps';
 import { Flex } from './Flex';
 
-const vars = createCssVariables('idle', 'hover', 'text', 'textHover', 'borderShadow');
-
 const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) => {
   return {
     base: {
@@ -44,41 +42,41 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           letterSpacing: theme.sizes.$xxs,
         },
       },
-      colorScheme: {
-        primary: {
-          [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)',
-        },
-        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)',
-        },
-        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: {
         primary: {
-          backgroundColor: vars.idle,
-          color: vars.text,
-          boxShadow: vars.borderShadow,
-          '&:hover': {
-            backgroundColor: vars.hover,
-            color: vars.textHover,
+          backgroundColor: theme.colors.$primary500,
+          color: theme.colors.$colorTextOnPrimaryBackground,
+          ...common.buttonShadow,
+          ':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,
+            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,
+          },
+        },
+        primaryDanger: {
+          backgroundColor: theme.colors.$danger500,
+          color: theme.colors.$colorTextOnPrimaryBackground,
+          ...common.buttonShadow,
           ':before': {
             position: 'absolute',
             content: '""',
@@ -106,30 +104,47 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           },
         },
         secondary: {
-          backgroundColor: vars.idle,
-          color: vars.text,
-          boxShadow: vars.borderShadow,
+          backgroundColor: theme.colors.$colorBackground,
+          color: theme.colors.$colorText,
           '&:hover': {
-            backgroundColor: vars.hover,
-            color: vars.textHover,
+            backgroundColor: theme.colors.$blackAlpha50,
           },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover, color: vars.textHover } : undefined,
-          '&:active': { backgroundColor: vars.idle },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$blackAlpha50 } : undefined,
+          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          boxShadow: theme.shadows.$secondaryButtonShadow,
+        },
+        secondaryDanger: {
+          backgroundColor: theme.colors.$colorBackground,
+          color: theme.colors.$danger500,
+          '&:hover': {
+            backgroundColor: theme.colors.$danger50,
+            color: theme.colors.$danger500,
+          },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          boxShadow: theme.shadows.$secondaryButtonShadow,
         },
         ghost: {
-          color: vars.text,
-          '&:hover': { backgroundColor: vars.hover, color: vars.textHover },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover, color: vars.textHover } : undefined,
-          '&:active': { backgroundColor: vars.idle },
+          color: theme.colors.$colorText,
+          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$colorText },
+          '&:focus': props.hoverAsFocus
+            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$colorText }
+            : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
+        },
+        ghostPrimary: {
+          color: theme.colors.$primary500,
+          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$primary500 },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$blackAlpha50 } : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
         },
-        ghostIcon: {
-          color: vars.idle,
-          minHeight: theme.sizes.$6,
-          width: theme.sizes.$6,
-          padding: `${theme.space.$1} ${theme.space.$1}`,
-          '&:hover': { color: vars.hover },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: vars.hover } : undefined,
-          '&:active': { color: vars.idle },
+        ghostDanger: {
+          color: theme.colors.$danger500,
+          '&:hover': { backgroundColor: theme.colors.$danger50, color: theme.colors.$danger500 },
+          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$danger50 } : undefined,
+          '&:active': { backgroundColor: theme.colors.$transparent },
         },
         link: {
           ...common.textVariants(theme).smallRegular,
@@ -138,10 +153,20 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           width: 'fit-content',
           textTransform: 'none',
           padding: 0,
-          color: vars.idle,
+          color: theme.colors.$primary500,
+          '&:hover': { textDecoration: 'underline' },
+          '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
+        },
+        linkDanger: {
+          ...common.textVariants(theme).smallRegular,
+          minHeight: 'fit-content',
+          height: 'fit-content',
+          width: 'fit-content',
+          textTransform: 'none',
+          padding: 0,
+          color: theme.colors.$danger500,
           '&:hover': { textDecoration: 'underline' },
           '&:focus': props.hoverAsFocus ? { textDecoration: 'underline' } : undefined,
-          '&:active': { color: vars.idle },
         },
         roundWrapper: { padding: 0, margin: 0, height: 'unset', width: 'unset', minHeight: 'unset' },
       },
@@ -154,7 +179,6 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
     },
     defaultVariants: {
       textVariant: 'buttonRegularRegular',
-      colorScheme: 'primary',
       variant: 'primary',
       size: 'sm',
       focusRing: true,