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

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.10",
+  "version": "6.0.0-alpha.12",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -23,12 +23,12 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^1.0.4"
+    "@mui/internal-markdown": "^1.0.6"
   },
   "peerDependencies": {
     "@mui/base": "*",