@mui/material 5.8.4 → 5.8.5

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 (235) 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/AppBar.js +22 -5
  8. package/AppBar/appBarClasses.d.ts +28 -28
  9. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  10. package/Avatar/Avatar.js +7 -4
  11. package/Avatar/avatarClasses.d.ts +20 -20
  12. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  13. package/Backdrop/backdropClasses.d.ts +10 -10
  14. package/Badge/Badge.js +2 -2
  15. package/Badge/badgeClasses.d.ts +56 -56
  16. package/BottomNavigation/BottomNavigation.js +0 -0
  17. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  18. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  19. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  20. package/Button/buttonClasses.d.ts +100 -100
  21. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  22. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  23. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  24. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  25. package/CHANGELOG.md +69 -4
  26. package/Card/cardClasses.d.ts +8 -8
  27. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  28. package/CardActions/cardActionsClasses.d.ts +10 -10
  29. package/CardContent/cardContentClasses.d.ts +8 -8
  30. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  31. package/CardMedia/cardMediaClasses.d.ts +12 -12
  32. package/Checkbox/checkboxClasses.d.ts +18 -18
  33. package/Chip/Chip.js +31 -30
  34. package/Chip/chipClasses.d.ts +80 -80
  35. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  36. package/ClickAwayListener/index.d.ts +2 -2
  37. package/Collapse/collapseClasses.d.ts +18 -18
  38. package/Container/containerClasses.d.ts +6 -6
  39. package/Dialog/Dialog.js +11 -6
  40. package/Dialog/DialogContext.d.ts +6 -6
  41. package/Dialog/dialogClasses.d.ts +36 -36
  42. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  43. package/DialogContent/dialogContentClasses.d.ts +10 -10
  44. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  45. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  46. package/Divider/dividerClasses.d.ts +34 -34
  47. package/Drawer/drawerClasses.d.ts +30 -30
  48. package/Fab/fabClasses.d.ts +26 -26
  49. package/FilledInput/FilledInput.js +28 -13
  50. package/FilledInput/filledInputClasses.d.ts +40 -40
  51. package/FormControl/formControlClasses.d.ts +14 -14
  52. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  53. package/FormGroup/formGroupClasses.d.ts +12 -12
  54. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  55. package/FormLabel/formLabelClasses.d.ts +22 -22
  56. package/Grid/gridClasses.d.ts +48 -48
  57. package/Icon/iconClasses.d.ts +24 -24
  58. package/IconButton/iconButtonClasses.d.ts +26 -26
  59. package/ImageList/imageListClasses.d.ts +16 -16
  60. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  61. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  62. package/Input/inputClasses.d.ts +34 -34
  63. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  64. package/InputBase/InputBase.js +2 -2
  65. package/InputBase/inputBaseClasses.d.ts +44 -44
  66. package/InputLabel/inputLabelClasses.d.ts +32 -32
  67. package/LinearProgress/LinearProgress.js +6 -2
  68. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  69. package/Link/getTextDecoration.d.ts +15 -15
  70. package/Link/linkClasses.d.ts +18 -18
  71. package/List/listClasses.d.ts +14 -14
  72. package/ListItem/listItemClasses.d.ts +30 -30
  73. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  74. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  75. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  76. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  77. package/ListItemText/listItemTextClasses.d.ts +18 -18
  78. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  79. package/Menu/menuClasses.d.ts +12 -12
  80. package/MenuItem/menuItemClasses.d.ts +20 -20
  81. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  82. package/Modal/Modal.d.ts +2 -0
  83. package/Modal/Modal.js +25 -8
  84. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  85. package/OutlinedInput/OutlinedInput.js +25 -10
  86. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  87. package/Pagination/paginationClasses.d.ts +14 -14
  88. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  89. package/Paper/paperClasses.d.ts +39 -39
  90. package/Popover/popoverClasses.d.ts +10 -10
  91. package/Popper/Popper.d.ts +29 -29
  92. package/Radio/radioClasses.d.ts +16 -16
  93. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  94. package/RadioGroup/useRadioGroup.d.ts +4 -4
  95. package/Rating/ratingClasses.d.ts +40 -40
  96. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  97. package/Select/selectClasses.d.ts +30 -30
  98. package/Skeleton/Skeleton.js +8 -3
  99. package/Skeleton/skeletonClasses.d.ts +24 -24
  100. package/Slider/Slider.js +12 -12
  101. package/Snackbar/snackbarClasses.d.ts +20 -20
  102. package/SnackbarContent/SnackbarContent.js +3 -3
  103. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  104. package/SpeedDial/speedDialClasses.d.ts +22 -22
  105. package/SpeedDialAction/SpeedDialAction.js +7 -7
  106. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  107. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  108. package/Step/StepContext.d.ts +20 -20
  109. package/Step/stepClasses.d.ts +16 -16
  110. package/StepButton/stepButtonClasses.d.ts +14 -14
  111. package/StepConnector/StepConnector.js +14 -11
  112. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  113. package/StepContent/StepContent.js +1 -1
  114. package/StepContent/stepContentClasses.d.ts +12 -12
  115. package/StepIcon/stepIconClasses.d.ts +16 -16
  116. package/StepLabel/stepLabelClasses.d.ts +28 -28
  117. package/Stepper/StepperContext.d.ts +18 -18
  118. package/Stepper/stepperClasses.d.ts +14 -14
  119. package/SvgIcon/svgIconClasses.d.ts +24 -24
  120. package/Switch/Switch.js +11 -11
  121. package/Switch/switchClasses.d.ts +32 -32
  122. package/Tab/tabClasses.d.ts +26 -26
  123. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  124. package/Table/tableClasses.d.ts +10 -10
  125. package/TableBody/tableBodyClasses.d.ts +8 -8
  126. package/TableCell/TableCell.js +5 -5
  127. package/TableCell/tableCellClasses.d.ts +32 -32
  128. package/TableContainer/tableContainerClasses.d.ts +8 -8
  129. package/TableFooter/tableFooterClasses.d.ts +8 -8
  130. package/TableHead/tableHeadClasses.d.ts +8 -8
  131. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  132. package/TableRow/tableRowClasses.d.ts +16 -16
  133. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  134. package/Tabs/Tabs.js +6 -16
  135. package/Tabs/tabsClasses.d.ts +32 -32
  136. package/TextField/textFieldClasses.d.ts +8 -8
  137. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  138. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  139. package/Toolbar/toolbarClasses.d.ts +14 -14
  140. package/Tooltip/Tooltip.js +1 -1
  141. package/Tooltip/tooltipClasses.d.ts +30 -30
  142. package/Typography/typographyClasses.d.ts +50 -50
  143. package/className/index.d.ts +1 -1
  144. package/darkScrollbar/index.d.ts +28 -28
  145. package/index.js +1 -1
  146. package/internal/switchBaseClasses.d.ts +12 -12
  147. package/legacy/AppBar/AppBar.js +23 -4
  148. package/legacy/Avatar/Avatar.js +7 -4
  149. package/legacy/Badge/Badge.js +2 -2
  150. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  151. package/legacy/Chip/Chip.js +31 -30
  152. package/legacy/Dialog/Dialog.js +11 -6
  153. package/legacy/FilledInput/FilledInput.js +28 -14
  154. package/legacy/InputBase/InputBase.js +2 -2
  155. package/legacy/LinearProgress/LinearProgress.js +6 -2
  156. package/legacy/Modal/Modal.js +23 -7
  157. package/legacy/OutlinedInput/OutlinedInput.js +21 -9
  158. package/legacy/Skeleton/Skeleton.js +2 -2
  159. package/legacy/Slider/Slider.js +12 -12
  160. package/legacy/SnackbarContent/SnackbarContent.js +3 -3
  161. package/legacy/SpeedDialAction/SpeedDialAction.js +7 -7
  162. package/legacy/StepConnector/StepConnector.js +2 -1
  163. package/legacy/StepContent/StepContent.js +1 -1
  164. package/legacy/Switch/Switch.js +11 -11
  165. package/legacy/TableCell/TableCell.js +5 -5
  166. package/legacy/Tabs/Tabs.js +6 -16
  167. package/legacy/Tooltip/Tooltip.js +1 -1
  168. package/legacy/index.js +1 -1
  169. package/legacy/styles/CssVarsProvider.js +1 -1
  170. package/legacy/styles/experimental_extendTheme.js +113 -18
  171. package/locale/index.d.ts +71 -71
  172. package/modern/AppBar/AppBar.js +22 -5
  173. package/modern/Avatar/Avatar.js +7 -4
  174. package/modern/Badge/Badge.js +2 -2
  175. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  176. package/modern/Chip/Chip.js +31 -30
  177. package/modern/Dialog/Dialog.js +11 -6
  178. package/modern/FilledInput/FilledInput.js +27 -12
  179. package/modern/InputBase/InputBase.js +2 -2
  180. package/modern/LinearProgress/LinearProgress.js +6 -2
  181. package/modern/Modal/Modal.js +24 -7
  182. package/modern/OutlinedInput/OutlinedInput.js +25 -10
  183. package/modern/Skeleton/Skeleton.js +7 -2
  184. package/modern/Slider/Slider.js +12 -12
  185. package/modern/SnackbarContent/SnackbarContent.js +3 -3
  186. package/modern/SpeedDialAction/SpeedDialAction.js +7 -7
  187. package/modern/StepConnector/StepConnector.js +14 -11
  188. package/modern/StepContent/StepContent.js +1 -1
  189. package/modern/Switch/Switch.js +11 -11
  190. package/modern/TableCell/TableCell.js +5 -5
  191. package/modern/Tabs/Tabs.js +6 -16
  192. package/modern/Tooltip/Tooltip.js +1 -1
  193. package/modern/index.js +1 -1
  194. package/modern/styles/CssVarsProvider.js +1 -1
  195. package/modern/styles/experimental_extendTheme.js +114 -18
  196. package/node/AppBar/AppBar.js +22 -5
  197. package/node/Avatar/Avatar.js +7 -4
  198. package/node/Badge/Badge.js +2 -2
  199. package/node/BottomNavigation/BottomNavigation.js +0 -0
  200. package/node/Chip/Chip.js +31 -30
  201. package/node/Dialog/Dialog.js +11 -6
  202. package/node/FilledInput/FilledInput.js +28 -13
  203. package/node/InputBase/InputBase.js +2 -2
  204. package/node/LinearProgress/LinearProgress.js +6 -2
  205. package/node/Modal/Modal.js +25 -8
  206. package/node/OutlinedInput/OutlinedInput.js +25 -10
  207. package/node/Skeleton/Skeleton.js +7 -2
  208. package/node/Slider/Slider.js +12 -12
  209. package/node/SnackbarContent/SnackbarContent.js +3 -3
  210. package/node/SpeedDialAction/SpeedDialAction.js +7 -7
  211. package/node/StepConnector/StepConnector.js +14 -11
  212. package/node/StepContent/StepContent.js +1 -1
  213. package/node/Switch/Switch.js +11 -11
  214. package/node/TableCell/TableCell.js +5 -5
  215. package/node/Tabs/Tabs.js +6 -16
  216. package/node/Tooltip/Tooltip.js +1 -1
  217. package/node/index.js +1 -1
  218. package/node/styles/CssVarsProvider.js +1 -1
  219. package/node/styles/experimental_extendTheme.js +112 -17
  220. package/package.json +4 -4
  221. package/styles/CssVarsProvider.js +1 -1
  222. package/styles/createPalette.d.ts +65 -2
  223. package/styles/experimental_extendTheme.js +114 -18
  224. package/transitions/index.d.ts +1 -1
  225. package/transitions/transition.d.ts +13 -13
  226. package/transitions/utils.d.ts +23 -23
  227. package/umd/material-ui.development.js +548 -240
  228. package/umd/material-ui.production.min.js +27 -22
  229. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  230. package/useTouchRipple/index.d.ts +1 -1
  231. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  232. package/utils/getScrollbarSize.d.ts +2 -2
  233. package/utils/ownerDocument.d.ts +2 -2
  234. package/utils/ownerWindow.d.ts +2 -2
  235. package/utils/setRef.d.ts +2 -2
