[material-ui] Improve color map filter on styles

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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 
@@ -116,7 +117,9 @@ const AppBarRoot = styled(Paper, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main && palette.contrastText)
+        .filter(
+          ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
@@ -91,7 +92,9 @@ const BadgeBadge = styled('span', {
     }),
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main && palette.contrastText)
+        .filter(
+          ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
@@ -161,7 +162,10 @@ const ButtonRoot = styled(ButtonBase, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
+          .filter(
+            ([, palette]) =>
+              palette && checkSimplePaletteColorValues(palette, ['dark', 'contrastText']),
+          )
           .map(([color]) => ({
             props: { 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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
 
@@ -66,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .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(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { 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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 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(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .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 checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 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(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color },
           style: {

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

@@ -14,6 +14,7 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
 
@@ -61,7 +62,7 @@ const RadioRoot = styled(SwitchBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color, disableRipple: false },
           style: {
@@ -73,7 +74,7 @@ const RadioRoot = styled(SwitchBase, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color },
           style: {

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

@@ -15,6 +15,7 @@ import { useDefaultProps } from '../DefaultPropsProvider';
 import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 import BaseSliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 
@@ -62,7 +63,7 @@ export const SliderRoot = styled('span', {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color },
           style: {
@@ -206,7 +207,7 @@ export const SliderTrack = styled('span', {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, palette]) => palette && palette.main)
+          .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
           .map(([color]) => ({
             props: { color, track: 'inverted' },
             style: {
@@ -308,7 +309,7 @@ export const SliderThumb = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color },
           style: {

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

@@ -10,6 +10,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import { styled } from '../zero-styled';
 import memoTheme from '../utils/memoTheme';
+import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
 import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
@@ -89,7 +90,7 @@ const ToggleButtonRoot = styled(ButtonBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette && palette.main)
+        .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette))
         .map(([color]) => ({
           props: { color },
           style: {

packages/mui-material/src/utils/checkSimplePaletteColorValues.ts

@@ -0,0 +1,31 @@
+import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette';
+
+function isSimplePaletteColor(obj: PaletteColorOptions): obj is SimplePaletteColorOptions {
+  return typeof (obj as SimplePaletteColorOptions).main === 'string';
+}
+
+/**
+ * Checks if the object conforms to the SimplePaletteColorOptions type.
+ * The minimum requirement is that the object has a "main" property of type string, this is always checked.
+ * Optionally, you can pass additional properties to check.
+ *
+ * @param obj - The object to check
+ * @param optionalValuesToCheck - Array with "light", "dark", and/or "contrastText"
+ * @returns boolean
+ */
+export default function checkSimplePaletteColorValues(
+  obj: PaletteColorOptions,
+  optionalValuesToCheck: (keyof SimplePaletteColorOptions)[],
+): boolean {
+  if (!isSimplePaletteColor(obj)) {
+    return false;
+  }
+
+  for (const value of optionalValuesToCheck) {
+    if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') {
+      return false;
+    }
+  }
+
+  return true;
+}