support custom palette

mui · Jan 3, 2025 · c2c1f95 · c2c1f95
1 parent 9574765
commit c2c1f95
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git 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('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
@@ -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)`;
   }