[Pagination][material-ui] Bg color on hover not working properly while using extendTheme

[Heet-Bhalodiya]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example using createTheme:
https://codesandbox.io/s/magical-water-n5wv4y?file=/src/mui-theme/ThemeProvider.tsx

Link to live example using experimental_extendTheme aka extendTheme:
https://codesandbox.io/s/nervous-chaplygin-jg76jc?file=/src/mui-theme/ThemeProvider.tsx:190-201

Current behavior 😯

When I create a theme using createTheme and hover over the default pagination component, it's background color updates to slight dark as it should. However, if I create a theme using extendTheme and hover over the default pagination component, it doesn't become dark like expected. Instead, it removes the background color.

Expected behavior 🤔

When I implement the extendTheme, I expect the background color of the default pagination component to change to slight dark when hovered, similar to what I observe for pagination when using the createTheme.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

 System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.10.8 => 11.10.8 
    @emotion/styled: ^11.10.8 => 11.10.8 
    @mui/base:  5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/lab: ^5.0.0-alpha.128 => 5.0.0-alpha.128 
    @mui/material: ^5.12.2 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system: ^5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid: 6.0.3 => 6.0.3 
    @types/react: ^18.2.0 => 18.2.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.4 => 5.0.4 

[ZeeshanTamboli]

@Heet-Bhalodiya Thanks for reporting. The selected token is wrong. It should be selectedChannel. The following fix should work when hovering on a selected default Pagination item:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -126,7 +126,7 @@ const PaginationItemPage = styled(ButtonBase, {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.hoverOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.hoverOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,

Not related to this issue, but the same should be for focusVisible:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -138,7 +138,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
       [`&.${paginationItemClasses.focusVisible}`]: {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.focusOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.focusOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,

Would you like to create a Pull Request?

[ValkonX33]

hey i would like to work on this

[Tanush-J]

Ok, I will create a PR if @ValkonX33 can't complete this in 7 days.

[ValkonX33]

@Heet-Bhalodiya Thanks for reporting. The selected token is wrong. It should be selectedChannel. The following fix should work when hovering on a selected default Pagination item:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -126,7 +126,7 @@ const PaginationItemPage = styled(ButtonBase, {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.hoverOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.hoverOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,

Not related to this PR, but the same should be for focusVisible:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -138,7 +138,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
       [`&.${paginationItemClasses.focusVisible}`]: {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.focusOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.focusOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,

Would you like to create a Pull Request?

Hey i've implemented the following fix that you stated, is there anything that i might have to change as well?
also about should i go extra mile and update it for foucsVisible as well?

[ValkonX33]

@Heet-Bhalodiya Thanks for reporting. The selected token is wrong. It should be selectedChannel. The following fix should work when hovering on a selected default Pagination item:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -126,7 +126,7 @@ const PaginationItemPage = styled(ButtonBase, {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.hoverOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.hoverOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,

Not related to this PR, but the same should be for focusVisible:

--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -138,7 +138,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
       [`&.${paginationItemClasses.focusVisible}`]: {
         backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.va
rs.palette.action.focusOpacity}))`
+          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${t
heme.vars.palette.action.focusOpacity}))`
           : alpha(
               theme.palette.action.selected,
               theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,

Would you like to create a Pull Request?

Hey i've implemented the following fix that you stated, is there anything that i might have to change as well? also about should i go extra mile and update it for foucsVisible as well?

@ZeeshanTamboli

[ZeeshanTamboli]

@ValkonX33 Yes, you can update it for focusVisible as well.

[ValkonX33]

Hello @ZeeshanTamboli i have created a PR can you please review

[Pratik1603]

Hey, I would like to work on this issue

[ValkonX33]

@mj12albert can you review my PR please and merge it?