@mui/docs 6.0.0-alpha.11 → 6.0.0-alpha.12

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.12
+
+<!-- generated comparing v6.0.0-alpha.11..next -->
+
+_Jun 24, 2024_
+
+A big thanks to the 17 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.12`
+
+- Add `InitColorSchemeScript` for Next.js App Router (#42247) @siriwatknp
+- [Autocomplete] Fix renderOption props type (#42689) @DiegoAndai
+- [Autocomplete] Fix React 18.3 key spread warnings in Autocomplete demos (#42691) @aarongarciah
+- Support Pigment CSS for `CssBaseline`, `ScopedCssBaseline` and `Popper` (#42640) @siriwatknp
+- Add `DefaultPropsProvider` for Pigment CSS integration (#42638) @siriwatknp
+- [Stepper] Generate class for nonLinear prop (#42620) @alexismo
+- [Tab] Fix failing test (#42686) @aarongarciah
+- [Tab] Deprecate iconWrapper class for icon class (#42647) @sai6855
+- [TableSortLabel] Deprecate composed classes (#42281) @sai6855
+- [usePagination] Update pagination `siblingsEnd` calculation logic (#42667) @Mini-ghost
+
+### `@mui/codemod@6.0.0-alpha.12`
+
+- Support dynamic props styled transformation (#42683) @siriwatknp
+
+### `@mui/system@6.0.0-alpha.12`
+
+- Fix issues reported by react compiler in `mui-system` package (#42637) @sai6855
+- [useMediaQuery] Remove deprecated types (#42560) @aarongarciah
+
+### `@mui/joy@5.0.0-beta.45`
+
+- Fix issues reported by the React Compiler (#42671) @anuujj
+- [Autocomplete] Fix React spread key warning (#42741) @aarongarciah
+
+### `@mui/lab@6.0.0-alpha.12`
+
+- [LoadingButton] Apply wrapping element to prevent React crash on Google page translation (#35198) @BartJanvanAssen
+
+### Docs
+
+- Fix git diff format in migration to v6 (#42711) @oliviertassinari
+- Use new email for sponsoring @oliviertassinari
+- Fix 301 links (#42697) @alexfauquette
+- Normalize the capitalization of Design Kit @oliviertassinari
+- Recommend setting HTML attribute instead of DOM property for RTL (#42599) @aarongarciah
+- [material-ui][Select] Fix the `SelectAutoWidth` demo menu item value (#42648) @Danielkhakbaz
+
+### Core
+
+- [code-infra] Try disabling animations when taking screenshots (#42537) @Janpot
+- [code-infra] Fix benchmark package (#42553) @Janpot
+- [core] Replace enzyme in describeConformance (#42447) @DiegoAndai
+- [docs-infra] Fix layout shift demo toolbar (#42743) @oliviertassinari
+- [docs-infra] Fix visual look of in-house ad (#42735) @oliviertassinari
+- [docs-infra] Add stray design polish (#42646) @danilo-leal
+- [docs-infra] Fix wrong migration (#42675) @siriwatknp
+- [docs-infra] Fine tune markdown elements design (#42643) @danilo-leal
+- [docs-infra] Revamp the product switcher design (#42603) @danilo-leal
+- [docs-infra] Allow Link component to receive the `role` attribute (#42629) @danilo-leal
+- [infra] Add support donation button (#42499) @oliviertassinari
+- [infra] Raise `tsconfig`/`tsc` target to `es2022` (#42645) @LukasTy
+- [test] Fix tests on CI (#42670) @michaldudak
+- [test] Fix issues reported by react-compiler in test packages (#42626) @sai6855
+- [website] Add Armin to the team members (#42679) @arminmeh
+- [website] Open Staff Engineer role for Pigment CSS (#42531) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @alexismo, @anuujj, @arminmeh, @BartJanvanAssen, @Danielkhakbaz, @danilo-leal, @DiegoAndai, @Janpot, @LukasTy, @michaldudak, @Mini-ghost, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.11
 
 <!-- generated comparing v6.0.0-alpha.10..next -->

package/Link/Link.js

@@ -61,8 +61,6 @@ export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
     noLinkStyle,
     prefetch,
     replace,
-    role,
-    // Link don't have roles.
     scroll,
     shallow,
     ...other

package/MarkdownElement/MarkdownElement.js

@@ -8,8 +8,8 @@ const Root = styled('div')(({
   theme
 }) => ({
   ...lightTheme.typography.body1,
-  lineHeight: 1.6,
-  // Increased compared to the 1.5 default to make the docs easier to read.
+  lineHeight: 1.625,
+  // Rounds up to 26px－increased compared to the 1.5 default to make the docs easier to read.
   color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
   '& :focus-visible': {
     outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`,
