From 8b2cd392a015b05981e37fd68cb6b966a3db9392 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 8 Mar 2024 10:16:59 -0300 Subject: [PATCH] [docs-infra] Improve color contrast throughout (#41387) --- docs/src/components/pricing/PricingTable.tsx | 22 +++++------ docs/src/components/showcase/ThemeChip.tsx | 8 ++-- .../components/showcase/ThemeToggleButton.tsx | 4 +- docs/src/modules/brandingTheme.ts | 39 ++++++++++--------- .../modules/components/AppLayoutDocsFooter.js | 11 +++--- docs/src/modules/components/AppNavDrawer.js | 6 +-- .../modules/components/AppNavDrawerItem.js | 2 +- docs/src/modules/components/AppSearch.js | 8 ++-- .../modules/components/AppSettingsDrawer.js | 14 ++++--- .../modules/components/AppTableOfContents.js | 4 +- docs/src/modules/components/DemoToolbar.js | 4 +- .../src/modules/components/MarkdownElement.js | 2 +- .../src/translations/translations.json | 2 +- 13 files changed, 65 insertions(+), 61 deletions(-) diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 029683fbcc79fc..031c3fa68005cd 100644 --- 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 index 38dc20035e5b81..8ab38e2c96a601 100644 --- 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 index dc1afefd571c62..edddebe19d38b5 100644 --- 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 index 3fba71c44d36fa..b52135676bcff5 100644 --- 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,10 +572,7 @@ 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], }, @@ -583,6 +580,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.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 index 91d36fd6a11039..afd7121f180bcb 100644 --- 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 }} > - + - - + + @@ -565,7 +566,7 @@ export default function AppLayoutDocsFooter(props) { - + ({ 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 index 2c47e632a635a4..1379f1c1740c00 100644 --- 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 index 60c83279ec945c..5cb970959fe432 100644 --- 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 index 3ddad7cb06a71b..d79c5d4ef97018 100644 --- 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} > - + {t('settings.settings')} @@ -189,7 +191,7 @@ function AppSettingsDrawer(props) { variant="outlined" fullWidth > - {t('settings.editWebsiteColors')} + {t('settings.editDocsColors')} diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 2d67d429f5d21c..3f68c7033b29b6 100644 --- 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 index 4e6594f7b9709b..bb057eb447e4a4 100644 --- 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 index 4292b846973e44..24f18dd51a749b 100644 --- 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 or