From 2d7eb74c0367a0864d4f40b27374438c61ad940b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 3 Jan 2025 14:29:36 +0700
Subject: [PATCH] support custom palette

---
 .../src/Link/getTextDecoration.test.js        | 20 +++++++++++++++++++
 .../src/Link/getTextDecoration.ts             |  7 +++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Link/getTextDecoration.test.js b/packages/mui-material/src/Link/getTextDecoration.test.js
index 142b16a9499ad0..21035fac0f9ae0 100644
--- a/packages/mui-material/src/Link/getTextDecoration.test.js
+++ b/packages/mui-material/src/Link/getTextDecoration.test.js
@@ -36,6 +36,26 @@ describe('getTextDecoration', () => {
       );
       expect(() => getTextDecoration({ theme, ownerState: { color: 'yellow' } })).to.throw();
     });
+
+    it('work with a custom palette', () => {
+      const customTheme = createTheme({
+        colorSchemes: {
+          light: {
+            palette: {
+              myColor: theme.palette.augmentColor({ color: { main: '#bbbbbb' } }),
+            },
+          },
+          dark: {
+            palette: {
+              myColor: theme.palette.augmentColor({ color: { main: '#aaaaaa' } }),
+            },
+          },
+        },
+      });
+      expect(getTextDecoration({ theme: customTheme, ownerState: { color: 'myColor' } })).to.equal(
+        'rgba(187, 187, 187, 0.4)',
+      );
+    });
   });
 
   describe('CSS variables', () => {
diff --git a/packages/mui-material/src/Link/getTextDecoration.ts b/packages/mui-material/src/Link/getTextDecoration.ts
index 8afec8d8a45927..ca36eb8aa1db02 100644
--- a/packages/mui-material/src/Link/getTextDecoration.ts
+++ b/packages/mui-material/src/Link/getTextDecoration.ts
@@ -10,9 +10,12 @@ const getTextDecoration = <T extends Theme>({
   ownerState: { color: string };
 }) => {
   const transformedColor = ownerState.color;
-  const color = (getPath(theme, `palette.${transformedColor}`, false) ||
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (getPath(theme, `palette.${transformedColor}.main`, false) ||
+    getPath(theme, `palette.${transformedColor}`, false) ||
     ownerState.color) as string;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`) as string | null;
+  const channelColor = (getPath(theme, `palette.${transformedColor}.mainChannel`) ||
+    getPath(theme, `palette.${transformedColor}Channel`)) as string | null;
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }