Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs-infra] Improve color contrast throughout #41387

Merged
merged 9 commits into from
Mar 8, 2024
Merged

[docs-infra] Improve color contrast throughout #41387

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b7cb20b
fine-tuning the grey palette for higher contrast
danilo-leal Mar 6, 2024
df66c8b
spacing adjustments (useFlexGap)
danilo-leal Mar 6, 2024
574fedd
improve blue contrast against light backgrounds
danilo-leal Mar 6, 2024
b85bd1e
improve colors on the homepage hero section
danilo-leal Mar 7, 2024
bdba115
decrease main blue shade lightness just a bit
danilo-leal Mar 7, 2024
b97a516
decrease blue 600 lightness a bit as well
danilo-leal Mar 7, 2024
eea7f2c
bonus: tweak spacing and labels on the settings drawer
danilo-leal Mar 7, 2024
b4de685
fix button variant text color
danilo-leal Mar 7, 2024
c376411
Merge branch 'master' into docs-infra-color-and-spacing-improvements
danilo-leal Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/src/components/pricing/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
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]),
Expand Down
8 changes: 4 additions & 4 deletions docs/src/components/showcase/ThemeChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/showcase/ThemeToggleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
},
Expand Down
34 changes: 20 additions & 14 deletions docs/src/modules/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,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',
};
Expand All @@ -104,11 +104,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',
};
Expand Down Expand Up @@ -208,13 +208,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: {
Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -839,9 +845,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,
},
Expand Down Expand Up @@ -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': {
Expand Down
11 changes: 6 additions & 5 deletions docs/src/modules/components/AppLayoutDocsFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -511,6 +511,7 @@ export default function AppLayoutDocsFooter(props) {
{prevPage !== null ? (
<Button
size="small"
variant="text"
component={Link}
noLinkStyle
prefetch={false}
Expand Down Expand Up @@ -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%' }}>
Expand All @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
};

Expand Down
8 changes: 4 additions & 4 deletions docs/src/modules/components/AppSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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,
Expand Down
14 changes: 8 additions & 6 deletions docs/src/modules/components/AppSettingsDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)({
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -189,7 +191,7 @@ function AppSettingsDrawer(props) {
variant="outlined"
fullWidth
>
{t('settings.editWebsiteColors')}
{t('settings.editDocsColors')}
</Button>
</Box>
</Drawer>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/AppTableOfContents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)({
Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/DemoToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-docs/src/translations/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading