[docs-infra] Improve color contrast throughout (mui#41387)

mnajdova · Mar 8, 2024 · fb1f536 · fb1f536
1 parent aca0468
commit fb1f536
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 61 deletions.
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -1008,16 +1008,16 @@ function RowCategory(props: BoxProps) {
           pl: 1.5,
           display: 'block',
           textTransform: 'uppercase',
-          letterSpacing: '.08rem',
+          letterSpacing: '.1rem',
           fontWeight: theme.typography.fontWeightBold,
           fontSize: theme.typography.pxToRem(11),
-          color: 'text.secondary',
+          color: (theme.vars || theme).palette.text.tertiary,
           borderBottom: '1px solid',
-          bgcolor: 'grey.50',
-          borderColor: 'grey.200',
+          bgcolor: (theme.vars || theme).palette.grey[50],
+          borderColor: (theme.vars || theme).palette.grey[200],
           ...theme.applyDarkStyles({
-            bgcolor: 'primaryDark.900',
-            borderColor: 'primaryDark.600',
+            bgcolor: (theme.vars || theme).palette.primaryDark[900],
+            borderColor: (theme.vars || theme).palette.primaryDark[600],
           }),
         }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
@@ -1337,12 +1337,11 @@ export default function PricingTable({
           }
           sx={[
             (theme) => ({
-              p: 1,
+              px: 1,
               py: 1.5,
               justifyContent: 'flex-start',
-              fontWeight: 400,
+              fontWeight: 'medium',
               borderRadius: '0px',
-              color: 'text.primary',
               position: 'absolute',
               left: 0,
               top: 0,
@@ -1489,12 +1488,11 @@ export default function PricingTable({
           }
           sx={[
             (theme) => ({
-              p: 1,
+              px: 1,
               py: 1.5,
               justifyContent: 'flex-start',
-              fontWeight: 400,
+              fontWeight: 'medium',
               borderRadius: '0px',
-              color: 'text.primary',
               position: 'absolute',
               left: 0,
               top: 0,

diff --git a/docs/src/components/showcase/ThemeChip.tsx b/docs/src/components/showcase/ThemeChip.tsx
@@ -12,23 +12,23 @@ export default function ThemeChip() {
           [`& .${chipClasses.root}`]: {
             border: '1px solid',
             [`&.${chipClasses.filled}`]: {
-              borderColor: 'grey.200',
+              borderColor: 'grey.300',
               color: 'grey.800',
               bgcolor: 'grey.50',
               [`&.${chipClasses.colorPrimary}`]: {
                 borderColor: 'primary.200',
                 bgcolor: 'primary.50',
-                color: 'primary.600',
+                color: 'primary.700',
               },
               [`&.${chipClasses.colorSuccess}`]: {
                 borderColor: 'success.200',
                 bgcolor: 'success.50',
-                color: 'success.800',
+                color: 'success.900',
               },
               [`&.${chipClasses.colorWarning}`]: {
                 borderColor: 'warning.300',
                 bgcolor: 'warning.50',
-                color: 'warning.700',
+                color: 'warning.800',
               },
               [`&.${chipClasses.colorError}`]: {
                 borderColor: 'error.200',

diff --git a/docs/src/components/showcase/ThemeToggleButton.tsx b/docs/src/components/showcase/ThemeToggleButton.tsx
@@ -23,8 +23,8 @@ export default function ThemeToggleButton() {
               fontWeight: 600,
               color: 'grey.700',
               '&.Mui-selected': {
-                color: 'primary.600',
-                bgcolor: 'primary.100',
+                color: 'primary.700',
+                bgcolor: 'primary.50',
               },
             },
           },

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -96,10 +96,10 @@ export const blue = {
   200: '#99CCFF',
   300: '#66B2FF',
   400: '#3399FF',
-  main: '#007FFF',
-  500: '#007FFF',
-  600: '#0066CC',
-  700: '#004C99',
+  main: '#0073E6',
+  500: '#0073E6',
+  600: '#006BD6',
+  700: '#0061C2',
   800: '#004C99',
   900: '#003A75',
 };
@@ -120,11 +120,11 @@ export const grey = {
   50: '#F3F6F9',
   100: '#E5EAF2',
   200: '#DAE2ED',
-  300: '#C7D0DD', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
-  400: '#B0B8C4', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
-  500: '#9DA8B7', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
-  600: '#6B7A90', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
-  700: '#434D5B', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text
+  300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
+  400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
+  500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
+  600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
+  700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text
   800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text
   900: '#1C2025',
 };
@@ -224,13 +224,13 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
       text: {
         ...(mode === 'light' && {
           primary: grey[900],
-          secondary: grey[700],
-          tertiary: grey[600],
+          secondary: grey[800],
+          tertiary: grey[700],
         }),
         ...(mode === 'dark' && {
           primary: '#fff',
           secondary: grey[400],
-          tertiary: grey[400],
+          tertiary: grey[500],
         }),
       },
       grey: {
@@ -572,17 +572,20 @@ export function getThemedComponents(): ThemeOptions {
                   theme.palette.primary[500],
                   0.6,
                 )} 0%, ${theme.palette.primary[600]} 100%)`,
-                boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${alpha(
-                  theme.palette.primary[700],
-                  0.7,
-                )} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
+                boxShadow: `${theme.palette.primary[400]} 0 2px 0.5px inset, ${theme.palette.primary[700]} 0 -3px 1px inset, ${alpha(theme.palette.common.black, 0.1)} 0 2px 4px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.primary[700],
                 },
                 '&:active': {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
+            ...(ownerState.variant === 'text' && {
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+              }),
+            }),
           }),
         },
         variants: [
@@ -855,9 +858,9 @@ export function getThemedComponents(): ThemeOptions {
         },
         styleOverrides: {
           root: ({ theme }) => ({
-            fontWeight: theme.typography.fontWeightSemiBold,
             display: 'inline-flex',
             alignItems: 'center',
+            fontWeight: theme.typography.fontWeightSemiBold,
             '&.MuiTypography-body1 > svg': {
               marginTop: 2,
             },
@@ -1182,7 +1185,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
@@ -41,7 +41,7 @@ const FooterLink = styled(Typography)(({ theme }) => {
     alignItems: 'center',
     gap: 4,
     fontWeight: (theme.vars || theme).typography.fontWeightSemiBold,
-    color: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary[600],
     '& > svg': { transition: '0.2s' },
     '&:hover > svg': { transform: 'translateX(2px)' },
     ...theme.applyDarkStyles({
@@ -396,7 +396,7 @@ export default function AppLayoutDocsFooter(props) {
           spacing={{ xs: 3, sm: 1 }}
         >
           <EditPage sourceLocation={location} />
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
             <Typography
               id="feedback-message"
               variant="body2"
@@ -511,6 +511,7 @@ export default function AppLayoutDocsFooter(props) {
             {prevPage !== null ? (
               <Button
                 size="small"
+                variant="text"
                 component={Link}
                 noLinkStyle
                 prefetch={false}
@@ -544,8 +545,8 @@ export default function AppLayoutDocsFooter(props) {
           alignItems="center"
           spacing={{ xs: 3, sm: 1 }}
         >
-          <Stack direction="row" alignItems="center" spacing={1.2} sx={{ flexGrow: 1 }}>
-            <Link href="https://mui.com/" aria-label="Go to homepage" sx={{ mb: 2 }}>
+          <Stack direction="row" alignItems="center" spacing={1.2} useFlexGap sx={{ flexGrow: 1 }}>
+            <Link href="https://mui.com/" aria-label="Go to homepage">
               <SvgMuiLogotype height={24} width={72} />
             </Link>
             <Typography color="grey.500" fontSize={13} sx={{ opacity: '70%' }}>
@@ -565,7 +566,7 @@ export default function AppLayoutDocsFooter(props) {
               </FooterLink>
             </Link>
           </Stack>
-          <Stack spacing={1} direction="row">
+          <Stack spacing={1} direction="row" useFlexGap>
             <IconButton
               target="_blank"
               rel="noopener noreferrer"

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -122,11 +122,11 @@ function ProductIdentifier(props) {
       <Typography
         sx={(theme) => ({
           ml: 1,
-          color: (theme.vars || theme).palette.grey[600],
           fontSize: theme.typography.pxToRem(11),
-          fontWeight: 700,
+          fontWeight: theme.typography.fontWeightBold,
           textTransform: 'uppercase',
-          letterSpacing: '.08rem',
+          letterSpacing: '.1rem',
+          color: (theme.vars || theme).palette.text.tertiary,
         })}
       >
         {metadata}

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -24,7 +24,7 @@ const Item = styled(
       color: (theme.vars || theme).palette.text.primary,
     }),
     ...(subheader && {
-      color: (theme.vars || theme).palette.grey[600],
+      color: (theme.vars || theme).palette.text.tertiary,
     }),
   };
 

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -546,8 +546,8 @@ export default function AppSearch(props) {
               fontSize: theme.typography.pxToRem(11),
               fontWeight: theme.typography.fontWeightBold,
               textTransform: 'uppercase',
-              letterSpacing: '.08rem',
-              color: theme.palette.grey[600],
+              letterSpacing: '.1rem',
+              color: (theme.vars || theme).palette.text.tertiary,
             },
             '& .DocSearch-NewStartScreenTitleIcon': {
               fontSize: theme.typography.pxToRem(18),
@@ -666,8 +666,8 @@ export default function AppSearch(props) {
               fontWeight: theme.typography.fontWeightBold,
               textTransform: 'uppercase',
               lineHeight: 1,
-              letterSpacing: '.08rem',
-              color: theme.palette.grey[600],
+              letterSpacing: '.1rem',
+              color: (theme.vars || theme).palette.text.tertiary,
             },
             '& .DocSearch-Hit': {
               paddingBottom: 8,

diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
@@ -20,12 +20,12 @@ import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import { useTranslate } from '@mui/docs/i18n';
 
 const Heading = styled(Typography)(({ theme }) => ({
-  margin: '20px 0 10px',
-  color: theme.palette.grey[600],
-  fontWeight: 700,
+  margin: '16px 0 8px',
+  fontWeight: theme.typography.fontWeightBold,
   fontSize: theme.typography.pxToRem(11),
   textTransform: 'uppercase',
-  letterSpacing: '.08rem',
+  letterSpacing: '.1rem',
+  color: (theme.vars || theme).palette.text.tertiary,
 }));
 
 const IconToggleButton = styled(ToggleButton)({
@@ -100,7 +100,9 @@ function AppSettingsDrawer(props) {
       }}
       {...other}
     >
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2 }}>
+      <Box
+        sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: (1, 2) }}
+      >
         <Typography variant="body1" fontWeight="500">
           {t('settings.settings')}
         </Typography>
@@ -189,7 +191,7 @@ function AppSettingsDrawer(props) {
           variant="outlined"
           fullWidth
         >
-          {t('settings.editWebsiteColors')}
+          {t('settings.editDocsColors')}
         </Button>
       </Box>
     </Drawer>

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -34,8 +34,8 @@ const NavLabel = styled(Typography)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(11),
   fontWeight: theme.typography.fontWeightBold,
   textTransform: 'uppercase',
-  letterSpacing: '.08rem',
-  color: theme.palette.grey[600],
+  letterSpacing: '.1rem',
+  color: (theme.vars || theme).palette.text.tertiary,
 }));
 
 const NavList = styled(Typography)({

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.

diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
@@ -162,7 +162,7 @@
     "color": "Color",
     "dark": "Dark",
     "direction": "Direction",
-    "editWebsiteColors": "Edit website colors",
+    "editDocsColors": "Edit documentation colors",
     "light": "Light",
     "ltr": "Left to right",
     "mode": "Mode",