[docs] Update code snippet in docs for custom color palette (#32946)

* test(Chip): add test case for custom color in theme palette

* fix(Chip): calculate contrastColor if custom color is provided in theme palette to avoid crash in alpha function

* revert changes

* update code snippet

* update docs

* improve indentation

docs/data/material/customization/palette/palette.md

@@ -87,6 +87,16 @@ const theme = createTheme({
       // dark: will be calculated from palette.secondary.main,
       contrastText: '#ffcc00',
     },
+     // Provide every color token (light, main, dark, and contrastText) when using
+     // custom colors for props in Material UI's components.
+     // Then you will be able to use it like this: `<Button color="custom">`
+     // (For TypeScript, you need to add module augmentation for the `custom` value)
+    custom: {
+      light: '#ffa726'
+      main: '#f57c00',
+      dark: '#ef6c00',
+      contrastText: 'rgba(0, 0, 0, 0.87)',
+    }
     // Used by `getContrastText()` to maximize the contrast between
     // the background and the text.
     contrastThreshold: 3,