[docs-infra] Update branding theme colors to the HSL notation (#41738)

mui · Apr 3, 2024 · e1d7fda · e1d7fda
1 parent 79094e8
commit e1d7fda
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 108 deletions.
diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -34,10 +34,9 @@ export default function TableOfContentsBanner() {
         (theme) =>
           theme.applyDarkStyles({
             backgroundColor: alpha(theme.palette.primary[900], 0.2),
-            borderColor: (theme.vars || theme).palette.divider,
             '&:hover, &:focus-visible': {
               backgroundColor: alpha(theme.palette.primary[900], 0.4),
-              borderColor: (theme.vars || theme).palette.primaryDark[500],
+              borderColor: (theme.vars || theme).palette.primary[900],
             },
           }),
       ]}

diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
   ...theme.typography.caption,
   color: (theme.vars || theme).palette.text.primary,
   '& pre': {
-    backgroundColor: '#0F1924', // 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.
+    backgroundColor: 'hsl(210, 35%, 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: '#f8f8f2', // fallback color until Prism's theme is loaded
     overflow: 'auto',
     margin: 0,

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -115,13 +115,12 @@ const StyledAppBar = styled(AppBar, {
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
     borderStyle: 'solid',
-    borderColor: (theme.vars || theme).palette.grey[100],
+    borderColor: (theme.vars || theme).palette.divider,
     borderWidth: 0,
     borderBottomWidth: 'thin',
     backgroundColor: 'rgba(255,255,255,0.8)',
     color: (theme.vars || theme).palette.grey[800],
     ...theme.applyDarkStyles({
-      borderColor: alpha(theme.palette.primary[100], 0.08),
       backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
       color: (theme.vars || theme).palette.grey[500],
     }),
@@ -205,7 +204,7 @@ export default function AppFrame(props) {
             </Box>
           </NextLink>
           <GrowingDiv />
-          <Stack direction="row" spacing="10px">
+          <Stack direction="row" spacing={1} useFlexGap>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -54,10 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [
     cursor: 'pointer',
     transitionProperty: 'all',
     transitionDuration: '150ms',
-    boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
-      theme.palette.grey[100],
-      0.6,
-    )}`,
+    boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
     '&:hover': {
       background: (theme.vars || theme).palette.grey[100],
       borderColor: (theme.vars || theme).palette.grey[300],
@@ -70,9 +67,7 @@ const SearchButton = styled('button')(({ theme }) => [
   theme.applyDarkStyles({
     backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
     borderColor: (theme.vars || theme).palette.primaryDark[700],
-    boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${
-      (theme.vars || theme).palette.common.black
-    }`,
+    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': {
       background: (theme.vars || theme).palette.primaryDark[700],
       borderColor: (theme.vars || theme).palette.primaryDark[600],

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -218,6 +218,7 @@ const DemoRootMaterial = styled('div', {
     border: `1px solid ${(theme.vars || theme).palette.divider}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
+    borderBottomWidth: 0,
     ...theme.applyDarkStyles({
       backgroundColor: alpha(theme.palette.primaryDark[700], 0.1),
     }),

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -16,7 +16,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'min(68vh, 1000px)',
       overflow: 'auto',
       marginTop: -1,
-      backgroundColor: '#0F1924', // 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.
+      backgroundColor: 'hsl(210, 35%, 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.
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {

diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
@@ -17,7 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({
   border: '1px solid',
   borderColor: (theme.vars || theme).palette.divider,
   transition: theme.transitions.create(['color', 'border-color']),
-  boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 1px 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: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
   '&:hover': {
     backgroundColor: (theme.vars || theme).palette.grey[50],
   },
@@ -29,10 +29,10 @@ const NativeLink = styled('a')(({ theme }) => ({
     display: 'inline-block',
   },
   ...theme.applyDarkStyles({
-    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.15)} 0 1px 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`,
     '&:hover': {
       backgroundColor: (theme.vars || theme).palette.primaryDark[800],
-      borderColor: (theme.vars || theme).palette.primaryDark[600],
+      borderColor: (theme.vars || theme).palette.primary[900],
     },
   }),
 }));

diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
@@ -25,6 +25,7 @@ export default function EditPage(props) {
       component="a"
       size="small"
       variant="outlined"
+      color="secondary"
       startIcon={<GitHubIcon sx={{ mr: 0.5 }} />}
       href={
         userLanguage === 'en'

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -24,8 +24,8 @@ const Root = styled('div')(
       lineHeight: 1.5, // Developers like when the code is dense.
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: '#0F1924', // 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: '#f8f8f2',
+      backgroundColor: 'hsl(210, 35%, 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',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
@@ -344,7 +344,7 @@ const Root = styled('div')(
         },
       },
       '&.MuiCallout-info': {
-        color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`,
+        color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
         borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
         '& strong': {
@@ -375,7 +375,7 @@ const Root = styled('div')(
       '&.MuiCallout-warning': {
         color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
         backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
-        borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+        borderColor: alpha(lightTheme.palette.warning[700], 0.15),
         '& strong': {
           color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
         },
@@ -540,7 +540,7 @@ const Root = styled('div')(
       fontWeight: 500,
       borderRadius: 6,
       border: 'none',
-      backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
+      backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
       color: '#FFF',
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
@@ -721,8 +721,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
-          backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
-          borderColor: alpha(darkTheme.palette.error[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+          borderColor: alpha(darkTheme.palette.error[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
           },
@@ -734,9 +734,9 @@ const Root = styled('div')(
           },
         },
         '&.MuiCallout-info': {
-          color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`,
-          backgroundColor: alpha(darkTheme.palette.grey[700], 0.2),
-          borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`,
+          color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+          backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+          borderColor: alpha(darkTheme.palette.grey[800], 0.5),
           '& strong': {
             color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
           },
@@ -746,8 +746,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-success': {
           color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
-          backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
-          borderColor: alpha(lightTheme.palette.success[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+          borderColor: alpha(lightTheme.palette.success[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
           },
@@ -760,8 +760,8 @@ const Root = styled('div')(
         },
         '&.MuiCallout-warning': {
           color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-          backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
-          borderColor: alpha(darkTheme.palette.warning[600], 0.3),
+          backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+          borderColor: alpha(darkTheme.palette.warning[400], 0.1),
           '& strong': {
             color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
           },

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
@@ -205,7 +205,7 @@ export default function ThemeViewer({
       sx={{
         color: '#FFF',
         p: 1.5,
-        bgcolor: '#0F1924', // one-off code container color
+        bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color
         borderRadius: 3,
         border: `1px solid ${blueDark[700]}`,
       }}

diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx
@@ -79,7 +79,7 @@ export function InfoCard(props: InfoCardProps) {
         height: '100%',
         background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
         ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
+          bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
           background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
           borderColor: 'primaryDark.700',
         }),