From 0eb8081a2c3cc8734faafdcb92093b0603d401f7 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Wed, 10 Apr 2024 23:16:07 +0200 Subject: [PATCH 1/5] converted PaginationItem to use zero-styled --- .../app/material-ui/react-pagination/page.tsx | 86 ++++++ .../pages/material-ui/react-pagination.tsx | 87 ++++++ .../src/PaginationItem/PaginationItem.js | 248 ++++++++++-------- 3 files changed, 314 insertions(+), 107 deletions(-) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx new file mode 100644 index 00000000000000..89723ca9e16b84 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx @@ -0,0 +1,86 @@ +'use client'; +import * as React from 'react'; +import BasicPagination from '../../../../../../docs/data/material/components/pagination/BasicPagination'; +import CustomIcons from '../../../../../../docs/data/material/components/pagination/CustomIcons'; +import PaginationButtons from '../../../../../../docs/data/material/components/pagination/PaginationButtons'; +import PaginationControlled from '../../../../../../docs/data/material/components/pagination/PaginationControlled'; +import PaginationLink from '../../../../../../docs/data/material/components/pagination/PaginationLink'; +import PaginationOutlined from '../../../../../../docs/data/material/components/pagination/PaginationOutlined'; +import PaginationRanges from '../../../../../../docs/data/material/components/pagination/PaginationRanges'; +import PaginationRounded from '../../../../../../docs/data/material/components/pagination/PaginationRounded'; +import PaginationSize from '../../../../../../docs/data/material/components/pagination/PaginationSize'; +import TablePaginationDemo from '../../../../../../docs/data/material/components/pagination/TablePaginationDemo'; +import UsePagination from '../../../../../../docs/data/material/components/pagination/UsePagination'; + +export default function Pagination() { + return ( + +
+

Basic Pagination

+
+ +
+
+
+

Custom Icons

+
+ +
+
+
+

Pagination Buttons

+
+ +
+
+
+

Pagination Controlled

+
+ +
+
+
+

Pagination Link

+
+ +
+
+
+

Pagination Outlined

+
+ +
+
+
+

Pagination Ranges

+
+ +
+
+
+

Pagination Rounded

+
+ +
+
+
+

Pagination Size

+
+ +
+
+
+

Table Pagination Demo

+
+ +
+
+
+

Use Pagination

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx new file mode 100644 index 00000000000000..0c98e85fc85307 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicPagination from '../../../../../docs/data/material/components/pagination/BasicPagination.tsx'; +import CustomIcons from '../../../../../docs/data/material/components/pagination/CustomIcons.tsx'; +import PaginationButtons from '../../../../../docs/data/material/components/pagination/PaginationButtons.tsx'; +import PaginationControlled from '../../../../../docs/data/material/components/pagination/PaginationControlled.tsx'; +import PaginationLink from '../../../../../docs/data/material/components/pagination/PaginationLink.tsx'; +import PaginationOutlined from '../../../../../docs/data/material/components/pagination/PaginationOutlined.tsx'; +import PaginationRanges from '../../../../../docs/data/material/components/pagination/PaginationRanges.tsx'; +import PaginationRounded from '../../../../../docs/data/material/components/pagination/PaginationRounded.tsx'; +import PaginationSize from '../../../../../docs/data/material/components/pagination/PaginationSize.tsx'; +import TablePaginationDemo from '../../../../../docs/data/material/components/pagination/TablePaginationDemo.tsx'; +import UsePagination from '../../../../../docs/data/material/components/pagination/UsePagination.tsx'; + +export default function Pagination() { + return ( + +

Pagination

+
+

Basic Pagination

+
+ +
+
+
+

Custom Icons

+
+ +
+
+
+

Pagination Buttons

+
+ +
+
+
+

Pagination Controlled

+
+ +
+
+
+

Pagination Link

+
+ +
+
+
+

Pagination Outlined

+
+ +
+
+
+

Pagination Ranges

+
+ +
+
+
+

Pagination Rounded

+
+ +
+
+
+

Pagination Size

+
+ +
+
+
+

Table Pagination Demo

+
+ +
+
+
+

Use Pagination

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 3f51141d0587a9..7a9cad6937cccb 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -5,7 +5,6 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import useThemeProps from '../styles/useThemeProps'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -13,7 +12,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -65,7 +64,7 @@ const PaginationItemEllipsis = styled('div', { name: 'MuiPaginationItem', slot: 'Root', overridesResolver, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ ...theme.typography.body2, borderRadius: 32 / 2, textAlign: 'center', @@ -78,18 +77,26 @@ const PaginationItemEllipsis = styled('div', { [`&.${paginationItemClasses.disabled}`]: { opacity: (theme.vars || theme).palette.action.disabledOpacity, }, - ...(ownerState.size === 'small' && { - minWidth: 26, - borderRadius: 26 / 2, - margin: '0 1px', - padding: '0 4px', - }), - ...(ownerState.size === 'large' && { - minWidth: 40, - borderRadius: 40 / 2, - padding: '0 10px', - fontSize: theme.typography.pxToRem(15), - }), + variants: [ + { + props: { size: 'small' }, + style: { + minWidth: 26, + borderRadius: 26 / 2, + margin: '0 1px', + padding: '0 4px', + }, + }, + { + props: { size: 'large' }, + style: { + minWidth: 40, + borderRadius: 40 / 2, + padding: '0 10px', + fontSize: theme.typography.pxToRem(15), + }, + }, + ], })); const PaginationItemPage = styled(ButtonBase, { @@ -97,7 +104,7 @@ const PaginationItemPage = styled(ButtonBase, { slot: 'Root', overridesResolver, })( - ({ theme, ownerState }) => ({ + ({ theme }) => ({ ...theme.typography.body2, borderRadius: 32 / 2, textAlign: 'center', @@ -151,115 +158,142 @@ const PaginationItemPage = styled(ButtonBase, { backgroundColor: (theme.vars || theme).palette.action.selected, }, }, - ...(ownerState.size === 'small' && { - minWidth: 26, - height: 26, - borderRadius: 26 / 2, - margin: '0 1px', - padding: '0 4px', - }), - ...(ownerState.size === 'large' && { - minWidth: 40, - height: 40, - borderRadius: 40 / 2, - padding: '0 10px', - fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.shape === 'rounded' && { - borderRadius: (theme.vars || theme).shape.borderRadius, - }), + variants: [ + { + props: { size: 'small' }, + style: { + minWidth: 26, + height: 26, + borderRadius: 26 / 2, + margin: '0 1px', + padding: '0 4px', + }, + }, + { + props: { size: 'large' }, + style: { + minWidth: 40, + height: 40, + borderRadius: 40 / 2, + padding: '0 10px', + fontSize: theme.typography.pxToRem(15), + }, + }, + { + props: { shape: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, + }, + }, + ], }), - ({ theme, ownerState }) => ({ - ...(ownerState.variant === 'text' && { - [`&.${paginationItemClasses.selected}`]: { - ...(ownerState.color !== 'standard' && { - color: (theme.vars || theme).palette[ownerState.color].contrastText, - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - '&:hover': { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, + ({ theme }) => ({ + variants: [ + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark && value.contrastText) + .map(([color]) => ({ + props: { variant: 'text', color }, + style: { + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].contrastText, + backgroundColor: (theme.vars || theme).palette[color].main, + '&:hover': { + backgroundColor: (theme.vars || theme).palette[color].dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: (theme.vars || theme).palette[color].main, + }, + }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette[color].dark, + }, + }, + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, }, }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, - }, - }), - [`&.${paginationItemClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, + })), + { + props: { variant: 'outlined' }, + style: { + border: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, }, }, - }), - ...(ownerState.variant === 'outlined' && { - border: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.${paginationItemClasses.selected}`]: { - ...(ownerState.color !== 'standard' && { - color: (theme.vars || theme).palette[ownerState.color].main, - border: `1px solid ${ - theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : alpha(theme.palette[ownerState.color].main, 0.5) - }`, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.activatedOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity), - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${ - theme.vars.palette.action.activatedOpacity - } + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[ownerState.color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.light) + .map(([color]) => ({ + props: { variant: 'outlined', color }, + style: { + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5) + }`, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity), + '&:hover': { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + }, + }, + [`&.${paginationItemClasses.disabled}`]: { + borderColor: (theme.vars || theme).palette.action.disabledBackground, + color: (theme.vars || theme).palette.action.disabled, }, }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${ - theme.vars.palette.action.activatedOpacity - } + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[ownerState.color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), - }, - }), - [`&.${paginationItemClasses.disabled}`]: { - borderColor: (theme.vars || theme).palette.action.disabledBackground, - color: (theme.vars || theme).palette.action.disabled, - }, - }, - }), + })), + ], }), ); const PaginationItemPageIcon = styled('div', { name: 'MuiPaginationItem', slot: 'Icon', - overridesResolver: (props, styles) => styles.icon, -})(({ theme, ownerState }) => ({ + overridesResolver: (_props, styles) => styles.icon, +})(({ theme }) => ({ fontSize: theme.typography.pxToRem(20), margin: '0 -8px', - ...(ownerState.size === 'small' && { - fontSize: theme.typography.pxToRem(18), - }), - ...(ownerState.size === 'large' && { - fontSize: theme.typography.pxToRem(22), - }), + variants: [ + { + props: { size: 'small' }, + style: { + fontSize: theme.typography.pxToRem(18), + }, + }, + { + props: { size: 'large' }, + style: { + fontSize: theme.typography.pxToRem(22), + }, + }, + ], })); const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { + const useThemeProps = createUseThemeProps('MuiPaginationItem'); const props = useThemeProps({ props: inProps, name: 'MuiPaginationItem' }); const { className, From dd1beaab78d8b0257ac3ce130233fd5464e7cf33 Mon Sep 17 00:00:00 2001 From: gijsbotje Date: Wed, 10 Apr 2024 23:28:58 +0200 Subject: [PATCH 2/5] fixed disabled colors --- .../src/PaginationItem/PaginationItem.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 7a9cad6937cccb..8dd34a422169e5 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -207,9 +207,9 @@ const PaginationItemPage = styled(ButtonBase, { [`&.${paginationItemClasses.focusVisible}`]: { backgroundColor: (theme.vars || theme).palette[color].dark, }, - }, - [`&.${paginationItemClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + }, }, }, })), @@ -258,10 +258,10 @@ const PaginationItemPage = styled(ButtonBase, { theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, ), }, - }, - [`&.${paginationItemClasses.disabled}`]: { - borderColor: (theme.vars || theme).palette.action.disabledBackground, - color: (theme.vars || theme).palette.action.disabled, + [`&.${paginationItemClasses.disabled}`]: { + borderColor: (theme.vars || theme).palette.action.disabledBackground, + color: (theme.vars || theme).palette.action.disabled, + }, }, }, })), From c63c1112e39c7d62e98eb2062c60bb4a95517911 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 11 Apr 2024 11:33:03 +0700 Subject: [PATCH 3/5] revert props change --- packages/mui-material/src/PaginationItem/PaginationItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 8dd34a422169e5..b4f009704a385f 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -272,7 +272,7 @@ const PaginationItemPage = styled(ButtonBase, { const PaginationItemPageIcon = styled('div', { name: 'MuiPaginationItem', slot: 'Icon', - overridesResolver: (_props, styles) => styles.icon, + overridesResolver: (props, styles) => styles.icon, })(({ theme }) => ({ fontSize: theme.typography.pxToRem(20), margin: '0 -8px', From 95f7978e8bf5b9ac328f90931e9d4d4f26c58767 Mon Sep 17 00:00:00 2001 From: Gijs Boddeus Date: Thu, 11 Apr 2024 09:35:37 +0200 Subject: [PATCH 4/5] move createUseThemeProps outside component --- packages/mui-material/src/PaginationItem/PaginationItem.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index b4f009704a385f..e3d7bf8064390e 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -14,6 +14,8 @@ import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; import { styled, createUseThemeProps } from '../zero-styled'; +const useThemeProps = createUseThemeProps('MuiPaginationItem'); + const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -293,7 +295,6 @@ const PaginationItemPageIcon = styled('div', { })); const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) { - const useThemeProps = createUseThemeProps('MuiPaginationItem'); const props = useThemeProps({ props: inProps, name: 'MuiPaginationItem' }); const { className, From 12b6f4cb95fcec0a835d0b48b7ad2e89a3d806c8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 12 Apr 2024 10:17:37 +0700 Subject: [PATCH 5/5] fix disabled styles --- .../src/PaginationItem/PaginationItem.js | 288 +++++++++--------- 1 file changed, 147 insertions(+), 141 deletions(-) diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index e3d7bf8064390e..0b65f22c60f365 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -105,171 +105,177 @@ const PaginationItemPage = styled(ButtonBase, { name: 'MuiPaginationItem', slot: 'Root', overridesResolver, -})( - ({ theme }) => ({ - ...theme.typography.body2, - borderRadius: 32 / 2, - textAlign: 'center', - boxSizing: 'border-box', - minWidth: 32, - height: 32, - padding: '0 6px', - margin: '0 3px', - color: (theme.vars || theme).palette.text.primary, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette.action.focus, - }, - [`&.${paginationItemClasses.disabled}`]: { - opacity: (theme.vars || theme).palette.action.disabledOpacity, +})(({ theme }) => ({ + ...theme.typography.body2, + borderRadius: 32 / 2, + textAlign: 'center', + boxSizing: 'border-box', + minWidth: 32, + height: 32, + padding: '0 6px', + margin: '0 3px', + color: (theme.vars || theme).palette.text.primary, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette.action.focus, + }, + [`&.${paginationItemClasses.disabled}`]: { + opacity: (theme.vars || theme).palette.action.disabledOpacity, + }, + transition: theme.transitions.create(['color', 'background-color'], { + duration: theme.transitions.duration.short, + }), + '&:hover': { + backgroundColor: (theme.vars || theme).palette.action.hover, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', }, - transition: theme.transitions.create(['color', 'background-color'], { - duration: theme.transitions.duration.short, - }), + }, + [`&.${paginationItemClasses.selected}`]: { + backgroundColor: (theme.vars || theme).palette.action.selected, '&:hover': { - backgroundColor: (theme.vars || theme).palette.action.hover, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, + ), // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: 'transparent', + backgroundColor: (theme.vars || theme).palette.action.selected, }, }, - [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette.action.selected, + theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, + ), + }, + [`&.${paginationItemClasses.disabled}`]: { + opacity: 1, + color: (theme.vars || theme).palette.action.disabled, backgroundColor: (theme.vars || theme).palette.action.selected, - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` - : alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette.action.selected, - }, + }, + }, + variants: [ + { + props: { size: 'small' }, + style: { + minWidth: 26, + height: 26, + borderRadius: 26 / 2, + margin: '0 1px', + padding: '0 4px', }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette.action.selected, - theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity, - ), + }, + { + props: { size: 'large' }, + style: { + minWidth: 40, + height: 40, + borderRadius: 40 / 2, + padding: '0 10px', + fontSize: theme.typography.pxToRem(15), }, - [`&.${paginationItemClasses.disabled}`]: { - opacity: 1, - color: (theme.vars || theme).palette.action.disabled, - backgroundColor: (theme.vars || theme).palette.action.selected, + }, + { + props: { shape: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, }, }, - variants: [ - { - props: { size: 'small' }, - style: { - minWidth: 26, - height: 26, - borderRadius: 26 / 2, - margin: '0 1px', - padding: '0 4px', + { + props: { variant: 'outlined' }, + style: { + border: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.disabled}`]: { + borderColor: (theme.vars || theme).palette.action.disabledBackground, + color: (theme.vars || theme).palette.action.disabled, + }, }, }, - { - props: { size: 'large' }, - style: { - minWidth: 40, - height: 40, - borderRadius: 40 / 2, - padding: '0 10px', - fontSize: theme.typography.pxToRem(15), + }, + { + props: { variant: 'text' }, + style: { + [`&.${paginationItemClasses.selected}`]: { + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + }, }, }, - { - props: { shape: 'rounded' }, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark && value.contrastText) + .map(([color]) => ({ + props: { variant: 'text', color }, style: { - borderRadius: (theme.vars || theme).shape.borderRadius, - }, - }, - ], - }), - ({ theme }) => ({ - variants: [ - ...Object.entries(theme.palette) - .filter(([, value]) => value.main && value.dark && value.contrastText) - .map(([color]) => ({ - props: { variant: 'text', color }, - style: { - [`&.${paginationItemClasses.selected}`]: { - color: (theme.vars || theme).palette[color].contrastText, - backgroundColor: (theme.vars || theme).palette[color].main, - '&:hover': { - backgroundColor: (theme.vars || theme).palette[color].dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette[color].main, - }, - }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: (theme.vars || theme).palette[color].dark, - }, - [`&.${paginationItemClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].contrastText, + backgroundColor: (theme.vars || theme).palette[color].main, + '&:hover': { + backgroundColor: (theme.vars || theme).palette[color].dark, + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: (theme.vars || theme).palette[color].main, }, }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: (theme.vars || theme).palette[color].dark, + }, + [`&.${paginationItemClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + }, }, - })), - { - props: { variant: 'outlined' }, - style: { - border: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, }, - }, - ...Object.entries(theme.palette) - .filter(([, value]) => value.main && value.light) - .map(([color]) => ({ - props: { variant: 'outlined', color }, - style: { - [`&.${paginationItemClasses.selected}`]: { - color: (theme.vars || theme).palette[color].main, - border: `1px solid ${ - theme.vars - ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` - : alpha(theme.palette[color].main, 0.5) - }`, + })), + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.light) + .map(([color]) => ({ + props: { variant: 'outlined', color }, + style: { + [`&.${paginationItemClasses.selected}`]: { + color: (theme.vars || theme).palette[color].main, + border: `1px solid ${ + theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5) + }`, + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity), + '&:hover': { backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` - : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity), - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - [`&.${paginationItemClasses.focusVisible}`]: { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` - : alpha( - theme.palette[color].main, - theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, - ), - }, - [`&.${paginationItemClasses.disabled}`]: { - borderColor: (theme.vars || theme).palette.action.disabledBackground, - color: (theme.vars || theme).palette.action.disabled, + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', }, }, + [`&.${paginationItemClasses.focusVisible}`]: { + backgroundColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` + : alpha( + theme.palette[color].main, + theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity, + ), + }, }, - })), - ], - }), -); + }, + })), + ], +})); const PaginationItemPageIcon = styled('div', { name: 'MuiPaginationItem',