[website] Improve the footer's chip contrast (mui#41209)

mnajdova · Mar 8, 2024 · 4beabf6 · 4beabf6
1 parent 56ac653
commit 4beabf6
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 30 deletions.
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -292,6 +292,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                     display: 'flex',
                     flexDirection: 'column',
                     position: 'relative',
+                    borderColor: 'grey.200',
                     boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
                     '&:focus-within': {
                       '& a': {

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Head from 'docs/src/modules/components/Head';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import Section from 'docs/src/layouts/Section';
+import AppFooter from 'docs/src/layouts/AppFooter';
+
+export default function BrandingThemeTest() {
+  return (
+    <BrandingCssVarsProvider>
+      <Head title="MUI Branding Theme Test" description="" />
+      <AppHeader gitHubRepository="https://github.com/mui/material-ui" />
+      <main id="main-content">
+        <Section>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content' }}>
+            <Chip size="small" variant="outlined" color="primary" label="Hiring" />
+            <Chip size="small" variant="outlined" color="info" label="Hiring" />
+            <Chip size="small" variant="outlined" color="error" label="Hiring" />
+            <Chip size="small" variant="outlined" color="warning" label="Hiring" />
+            <Chip size="small" variant="outlined" color="success" label="Hiring" />
+          </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained">This button</Button>
+            <Button variant="outlined">This button</Button>
+            <Button variant="text">This button</Button>
+          </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained" size="small" color="primary">
+              This button
+            </Button>
+            <Button variant="contained" size="small" color="secondary">
+              This button
+            </Button>
+            <Button variant="outlined" size="small" color="primary">
+              This button
+            </Button>
+            <Button variant="outlined" size="small" color="secondary">
+              This button
+            </Button>
+            <Button variant="text" size="small" color="info">
+              This button
+            </Button>
+          </Stack>
+        </Section>
+        <Divider />
+      </main>
+      <AppFooter stackOverflowUrl="https://stackoverflow.com/questions/tagged/material-ui" />
+    </BrandingCssVarsProvider>
+  );
+}
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
@@ -5,12 +5,12 @@ import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
 import XIcon from '@mui/icons-material/X';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import RssFeedIcon from '@mui/icons-material/RssFeed';
-import { alpha } from '@mui/material/styles';
 import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
 import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
 import ROUTES from 'docs/src/route';
@@ -142,36 +142,26 @@ export default function AppFooter(props: AppFooterProps) {
             <Link prefetch={false} href={ROUTES.vision}>
               Vision
             </Link>
-            <Box sx={{ display: 'flex', alignItems: 'end' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <Link prefetch={false} href={ROUTES.careers}>
                 Careers{' '}
               </Link>
-              <Box
+              <Chip
+                size="small"
+                variant="outlined"
+                color="success"
+                label="Hiring"
                 sx={(theme) => ({
-                  px: 0.5,
-                  py: 0.1,
-                  ml: 1,
-                  mb: '1px',
-                  position: 'relative',
-                  top: theme.spacing(-0.5),
-                  fontSize: theme.typography.pxToRem(10),
-                  fontWeight: 'Bold',
-                  textTransform: 'uppercase',
-                  letterSpacing: '.04rem',
-                  borderRadius: 8,
-                  border: 1,
-                  borderColor: 'success.300',
-                  bgcolor: alpha(theme.palette.success[100], 0.4),
-                  color: 'success.700',
-                  ...theme.applyDarkStyles({
-                    borderColor: alpha(theme.palette.success[800], 0.5),
-                    bgcolor: alpha(theme.palette.success[800], 0.2),
-                    color: 'success.200',
-                  }),
+                  height: 18,
+                  '& .MuiChip-label': {
+                    px: '4px',
+                    fontSize: theme.typography.pxToRem(10),
+                    fontWeight: 'bold',
+                    textTransform: 'uppercase',
+                    letterSpacing: '.04rem',
+                  },
                 })}
-              >
-                Hiring
-              </Box>
+              />
             </Box>
             <Link prefetch={false} href={ROUTES.support}>
               Support

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -902,9 +902,9 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.grey[900],
                 borderColor: (theme.vars || theme).palette.grey[200],
                 ...theme.applyDarkStyles({
-                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
                   color: (theme.vars || theme).palette.grey[300],
-                  borderColor: alpha(theme.palette.primaryDark[500], 0.5),
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
                 }),
               }),
             ...(variant === 'outlined' &&
@@ -921,10 +921,11 @@ export function getThemedComponents(): ThemeOptions {
               color === 'success' && {
                 borderColor: (theme.vars || theme).palette.success[100],
                 backgroundColor: (theme.vars || theme).palette.success[50],
+                color: (theme.vars || theme).palette.success[900],
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.success[300],
-                  borderColor: alpha(theme.palette.success[300], 0.3),
-                  background: alpha(theme.palette.success[800], 0.3),
+                  borderColor: alpha(theme.palette.success[300], 0.2),
+                  background: alpha(theme.palette.success[800], 0.2),
                 }),
               }),
             ...(variant === 'filled' && {