@mui/material 5.10.16 → 5.10.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (181) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/alertClasses.d.ts +44 -44
  6. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  7. package/AppBar/appBarClasses.d.ts +28 -28
  8. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  9. package/Avatar/avatarClasses.d.ts +20 -20
  10. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  11. package/Backdrop/backdropClasses.d.ts +10 -10
  12. package/Badge/badgeClasses.d.ts +56 -56
  13. package/BottomNavigation/BottomNavigation.js +0 -0
  14. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  15. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  16. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  17. package/Button/buttonClasses.d.ts +100 -100
  18. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  19. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  20. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  21. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  22. package/CHANGELOG.md +74 -0
  23. package/Card/cardClasses.d.ts +8 -8
  24. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  25. package/CardActions/cardActionsClasses.d.ts +10 -10
  26. package/CardContent/cardContentClasses.d.ts +8 -8
  27. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  28. package/CardMedia/cardMediaClasses.d.ts +12 -12
  29. package/Checkbox/checkboxClasses.d.ts +18 -18
  30. package/Chip/chipClasses.d.ts +96 -96
  31. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  32. package/ClickAwayListener/index.d.ts +2 -2
  33. package/Collapse/collapseClasses.d.ts +18 -18
  34. package/Container/containerClasses.d.ts +6 -6
  35. package/Dialog/DialogContext.d.ts +6 -6
  36. package/Dialog/dialogClasses.d.ts +36 -36
  37. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  38. package/DialogContent/dialogContentClasses.d.ts +10 -10
  39. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  40. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  41. package/Divider/dividerClasses.d.ts +34 -34
  42. package/Drawer/drawerClasses.d.ts +30 -30
  43. package/Fab/Fab.js +8 -5
  44. package/Fab/fabClasses.d.ts +26 -26
  45. package/FilledInput/filledInputClasses.d.ts +40 -40
  46. package/FormControl/FormControlContext.d.ts +17 -17
  47. package/FormControl/formControlClasses.d.ts +14 -14
  48. package/FormControl/useFormControl.d.ts +2 -2
  49. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  50. package/FormGroup/formGroupClasses.d.ts +12 -12
  51. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  52. package/FormLabel/formLabelClasses.d.ts +22 -22
  53. package/Grid/gridClasses.d.ts +48 -48
  54. package/Icon/iconClasses.d.ts +24 -24
  55. package/IconButton/iconButtonClasses.d.ts +34 -34
  56. package/ImageList/imageListClasses.d.ts +16 -16
  57. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  58. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  59. package/Input/inputClasses.d.ts +34 -34
  60. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  61. package/InputBase/inputBaseClasses.d.ts +46 -46
  62. package/InputLabel/inputLabelClasses.d.ts +32 -32
  63. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  64. package/Link/getTextDecoration.d.ts +15 -15
  65. package/Link/linkClasses.d.ts +18 -18
  66. package/List/listClasses.d.ts +14 -14
  67. package/ListItem/listItemClasses.d.ts +30 -30
  68. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  69. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  70. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  71. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  72. package/ListItemText/listItemTextClasses.d.ts +18 -18
  73. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  74. package/Menu/menuClasses.d.ts +12 -12
  75. package/MenuItem/menuItemClasses.d.ts +20 -20
  76. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  77. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  78. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  79. package/OverridableComponentAugmentation.d.ts +31 -31
  80. package/Pagination/paginationClasses.d.ts +14 -14
  81. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  82. package/Paper/paperClasses.d.ts +39 -39
  83. package/Popover/popoverClasses.d.ts +10 -10
  84. package/Popper/Popper.d.ts +37 -37
  85. package/README.md +0 -9
  86. package/Radio/radioClasses.d.ts +16 -16
  87. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  88. package/RadioGroup/useRadioGroup.d.ts +4 -4
  89. package/Rating/Rating.js +3 -1
  90. package/Rating/ratingClasses.d.ts +40 -40
  91. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  92. package/Select/selectClasses.d.ts +30 -30
  93. package/Skeleton/skeletonClasses.d.ts +26 -26
  94. package/Slider/Slider.js +6 -1
  95. package/Snackbar/snackbarClasses.d.ts +20 -20
  96. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  97. package/SpeedDial/speedDialClasses.d.ts +22 -22
  98. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  99. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  100. package/Step/StepContext.d.ts +20 -20
  101. package/Step/stepClasses.d.ts +16 -16
  102. package/StepButton/stepButtonClasses.d.ts +14 -14
  103. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  104. package/StepContent/stepContentClasses.d.ts +12 -12
  105. package/StepIcon/stepIconClasses.d.ts +16 -16
  106. package/StepLabel/stepLabelClasses.d.ts +28 -28
  107. package/Stepper/StepperContext.d.ts +18 -18
  108. package/Stepper/stepperClasses.d.ts +14 -14
  109. package/SvgIcon/svgIconClasses.d.ts +26 -26
  110. package/Switch/switchClasses.d.ts +32 -32
  111. package/Tab/tabClasses.d.ts +26 -26
  112. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  113. package/Table/tableClasses.d.ts +10 -10
  114. package/TableBody/tableBodyClasses.d.ts +8 -8
  115. package/TableCell/tableCellClasses.d.ts +32 -32
  116. package/TableContainer/tableContainerClasses.d.ts +8 -8
  117. package/TableFooter/tableFooterClasses.d.ts +8 -8
  118. package/TableHead/tableHeadClasses.d.ts +8 -8
  119. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  120. package/TableRow/tableRowClasses.d.ts +16 -16
  121. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  122. package/Tabs/tabsClasses.d.ts +32 -32
  123. package/TextField/textFieldClasses.d.ts +8 -8
  124. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  125. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  126. package/Toolbar/toolbarClasses.d.ts +14 -14
  127. package/Tooltip/tooltipClasses.d.ts +30 -30
  128. package/Typography/typographyClasses.d.ts +50 -50
  129. package/Unstable_Grid2/Grid2.d.ts +4 -4
  130. package/Unstable_Grid2/Grid2Props.d.ts +15 -15
  131. package/Unstable_Grid2/grid2Classes.d.ts +5 -5
  132. package/Unstable_Grid2/index.d.ts +4 -4
  133. package/className/index.d.ts +1 -1
  134. package/darkScrollbar/index.d.ts +28 -28
  135. package/esm/BottomNavigation/BottomNavigation.js +0 -0
  136. package/esm/Fab/Fab.js +8 -5
  137. package/esm/Rating/Rating.js +3 -1
  138. package/esm/Slider/Slider.js +6 -1
  139. package/esm/locale/index.js +5 -5
  140. package/esm/styles/experimental_extendTheme.js +115 -103
  141. package/esm/utils/index.js +3 -1
  142. package/generateUtilityClass/index.d.ts +2 -2
  143. package/generateUtilityClasses/index.d.ts +1 -1
  144. package/index.js +1 -1
  145. package/internal/switchBaseClasses.d.ts +12 -12
  146. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  147. package/legacy/Fab/Fab.js +11 -8
  148. package/legacy/Rating/Rating.js +10 -9
  149. package/legacy/Slider/Slider.js +2 -1
  150. package/legacy/index.js +1 -1
  151. package/legacy/locale/index.js +5 -5
  152. package/legacy/styles/experimental_extendTheme.js +136 -103
  153. package/legacy/utils/index.js +3 -1
  154. package/locale/index.d.ts +73 -73
  155. package/locale/index.js +5 -5
  156. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  157. package/modern/Fab/Fab.js +8 -5
  158. package/modern/Rating/Rating.js +3 -1
  159. package/modern/Slider/Slider.js +6 -1
  160. package/modern/index.js +1 -1
  161. package/modern/locale/index.js +5 -5
  162. package/modern/styles/experimental_extendTheme.js +115 -103
  163. package/modern/utils/index.js +3 -1
  164. package/package.json +4 -4
  165. package/styles/CssVarsProvider.d.ts +16 -14
  166. package/styles/excludeVariablesFromRoot.d.ts +5 -5
  167. package/styles/experimental_extendTheme.js +114 -102
  168. package/styles/getOverlayAlpha.d.ts +2 -2
  169. package/transitions/index.d.ts +1 -1
  170. package/transitions/transition.d.ts +13 -13
  171. package/transitions/utils.d.ts +23 -23
  172. package/umd/material-ui.development.js +234 -127
  173. package/umd/material-ui.production.min.js +20 -20
  174. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  175. package/useTouchRipple/index.d.ts +1 -1
  176. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  177. package/utils/getScrollbarSize.d.ts +2 -2
  178. package/utils/index.js +3 -1
  179. package/utils/ownerDocument.d.ts +2 -2
  180. package/utils/ownerWindow.d.ts +2 -2
  181. package/utils/setRef.d.ts +2 -2
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
3
3
  const _excluded = ["colorSchemes", "cssVarPrefix"],
