Fix back button transparency on hover

and other `variant=‘pill’ color=‘inherit’` buttons
graphcommerce-org · Aug 21, 2024 · 7c10458 · 7c10458
1 parent 7cd5c1c
commit 7c10458
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/angry-badgers-carry.md b/.changeset/angry-badgers-carry.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Fix back button transparency on hover
diff --git a/packages/next-ui/Theme/MuiButton.ts b/packages/next-ui/Theme/MuiButton.ts
@@ -1,4 +1,4 @@
-import { ComponentsVariants, Theme, alpha } from '@mui/material'
+import { ComponentsVariants, Theme, alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button/Button' {
@@ -126,7 +126,15 @@ export const MuiButtonPill: ButtonVariants = [
   },
   {
     props: { variant: 'pill', color: 'inherit' },
-    style: ({ theme }) => ({ backgroundColor: theme.palette.background.paper }),
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.background.paper,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.default, 0.05)
+            : lighten(theme.palette.background.default, 0.2),
+      },
+    }),
   },
   {
     props: { variant: 'pill', disabled: true },