From b90770d36ddb566aef080de3f4553997ea5ce277 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 23 Jun 2022 12:43:00 +0530
Subject: [PATCH] [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 | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md
index 2eb22a39bb91aa..9066b1e9865934 100644
--- a/docs/data/material/customization/palette/palette.md
+++ b/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,