4
4
  _excluded2 = ["palette"];
5
5
  import { deepmerge } from '@mui/utils';
6
- import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
6
+ import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
7
7
  import createThemeWithoutVars from './createTheme';
8
8
  import getOverlayAlpha from './getOverlayAlpha';
9
9
  const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -21,8 +21,18 @@ function assignNode(obj, keys) {
21
21
  });
22
22
  }
23
23
  function setColor(obj, key, defaultValue) {
24
- obj[key] = obj[key] || defaultValue;
24
+ if (!obj[key] && defaultValue) {
25
+ obj[key] = defaultValue;
26
+ }
25
27
  }
28
+ const silent = fn => {
29
+ try {
30
+ return fn();
31
+ } catch (error) {
32
+ // ignore error
33
+ }
34
+ return undefined;
35
+ };
26
36
  export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
27
37
  export default function extendTheme(options = {}, ...args) {
28
38
  const {
@@ -86,22 +96,22 @@ export default function extendTheme(options = {}, ...args) {
86
96
  // assign component variables
87
97
  assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
88
98
  if (key === 'light') {
89
- setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
90
- setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
91
- setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
92
- setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
99
+ setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
100
+ setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
101
+ setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
102
+ setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
93
103
  setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
94
104
  setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
95
105
  setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
96
106
  setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
97
- setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
98
- setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
99
- setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
100
- setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
101
- setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
102
- setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
103
- setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
104
- setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
107
+ setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
108
+ setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
109
+ setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
110
+ setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
111
+ setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
112
+ setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
113
+ setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
114
+ setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
105
115
  setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
106
116
  setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
107
117
  setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
@@ -114,52 +124,52 @@ export default function extendTheme(options = {}, ...args) {
114
124
  setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
115
125
  setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
116
126
  setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
117
- setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
118
- setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
119
- setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
120
- setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
121
- setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
122
- setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
127
+ setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
128
+ setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
129
+ setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
130
+ setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
131
+ setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
132
+ setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
123
133
  setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
124
- setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
125
- setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
126
- setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
127
- setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
128
- setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
129
- setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
130
- const snackbarContentBackground = emphasize(palette.background.default, 0.8);
134
+ setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
135
+ setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
136
+ setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
137
+ setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
138
+ setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
139
+ setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
140
+ const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
131
141
  setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
132
- setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
133
- setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
142
+ setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
143
+ setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
134
144
  setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
135
145
  setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
136
146
  setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
137
147
  setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
138
- setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
139
- setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
140
- setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
141
- setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
142
- setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
143
- setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
144
- setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
145
- setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
148
+ setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
149
+ setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
150
+ setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
151
+ setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
152
+ setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
153
+ setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
154
+ setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
155
+ setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
146
156
  } else {
147
- setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
148
- setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
149
- setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
150
- setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
157
+ setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
158
+ setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
159
+ setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
160
+ setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
151
161
  setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
152
162
  setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
153
163
  setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
154
164
  setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
155
- setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
156
- setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
157
- setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
158
- setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
159
- setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
160
- setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
161
- setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
162
- setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
165
+ setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
166
+ setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
167
+ setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
168
+ setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
169
+ setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
170
+ setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
171
+ setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
172
+ setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
163
173
  setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
164
174
  setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
165
175
  setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -174,72 +184,74 @@ export default function extendTheme(options = {}, ...args) {
174
184
  setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
175
185
  setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
176
186
  setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
177
- setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
178
- setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
179
- setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
180
- setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
181
- setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
182
- setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
187
+ setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
188
+ setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
189
+ setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
190
+ setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
191
+ setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
192
+ setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
183
193
  setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
184
- setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
185
- setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
186
- setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
187
- setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
188
- setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
189
- setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
190
- const snackbarContentBackground = emphasize(palette.background.default, 0.98);
194
+ setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
195
+ setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
196
+ setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
197
+ setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
198
+ setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
199
+ setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
200
+ const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
191
201
  setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
192
- setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
193
- setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
202
+ setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
203
+ setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
194
204
  setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
195
205
  setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
196
206
  setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
197
207
  setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
198
- setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
199
- setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
200
- setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
201
- setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
202
- setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
203
- setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
204
- setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
205
- setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
208
+ setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
209
+ setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
210
+ setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
211
+ setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
212
+ setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
213
+ setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
214
+ setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
215
+ setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
206
216
  }
207
- palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
217
+ setColor(palette.background, 'defaultChannel', safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
208
218
 
209
- palette.common.backgroundChannel = colorChannel(palette.common.background);
210
- palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
211
- palette.dividerChannel = colorChannel(palette.divider);
219
+ setColor(palette.common, 'backgroundChannel', safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
220
+ setColor(palette.common, 'onBackgroundChannel', safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
221
+ setColor(palette, 'dividerChannel', safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
212
222
  Object.keys(palette).forEach(color => {
213
223
  const colors = palette[color];
214
224
 
215
- // Color palettes: primary, secondary, error, info, success, and warning
216
- if (colors.main) {
217
- palette[color].mainChannel = colorChannel(colors.main);
218
- }
219
- if (colors.light) {
220
- palette[color].lightChannel = colorChannel(colors.light);
221
- }
222
- if (colors.dark) {
223
- palette[color].darkChannel = colorChannel(colors.dark);
224
- }
225
- if (colors.contrastText) {
226
- palette[color].contrastTextChannel = colorChannel(colors.contrastText);
227
- }
228
-
229
- // Text colors: text.primary, text.secondary
230
- if (colors.primary) {
231
- palette[color].primaryChannel = colorChannel(colors.primary);
232
- }
233
- if (colors.secondary) {
234
- palette[color].secondaryChannel = colorChannel(colors.secondary);
235
- }
225
+ // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
236
226
 
237
- // Action colors: action.active, action.selected
238
- if (colors.active) {
239
- palette[color].activeChannel = colorChannel(colors.active);
240
- }
241
- if (colors.selected) {
242
- palette[color].selectedChannel = colorChannel(colors.selected);
227
+ if (colors && typeof colors === 'object') {
228
+ // Silent the error for custom palettes.
229
+ if (colors.main) {
230
+ setColor(palette[color], 'mainChannel', safeColorChannel(colors.main));
231
+ }
232
+ if (colors.light) {
233
+ setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));
234
+ }
235
+ if (colors.dark) {
236
+ setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));
237
+ }
238
+ if (colors.contrastText) {
239
+ setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));
240
+ }
241
+ if (color === 'text') {
242
+ // Text colors: text.primary, text.secondary
243
+ setColor(palette[color], 'primaryChannel', safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
244
+ setColor(palette[color], 'secondaryChannel', safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
245
+ }
246
+ if (color === 'action') {
247
+ // Action colors: action.active, action.selected
248
+ if (colors.active) {
249
+ setColor(palette[color], 'activeChannel', safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
250
+ }
251
+ if (colors.selected) {
252
+ setColor(palette[color], 'selectedChannel', safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
253
+ }
254
+ }
243
255
  }
244
256
  });
245
257
  });
@@ -20,7 +20,9 @@ export { default as useIsFocusVisible } from './useIsFocusVisible';
20
20
  // eslint-disable-next-line @typescript-eslint/naming-convention
21
21
  export const unstable_ClassNameGenerator = {
22
22
  configure: generator => {
23
- console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
23
+ if (process.env.NODE_ENV !== 'production') {
24
+ console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
25
+ }
24
26
  ClassNameGenerator.configure(generator);
25
27
  }
26
28
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/material",
3
- "version": "5.10.16",
3
+ "version": "5.10.17",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "@babel/runtime": "^7.20.1",
49
- "@mui/base": "5.0.0-alpha.108",
50
- "@mui/core-downloads-tracker": "^5.10.16",
51
- "@mui/system": "^5.10.16",
49
+ "@mui/base": "5.0.0-alpha.109",
50
+ "@mui/core-downloads-tracker": "^5.10.17",
51
+ "@mui/system": "^5.10.17",
52
52
  "@mui/types": "^7.2.2",
53
53
  "@mui/utils": "^5.10.16",
54
54
  "@types/react-transition-group": "^4.4.5",
@@ -1,14 +1,16 @@
1
- /// <reference types="react" />
2
- import { SupportedColorScheme } from './experimental_extendTheme';
3
- declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
4
- declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
5
- theme?: {
6
- cssVarPrefix?: string | undefined;
7
- colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
8
- } | undefined;
9
- documentNode?: Document | null | undefined;
10
- colorSchemeNode?: Document | HTMLElement | null | undefined;
11
- colorSchemeSelector?: string | undefined;
12
- storageWindow?: Window | null | undefined;
13
- }>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
14
- export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
1
+ /// <reference types="react" />
2
+ import { SupportedColorScheme } from './experimental_extendTheme';
3
+ declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
4
+ declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
5
+ theme?: {
6
+ cssVarPrefix?: string | undefined;
7
+ colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
8
+ } | undefined;
9
+ documentNode?: Document | null | undefined;
10
+ colorSchemeNode?: Element | null | undefined;
11
+ colorSchemeSelector?: string | undefined;
12
+ storageWindow?: Window | null | undefined;
13
+ disableNestedContext?: boolean | undefined;
14
+ disableStyleSheetGeneration?: boolean | undefined;
15
+ }>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
16
+ export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
@@ -1,5 +1,5 @@
1
- /**
2
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
3
- */
4
- declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
5
- export default excludeVariablesFromRoot;
1
+ /**
2
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
3
+ */
4
+ declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
5
+ export default excludeVariablesFromRoot;