[docs-infra] Add stray design adjustments

docs/src/components/action/Highlighter.tsx

@@ -52,9 +52,10 @@ export default function Highlighter({
           ...(selected && {
             bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
             borderColor: 'primary.300',
-            boxShadow: `0px 1px 4px ${
-              (theme.vars || theme).palette.primary[200]
-            }, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`,
+            boxShadow: `${alpha(theme.palette.primary[100], 0.4)} 0 -3px 1px inset, ${alpha(
+              theme.palette.primary[100],
+              0.3,
+            )} 0 2px 4px 0`,
             color: 'primary.500',
           }),
           ...(!selected && {
@@ -69,24 +70,24 @@ export default function Highlighter({
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
-              borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
+              borderColor: alpha(theme.palette.primaryDark[600], 0.3),
             }),
             ...(!selected && {
               '&:hover, &:focus': {
-                bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
-                borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+                bgcolor: alpha(theme.palette.primary[800], 0.1),
+                borderColor: alpha(theme.palette.primary[500], 0.3),
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
               },
             }),
             ...(selected && {
-              bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
-              borderColor: 'primary.700',
+              bgcolor: alpha(theme.palette.primary[800], 0.2),
+              borderColor: alpha(theme.palette.primary[700], 0.8),
               color: 'primary.300',
-              boxShadow: `0px 1px 4px ${
-                (theme.vars || theme).palette.primary[900]
-              }, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
+              boxShadow: `${alpha(theme.palette.common.black, 0.5)} 0 -3px 1px inset, ${
+                theme.palette.common.black
+              } 0 2px 3px 0`,
             }),
           }),
           '&.Mui-disabled': {

docs/src/components/header/HeaderNavDropdown.tsx

@@ -162,16 +162,16 @@ export default function HeaderNavDropdown() {
             top: 56,
             left: 0,
             right: 0,
-            boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+            boxShadow: `0px 16px 20px rgba(170, 180, 190, 0.3)`,
             ...theme.applyDarkStyles({
-              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.8)',
+              boxShadow: '0px 16px 20px rgba(0, 0, 0, 0.8)',
             }),
           })}
         >
           <Box
             sx={{
               p: 2,
-              bgcolor: 'background.paper',
+              bgcolor: 'background.default',
               maxHeight: 'calc(100vh - 56px)',
               overflow: 'auto',
             }}

docs/src/layouts/HeroContainer.tsx

@@ -55,7 +55,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       sx={[
         (theme) => ({
           minWidth: '50vw',
-          minHeight: 500,
+          minHeight: { xs: 'auto', sm: 500 },
           height: 'calc(100vh - 120px)',
           maxHeight: { md: 700, xl: 850 },
           borderBottomLeftRadius: 12,
@@ -94,7 +94,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       <Box sx={{ overflow: 'hidden' }}>
         <Container
           sx={{
-            minHeight: 500,
+            minHeight: { xs: 'auto', sm: 500 },
             height: { md: 'calc(100vh - 120px)' },
             maxHeight: { md: 700, xl: 850 },
             transition: '0.3s',
@@ -139,7 +139,7 @@ export default function HeroContainer(props: HeroContainerProps) {
       <Container
         sx={{
           pt: { xs: 8, sm: 0 },
-          minHeight: 500,
+          minHeight: { xs: 'auto', sm: 500 },
           height: { md: 'calc(100vh - 120px)' },
           maxHeight: { md: 700, xl: 850 },
           transition: '0.3s',

docs/src/modules/brandingTheme.ts

@@ -457,32 +457,42 @@ export function getThemedComponents(): ThemeOptions {
         defaultProps: {
           disableTouchRipple: true,
         },
+        styleOverrides: {
+          root: {
+            transition: 'all 100ms ease-in',
+            '&:active': { transform: 'scale(.98)' },
+          },
+        },
       },
       MuiButton: {
         defaultProps: {
           disableElevation: true,
         },
         styleOverrides: {
           root: ({ theme, ownerState }) => ({
+            transition: 'all 120ms ease-in',
+            '&:active': { transform: 'scale(.96)' },
             ...(ownerState.size === 'large' && {
               ...theme.typography.body1,
               lineHeight: 21 / 16,
-              fontWeight: theme.typography.fontWeightBold,
-              padding: theme.spacing('12px', '12px', '12px', '14px'),
-              minHeight: 0,
+              padding: theme.spacing('8px', '12px', '10px', '14px'),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 10,
               '& > span': { transition: '0.2s', marginLeft: 4 },
               '&:hover > span': { transform: 'translateX(2px)' },
             }),
             ...(ownerState.size === 'medium' && {
-              padding: theme.spacing('8px', '12px'),
+              padding: theme.spacing('6px', '12px', '8px', '12px'),
+              fontWeight: theme.typography.fontWeightBold,
+              borderRadius: 8,
               '& > span': { transition: '0.2s', marginLeft: 4 },
               '&:hover > span': { transform: 'translateX(2px)' },
             }),
             ...(ownerState.size === 'small' && {
               padding: theme.spacing('6px', 1),
               fontFamily: theme.typography.fontFamily,
               fontSize: defaultTheme.typography.pxToRem(13),
-              fontWeight: theme.typography.fontWeightSemiBold,
+              fontWeight: theme.typography.fontWeightBold,
               borderRadius: 8,
               '& .MuiButton-startIcon': {
                 transition: '0.15s',
@@ -500,47 +510,53 @@ export function getThemedComponents(): ThemeOptions {
             }),
             ...(ownerState.variant === 'outlined' &&
               ownerState.color === 'secondary' && {
-                color: (theme.vars || theme).palette.text.secondary,
+                color: (theme.vars || theme).palette.text.primary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.3),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `0px 2px 1px ${alpha(
-                  theme.palette.grey[200],
-                  0.3,
-                )}, inset 0px 2px 3px ${alpha(theme.palette.primaryDark[100], 0.2)}`,
+                boxShadow: `${theme.palette.grey[50]} 0 2px 1px inset, ${alpha(
+                  theme.palette.grey[100],
+                  0.8,
+                )} 0 -3px 1px inset, ${alpha(theme.palette.grey[200], 0.5)} 0 2px 4px 0`,
                 '&:hover': {
                   background: (theme.vars || theme).palette.primaryDark[50],
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primaryDark[100],
-                  borderColor: (theme.vars || theme).palette.primaryDark[600],
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  boxShadow: `0px 2px 1px ${theme.palette.common.black}, inset 0px 2px 3px ${alpha(
-                    theme.palette.primaryDark[500],
-                    0.3,
-                  )}`,
+                  borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                  boxShadow: `${alpha(
+                    theme.palette.primaryDark[600],
+                    0.2,
+                  )} 0 2px 1px inset, ${alpha(
+                    theme.palette.primaryDark[900],
+                    0.5,
+                  )} 0 -3px 1px inset, ${theme.palette.common.black} 0 2px 4px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600],
                   },
                 }),
               }),
             ...(ownerState.variant === 'outlined' &&
               ownerState.color === 'primary' && {
-                color: (theme.vars || theme).palette.primary[500],
+                color: (theme.vars || theme).palette.primary[600],
                 backgroundColor: alpha(theme.palette.primary[50], 0.3),
                 borderColor: (theme.vars || theme).palette.primary[100],
-                boxShadow: `0px 1px 1px ${alpha(
+                boxShadow: `${theme.palette.primary[50]} 0 2px 1px inset, ${alpha(
                   theme.palette.primary[100],
-                  0.5,
-                )}, inset 0px 4px 2px ${alpha(theme.palette.primary[100], 0.1)}`,
+                  0.4,
+                )} 0 -3px 1px inset, ${alpha(theme.palette.primary[100], 0.3)} 0 2px 4px 0`,
                 '&:hover': {
                   background: (theme.vars || theme).palette.primary[50],
                   borderColor: (theme.vars || theme).palette.primary[300],
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[200],
-                  borderColor: (theme.vars || theme).palette.primary[900],
+                  borderColor: alpha(theme.palette.primary[900], 0.5),
                   backgroundColor: alpha(theme.palette.primary[900], 0.2),
-                  boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
+                  boxShadow: `${alpha(theme.palette.primary[900], 0.1)} 0 2px 1px inset, ${alpha(
+                    theme.palette.common.black,
+                    0.5,
+                  )} 0 -3px 1px inset, ${theme.palette.common.black} 0 2px 4px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primary[900],
                     borderColor: (theme.vars || theme).palette.primary[700],
@@ -550,36 +566,18 @@ export function getThemedComponents(): ThemeOptions {
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'primary' && {
                 color: '#FFF',
-                backgroundImage: `linear-gradient(180deg, ${alpha(
-                  theme.palette.primary[300],
-                  0.5,
-                )} 0%, ${alpha(theme.palette.primary[600], 0.5)} 100%)`,
-                boxShadow: `0px 1px 2px ${alpha(
-                  theme.palette.primary[900],
-                  0.1,
-                )}, inset 0px 0px 0px 1px ${
-                  theme.palette.primary[600]
-                }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.2), 0px 2px 1px ${alpha(
-                  theme.palette.primary[200],
-                  0.3,
-                )} `,
+                backgroundColor: (theme.vars || theme).palette.primary[600],
+                boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${alpha(
+                  theme.palette.primary[700],
+                  0.6,
+                )} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+                textShadow: `0 1px 2px ${alpha(theme.palette.common.black, 0.6)}`,
                 '&:hover': {
-                  backgroundColor: (theme.vars || theme).palette.primary[600],
+                  backgroundColor: (theme.vars || theme).palette.primary[700],
                 },
-                textShadow: `0px 1px 1px ${alpha(theme.palette.grey[900], 0.3)}`,
                 ...theme.applyDarkStyles({
-                  backgroundImage: `linear-gradient(180deg, ${alpha(
-                    theme.palette.primary[400],
-                    0.2,
-                  )} 0%, ${alpha(theme.palette.primary[700], 0.8)} 100%)`,
-                  boxShadow: `0px 1px 2px ${alpha(
-                    theme.palette.primary[900],
-                    0.1,
-                  )}, inset 0px 0px 0px 1px ${
-                    theme.palette.primary[600]
-                  }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1), 0px 2px 1px ${
-                    theme.palette.common.black
-                  } `,
+                  backgroundColor: (theme.vars || theme).palette.primary[600],
+                  boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[800]} 0 -3px 1px inset, ${theme.palette.common.black} 0 2px 4px 0`,
                 }),
               }),
           }),

