From bca94e3f316d995a6be5cee3fe1c36d1ca172ca3 Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Wed, 29 Nov 2023 11:48:46 +0200
Subject: [PATCH] refactor(clerk-js): Avoid targeting element descriptors on
 actions hover

---
 .../components/UserButton/SessionActions.tsx           | 10 ----------
 packages/clerk-js/src/ui.retheme/elements/Actions.tsx  |  5 ++---
 packages/clerk-js/src/ui.retheme/primitives/Button.tsx |  2 +-
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx
index 7f9ff801444..14b51f9f226 100644
--- a/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx
+++ b/packages/clerk-js/src/ui.retheme/components/UserButton/SessionActions.tsx
@@ -54,11 +54,6 @@ export const SingleSessionActions = (props: SessionActionsProps) => {
             borderBottomRightRadius: t.radii.$lg,
             ':hover': {
               backgroundColor: t.colors.$danger50,
-            },
-            ':hover .cl-userButtonPopoverActionButtonText__signOut': {
-              color: t.colors.$danger400,
-            },
-            ':hover .cl-userButtonPopoverActionButtonIcon__signOut': {
               color: t.colors.$danger400,
             },
           }),
@@ -113,11 +108,6 @@ export const MultiSessionActions = (props: SessionActionsProps) => {
             t => ({
               ':hover': {
                 backgroundColor: t.colors.$danger50,
-              },
-              ':hover .cl-userButtonPopoverActionButtonText__signOut': {
-                color: t.colors.$danger400,
-              },
-              ':hover .cl-userButtonPopoverActionButtonIcon__signOut': {
                 color: t.colors.$danger400,
               },
             }),
diff --git a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
index 5c3147e571b..01e43e7b44f 100644
--- a/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/Actions.tsx
@@ -114,7 +114,7 @@ export const Action = (props: ActionProps) => {
         elementId={textElementId}
         as='span'
         variant='smallMedium'
-        colorScheme='neutral'
+        colorScheme='inherit'
       />
       {trailing}
     </Button>
@@ -192,7 +192,6 @@ export const SmallAction = (props: ActionProps) => {
             elementId={iconElementId}
             icon={icon}
             sx={theme => ({
-              color: theme.colors.$blackAlpha800,
               width: theme.sizes.$4,
               height: theme.sizes.$4,
               marginRight: theme.space.$2,
@@ -206,7 +205,7 @@ export const SmallAction = (props: ActionProps) => {
         elementId={textElementId}
         as='span'
         variant='extraSmallMedium'
-        colorScheme='neutral'
+        colorScheme='inherit'
       />
       {trailing}
     </Button>
diff --git a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
index fce6b7ab471..66db151d01b 100644
--- a/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui.retheme/primitives/Button.tsx
@@ -64,7 +64,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           [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.$primary800, // WIP reference: Updated to new color palette; previously `$colorText`
+          [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
         },