[material-ui] Filter only valid theme palette for generating styles (#…

…42147)
mui · May 17, 2024 · 495a710 · 495a710
1 parent 1b88862
commit 495a710
Show file tree

Hide file tree

Showing 25 changed files with 53 additions and 64 deletions.
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
@@ -58,7 +58,7 @@ const AlertRoot = styled(Paper, {
     padding: '6px 16px',
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light)
+        .filter(([, value]) => value && value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'standard' },
           style: {
@@ -76,7 +76,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light)
+        .filter(([, value]) => value && value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'outlined' },
           style: {
@@ -92,7 +92,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.dark)
+        .filter(([, value]) => value && value.main && value.dark)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'filled' },
           style: {

diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
@@ -114,13 +114,9 @@ const AppBarRoot = styled(Paper, {
         }),
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           '--AppBar-background': (theme.vars ?? theme).palette[color].main,

diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
@@ -89,13 +89,9 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen,
   }),
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           backgroundColor: (theme.vars || theme).palette[color].main,

diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
@@ -160,7 +160,7 @@ const ButtonRoot = styled(ButtonBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette.main && palette.dark && palette.contrastText)
+        .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
         .map(([color]) => ({
           props: { color },
           style: {

diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -160,7 +160,7 @@ const ButtonGroupRoot = styled('div', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .flatMap(([color]) => [
         {
           props: { variant: 'text', color },
@@ -224,7 +224,7 @@ const ButtonGroupRoot = styled('div', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.dark)
+      .filter(([, value]) => value && value.dark)
       .map(([color]) => ({
         props: { variant: 'contained', color },
         style: {

diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -64,7 +64,7 @@ const CheckboxRoot = styled(SwitchBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
@@ -76,7 +76,7 @@ const CheckboxRoot = styled(SwitchBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {

diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
@@ -164,7 +164,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.contrastText)
+        .filter(([, value]) => value && value.main && value.contrastText)
         .map(([color]) => {
           return {
             props: { color },
@@ -212,7 +212,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.dark)
+        .filter(([, value]) => value && value.dark)
         .map(([color]) => {
           return {
             props: { color, onDelete: true },
@@ -251,7 +251,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.dark)
+        .filter(([, value]) => value && value.dark)
         .map(([color]) => ({
           props: { color, clickable: true },
           style: {
@@ -296,7 +296,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
+        .filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
         .map(([color]) => ({
           props: { variant: 'outlined', color },
           style: {

diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js
@@ -100,7 +100,7 @@ const CircularProgressRoot = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {

diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
@@ -136,7 +136,7 @@ const FabRoot = styled(ButtonBase, {
   ({ theme }) => ({
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {

diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -126,7 +126,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main) // check all the used fields in the style below
         .map(([color]) => ({
           props: {
             disableUnderline: false,

diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js
@@ -47,7 +47,7 @@ export const FormLabelRoot = styled('label', {
   position: 'relative',
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {

diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js
@@ -103,7 +103,7 @@ const IconRoot = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {

diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
@@ -104,15 +104,15 @@ const IconButtonRoot = styled(ButtonBase, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value.main) // check all the used fields in the style below
+          .filter(([, value]) => value && value.main) // 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.main) // check all the used fields in the style below
+          .filter(([, value]) => value && value.main) // check all the used fields in the style below
           .map(([color]) => ({
             props: { color, disableRipple: false },
             style: {

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
@@ -115,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { color, disableUnderline: false },
           style: {

diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js
@@ -143,7 +143,7 @@ const LinearProgressRoot = styled('span', {
   },
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -201,7 +201,7 @@ const LinearProgressDashed = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => {
           const backgroundColor = getColorShade(theme, color);
           return {
@@ -252,7 +252,7 @@ const LinearProgressBar1 = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -317,7 +317,7 @@ const LinearProgressBar2 = styled('span', {
   transformOrigin: 'left',
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -339,7 +339,7 @@ const LinearProgressBar2 = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color, variant: 'buffer' },
         style: {

diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
@@ -84,7 +84,7 @@ const LinkRoot = styled(Typography, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { underline: 'always', color },
           style: {

diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -54,7 +54,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { color },
           style: {

diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -214,7 +214,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main && value.dark && value.contrastText)
+      .filter(([, value]) => value && value.main && value.dark && value.contrastText)
       .map(([color]) => ({
         props: { variant: 'text', color },
         style: {
@@ -238,7 +238,7 @@ const PaginationItemPage = styled(ButtonBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main && value.light)
+      .filter(([, value]) => value && value.main && value.light)
       .map(([color]) => ({
         props: { variant: 'outlined', color },
         style: {

diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -59,7 +59,7 @@ const RadioRoot = styled(SwitchBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
@@ -71,7 +71,7 @@ const RadioRoot = styled(SwitchBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
@@ -59,9 +59,9 @@ export const SliderRoot = styled('span', {
     },
   },
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           color: (theme.vars || theme).palette[color].main,
@@ -201,9 +201,9 @@ export const SliderTrack = styled('span', {
           display: 'none',
         },
       },
-      ...Object.keys((theme.vars ?? theme).palette)
-        .filter((key) => (theme.vars ?? theme).palette[key].main)
-        .map((color) => ({
+      ...Object.entries(theme.palette)
+        .filter(([, palette]) => palette && palette.main)
+        .map(([color]) => ({
           props: { color, track: 'inverted' },
           style: {
             ...(theme.vars
@@ -301,9 +301,9 @@ export const SliderThumb = styled('span', {
         transform: 'translate(-50%, 50%)',
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&:hover, &.${sliderClasses.focusVisible}`]: {

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -71,7 +71,7 @@ const SvgIconRoot = styled('svg', {
     },
     // TODO v5 deprecate color prop, v6 remove for sx
     ...Object.entries((theme.vars ?? theme).palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: { color: (theme.vars ?? theme).palette?.[color]?.main },

diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js
@@ -150,7 +150,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {

diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js
@@ -87,13 +87,9 @@ const ToggleButtonRoot = styled(ButtonBase, {
         },
       },
     },
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&.${toggleButtonClasses.selected}`]: {

diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
@@ -63,7 +63,7 @@ export const TypographyRoot = styled('span', {
         style: value,
       })),
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {