improve blue contrast against light backgrounds

danilo-leal · Mar 6, 2024 · 574fedd · 574fedd
1 parent df66c8b
commit 574fedd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -82,8 +82,8 @@ export const blue = {
   400: '#3399FF',
   main: '#007FFF',
   500: '#007FFF',
-  600: '#0066CC',
-  700: '#004C99',
+  600: '#0070E0',
+  700: '#0061C2',
   800: '#004C99',
   900: '#003A75',
 };
@@ -567,6 +567,12 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
+            ...(ownerState.variant === 'text' && {
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primaryDark[300],
+              }),
+            }),
           }),
         },
         variants: [
@@ -1166,7 +1172,7 @@ export function getThemedComponents(): ThemeOptions {
                 padding: '0.375rem 0.75rem',
               }),
               '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[500],
+                color: (theme.vars || theme).palette.primary[700],
                 borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
                 backgroundColor: (theme.vars || theme).palette.primary[50],
                 '&:hover': {

diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js
@@ -511,6 +511,7 @@ export default function AppLayoutDocsFooter(props) {
             {prevPage !== null ? (
               <Button
                 size="small"
+                variant="text"
                 component={Link}
                 noLinkStyle
                 prefetch={false}

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -89,10 +89,10 @@ const Button = styled(MDButton)(({ theme }) => ({
   flexShrink: 0,
   borderRadius: 999,
   border: '1px solid',
-  borderColor: alpha(theme.palette.primary[100], 0.6),
+  borderColor: alpha(theme.palette.grey[200], 0.8),
   fontSize: theme.typography.pxToRem(13),
   fontWeight: theme.typography.fontWeightMedium,
-  color: theme.palette.primary.main,
+  color: theme.palette.primary[600],
   '& .MuiSvgIcon-root': {
     color: theme.palette.primary.main,
   },

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -426,7 +426,7 @@ const Root = styled('div')(
       },
     },
     '& a code': {
-      color: darken(lightTheme.palette.primary.main, 0.04),
+      color: darken(lightTheme.palette.primary.main, 0.2),
     },
     '& img, & video': {
       // Use !important so that inline style on <img> or <video> can't win.