From aa0a31eddc5fad6cded91347176eb32e0de6c351 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 30 May 2024 17:21:20 -0300
Subject: [PATCH] stray style refinements here and there

---
 .../website/branding-theme-test.tsx           |  3 ++
 .../src/modules/components/DiamondSponsors.js |  2 +-
 .../src/MarkdownElement/MarkdownElement.tsx   |  2 +-
 .../mui-docs/src/branding/brandingTheme.ts    | 49 +++++++++++--------
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index 67140e15e00d5b..d6f8caaa09e199 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -52,6 +52,9 @@ export default function BrandingThemeTest() {
             <IconButton color="info">
               <GitHubIcon fontSize="small" />
             </IconButton>
+            <IconButton>
+              <GitHubIcon fontSize="small" />
+            </IconButton>
           </Stack>
         </Section>
         <Divider />
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 4461e562ee4742..9118ef073233fe 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -31,7 +31,7 @@ const NativeLink = styled('a')(({ theme }) => ({
   ...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: (theme.vars || theme).palette.primaryDark[800],
+      backgroundColor: alpha(theme.palette.primary[800], 0.2),
       borderColor: (theme.vars || theme).palette.primary[900],
     },
   }),
diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
index 3b1bcdbd0cea6f..6c50d081be28df 100644
--- a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
+++ b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -549,7 +549,7 @@ const Root = styled('div')(
       border: '1px solid',
       borderColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
       backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
-      color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+      color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
       }),
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index fc9410d261540a..554f70b13a5007 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -530,7 +530,7 @@ export function getThemedComponents(): ThemeOptions {
               ...theme.typography.body1,
               lineHeight: 21 / 16,
               padding: theme.spacing('8px', '10px', '10px', '12px'),
-              fontWeight: theme.typography.fontWeightSemiBold,
+              fontWeight: theme.typography.fontWeightMedium,
               borderRadius: 10,
               '& > span': { transition: '0.2s', marginLeft: 4 },
               '&:hover > span': { transform: 'translateX(2px)' },
@@ -538,16 +538,16 @@ export function getThemedComponents(): ThemeOptions {
             ...(ownerState.size === 'medium' && {
               fontSize: defaultTheme.typography.pxToRem(15),
               padding: theme.spacing('8px', '12px', '8px', '14px'),
-              fontWeight: theme.typography.fontWeightSemiBold,
+              fontWeight: theme.typography.fontWeightMedium,
               borderRadius: 8,
               '& > span': { transition: '0.2s', marginLeft: 4 },
               '&:hover > span': { transform: 'translateX(2px)' },
             }),
             ...(ownerState.size === 'small' && {
-              padding: theme.spacing('6px', 1.5),
+              padding: '6px 8px',
               fontFamily: theme.typography.fontFamily,
               fontSize: defaultTheme.typography.pxToRem(13),
-              fontWeight: theme.typography.fontWeightSemiBold,
+              fontWeight: theme.typography.fontWeightMedium,
               borderRadius: 8,
               '& .MuiButton-startIcon': {
                 transition: '0.15s',
@@ -783,6 +783,15 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           root: ({ theme, ownerState }) => ({
             borderRadius: theme.shape.borderRadius,
+            transition: 'all 100ms ease-in',
+            '&:hover': {
+              borderColor: (theme.vars || theme).palette.grey[300],
+              background: (theme.vars || theme).palette.grey[50],
+              ...theme.applyDarkStyles({
+                borderColor: (theme.vars || theme).palette.primaryDark[600],
+                background: alpha(theme.palette.primaryDark[700], 0.8),
+              }),
+            },
             ...(ownerState.size === 'small' && {
               height: 32,
               width: 32,
@@ -797,11 +806,10 @@ export function getThemedComponents(): ThemeOptions {
             props: { color: 'primary' },
             style: ({ theme }) => [
               {
-                border: `1px solid`,
                 color: (theme.vars || theme).palette.primary.main,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-                borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                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`,
                 '&:hover': {
                   borderColor: (theme.vars || theme).palette.grey[300],
                   background: (theme.vars || theme).palette.grey[50],
@@ -823,14 +831,12 @@ export function getThemedComponents(): ThemeOptions {
             props: { color: 'info' },
             style: ({ theme }) => [
               {
-                color: (theme.vars || theme).palette.text.tertiary,
-                borderRadius: theme.shape.borderRadius,
-                border: `1px solid`,
+                color: (theme.vars || theme).palette.text.secondary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
-                borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                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`,
                 '&:hover': {
-                  color: (theme.vars || theme).palette.primary.main,
+                  color: (theme.vars || theme).palette.text.primary,
                   borderColor: (theme.vars || theme).palette.grey[300],
                   background: (theme.vars || theme).palette.grey[50],
                 },
@@ -838,11 +844,10 @@ export function getThemedComponents(): ThemeOptions {
               theme.applyDarkStyles({
                 borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                 backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
-                  color: (theme.vars || theme).palette.primary[400],
-                  borderColor: (theme.vars || theme).palette.primaryDark[500],
-                  background: alpha(theme.palette.primaryDark[700], 0.4),
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
+                  background: alpha(theme.palette.primaryDark[700], 0.8),
                 },
               }),
             ],
@@ -1280,10 +1285,14 @@ export function getThemedComponents(): ThemeOptions {
       },
       MuiTooltip: {
         styleOverrides: {
-          tooltip: {
+          tooltip: ({ theme }) => ({
+            padding: '6px 8px',
             borderRadius: 6,
-            padding: '6px 12px',
-          },
+            backgroundColor: (theme.vars || theme).palette.grey[400],
+            ...theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.grey[800],
+            }),
+          }),
         },
       },
       MuiSwitch: {