refactor(clerk-js): Avoid targeting element descriptors on actions hover

clerk · Nov 29, 2023 · 83f0725 · 83f0725
1 parent 801a826
commit 83f0725
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -100,7 +100,6 @@ export const Action = (props: ActionProps) => {
             icon={icon}
             sx={[
               theme => ({
-                color: theme.colors.$blackAlpha700,
                 width: theme.sizes.$4,
                 height: theme.sizes.$6,
               }),
@@ -114,7 +113,7 @@ export const Action = (props: ActionProps) => {
         elementId={textElementId}
         as='span'
         variant='smallMedium'
-        colorScheme='neutral'
+        colorScheme='inherit'
       />
       {trailing}
     </Button>
@@ -192,7 +191,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 +204,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
@@ -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
         },