From da4546dc9a606800f898a24553d516997ca57be2 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 19 Jun 2024 15:35:16 -0300
Subject: [PATCH] [docs-infra] Add stray design polish (#42646)

---
 docs/src/components/about/OurValues.tsx       |  6 +-
 docs/src/components/careers/PerksBenefits.tsx | 57 +++++++++++--------
 docs/src/components/footer/EmailSubscribe.tsx | 18 +++---
 docs/src/components/home/DiamondSponsors.tsx  |  7 +--
 docs/src/components/home/GoldSponsors.tsx     |  4 +-
 docs/src/components/home/SponsorCard.tsx      | 20 ++-----
 .../src/modules/components/DiamondSponsors.js | 51 +++++++++--------
 .../mui-docs/src/branding/brandingTheme.ts    | 39 +++++++------
 8 files changed, 100 insertions(+), 102 deletions(-)

diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index a503455268348f..e56d7d74cccb6c 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -74,7 +74,7 @@ export default function OurValues() {
             <Paper
               variant="outlined"
               sx={(theme) => ({
-                p: 4,
+                p: 2.5,
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
@@ -110,14 +110,12 @@ export default function OurValues() {
                   variant="body2"
                   sx={[
                     {
-                      fontWeight: 'bold',
+                      fontWeight: 'semiBold',
                     },
                     (theme) => ({
                       mb: 0.5,
                       color: (theme.vars || theme).palette.text.primary,
                       '&::first-letter': {
-                        mr: 0.1,
-                        fontSize: theme.typography.pxToRem(16),
                         color: (theme.vars || theme).palette.primary.main,
                       },
                       ...theme.applyDarkStyles({
diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx
index 71c9aca45a4cd2..cfae97c1469373 100644
--- a/docs/src/components/careers/PerksBenefits.tsx
+++ b/docs/src/components/careers/PerksBenefits.tsx
@@ -19,16 +19,37 @@ const companyInfo = [
   },
   {
     title: 'Handbook',
-    description: 'Learn everything about how MUI as a company is run.',
+    description: 'Learn everything about how MUI as a company.',
     routeUrl: ROUTES.handbook,
   },
   {
     title: 'Blog',
-    description: 'Check behind-the-scenes and news about the company.',
+    description: 'Learn about our products and team.',
     routeUrl: ROUTES.blog,
   },
 ];
 
+interface CardContentBlockProps {
+  description: string;
+  title: string;
+}
+
+function CardContentBlock({ title, description }: CardContentBlockProps) {
+  return (
+    <React.Fragment>
+      <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
+        {title}
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
+        {description}
+      </Typography>
+      <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
+        Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+      </Typography>
+    </React.Fragment>
+  );
+}
+
 function RemoteAwardCard() {
   return (
     <Paper
@@ -36,13 +57,15 @@ function RemoteAwardCard() {
       href="/blog/remote-award-win-2024/"
       noLinkStyle
       variant="outlined"
-      sx={{ p: 2 }}
+      sx={{ p: 2, display: 'flex', flexDirection: 'column ' }}
     >
       <Box
         sx={{
           mb: 2,
           maxWidth: { xs: 315, sm: 325 },
           maxHeight: 315,
+          display: 'flex',
+          aspectRatio: '1 / 1',
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
@@ -68,17 +91,12 @@ function RemoteAwardCard() {
           ]}
         />
       </Box>
-      <div>
-        <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
-          Remote Excellence Awards
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-          Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
-        </Typography>
-        <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold' }}>
-          Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-        </Typography>
-      </div>
+      <Box sx={{ mt: 'auto' }}>
+        <CardContentBlock
+          title="Remote Excellence Awards"
+          description={`Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉`}
+        />
+      </Box>
     </Paper>
   );
 }
@@ -151,16 +169,7 @@ export default function PerksBenefits() {
                 variant="outlined"
                 sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }}
               >
-                <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
-                  {title}
-                </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-                  {description}
-                </Typography>
-                <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
+                <CardContentBlock title={title} description={description} />
               </Paper>
             ))}
           </Stack>
diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
index 66c1da6ac891af..c9c18b18e2fafa 100644
--- a/docs/src/components/footer/EmailSubscribe.tsx
+++ b/docs/src/components/footer/EmailSubscribe.tsx
@@ -87,12 +87,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
       </FormLabel>
       <Box
         sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', sm: 'row' },
           mt: 1,
-          gap: 1,
           width: { xs: '100%', sm: 'auto' },
           maxWidth: { xs: '100%', sm: 320 },
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: 1,
         }}
       >
         <InputBase
@@ -110,23 +110,22 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
               minWidth: 220,
               borderRadius: '8px',
               border: '1px solid',
-              borderColor: 'grey.200',
+              borderColor: 'grey.300',
               bgcolor: '#FFF',
               boxShadow: `inset 0 1px 2px ${
                 (theme.vars || theme).palette.grey[50]
               }, 0 2px .5px ${alpha(theme.palette.grey[100], 0.5)}`,
               '&:hover': {
-                borderColor: 'grey.300',
+                borderColor: 'grey.400',
                 boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[100]}`,
               },
               [`&.${inputBaseClasses.focused}`]: {
-                boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`,
+                boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`,
                 borderColor: 'primary.500',
               },
               [`& .${inputBaseClasses.input}`]: {
                 borderRadius: theme.shape.borderRadius,
-                py: 1,
-                px: 1.5,
+                px: 1,
               },
             }),
             (theme) =>
@@ -141,13 +140,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
                   boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
                 },
                 [`&.${inputBaseClasses.focused}`]: {
-                  boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`,
                   borderColor: 'primary.400',
                 },
               }),
           ]}
         />
-        <Button variant="outlined" disabled={form.status === 'loading'} type="submit">
+        <Button variant="outlined" size="small" disabled={form.status === 'loading'} type="submit">
           Subscribe
         </Button>
       </Box>
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 1f021988a58bda..244567b64636c6 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -18,8 +18,7 @@ const DIAMONDs = [
   {
     src: '/static/sponsors/doit-square.svg',
     name: 'Doit International',
-    description:
-      'Delivers technology and cloud expertise to buy, optimize and manage public cloud.',
+    description: 'Technology and cloud expertise to buy, optimize and manage public cloud.',
     href: 'https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage',
   },
   {
@@ -45,7 +44,7 @@ export default function DiamondSponsors() {
         variant="h6"
         sx={[
           {
-            fontWeight: 'bold',
+            fontWeight: 'semiBold',
           },
           (theme) => ({
             mt: 4,
@@ -97,7 +96,7 @@ export default function DiamondSponsors() {
                 <AddRounded />
               </IconButton>
               <div>
-                <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+                <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
                   Become our sponsor!
                 </Typography>
                 <Typography variant="body2" sx={{ color: 'text.secondary' }}>
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index c15cb20a07d179..fa78d71f64289c 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -78,7 +78,7 @@ export default function GoldSponsors() {
         variant="h6"
         sx={[
           {
-            fontWeight: 'bold',
+            fontWeight: 'semiBold',
           },
           (theme) => ({
             mt: 4,
@@ -129,7 +129,7 @@ export default function GoldSponsors() {
               <AddRounded />
             </IconButton>
             <div>
-              <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+              <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
                 Become a sponsor
               </Typography>
               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
diff --git a/docs/src/components/home/SponsorCard.tsx b/docs/src/components/home/SponsorCard.tsx
index fd31a9b4c3442a..291ad835d91eb2 100644
--- a/docs/src/components/home/SponsorCard.tsx
+++ b/docs/src/components/home/SponsorCard.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
-import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import { Link } from '@mui/docs/Link';
 
 export default function SponsorCard(props: {
@@ -39,15 +37,8 @@ export default function SponsorCard(props: {
       sx={{
         p: 2,
         display: 'flex',
+        gap: 2,
         height: '100%',
-        '& svg': {
-          transition: '0.2s',
-        },
-        '&:hover': {
-          '& svg': {
-            transform: 'translateY(-2px)',
-          },
-        },
       }}
     >
       <Avatar
@@ -55,15 +46,14 @@ export default function SponsorCard(props: {
         sx={{ borderRadius: '4px', width: logoSize, height: logoSize }}
         slotProps={{ img: { loading: 'lazy' } }}
       />
-      <Box sx={{ ml: 2 }}>
-        <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
-          {item.name}{' '}
-          <LaunchRounded color="primary" sx={{ fontSize: 14, verticalAlign: 'middle', ml: 0.5 }} />
+      <div>
+        <Typography variant="body2" sx={{ fontWeight: 'semiBold', mb: '2px' }}>
+          {item.name}
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {item.description}
         </Typography>
-      </Box>
+      </div>
     </Paper>
   );
 }
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 5f1998b88be5d9..817a4526e9003a 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import { Link } from '@mui/docs/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -13,26 +14,28 @@ const NativeLink = styled('a')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  borderRadius: 12,
-  border: '1px solid',
+  borderLeft: '1px solid',
+  borderRight: '1px solid',
+  borderBottom: 0,
   borderColor: (theme.vars || theme).palette.divider,
-  transition: theme.transitions.create(['color', 'border-color']),
-  boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
+  transition: theme.transitions.create(['background-color']),
+  '&:first-of-type': {
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderRadius: '12px 12px 0 0',
+  },
   '&:hover': {
     backgroundColor: (theme.vars || theme).palette.grey[50],
   },
   '&:focus-visible': {
     outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
-    outlineOffset: '2px',
+    outlineOffset: '-3px',
   },
   '& img': {
     display: 'inline-block',
   },
   ...theme.applyDarkStyles({
-    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`,
     '&:hover': {
-      backgroundColor: alpha(theme.palette.primary[800], 0.2),
-      borderColor: (theme.vars || theme).palette.primary[900],
+      backgroundColor: alpha(theme.palette.primary[900], 0.1),
     },
   }),
 }));
@@ -41,7 +44,7 @@ export default function DiamondSponsors() {
   const t = useTranslate();
 
   return (
-    <Stack direction="column" spacing={1} useFlexGap sx={{ mt: 2 }}>
+    <Stack direction="column" sx={{ mt: 2 }}>
       <NativeLink
         data-ga-event-category="sponsor"
         data-ga-event-action="docs-premium"
@@ -68,6 +71,7 @@ export default function DiamondSponsors() {
           ]}
         />
       </NativeLink>
+      <Divider />
       <NativeLink
         data-ga-event-category="sponsor"
         data-ga-event-action="docs-premium"
@@ -94,6 +98,7 @@ export default function DiamondSponsors() {
           ]}
         />
       </NativeLink>
+      <Divider />
       <NativeLink
         data-ga-event-category="sponsor"
         data-ga-event-action="docs-premium"
@@ -123,36 +128,36 @@ export default function DiamondSponsors() {
       <Link
         href="/material-ui/discover-more/backers/#diamond-sponsors"
         sx={(theme) => ({
-          p: 1.5,
+          height: 45,
           width: '100%',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          borderRadius: 1,
           border: '1px dashed',
-          transition: theme.transitions.create(['color', 'border-color', 'background-color']),
-          backgroundColor: alpha(theme.palette.grey[50], 0.5),
           borderColor: (theme.vars || theme).palette.grey[300],
+          borderRadius: '0 0 12px 12px',
+          backgroundColor: alpha(theme.palette.primary[50], 0.4),
+          transition: theme.transitions.create(['color', 'background-color']),
           '&:hover': {
-            backgroundColor: alpha(theme.palette.primary[100], 0.5),
-            borderColor: (theme.vars || theme).palette.primary[300],
+            backgroundColor: (theme.vars || theme).palette.primary[50],
+            borderColor: (theme.vars || theme).palette.primary[200],
+          },
+          '&:focus-visible': {
+            outlineOffset: '-3px',
           },
           ...theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-            borderColor: (theme.vars || theme).palette.primaryDark[700],
+            backgroundColor: alpha(theme.palette.primaryDark[700], 0.3),
+            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
             '&:hover': {
-              backgroundColor: alpha(theme.palette.primary[700], 0.2),
-              borderColor: (theme.vars || theme).palette.primary[800],
+              backgroundColor: alpha(theme.palette.primary[700], 0.1),
+              borderColor: alpha(theme.palette.primary[600], 0.4),
             },
           }),
         })}
       >
-        <Typography variant="caption" sx={{ fontWeight: 'semiBold', textAlign: 'center' }}>
+        <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
           {t('becomeADiamondSponsor')}
         </Typography>
-        {/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
-              {t('diamondSponsorVacancies')}
-            </Typography> */}
       </Link>
     </Stack>
   );
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index e759d2f68da2a6..6345977d7c31c8 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -226,7 +226,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
           tertiary: grey[700],
         }),
         ...(mode === 'dark' && {
-          primary: '#fff',
+          primary: 'hsl(0, 0%, 100%)',
           secondary: grey[400],
           tertiary: grey[500],
         }),
@@ -364,10 +364,10 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
      *   ...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,
      *   }
      * }
      *
@@ -375,7 +375,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
      * {
      *   color: (theme.vars || theme).palette.primary.main,
      *   ...theme.applyDarkStyles({
-     *     color: '#fff',
+     *     color: 'hsl(0, 0%, 100%)',
      *   }),
      * }
      *
@@ -568,7 +568,7 @@ export function getThemedComponents(): ThemeOptions {
                 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],
                 },
@@ -606,7 +606,7 @@ export function getThemedComponents(): ThemeOptions {
               }),
             ...(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%)`,
@@ -809,7 +809,7 @@ export function getThemedComponents(): ThemeOptions {
                 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],
@@ -834,7 +834,7 @@ export function getThemedComponents(): ThemeOptions {
                 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],
@@ -1031,7 +1031,7 @@ export function getThemedComponents(): ThemeOptions {
                   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],
@@ -1083,7 +1083,7 @@ export function getThemedComponents(): ThemeOptions {
                 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],
                 }),
               }),
@@ -1091,7 +1091,7 @@ export function getThemedComponents(): ThemeOptions {
                 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],
                 }),
               }),
@@ -1136,7 +1136,7 @@ export function getThemedComponents(): ThemeOptions {
                 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': {
@@ -1167,7 +1167,7 @@ export function getThemedComponents(): ThemeOptions {
           root: ({ theme, ownerState }) => [
             {
               backgroundImage: 'none',
-              backgroundColor: '#fff',
+              backgroundColor: 'hsl(0, 0%, 100%)',
               '&[href]': {
                 textDecorationLine: 'none',
               },
@@ -1179,7 +1179,7 @@ export function getThemedComponents(): ThemeOptions {
                 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]}`,
@@ -1203,8 +1203,7 @@ export function getThemedComponents(): ThemeOptions {
                 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)}`,
@@ -1238,7 +1237,7 @@ export function getThemedComponents(): ThemeOptions {
       MuiToggleButtonGroup: {
         styleOverrides: {
           root: ({ theme }) => ({
-            backgroundColor: '#fff',
+            backgroundColor: 'hsl(0, 0%, 100%)',
             ...theme.applyDarkStyles({
               backgroundColor: (theme.vars || theme).palette.primaryDark[900],
             }),
@@ -1307,7 +1306,7 @@ export function getThemedComponents(): ThemeOptions {
             '& .MuiSwitch-switchBase': {
               '&.Mui-checked': {
                 transform: 'translateX(11px)',
-                color: '#fff',
+                color: 'hsl(0, 0%, 100%)',
               },
             },
           },
@@ -1315,7 +1314,7 @@ export function getThemedComponents(): ThemeOptions {
             height: 20,
             width: 20,
             padding: 0,
-            color: '#fff',
+            color: 'hsl(0, 0%, 100%)',
             '&.Mui-checked + .MuiSwitch-track': {
               opacity: 1,
             },
@@ -1339,7 +1338,7 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           root: ({ 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}`,