package/Slider/Slider.js CHANGED
@@ -34,7 +34,7 @@ const SliderRoot = styled('span', {
34
34
  position: 'relative',
35
35
  cursor: 'pointer',
36
36
  touchAction: 'none',
37
- color: theme.palette[ownerState.color].main,
37
+ color: (theme.vars || theme).palette[ownerState.color].main,
38
38
  WebkitTapHighlightColor: 'transparent'
39
39
  }, ownerState.orientation === 'horizontal' && _extends({
40
40
  height: 4,
@@ -69,7 +69,7 @@ const SliderRoot = styled('span', {
69
69
  [`&.${sliderClasses.disabled}`]: {
70
70
  pointerEvents: 'none',
71
71
  cursor: 'default',
72
- color: theme.palette.grey[400]
72
+ color: (theme.vars || theme).palette.grey[400]
73
73
  },
74
74
  [`&.${sliderClasses.dragging}`]: {
75
75
  [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
@@ -162,8 +162,8 @@ const SliderTrack = styled('span', {
162
162
  }, ownerState.track === false && {
163
163
  display: 'none'
164
164
  }, ownerState.track === 'inverted' && {
165
- backgroundColor: color,
166
- borderColor: color
165
+ backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
166
+ borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
167
167
  });
168
168
  });
169
169
  process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
@@ -222,7 +222,7 @@ const SliderThumb = styled('span', {
222
222
  borderRadius: 'inherit',
223
223
  width: '100%',
224
224
  height: '100%',
225
- boxShadow: theme.shadows[2]
225
+ boxShadow: (theme.vars || theme).shadows[2]
226
226
  }, ownerState.size === 'small' && {
227
227
  boxShadow: 'none'
228
228
  }),
@@ -238,13 +238,13 @@ const SliderThumb = styled('span', {
238
238
  transform: 'translate(-50%, -50%)'
239
239
  },
240
240
  [`&:hover, &.${sliderClasses.focusVisible}`]: {
241
- boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[ownerState.color].main, 0.16)}`,
241
+ boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
242
242
  '@media (hover: none)': {
243
243
  boxShadow: 'none'
244
244
  }
245
245
  },
246
246
  [`&.${sliderClasses.active}`]: {
247
- boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[ownerState.color].main, 0.16)}`
247
+ boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
248
248
  },
249
249
  [`&.${sliderClasses.disabled}`]: {
250
250
  '&:hover': {
@@ -287,9 +287,9 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
287
287
  transformOrigin: 'bottom center',
288
288
  transform: 'translateY(-100%) scale(0)',
289
289
  position: 'absolute',
290
- backgroundColor: theme.palette.grey[600],
290
+ backgroundColor: (theme.vars || theme).palette.grey[600],
291
291
  borderRadius: 2,
292
- color: theme.palette.common.white,
292
+ color: (theme.vars || theme).palette.common.white,
293
293
  display: 'flex',
294
294
  alignItems: 'center',
295
295
  justifyContent: 'center',
@@ -359,7 +359,7 @@ const SliderMark = styled('span', {
359
359
  left: '50%',
360
360
  transform: 'translate(-50%, 1px)'
361
361
  }, markActive && {
362
- backgroundColor: theme.palette.background.paper,
362
+ backgroundColor: (theme.vars || theme).palette.background.paper,
363
363
  opacity: 0.8
364
364
  }));
365
365
  process.env.NODE_ENV !== "production" ? SliderMark.propTypes
@@ -386,7 +386,7 @@ const SliderMarkLabel = styled('span', {
386
386
  ownerState,
387
387
  markLabelActive
388
388
  }) => _extends({}, theme.typography.body2, {
389
- color: theme.palette.text.secondary,
389
+ color: (theme.vars || theme).palette.text.secondary,
390
390
  position: 'absolute',
391
391
  whiteSpace: 'nowrap'
392
392
  }, ownerState.orientation === 'horizontal' && {
@@ -402,7 +402,7 @@ const SliderMarkLabel = styled('span', {
402
402
  left: 44
403
403
  }
404
404
  }, markLabelActive && {
405
- color: theme.palette.text.primary
405
+ color: (theme.vars || theme).palette.text.primary
406
406
  }));
407
407
  process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
408
408
  /* remove-proptypes */
@@ -1,20 +1,20 @@
1
- export interface SnackbarClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
5
- anchorOriginTopCenter: string;
6
- /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */
7
- anchorOriginBottomCenter: string;
8
- /** Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */
9
- anchorOriginTopRight: string;
10
- /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */
11
- anchorOriginBottomRight: string;
12
- /** Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */
13
- anchorOriginTopLeft: string;
14
- /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */
15
- anchorOriginBottomLeft: string;
16
- }
17
- export declare type SnackbarClassKey = keyof SnackbarClasses;
18
- export declare function getSnackbarUtilityClass(slot: string): string;
19
- declare const snackbarClasses: SnackbarClasses;
20
- export default snackbarClasses;
1
+ export interface SnackbarClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
5
+ anchorOriginTopCenter: string;
6
+ /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */
7
+ anchorOriginBottomCenter: string;
8
+ /** Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */
9
+ anchorOriginTopRight: string;
10
+ /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */
11
+ anchorOriginBottomRight: string;
12
+ /** Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */
13
+ anchorOriginTopLeft: string;
14
+ /** Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */
15
+ anchorOriginBottomLeft: string;
16
+ }
17
+ export declare type SnackbarClassKey = keyof SnackbarClasses;
18
+ export declare function getSnackbarUtilityClass(slot: string): string;
19
+ declare const snackbarClasses: SnackbarClasses;
20
+ export default snackbarClasses;
@@ -35,13 +35,13 @@ const SnackbarContentRoot = styled(Paper, {
35
35
  const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
36
36
  const backgroundColor = emphasize(theme.palette.background.default, emphasis);
37
37
  return _extends({}, theme.typography.body2, {
38
- color: theme.palette.getContrastText(backgroundColor),
39
- backgroundColor,
38
+ color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
39
+ backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
40
40
  display: 'flex',
41
41
  alignItems: 'center',
42
42
  flexWrap: 'wrap',
43
43
  padding: '6px 16px',
44
- borderRadius: theme.shape.borderRadius,
44
+ borderRadius: (theme.vars || theme).shape.borderRadius,
45
45
  flexGrow: 1,
46
46
  [theme.breakpoints.up('sm')]: {
47
47
  flexGrow: 'initial',
@@ -1,12 +1,12 @@
1
- export interface SnackbarContentClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the message wrapper element. */
5
- message: string;
6
- /** Styles applied to the action wrapper element if `action` is provided. */
7
- action: string;
8
- }
9
- export declare type SnackbarContentClassKey = keyof SnackbarContentClasses;
10
- export declare function getSnackbarContentUtilityClass(slot: string): string;
11
- declare const snackbarContentClasses: SnackbarContentClasses;
12
- export default snackbarContentClasses;
1
+ export interface SnackbarContentClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the message wrapper element. */
5
+ message: string;
6
+ /** Styles applied to the action wrapper element if `action` is provided. */
7
+ action: string;
8
+ }
9
+ export declare type SnackbarContentClassKey = keyof SnackbarContentClasses;
10
+ export declare function getSnackbarContentUtilityClass(slot: string): string;
11
+ declare const snackbarContentClasses: SnackbarContentClasses;
12
+ export default snackbarContentClasses;
@@ -1,22 +1,22 @@
1
- export interface SpeedDialClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the Fab component. */
5
- fab: string;
6
- /** Styles applied to the root element if direction="up" */
7
- directionUp: string;
8
- /** Styles applied to the root element if direction="down" */
9
- directionDown: string;
10
- /** Styles applied to the root element if direction="left" */
11
- directionLeft: string;
12
- /** Styles applied to the root element if direction="right" */
13
- directionRight: string;
14
- /** Styles applied to the actions (`children` wrapper) element. */
15
- actions: string;
16
- /** Styles applied to the actions (`children` wrapper) element if `open={false}`. */
17
- actionsClosed: string;
18
- }
19
- export declare type SpeedDialClassKey = keyof SpeedDialClasses;
20
- export declare function getSpeedDialUtilityClass(slot: string): string;
21
- declare const speedDialClasses: SpeedDialClasses;
22
- export default speedDialClasses;
1
+ export interface SpeedDialClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the Fab component. */
5
+ fab: string;
6
+ /** Styles applied to the root element if direction="up" */
7
+ directionUp: string;
8
+ /** Styles applied to the root element if direction="down" */
9
+ directionDown: string;
10
+ /** Styles applied to the root element if direction="left" */
11
+ directionLeft: string;
12
+ /** Styles applied to the root element if direction="right" */
13
+ directionRight: string;
14
+ /** Styles applied to the actions (`children` wrapper) element. */
15
+ actions: string;
16
+ /** Styles applied to the actions (`children` wrapper) element if `open={false}`. */
17
+ actionsClosed: string;
18
+ }
19
+ export declare type SpeedDialClassKey = keyof SpeedDialClasses;
20
+ export declare function getSpeedDialUtilityClass(slot: string): string;
21
+ declare const speedDialClasses: SpeedDialClasses;
22
+ export default speedDialClasses;
@@ -45,10 +45,10 @@ const SpeedDialActionFab = styled(Fab, {
45
45
  ownerState
46
46
  }) => _extends({
47
47
  margin: 8,
48
- color: theme.palette.text.secondary,
49
- backgroundColor: theme.palette.background.paper,
48
+ color: (theme.vars || theme).palette.text.secondary,
49
+ backgroundColor: (theme.vars || theme).palette.background.paper,
50
50
  '&:hover': {
51
- backgroundColor: emphasize(theme.palette.background.paper, 0.15)
51
+ backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
52
52
  },
53
53
  transition: `${theme.transitions.create('transform', {
54
54
  duration: theme.transitions.duration.shorter
@@ -101,10 +101,10 @@ const SpeedDialActionStaticTooltipLabel = styled('span', {
101
101
  }) => _extends({
102
102
  position: 'absolute'
103
103
  }, theme.typography.body1, {
104
- backgroundColor: theme.palette.background.paper,
105
- borderRadius: theme.shape.borderRadius,
106
- boxShadow: theme.shadows[1],
107
- color: theme.palette.text.secondary,
104
+ backgroundColor: (theme.vars || theme).palette.background.paper,
105
+ borderRadius: (theme.vars || theme).shape.borderRadius,
106
+ boxShadow: (theme.vars || theme).shadows[1],
107
+ color: (theme.vars || theme).palette.text.secondary,
108
108
  padding: '4px 16px',
109
109
  wordBreak: 'keep-all'
110
110
  }));
@@ -1,20 +1,20 @@
1
- export interface SpeedDialActionClasses {
2
- /** Styles applied to the Fab component. */
3
- fab: string;
4
- /** Styles applied to the Fab component if `open={false}`. */
5
- fabClosed: string;
6
- /** Styles applied to the root element if `tooltipOpen={true}`. */
7
- staticTooltip: string;
8
- /** Styles applied to the root element if `tooltipOpen={true}` and `open={false}`. */
9
- staticTooltipClosed: string;
10
- /** Styles applied to the static tooltip label if `tooltipOpen={true}`. */
11
- staticTooltipLabel: string;
12
- /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"`` */
13
- tooltipPlacementLeft: string;
14
- /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`` */
15
- tooltipPlacementRight: string;
16
- }
17
- export declare type SpeedDialActionClassKey = keyof SpeedDialActionClasses;
18
- export declare function getSpeedDialActionUtilityClass(slot: string): string;
19
- declare const speedDialActionClasses: SpeedDialActionClasses;
20
- export default speedDialActionClasses;
1
+ export interface SpeedDialActionClasses {
2
+ /** Styles applied to the Fab component. */
3
+ fab: string;
4
+ /** Styles applied to the Fab component if `open={false}`. */
5
+ fabClosed: string;
6
+ /** Styles applied to the root element if `tooltipOpen={true}`. */
7
+ staticTooltip: string;
8
+ /** Styles applied to the root element if `tooltipOpen={true}` and `open={false}`. */
9
+ staticTooltipClosed: string;
10
+ /** Styles applied to the static tooltip label if `tooltipOpen={true}`. */
11
+ staticTooltipLabel: string;
12
+ /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"`` */
13
+ tooltipPlacementLeft: string;
14
+ /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`` */
15
+ tooltipPlacementRight: string;
16
+ }
17
+ export declare type SpeedDialActionClassKey = keyof SpeedDialActionClasses;
18
+ export declare function getSpeedDialActionUtilityClass(slot: string): string;
19
+ declare const speedDialActionClasses: SpeedDialActionClasses;
20
+ export default speedDialActionClasses;
@@ -1,18 +1,18 @@
1
- export interface SpeedDialIconClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the icon component. */
5
- icon: string;
6
- /** Styles applied to the icon component if `open={true}`. */
7
- iconOpen: string;
8
- /** Styles applied to the icon when an `openIcon` is provided and if `open={true}`. */
9
- iconWithOpenIconOpen: string;
10
- /** Styles applied to the `openIcon` if provided. */
11
- openIcon: string;
12
- /** Styles applied to the `openIcon` if provided and if `open={true}`. */
13
- openIconOpen: string;
14
- }
15
- export declare type SpeedDialIconClassKey = keyof SpeedDialIconClasses;
16
- export declare function getSpeedDialIconUtilityClass(slot: string): string;
17
- declare const speedDialIconClasses: SpeedDialIconClasses;
18
- export default speedDialIconClasses;
1
+ export interface SpeedDialIconClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the icon component. */
5
+ icon: string;
6
+ /** Styles applied to the icon component if `open={true}`. */
7
+ iconOpen: string;
8
+ /** Styles applied to the icon when an `openIcon` is provided and if `open={true}`. */
9
+ iconWithOpenIconOpen: string;
10
+ /** Styles applied to the `openIcon` if provided. */
11
+ openIcon: string;
12
+ /** Styles applied to the `openIcon` if provided and if `open={true}`. */
13
+ openIconOpen: string;
14
+ }
15
+ export declare type SpeedDialIconClassKey = keyof SpeedDialIconClasses;
16
+ export declare function getSpeedDialIconUtilityClass(slot: string): string;
17
+ declare const speedDialIconClasses: SpeedDialIconClasses;
18
+ export default speedDialIconClasses;
@@ -1,20 +1,20 @@
1
- import * as React from 'react';
2
- export interface StepContextType {
3
- index: number;
4
- last: boolean;
5
- expanded: boolean;
6
- icon: React.ReactNode;
7
- active: boolean;
8
- completed: boolean;
9
- disabled: boolean;
10
- }
11
- /**
12
- * Provides information about the current step in Stepper.
13
- */
14
- declare const StepContext: React.Context<{} | StepContextType>;
15
- /**
16
- * Returns the current StepContext or an empty object if no StepContext
17
- * has been defined in the component tree.
18
- */
19
- export declare function useStepContext(): StepContextType | {};
20
- export default StepContext;
1
+ import * as React from 'react';
2
+ export interface StepContextType {
3
+ index: number;
4
+ last: boolean;
5
+ expanded: boolean;
6
+ icon: React.ReactNode;
7
+ active: boolean;
8
+ completed: boolean;
9
+ disabled: boolean;
10
+ }
11
+ /**
12
+ * Provides information about the current step in Stepper.
13
+ */
14
+ declare const StepContext: React.Context<{} | StepContextType>;
15
+ /**
16
+ * Returns the current StepContext or an empty object if no StepContext
17
+ * has been defined in the component tree.
18
+ */
19
+ export declare function useStepContext(): StepContextType | {};
20
+ export default StepContext;
@@ -1,16 +1,16 @@
1
- export interface StepClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `orientation="horizontal"`. */
5
- horizontal: string;
6
- /** Styles applied to the root element if `orientation="vertical"`. */
7
- vertical: string;
8
- /** Styles applied to the root element if `alternativeLabel={true}`. */
9
- alternativeLabel: string;
10
- /** State class applied to the root element if `completed={true}`. */
11
- completed: string;
12
- }
13
- export declare type StepClassKey = keyof StepClasses;
14
- export declare function getStepUtilityClass(slot: string): string;
15
- declare const stepClasses: StepClasses;
16
- export default stepClasses;
1
+ export interface StepClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `orientation="horizontal"`. */
5
+ horizontal: string;
6
+ /** Styles applied to the root element if `orientation="vertical"`. */
7
+ vertical: string;
8
+ /** Styles applied to the root element if `alternativeLabel={true}`. */
9
+ alternativeLabel: string;
10
+ /** State class applied to the root element if `completed={true}`. */
11
+ completed: string;
12
+ }
13
+ export declare type StepClassKey = keyof StepClasses;
14
+ export declare function getStepUtilityClass(slot: string): string;
15
+ declare const stepClasses: StepClasses;
16
+ export default stepClasses;
@@ -1,14 +1,14 @@
1
- export interface StepButtonClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `orientation="horizontal"`. */
5
- horizontal: string;
6
- /** Styles applied to the root element if `orientation="vertical"`. */
7
- vertical: string;
8
- /** Styles applied to the `ButtonBase` touch-ripple. */
9
- touchRipple: string;
10
- }
11
- export declare type StepButtonClassKey = keyof StepButtonClasses;
12
- export declare function getStepButtonUtilityClass(slot: string): string;
13
- declare const stepButtonClasses: StepButtonClasses;
14
- export default stepButtonClasses;
1
+ export interface StepButtonClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `orientation="horizontal"`. */
5
+ horizontal: string;
6
+ /** Styles applied to the root element if `orientation="vertical"`. */
7
+ vertical: string;
8
+ /** Styles applied to the `ButtonBase` touch-ripple. */
9
+ touchRipple: string;
10
+ }
11
+ export declare type StepButtonClassKey = keyof StepButtonClasses;
12
+ export declare function getStepButtonUtilityClass(slot: string): string;
13
+ declare const stepButtonClasses: StepButtonClasses;
14
+ export default stepButtonClasses;
@@ -63,17 +63,20 @@ const StepConnectorLine = styled('span', {
63
63
  })(({
64
64
  ownerState,
65
65
  theme
66
- }) => _extends({
67
- display: 'block',
68
- borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
69
- }, ownerState.orientation === 'horizontal' && {
70
- borderTopStyle: 'solid',
71
- borderTopWidth: 1
72
- }, ownerState.orientation === 'vertical' && {
73
- borderLeftStyle: 'solid',
74
- borderLeftWidth: 1,
75
- minHeight: 24
76
- }));
66
+ }) => {
67
+ const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
68
+ return _extends({
69
+ display: 'block',
70
+ borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
71
+ }, ownerState.orientation === 'horizontal' && {
72
+ borderTopStyle: 'solid',
73
+ borderTopWidth: 1
74
+ }, ownerState.orientation === 'vertical' && {
75
+ borderLeftStyle: 'solid',
76
+ borderLeftWidth: 1,
77
+ minHeight: 24
78
+ });
79
+ });
77
80
  const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
78
81
  const props = useThemeProps({
79
82
  props: inProps,
@@ -1,26 +1,26 @@
1
- export interface StepConnectorClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `orientation="horizontal"`. */
5
- horizontal: string;
6
- /** Styles applied to the root element if `orientation="vertical"`. */
7
- vertical: string;
8
- /** Styles applied to the root element if `alternativeLabel={true}`. */
9
- alternativeLabel: string;
10
- /** State class applied to the root element if `active={true}`. */
11
- active: string;
12
- /** State class applied to the root element if `completed={true}`. */
13
- completed: string;
14
- /** State class applied to the root element if `disabled={true}`. */
15
- disabled: string;
16
- /** Styles applied to the line element. */
17
- line: string;
18
- /** Styles applied to the root element if `orientation="horizontal"`. */
19
- lineHorizontal: string;
20
- /** Styles applied to the root element if `orientation="vertical"`. */
21
- lineVertical: string;
22
- }
23
- export declare type StepConnectorClassKey = keyof StepConnectorClasses;
24
- export declare function getStepConnectorUtilityClass(slot: string): string;
25
- declare const stepConnectorClasses: StepConnectorClasses;
26
- export default stepConnectorClasses;
1
+ export interface StepConnectorClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `orientation="horizontal"`. */
5
+ horizontal: string;
6
+ /** Styles applied to the root element if `orientation="vertical"`. */
7
+ vertical: string;
8
+ /** Styles applied to the root element if `alternativeLabel={true}`. */
9
+ alternativeLabel: string;
10
+ /** State class applied to the root element if `active={true}`. */
11
+ active: string;
12
+ /** State class applied to the root element if `completed={true}`. */
13
+ completed: string;
14
+ /** State class applied to the root element if `disabled={true}`. */
15
+ disabled: string;
16
+ /** Styles applied to the line element. */
17
+ line: string;
18
+ /** Styles applied to the root element if `orientation="horizontal"`. */
19
+ lineHorizontal: string;
20
+ /** Styles applied to the root element if `orientation="vertical"`. */
21
+ lineVertical: string;
22
+ }
23
+ export declare type StepConnectorClassKey = keyof StepConnectorClasses;
24
+ export declare function getStepConnectorUtilityClass(slot: string): string;
25
+ declare const stepConnectorClasses: StepConnectorClasses;
26
+ export default stepConnectorClasses;
@@ -43,7 +43,7 @@ const StepContentRoot = styled('div', {
43
43
  paddingLeft: 8 + 12,
44
44
  // margin + half icon
45
45
  paddingRight: 8,
46
- borderLeft: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
46
+ borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
47
47
  }, ownerState.last && {
48
48
  borderLeft: 'none'
49
49
  }));
@@ -1,12 +1,12 @@
1
- export interface StepContentClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `last={true}` (controlled by `Step`). */
5
- last: string;
6
- /** Styles applied to the Transition component. */
7
- transition: string;
8
- }
9
- export declare type StepContentClassKey = keyof StepContentClasses;
10
- export declare function getStepContentUtilityClass(slot: string): string;
11
- declare const stepContentClasses: StepContentClasses;
12
- export default stepContentClasses;
1
+ export interface StepContentClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `last={true}` (controlled by `Step`). */
5
+ last: string;
6
+ /** Styles applied to the Transition component. */
7
+ transition: string;
8
+ }
9
+ export declare type StepContentClassKey = keyof StepContentClasses;
10
+ export declare function getStepContentUtilityClass(slot: string): string;
11
+ declare const stepContentClasses: StepContentClasses;
12
+ export default stepContentClasses;
@@ -1,16 +1,16 @@
1
- export interface StepIconClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the SVG text element. */
5
- text: string;
6
- /** State class applied to the root element if `active={true}`. */
7
- active: string;
8
- /** State class applied to the root element if `completed={true}`. */
9
- completed: string;
10
- /** State class applied to the root element if `error={true}`. */
11
- error: string;
12
- }
13
- export declare type StepIconClassKey = keyof StepIconClasses;
14
- export declare function getStepIconUtilityClass(slot: string): string;
15
- declare const stepIconClasses: StepIconClasses;
16
- export default stepIconClasses;
1
+ export interface StepIconClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the SVG text element. */
5
+ text: string;
6
+ /** State class applied to the root element if `active={true}`. */
7
+ active: string;
8
+ /** State class applied to the root element if `completed={true}`. */
9
+ completed: string;
10
+ /** State class applied to the root element if `error={true}`. */
11
+ error: string;
12
+ }
13
+ export declare type StepIconClassKey = keyof StepIconClasses;
14
+ export declare function getStepIconUtilityClass(slot: string): string;
15
+ declare const stepIconClasses: StepIconClasses;
16
+ export default stepIconClasses;