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

package/node/MarkdownElement/MarkdownElement.js

@@ -19,8 +19,8 @@ const Root = (0, _styles.styled)('div')(({
   var _theme$shape$borderRa, _theme$shape, _theme$shape$borderRa2, _theme$shape2, _theme$shape$borderRa3, _theme$shape3;
   return {
     ..._branding.brandingLightTheme.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, ${_branding.brandingLightTheme.palette.text.primary})`,
     '& :focus-visible': {
       outline: `3px solid ${(0, _styles.alpha)(_branding.brandingLightTheme.palette.primary[500], 0.5)}`,
@@ -35,7 +35,7 @@ const Root = (0, _styles.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',
@@ -134,6 +134,44 @@ const Root = (0, _styles.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, ${_branding.brandingLightTheme.palette.primary[600]})`,
+      fontWeight: theme.typography.fontWeightMedium,
+      textDecoration: 'underline',
+      textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primary.main, 0.4),
+      '&:hover': {
+        textDecorationColor: 'inherit'
+      }
+    },
+    '& a code': {
+      color: (0, _styles.darken)(_branding.brandingLightTheme.palette.primary.main, 0.2)
+    },
     '& h1, & h2, & h3, & h4': {
       display: 'flex',
       alignItems: 'center',
@@ -147,6 +185,8 @@ const Root = (0, _styles.styled)('div')(({
       '& .title-link-to-anchor': {
         color: 'inherit',
         textDecoration: 'none',
+        boxShadow: 'none',
+        fontWeight: 'inherit',
         position: 'relative',
         display: 'flex',
         alignItems: 'center',
@@ -158,12 +198,6 @@ const Root = (0, _styles.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',
@@ -297,44 +331,58 @@ const Root = (0, _styles.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, ${_branding.brandingLightTheme.palette.text.secondary})`,
       borderColor: `var(--muidocs-palette-grey-100, ${_branding.brandingLightTheme.palette.grey[100]})`,
       borderRadius: `var(--muidocs-shape-borderRadius, ${(_theme$shape$borderRa2 = (_theme$shape2 = theme.shape) == null ? void 0 : _theme$shape2.borderRadius) != null ? _theme$shape$borderRa2 : _branding.brandingLightTheme.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, ${_branding.brandingLightTheme.palette.grey[100]})`,
         borderColor: `var(--muidocs-palette-grey-300, ${_branding.brandingLightTheme.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: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[600], 0.6),
+          '& code': {
+            backgroundColor: 'transparent'
+          }
+        }
       },
-      '& > ul, & > p': {
+      '& .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': {
         '&:last-child': {
           margin: 0
         }
@@ -349,7 +397,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-error-800, ${_branding.brandingLightTheme.palette.error[800]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-error-500, ${_branding.brandingLightTheme.palette.error[600]})`
         },
         '& a': {
@@ -367,7 +415,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-primary-800, ${_branding.brandingLightTheme.palette.primary[800]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-grey-600, ${_branding.brandingLightTheme.palette.grey[600]})`
         }
       },
@@ -378,7 +426,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-success-900, ${_branding.brandingLightTheme.palette.success[900]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-success-600, ${_branding.brandingLightTheme.palette.success[600]})`
         },
         '& a': {
@@ -396,7 +444,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-warning-800, ${_branding.brandingLightTheme.palette.warning[800]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-warning-600, ${_branding.brandingLightTheme.palette.warning[600]})`
         },
         '& a': {
@@ -408,47 +456,6 @@ const Root = (0, _styles.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, ${_branding.brandingLightTheme.palette.primary[600]})`,
-      fontWeight: theme.typography.fontWeightMedium,
-      textDecoration: 'underline',
-      textDecorationColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primary.main, 0.4),
-      '&:hover': {
-        textDecorationColor: 'inherit'
-      }
-    },
-    '& a code': {
-      color: (0, _styles.darken)(_branding.brandingLightTheme.palette.primary.main, 0.04)
-    },
-    '& a:not(.title-link-to-anchor) code': {
-      color: (0, _styles.darken)(_branding.brandingLightTheme.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.
@@ -677,24 +684,28 @@ const Root = (0, _styles.styled)('div')(({
     '& hr': {
       backgroundColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`
     },
-    '& h1, & h2, & h3, & h4, & h5': {
-      color: `var(--muidocs-palette-grey-50, ${_branding.brandingDarkTheme.palette.grey[50]})`
+    '& a': {
+      color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primary[300]})`
     },
-    '& p, & ul, & ol': {
-      color: `var(--muidocs-palette-grey-400, ${_branding.brandingDarkTheme.palette.grey[400]})`
+    '& a code': {
+      color: `var(--muidocs-palette-primary-light, ${_branding.brandingDarkTheme.palette.primary.light})`
     },
-    '& h1, & h2, & h3, & h4': {
-      '&:hover .anchor-icon, & .comment-link': {
+    '& h1, & h2, & h3, & h4, & h5': {
+      color: `var(--muidocs-palette-grey-50, ${_branding.brandingDarkTheme.palette.grey[50]})`,
+      '& .anchor-icon, & .comment-link': {
         color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primaryDark[300]})`,
         borderColor: `var(--muidocs-palette-divider, ${_branding.brandingDarkTheme.palette.divider})`,
         backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primaryDark[700], 0.5),
         '&:hover': {
+          color: `var(--muidocs-palette-primary-100, ${_branding.brandingDarkTheme.palette.primary[100]})`,
           borderColor: `var(--muidocs-palette-primary-900, ${_branding.brandingDarkTheme.palette.primary[900]})`,
-          backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primary[900], 0.6),
-          color: `var(--muidocs-palette-primary-100, ${_branding.brandingDarkTheme.palette.primary[100]})`
+          backgroundColor: (0, _styles.alpha)(_branding.brandingDarkTheme.palette.primary[900], 0.6)
         }
       }
     },
+    '& p, & ul, & ol': {
+      color: `var(--muidocs-palette-grey-400, ${_branding.brandingDarkTheme.palette.grey[400]})`
+    },
     '& h1 code, & h2 code, & h3 code': {
       color: `var(--muidocs-palette-grey-100, ${_branding.brandingDarkTheme.palette.grey[100]})`
     },
@@ -728,8 +739,7 @@ const Root = (0, _styles.styled)('div')(({
     },
     '& .MuiCallout-root': {
       borderColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingDarkTheme.palette.primaryDark[700]})`,
-      '& > code': {
-        height: 'fit-content',
+      '& code': {
         backgroundColor: `var(--muidocs-palette-primaryDark-600, ${_branding.brandingDarkTheme.palette.primaryDark[600]})`,
         borderColor: `var(--muidocs-palette-primaryDark-500, ${_branding.brandingDarkTheme.palette.primaryDark[500]})`
       },
@@ -740,7 +750,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-error-300, ${_branding.brandingDarkTheme.palette.error[300]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-error-500, ${_branding.brandingDarkTheme.palette.error[500]})`
         },
         '& a': {
@@ -754,7 +764,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-primary-200, ${_branding.brandingDarkTheme.palette.primary[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-grey-400, ${_branding.brandingDarkTheme.palette.grey[400]})`
         }
       },
@@ -765,7 +775,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-success-200, ${_branding.brandingDarkTheme.palette.success[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-success-500, ${_branding.brandingDarkTheme.palette.success[500]})`
         },
         '& a': {
@@ -779,7 +789,7 @@ const Root = (0, _styles.styled)('div')(({
         '& strong': {
           color: `var(--muidocs-palette-warning-200, ${_branding.brandingDarkTheme.palette.warning[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-warning-400, ${_branding.brandingDarkTheme.palette.warning[400]})`
         },
         '& a': {
@@ -787,12 +797,6 @@ const Root = (0, _styles.styled)('div')(({
         }
       }
     },
-    '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-300, ${_branding.brandingDarkTheme.palette.primary[300]})`
-    },
-    '& a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-light, ${_branding.brandingDarkTheme.palette.primary.light})`
-    },
     '& kbd.key': {
       color: `var(--muidocs-palette-text-primary, ${_branding.brandingDarkTheme.palette.text.primary})`,
       backgroundColor: `var(--muidocs-palette-primaryDark-800, ${_branding.brandingDarkTheme.palette.primaryDark[800]})`,

package/node/branding/brandingTheme.js

@@ -140,7 +140,7 @@ const getDesignTokens = mode => ({
         tertiary: grey[700]
       }),
       ...(mode === 'dark' && {
-        primary: '#fff',
+        primary: 'hsl(0, 0%, 100%)',
         secondary: grey[400],
         tertiary: grey[500]
       })
@@ -274,10 +274,10 @@ 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,
    *   }
    * }
    *
@@ -285,7 +285,7 @@ const getDesignTokens = mode => ({
    * {
    *   color: (theme.vars || theme).palette.primary.main,
    *   ...theme.applyDarkStyles({
-   *     color: '#fff',
+   *     color: 'hsl(0, 0%, 100%)',
    *   }),
    * }
    *
@@ -502,7 +502,7 @@ function getThemedComponents() {
               color: (theme.vars || theme).palette.text.primary,
               backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
               borderColor: (theme.vars || theme).palette.primaryDark[100],
-              boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+              boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
               '&:hover': {
                 backgroundColor: (theme.vars || theme).palette.grey[50]
               },
@@ -538,7 +538,7 @@ function getThemedComponents() {
               })
             }),
             ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && {
-              color: '#fff',
+              color: 'hsl(0, 0%, 100%)',
               textShadow: `0 1px 1px ${(0, _styles.alpha)(theme.palette.common.black, 0.6)}`,
               backgroundColor: (theme.vars || theme).palette.primary[500],
               backgroundImage: `linear-gradient(180deg, ${(0, _styles.alpha)(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`,
@@ -743,7 +743,7 @@ function getThemedComponents() {
             color: (theme.vars || theme).palette.primary.main,
             backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.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]
@@ -768,7 +768,7 @@ function getThemedComponents() {
             color: (theme.vars || theme).palette.text.secondary,
             backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[50], 0.1),
             border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
-            boxShadow: `#FFF 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+            boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${(0, _styles.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],
@@ -869,7 +869,7 @@ function getThemedComponents() {
           }) => ({
             display: 'inline-flex',
             alignItems: 'center',
-            fontWeight: theme.typography.fontWeightSemiBold,
+            fontWeight: theme.typography.fontWeightMedium,
             '&.MuiTypography-body1 > svg': {
               marginTop: 2
             },
@@ -968,7 +968,7 @@ function getThemedComponents() {
                   backgroundColor: (theme.vars || theme).palette.primary[100]
                 },
                 ...theme.applyDarkStyles({
-                  color: '#fff',
+                  color: 'hsl(0, 0%, 100%)',
                   backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.8),
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600]
@@ -1020,7 +1020,7 @@ 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]
                 })
               }),
@@ -1028,7 +1028,7 @@ 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]
                 })
               })
@@ -1073,7 +1073,7 @@ function getThemedComponents() {
               backgroundColor: (0, _styles.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': {
@@ -1105,7 +1105,7 @@ function getThemedComponents() {
             ownerState
           }) => [{
             backgroundImage: 'none',
-            backgroundColor: '#fff',
+            backgroundColor: 'hsl(0, 0%, 100%)',
             '&[href]': {
               textDecorationLine: 'none'
             },
@@ -1117,7 +1117,7 @@ function getThemedComponents() {
               borderColor: (theme.vars || theme).palette.grey[100],
               '&[href]': {
                 textDecorationLine: 'none',
-                boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.alpha)(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `hsl(0, 0%, 100%) 0 2px 0 inset, ${(0, _styles.alpha)(theme.palette.primary[100], 0.3)} 0 -2px 0 inset, ${(0, _styles.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]}`
@@ -1140,8 +1140,7 @@ function getThemedComponents() {
               borderColor: (theme.vars || theme).palette.primaryDark[700],
               backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.6),
               '&[href]': {
-                textDecorationLine: 'none',
-                boxShadow: `${(0, _styles.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: `${(0, _styles.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: (0, _styles.alpha)(theme.palette.primary[600], 0.5),
                   boxShadow: `0px 2px 8px ${(0, _styles.alpha)(theme.palette.primary[900], 0.6)}`
@@ -1179,7 +1178,7 @@ function getThemedComponents() {
           root: ({
             theme
           }) => ({
-            backgroundColor: '#fff',
+            backgroundColor: 'hsl(0, 0%, 100%)',
             ...theme.applyDarkStyles({
               backgroundColor: (theme.vars || theme).palette.primaryDark[900]
             })
@@ -1250,7 +1249,7 @@ function getThemedComponents() {
             '& .MuiSwitch-switchBase': {
               '&.Mui-checked': {
                 transform: 'translateX(11px)',
-                color: '#fff'
+                color: 'hsl(0, 0%, 100%)'
               }
             }
           },
@@ -1258,7 +1257,7 @@ function getThemedComponents() {
             height: 20,
             width: 20,
             padding: 0,
-            color: '#fff',
+            color: 'hsl(0, 0%, 100%)',
             '&.Mui-checked + .MuiSwitch-track': {
               opacity: 1
             }
@@ -1286,7 +1285,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.12",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -28,7 +28,7 @@
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^1.0.5"
+    "@mui/internal-markdown": "^1.0.6"
   },
   "peerDependencies": {
     "@mui/base": "*",