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

Jump to bottom

[docs] Fix the color contrast on optional API methods #34127

Merged
merged 2 commits into from Sep 2, 2022
Merged

[docs] Fix the color contrast on optional API methods #34127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3be9a9a
[docs] Fix the color contrast on optional API methods
oliviertassinari Aug 29, 2022
1390872
check the rest of the codebase
oliviertassinari Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/data/material/migration/migration-v4/v5-style-changes-zh.md
View file
Open in desktop
Expand Up @@ -267,16 +267,16 @@ The `theme.palette.type` key was renamed to `theme.palette.mode`, to better foll

```diff
import { createTheme } from '@mui/material/styles';
-const theme = createTheme({palette: { type: 'dark' }}),
+const theme = createTheme({palette: { mode: 'dark' }}),
-const theme = createTheme({ palette: { type: 'dark' } }),
+const theme = createTheme({ palette: { mode: 'dark' } }),
```

### Change default theme.palette.info colors

The default `theme.palette.info` colors were changed to pass the AA accessibility standard contrast ratio in both light and dark modes.

```diff
info = {
info = {
- main: cyan[500],
+ main: lightBlue[700], // lightBlue[400] in "dark" mode

Expand All @@ -285,15 +285,15 @@ The default `theme.palette.info` colors were changed to pass the AA accessibilit

- dark: cyan[700],
+ dark: lightBlue[900], // lightBlue[700] in "dark" mode
}
}
```

### Change default theme.palette.success colors

The default `theme.palette.success` colors were changed to pass the AA accessibility standard contrast ratio in both light and dark modes.

```diff
success = {
success = {
- main: green[500],
+ main: green[800], // green[400] in "dark" mode

Expand All @@ -302,15 +302,15 @@ The default `theme.palette.success` colors were changed to pass the AA accessibi

- dark: green[700],
+ dark: green[900], // green[700] in "dark" mode
}
}
```

### Change default theme.palette.warning colors

The default `theme.palette.warning` colors were changed to pass the AA accesibility standard contrast ratio in both light and dark modes.

```diff
warning = {
warning = {
- main: orange[500],
+ main: '#ED6C02', // orange[400] in "dark" mode

Expand All @@ -319,15 +319,15 @@ The default `theme.palette.warning` colors were changed to pass the AA accesibil

- dark: orange[700],
+ dark: orange[900], // orange[700] in "dark" mode
}
}
```

### Restore theme.palette.text.hint key (if needed)

The `theme.palette.text.hint` key was unused in Material UI components, and has been removed. If you depend on it, you can add it back:

```diff
import { createTheme } from '@mui/material/styles';
import { createTheme } from '@mui/material/styles';

-const theme = createTheme(),
+const theme = createTheme({
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/migration/migration-v4/v5-style-changes.md
View file
Open in desktop
Expand Up @@ -276,8 +276,8 @@ The `theme.palette.type` key was renamed to `theme.palette.mode`, to better foll

```diff
import { createTheme } from '@mui/material/styles';
-const theme = createTheme({palette: { type: 'dark' }}),
+const theme = createTheme({palette: { mode: 'dark' }}),
-const theme = createTheme({ palette: { type: 'dark' } }),
+const theme = createTheme({ palette: { mode: 'dark' } }),
```

### Change default theme.palette.info colors
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Expand Up @@ -173,7 +173,7 @@ const Root = styled('div')(({ theme }) => ({
color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5',
},
'& .optional': {
color: theme.palette.type === 'light' ? '#080065' : '#a5b3ff',
color: theme.palette.mode === 'light' ? '#45529f' : '#a5b3ff',
},
'& .prop-type': {
color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec',
Expand Down
11 changes: 9 additions & 2 deletions packages/mui-codemod/README.md
View file
Open in desktop
Expand Up @@ -993,8 +993,15 @@ npx @mui/codemod v5.0.0/theme-options <path>
Renames `type` to `mode`.

```diff
- { palette: { type: 'dark' } }
+ { palette: { mode: 'dark' } }
{
palette: {
- type: 'dark',
+ mode: 'dark',
},
}
```

```diff
-theme.palette.type === 'dark'
+theme.palette.mode === 'dark'
```
Expand Down