@@ -24,7 +24,7 @@ const Root = styled('div')(({
     // Developers like when the code is dense.
     margin: theme.spacing(2, 'auto'),
     padding: theme.spacing(2),
-    backgroundColor: 'hsl(210, 35%, 9%)',
+    backgroundColor: 'hsl(210, 25%, 9%)',
     // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
     color: 'hsl(60, 30%, 96%)',
     colorScheme: 'dark',
@@ -123,6 +123,44 @@ const Root = styled('div')(({
       marginBottom: 6
     }
   },
+  '& a[target="_blank"]::after': {
+    content: '""',
+    maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
+    display: 'inline-flex',
+    width: '1em',
+    height: '1em',
+    color: 'inherit',
+    backgroundColor: 'currentColor',
+    transform: 'translate(0, 2px)',
+    transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)',
+    // bounce effect
+    opacity: 0.8
+  },
+  '& a[target="_blank"]:hover::after': {
+    opacity: 1,
+    transform: 'translate(1px, 0)'
+  },
+  '& a.remove-link-arrow::after': {
+    // Allows to remove link arrows for images
+    display: 'none'
+  },
+  '& .Ad-root a::after': {
+    // Remove link arrow for ads
+    display: 'none'
+  },
+  '& a': {
+    // Style taken from the Link component
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+    fontWeight: theme.typography.fontWeightMedium,
+    textDecoration: 'underline',
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    }
+  },
+  '& a code': {
+    color: darken(lightTheme.palette.primary.main, 0.2)
+  },
   '& h1, & h2, & h3, & h4': {
     display: 'flex',
     alignItems: 'center',
@@ -136,6 +174,8 @@ const Root = styled('div')(({
     '& .title-link-to-anchor': {
       color: 'inherit',
       textDecoration: 'none',
+      boxShadow: 'none',
+      fontWeight: 'inherit',
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
@@ -147,12 +187,6 @@ const Root = styled('div')(({
       alignItems: 'center',
       visibility: 'hidden'
     },
-    '& a:not(.title-link-to-anchor):hover': {
-      color: 'currentColor',
-      border: 'none',
-      boxShadow: '0 1px 0 0 currentColor',
-      textDecoration: 'none'
-    },
     '& .anchor-icon, & .comment-link': {
       padding: 0,
       cursor: 'pointer',
@@ -286,44 +320,58 @@ const Root = styled('div')(({
   },
   '& .MuiCallout-root': {
     display: 'flex',
-    gap: 12,
-    padding: '16px',
+    gap: '8px',
+    padding: '12px',
     margin: '16px 0',
     border: '1px solid',
     color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
     borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
     borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? lightTheme.shape.borderRadius}px)`,
-    '& > code': {
+    '& .MuiCallout-content': {
+      minWidth: 0,
+      // Allows content to shrink. Useful when callout contains code block
+      flexGrow: 1
+    },
+    '& code': {
       height: 'fit-content',
       backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
       borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`
     },
-    '& .MuiCallout-content': {
-      minWidth: 0,
-      // Allows content to shrink. Useful when callout contains code block
-      flexGrow: 1,
+    '& p': {
+      marginBottom: '8px',
       '& > p:last-child, & > ul:last-child': {
         // Avoid margin on last child
         marginBottom: 0
       },
-      '& .MuiCode-root': {
-        '& > pre': {
-          margin: 0,
-          marginTop: 4
-        }
-      },
       '& > ul': {
         // Because of the gap left by the icon, we visually need less padding
         paddingLeft: 22
       }
     },
-    '& > svg': {
-      marginTop: 2,
-      width: 20,
-      height: 20,
-      flexShrink: 0
+    '& .MuiCode-root': {
+      '& pre': {
+        margin: '4px 0 0 0',
+        borderRadius: '12px 12px 6px 12px',
+        borderColor: alpha(lightTheme.palette.primaryDark[600], 0.6),
+        '& code': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    '& .MuiCallout-icon-container': {
+      width: 26,
+      // to match text's line-height
+      height: 26,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      '& svg': {
+        width: 18,
+        height: 18
+      }
     },
-    '& > ul, & > p': {
+    '& ul, & p': {
       '&:last-child': {
         margin: 0
       }
@@ -338,7 +386,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`
       },
       '& a': {
@@ -356,7 +404,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`
       }
     },
@@ -367,7 +415,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`
       },
       '& a': {
@@ -385,7 +433,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`
       },
       '& a': {
@@ -397,47 +445,6 @@ const Root = styled('div')(({
       }
     }
   },
-  '& a[target="_blank"]::after': {
-    content: '""',
-    maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
-    display: 'inline-flex',
-    width: '1em',
-    height: '1em',
-    color: 'inherit',
-    backgroundColor: 'currentColor',
-    transform: 'translate(0, 2px)',
-    transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)',
-    // bounce effect
-    opacity: 0.8
-  },
-  '& a[target="_blank"]:hover::after': {
-    opacity: 1,
-    transform: 'translate(1px, 0)'
-  },
-  '& a.remove-link-arrow::after': {
-    // Allows to remove link arrows for images
-    display: 'none'
-  },
-  '& .Ad-root a::after': {
-    // Remove link arrow for ads
-    display: 'none'
-  },
-  '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-    // Style taken from the Link component
-    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
-    fontWeight: theme.typography.fontWeightMedium,
-    textDecoration: 'underline',
-    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
-    '&:hover': {
-      textDecorationColor: 'inherit'
-    }
-  },
-  '& a code': {
-    color: darken(lightTheme.palette.primary.main, 0.04)
-  },
-  '& a:not(.title-link-to-anchor) code': {
-    color: darken(lightTheme.palette.primary.main, 0.2)
-  },
   '& img, & video': {
     // Use !important so that inline style on <img> or <video> can't win.
     // This avoid horizontal overflows on mobile.
@@ -665,24 +672,28 @@ const Root = styled('div')(({
     '& hr': {
       backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
-    '& h1, & h2, & h3, & h4, & h5': {
-      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`
+    '& a': {
+      color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`
     },
-    '& p, & ul, & ol': {
-      color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
+    '& a code': {
+      color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`
     },
-    '& h1, & h2, & h3, & h4': {
-      '&:hover .anchor-icon, & .comment-link': {
+    '& h1, & h2, & h3, & h4, & h5': {
+      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+      '& .anchor-icon, & .comment-link': {
         color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
         borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
         backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
         '&:hover': {
+          color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
           borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
-          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
-          color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`
+          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6)
         }
       }
     },
+    '& p, & ul, & ol': {
+      color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
+    },
     '& h1 code, & h2 code, & h3 code': {
       color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`
     },
@@ -716,8 +727,7 @@ const Root = styled('div')(({
     },
     '& .MuiCallout-root': {
       borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
-      '& > code': {
-        height: 'fit-content',
+      '& code': {
         backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
         borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`
       },
@@ -728,7 +738,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`
         },
         '& a': {
@@ -742,7 +752,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
         }
       },
@@ -753,7 +763,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`
         },
         '& a': {
@@ -767,7 +777,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
         },
         '& a': {
@@ -775,12 +785,6 @@ const Root = styled('div')(({
         }
       }
     },
-    '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`
-    },
-    '& a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`
-    },
     '& kbd.key': {
       color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
       backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,

package/branding/brandingTheme.js

@@ -130,7 +130,7 @@ export const getDesignTokens = mode => ({
         tertiary: grey[700]
       }),
       ...(mode === 'dark' && {
-        primary: '#fff',
+        primary: 'hsl(0, 0%, 100%)',
         secondary: grey[400],
         tertiary: grey[500]
       })
@@ -264,10 +264,10 @@ export const getDesignTokens = mode => ({
    *   ...theme.vars ? {
    *     color: theme.vars.palette.primary.main,
    *     [theme.getColorScheme('dark')]: {
-   *       color: '#fff',
+   *       color: 'hsl(0, 0%, 100%)',
    *     }
    *   } : {
-   *     color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
+   *     color: theme.palette.mode === 'dark' ? 'hsl(0, 0%, 100%)' : theme.palette.primary.main,
    *   }
    * }
    *
@@ -275,7 +275,7 @@ export const getDesignTokens = mode => ({
    * {
    *   color: (theme.vars || theme).palette.primary.main,
    *   ...theme.applyDarkStyles({
-   *     color: '#fff',
+   *     color: 'hsl(0, 0%, 100%)',
    *   }),
    * }
    *
@@ -491,7 +491,7 @@ export function getThemedComponents() {
               color: (theme.vars || theme).palette.text.primary,
               backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.grey[50]
               },
@@ -527,7 +527,7 @@ export function getThemedComponents() {
               })
             }),
             ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
-              color: '#fff',
+              color: 'hsl(0, 0%, 100%)',
               textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primary[500],
               backgroundImage: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
@@ -732,7 +732,7 @@ export function getThemedComponents() {
             color: (theme.vars || theme).palette.primary.main,
             backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
             '&:hover': {
               borderColor: (theme.vars || theme).palette.grey[300],
               background: (theme.vars || theme).palette.grey[50]
@@ -757,7 +757,7 @@ export function getThemedComponents() {
             color: (theme.vars || theme).palette.text.secondary,
             backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
             '&:hover': {
               color: (theme.vars || theme).palette.text.primary,
               borderColor: (theme.vars || theme).palette.grey[300],
@@ -858,7 +858,7 @@ export function getThemedComponents() {
           }) => ({
             display: 'inline-flex',
             alignItems: 'center',
-            fontWeight: theme.typography.fontWeightSemiBold,
+            fontWeight: theme.typography.fontWeightMedium,
             '&.MuiTypography-body1 > svg': {
               marginTop: 2
             },
@@ -957,7 +957,7 @@ export function getThemedComponents() {
                   backgroundColor: (theme.vars || theme).palette.primary[100]
                 },
                 ...theme.applyDarkStyles({
-                  color: '#fff',
+                  color: 'hsl(0, 0%, 100%)',
                   backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600]
@@ -1009,7 +1009,7 @@ export function getThemedComponents() {
                 color: (theme.vars || theme).palette.warning[900],
                 backgroundColor: (theme.vars || theme).palette.warning[100],
                 ...theme.applyDarkStyles({
-                  color: '#fff',
+                  color: 'hsl(0, 0%, 100%)',
                   backgroundColor: (theme.vars || theme).palette.warning[900]
                 })
               }),
@@ -1017,7 +1017,7 @@ export function getThemedComponents() {
                 color: (theme.vars || theme).palette.success[900],
                 backgroundColor: (theme.vars || theme).palette.success[100],
                 ...theme.applyDarkStyles({
-                  color: '#fff',
+                  color: 'hsl(0, 0%, 100%)',
                   backgroundColor: (theme.vars || theme).palette.success[900]
                 })
               })
@@ -1062,7 +1062,7 @@ export function getThemedComponents() {
               backgroundColor: alpha(theme.palette.primaryDark[700], 0.4)
             },
             '&.Mui-selected': {
-              color: '#fff',
+              color: 'hsl(0, 0%, 100%)',
               borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
               backgroundColor: (theme.vars || theme).palette.primaryDark[700],
               '&:hover': {
@@ -1094,7 +1094,7 @@ export function getThemedComponents() {
             ownerState
           }) => [{
             backgroundImage: 'none',
-            backgroundColor: '#fff',
+            backgroundColor: 'hsl(0, 0%, 100%)',
             '&[href]': {
               textDecorationLine: 'none'
             },
@@ -1106,7 +1106,7 @@ export function getThemedComponents() {
               borderColor: (theme.vars || theme).palette.grey[100],
               '&[href]': {
                 textDecorationLine: 'none',
-                boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `hsl(0, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   borderColor: (theme.vars || theme).palette.primary[200],
                   boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`
@@ -1129,8 +1129,7 @@ export function getThemedComponents() {
               borderColor: (theme.vars || theme).palette.primaryDark[700],
               backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
               '&[href]': {
-                textDecorationLine: 'none',
-                boxShadow: `${alpha(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
                   borderColor: alpha(theme.palette.primary[600], 0.5),
                   boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`
@@ -1168,7 +1167,7 @@ export function getThemedComponents() {
           root: ({
             theme
           }) => ({
-            backgroundColor: '#fff',
+            backgroundColor: 'hsl(0, 0%, 100%)',
             ...theme.applyDarkStyles({
               backgroundColor: (theme.vars || theme).palette.primaryDark[900]
             })
@@ -1239,7 +1238,7 @@ export function getThemedComponents() {
             '& .MuiSwitch-switchBase': {
               '&.Mui-checked': {
                 transform: 'translateX(11px)',
-                color: '#fff'
+                color: 'hsl(0, 0%, 100%)'
               }
             }
           },
@@ -1247,7 +1246,7 @@ export function getThemedComponents() {
             height: 20,
             width: 20,
             padding: 0,
-            color: '#fff',
+            color: 'hsl(0, 0%, 100%)',
             '&.Mui-checked + .MuiSwitch-track': {
               opacity: 1
             }
@@ -1275,7 +1274,7 @@ export function getThemedComponents() {
             theme
           }) => ({
             '& .MuiSnackbarContent-root': {
-              backgroundColor: '#FFF',
+              backgroundColor: 'hsl(0, 0%, 100%)',
               color: (theme.vars || theme).palette.text.primary,
               fontWeight: theme.typography.fontWeightMedium,
               border: `1px solid ${(theme.vars || theme).palette.divider}`,

package/node/Link/Link.js

@@ -69,8 +69,6 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     noLinkStyle,
     prefetch,
     replace,
-    role,
-    // Link don't have roles.
     scroll,
     shallow,
     ...other