[material-ui] Improve color map filter on styles

packages-internal/test-utils/src/describeConformance.tsx

@@ -986,6 +986,13 @@ function testThemeCustomPalette(
             main: '#ff5252',
           },
           unknown: null,
+          custom2: {
+            main: {
+              blue: {
+                dark: '#FFCC00',
+              },
+            },
+          },
         },
       });
 

packages/mui-material/src/Alert/Alert.js

@@ -9,6 +9,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import Paper from '../Paper';
 import alertClasses, { getAlertUtilityClass } from './alertClasses';
 import IconButton from '../IconButton';
@@ -59,7 +60,7 @@ const AlertRoot = styled(Paper, {
       padding: '6px 16px',
       variants: [
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main && value.light)
+          .filter(createSimplePaletteValueFilter(['light']))
           .map(([color]) => ({
             props: { colorSeverity: color, variant: 'standard' },
             style: {
@@ -77,7 +78,7 @@ const AlertRoot = styled(Paper, {
             },
           })),
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main && value.light)
+          .filter(createSimplePaletteValueFilter(['light']))
           .map(([color]) => ({
             props: { colorSeverity: color, variant: 'outlined' },
             style: {
@@ -93,7 +94,7 @@ const AlertRoot = styled(Paper, {
             },
           })),
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main && value.dark)
+          .filter(createSimplePaletteValueFilter(['dark']))
           .map(([color]) => ({
             props: { colorSeverity: color, variant: 'filled' },
             style: {

packages/mui-material/src/AppBar/AppBar.js

@@ -7,6 +7,7 @@ import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 
@@ -116,7 +117,7 @@ const AppBarRoot = styled(Paper, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main && palette.contrastText)
+        .filter(createSimplePaletteValueFilter(['contrastText']))
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/Badge/Badge.js

@@ -8,6 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from './useBadge';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
@@ -91,7 +92,7 @@ const BadgeBadge = styled('span', {
     }),
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main && palette.contrastText)
+        .filter(createSimplePaletteValueFilter(['contrastText']))
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/Button/Button.js

@@ -11,6 +11,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
@@ -161,7 +162,7 @@ const ButtonRoot = styled(ButtonBase, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
+          .filter(createSimplePaletteValueFilter(['dark', 'contrastText']))
           .map(([color]) => ({
             props: { color },
             style: {

packages/mui-material/src/ButtonGroup/ButtonGroup.js

@@ -8,6 +8,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
@@ -165,7 +166,7 @@ const ButtonGroupRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .flatMap(([color]) => [
           {
             props: { variant: 'text', color },
@@ -229,7 +230,7 @@ const ButtonGroupRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.dark)
+        .filter(createSimplePaletteValueFilter(['dark']))
         .map(([color]) => ({
           props: { variant: 'contained', color },
           style: {

packages/mui-material/src/Checkbox/Checkbox.js

@@ -14,6 +14,7 @@ import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
 
@@ -66,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color, disableRipple: false },
           style: {
@@ -78,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/Chip/Chip.js

@@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize';
 import ButtonBase from '../ButtonBase';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 
@@ -165,7 +166,7 @@ const ChipRoot = styled('div', {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main && value.contrastText)
+          .filter(createSimplePaletteValueFilter(['contrastText']))
           .map(([color]) => {
             return {
               props: { color },
@@ -213,7 +214,7 @@ const ChipRoot = styled('div', {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.dark)
+          .filter(createSimplePaletteValueFilter(['dark']))
           .map(([color]) => {
             return {
               props: { color, onDelete: true },
@@ -252,7 +253,7 @@ const ChipRoot = styled('div', {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.dark)
+          .filter(createSimplePaletteValueFilter(['dark']))
           .map(([color]) => ({
             props: { color, clickable: true },
             style: {
@@ -297,7 +298,7 @@ const ChipRoot = styled('div', {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
+          .filter(createSimplePaletteValueFilter()) // no need to check for mainChannel as it's calculated from main
           .map(([color]) => ({
             props: { variant: 'outlined', color },
             style: {

packages/mui-material/src/CircularProgress/CircularProgress.js

@@ -8,6 +8,7 @@ import { keyframes, css, styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 
 const SIZE = 44;
@@ -101,7 +102,7 @@ const CircularProgressRoot = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/Fab/Fab.js

@@ -9,6 +9,7 @@ import fabClasses, { getFabUtilityClass } from './fabClasses';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
 
@@ -137,7 +138,7 @@ const FabRoot = styled(ButtonBase, {
   memoTheme(({ theme }) => ({
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
+        .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/FilledInput/FilledInput.js

@@ -8,6 +8,7 @@ import InputBase from '../InputBase';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
 import {
@@ -137,7 +138,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main) // check all the used fields in the style below
+          .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
           .map(([color]) => ({
             props: {
               disableUnderline: false,

packages/mui-material/src/FormLabel/FormLabel.js

@@ -8,6 +8,7 @@ import useFormControl from '../FormControl/useFormControl';
 import capitalize from '../utils/capitalize';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
 
@@ -48,7 +49,7 @@ export const FormLabelRoot = styled('label', {
     position: 'relative',
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/Icon/Icon.js

@@ -6,6 +6,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import { getIconUtilityClass } from './iconClasses';
 
@@ -104,7 +105,7 @@ const IconRoot = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/IconButton/IconButton.js

@@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
@@ -102,15 +103,15 @@ const IconButtonRoot = styled(ButtonBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main) // check all the used fields in the style below
+        .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {
             color: (theme.vars || theme).palette[color].main,
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main) // check all the used fields in the style below
+        .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color, disableRipple: false },
           style: {

packages/mui-material/src/Input/Input.js

@@ -8,6 +8,7 @@ import InputBase from '../InputBase';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
 import {
@@ -114,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main)
+          .filter(createSimplePaletteValueFilter())
           .map(([color]) => ({
             props: { color, disableUnderline: false },
             style: {

packages/mui-material/src/LinearProgress/LinearProgress.js

@@ -7,6 +7,7 @@ import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import { keyframes, css, styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
@@ -144,7 +145,7 @@ const LinearProgressRoot = styled('span', {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {
@@ -204,7 +205,7 @@ const LinearProgressDashed = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => {
           const backgroundColor = getColorShade(theme, color);
           return {
@@ -256,7 +257,7 @@ const LinearProgressBar1 = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {
@@ -323,7 +324,7 @@ const LinearProgressBar2 = styled('span', {
     transformOrigin: 'left',
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color },
           style: {
@@ -346,7 +347,7 @@ const LinearProgressBar2 = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value && value.main)
+        .filter(createSimplePaletteValueFilter())
         .map(([color]) => ({
           props: { color, variant: 'buffer' },
           style: {

packages/mui-material/src/Link/Link.js

@@ -9,6 +9,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible';
 import capitalize from '../utils/capitalize';
 import { styled, useTheme } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
@@ -95,7 +96,7 @@ const LinkRoot = styled(Typography, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value && value.main)
+          .filter(createSimplePaletteValueFilter())
           .map(([color]) => ({
             props: { underline: 'always', color },
             style: {