docs/src/modules/components/ComponentLinkHeader.js

@@ -19,8 +19,15 @@ const Root = styled('ul')({
   display: 'flex',
   flexWrap: 'wrap',
   gap: 8,
-  '& .MuiChip-root .MuiChip-iconSmall': {
-    marginLeft: 4,
+  '& .MuiChip-root': {
+    height: 26,
+    padding: '0 8px',
+    gap: 6,
+    '& .MuiChip-label': { padding: 0 },
+    '& .MuiChip-iconSmall': {
+      margin: 0,
+      fontSize: 14,
+    },
   },
 });
 

docs/src/modules/components/Demo.js

@@ -240,36 +240,20 @@ const DemoRootMaterial = styled('div', {
   }),
   /* Mostly meant for introduction demos. */
   ...(bg === 'gradient' && {
+    overflow: 'auto',
     padding: theme.spacing(20, 8),
     border: `1px solid`,
     borderColor: (theme.vars || theme).palette.divider,
-    overflow: 'auto',
-    backgroundColor: alpha(theme.palette.primary[50], 0.5),
     backgroundClip: 'padding-box',
-    backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
-      theme.palette.primary[50],
-      0.5,
-    )} 0px, transparent 50%),
-        radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
-        radial-gradient(at 0% 95%, ${alpha(theme.palette.primary[100], 0.3)}, transparent 40%),
-        radial-gradient(at 0% 20%, ${
-          (theme.vars || theme).palette.primary[50]
-        } 0px, transparent 50%),
-        radial-gradient(at 93% 85%, ${alpha(
-          theme.palette.primary[100],
-          0.2,
-        )} 0px, transparent 50%);`,
+    backgroundColor: alpha(theme.palette.primary[50], 0.5),
+    backgroundImage: `radial-gradient(140% 108% at 50% 8%, transparent 40%, ${
+      theme.palette.primary[50]
+    } 70%, ${alpha(theme.palette.primary[100], 0.2)} 100%)`,
     ...theme.applyDarkStyles({
-      borderColor: alpha(theme.palette.primaryDark[500], 0.7),
-      backgroundColor: alpha(theme.palette.primary[900], 0.1),
-      backgroundImage: `radial-gradient(at 51% 52%, ${alpha(
-        theme.palette.primaryDark[700],
-        0.5,
-      )} 0px, transparent 50%),
-    radial-gradient(at 80% 0%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%),
-    radial-gradient(at 0% 95%,  ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 50%),
-    radial-gradient(at 0% 5%, ${alpha(theme.palette.primary[900], 0.5)} 0px, transparent 35%),
-    radial-gradient(at 93% 85%, ${alpha(theme.palette.primary[900], 0.3)} 0px, transparent 50%);`,
+      borderColor: (theme.vars || theme).palette.divider,
+      backgroundColor: '#00111A',
+      backgroundImage:
+        'radial-gradient(140% 120% at 50% 8%, transparent 40%, #051729 70%, #041425 100%)',
     }),
   }),
 }));

docs/src/modules/components/MarkdownElement.js

@@ -72,7 +72,7 @@ const Root = styled('div')(
     '& .description': {
       ...lightTheme.typography.subtitle1,
       fontWeight: 400,
-      margin: '0 0 28px',
+      margin: '0 0 24px',
     },
     '& .component-tabs': {
       margin: '0 0 40px',