@mui/material 5.8.2 → 5.8.5

package/node/Slider/Slider.js

@@ -64,7 +64,7 @@ const SliderRoot = (0, _styled.default)('span', {
   position: 'relative',
   cursor: 'pointer',
   touchAction: 'none',
-  color: theme.palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].main,
   WebkitTapHighlightColor: 'transparent'
 }, ownerState.orientation === 'horizontal' && (0, _extends2.default)({
   height: 4,
@@ -99,7 +99,7 @@ const SliderRoot = (0, _styled.default)('span', {
   [`&.${sliderClasses.disabled}`]: {
     pointerEvents: 'none',
     cursor: 'default',
-    color: theme.palette.grey[400]
+    color: (theme.vars || theme).palette.grey[400]
   },
   [`&.${sliderClasses.dragging}`]: {
     [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
@@ -192,8 +192,8 @@ const SliderTrack = (0, _styled.default)('span', {
   }, ownerState.track === false && {
     display: 'none'
   }, ownerState.track === 'inverted' && {
-    backgroundColor: color,
-    borderColor: color
+    backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
   });
 });
 exports.SliderTrack = SliderTrack;
@@ -252,7 +252,7 @@ const SliderThumb = (0, _styled.default)('span', {
     borderRadius: 'inherit',
     width: '100%',
     height: '100%',
-    boxShadow: theme.shadows[2]
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.size === 'small' && {
     boxShadow: 'none'
   }),
@@ -268,13 +268,13 @@ const SliderThumb = (0, _styled.default)('span', {
     transform: 'translate(-50%, -50%)'
   },
   [`&:hover, &.${sliderClasses.focusVisible}`]: {
-    boxShadow: `0px 0px 0px 8px ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
+    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
   [`&.${sliderClasses.active}`]: {
-    boxShadow: `0px 0px 0px 14px ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
+    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
   },
   [`&.${sliderClasses.disabled}`]: {
     '&:hover': {
@@ -314,31 +314,44 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  top: -10,
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
-  backgroundColor: theme.palette.grey[600],
+  backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
-  color: theme.palette.common.white,
+  color: (theme.vars || theme).palette.common.white,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   padding: '0.25rem 0.75rem'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(12),
-  padding: '0.25rem 0.5rem'
-}, {
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
     bottom: 0,
-    left: '50%',
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: '30px',
+  top: '25px',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
     transform: 'translate(-50%, 50%) rotate(45deg)',
-    backgroundColor: 'inherit'
+    backgroundColor: 'inherit',
+    right: '-20%',
+    top: '25%'
   }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
 }));
 exports.SliderValueLabel = SliderValueLabel;
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
@@ -376,7 +389,7 @@ const SliderMark = (0, _styled.default)('span', {
   left: '50%',
   transform: 'translate(-50%, 1px)'
 }, markActive && {
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   opacity: 0.8
 }));
 exports.SliderMark = SliderMark;
@@ -403,7 +416,7 @@ const SliderMarkLabel = (0, _styled.default)('span', {
   ownerState,
   markLabelActive
 }) => (0, _extends2.default)({}, theme.typography.body2, {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap'
 }, ownerState.orientation === 'horizontal' && {
@@ -419,7 +432,7 @@ const SliderMarkLabel = (0, _styled.default)('span', {
     left: 44
   }
 }, markLabelActive && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }));
 exports.SliderMarkLabel = SliderMarkLabel;
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
@@ -601,12 +614,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     thumb: _propTypes.default.object,
     track: _propTypes.default.object,
     valueLabel: _propTypes.default.shape({
+      children: _propTypes.default.element,
       className: _propTypes.default.string,
       components: _propTypes.default.shape({
         Root: _propTypes.default.elementType
       }),
+      open: _propTypes.default.bool,
       style: _propTypes.default.object,
-      value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
+      value: _propTypes.default.number,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
     })
   }),

package/node/Snackbar/Snackbar.js

@@ -70,15 +70,11 @@ const SnackbarRoot = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => {
-  const center = (0, _extends2.default)({}, !ownerState.isRtl && {
+  const center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
+  };
   return (0, _extends2.default)({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -100,19 +96,13 @@ const SnackbarRoot = (0, _styled.default)('div', {
       top: 24
     } : {
       bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && (0, _extends2.default)({}, !ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
       left: 24,
       right: 'auto'
-    }, ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'right' && {
       right: 24,
       left: 'auto'
-    }), ownerState.anchorOrigin.horizontal === 'right' && (0, _extends2.default)({}, !ownerState.isRtl && {
-      right: 24,
-      left: 'auto'
-    }, ownerState.isRtl && {
-      left: 24,
-      right: 'auto'
-    }))
+    })
   });
 });
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
@@ -157,13 +147,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   } = props,
         TransitionProps = (0, _objectWithoutPropertiesLoose2.default)(props.TransitionProps, _excluded),
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const isRtl = theme.direction === 'rtl';
   const ownerState = (0, _extends2.default)({}, props, {
     anchorOrigin: {
       vertical,
       horizontal
-    },
-    isRtl
+    }
   });
   const classes = useUtilityClasses(ownerState);
   const timerAutoHide = React.useRef();

package/node/SnackbarContent/SnackbarContent.js

@@ -59,13 +59,13 @@ const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
   const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   const backgroundColor = (0, _system.emphasize)(theme.palette.background.default, emphasis);
   return (0, _extends2.default)({}, theme.typography.body2, {
-    color: theme.palette.getContrastText(backgroundColor),
-    backgroundColor,
+    color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+    backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
     padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     flexGrow: 1,
     [theme.breakpoints.up('sm')]: {
       flexGrow: 'initial',

package/node/SpeedDialAction/SpeedDialAction.js

@@ -70,10 +70,10 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   ownerState
 }) => (0, _extends2.default)({
   margin: 8,
-  color: theme.palette.text.secondary,
-  backgroundColor: theme.palette.background.paper,
+  color: (theme.vars || theme).palette.text.secondary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   '&:hover': {
-    backgroundColor: (0, _system.emphasize)(theme.palette.background.paper, 0.15)
+    backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : (0, _system.emphasize)(theme.palette.background.paper, 0.15)
   },
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
@@ -126,10 +126,10 @@ const SpeedDialActionStaticTooltipLabel = (0, _styled.default)('span', {
 }) => (0, _extends2.default)({
   position: 'absolute'
 }, theme.typography.body1, {
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: theme.shape.borderRadius,
-  boxShadow: theme.shadows[1],
-  color: theme.palette.text.secondary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  boxShadow: (theme.vars || theme).shadows[1],
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '4px 16px',
   wordBreak: 'keep-all'
 }));

package/node/Stack/Stack.js

@@ -80,7 +80,7 @@ const style = ({
   if (ownerState.spacing) {
     const transformer = (0, _system.createUnarySpacing)(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
       }
 

package/node/StepConnector/StepConnector.js

@@ -89,17 +89,20 @@ const StepConnectorLine = (0, _styled.default)('span', {
 })(({
   ownerState,
   theme
-}) => (0, _extends2.default)({
-  display: 'block',
-  borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-}, ownerState.orientation === 'horizontal' && {
-  borderTopStyle: 'solid',
-  borderTopWidth: 1
-}, ownerState.orientation === 'vertical' && {
-  borderLeftStyle: 'solid',
-  borderLeftWidth: 1,
-  minHeight: 24
-}));
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
+  return (0, _extends2.default)({
+    display: 'block',
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
+  }, ownerState.orientation === 'horizontal' && {
+    borderTopStyle: 'solid',
+    borderTopWidth: 1
+  }, ownerState.orientation === 'vertical' && {
+    borderLeftStyle: 'solid',
+    borderLeftWidth: 1,
+    minHeight: 24
+  });
+});
 const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,

package/node/StepContent/StepContent.js

@@ -69,7 +69,7 @@ const StepContentRoot = (0, _styled.default)('div', {
   paddingLeft: 8 + 12,
   // margin + half icon
   paddingRight: 8,
-  borderLeft: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
 }, ownerState.last && {
   borderLeft: 'none'
 }));

package/node/StepIcon/StepIcon.js

@@ -141,8 +141,9 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconText, {
         className: classes.text,
         x: "12",
-        y: "16",
+        y: "12",
         textAnchor: "middle",
+        dominantBaseline: "central",
         ownerState: ownerState,
         children: icon
       })]

package/node/Switch/Switch.js

@@ -126,7 +126,7 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   left: 0,
   zIndex: 1,
   // Render above the focus ripple.
-  color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300],
+  color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
   transition: theme.transitions.create(['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
@@ -134,13 +134,13 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
     transform: 'translateX(20px)'
   },
   [`&.${_switchClasses.default.disabled}`]: {
-    color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`
   },
   [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
     opacity: 0.5
   },
   [`&.${_switchClasses.default.disabled} + .${_switchClasses.default.track}`]: {
-    opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
+    opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`
   },
   [`& .${_switchClasses.default.input}`]: {
     left: '-100%',
@@ -151,7 +151,7 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   ownerState
 }) => (0, _extends2.default)({
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -159,19 +159,19 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${_switchClasses.default.checked}`]: {
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${_switchClasses.default.disabled}`]: {
-      color: theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.55)
+      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.55)}`
     }
   },
   [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
-    backgroundColor: theme.palette[ownerState.color].main
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }
 }));
 const SwitchTrack = (0, _styled.default)('span', {
@@ -188,8 +188,8 @@ const SwitchTrack = (0, _styled.default)('span', {
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
-  opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
+  backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
+  opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 }));
 const SwitchThumb = (0, _styled.default)('span', {
   name: 'MuiSwitch',
@@ -198,7 +198,7 @@ const SwitchThumb = (0, _styled.default)('span', {
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
   width: 20,
   height: 20,

package/node/TableCell/TableCell.js

@@ -73,18 +73,18 @@ const TableCellRoot = (0, _styled.default)('td', {
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
   // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
-  borderBottom: `1px solid
+  borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? (0, _system.lighten)((0, _system.alpha)(theme.palette.divider, 1), 0.88) : (0, _system.darken)((0, _system.alpha)(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
   padding: 16
 }, ownerState.variant === 'head' && {
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: theme.typography.pxToRem(24),
   fontWeight: theme.typography.fontWeightMedium
 }, ownerState.variant === 'body' && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }, ownerState.variant === 'footer' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   lineHeight: theme.typography.pxToRem(21),
   fontSize: theme.typography.pxToRem(12)
 }, ownerState.size === 'small' && {
@@ -116,7 +116,7 @@ const TableCellRoot = (0, _styled.default)('td', {
   position: 'sticky',
   top: 0,
   zIndex: 2,
-  backgroundColor: theme.palette.background.default
+  backgroundColor: (theme.vars || theme).palette.background.default
 }));
 /**
  * The component renders a `<th>` element when the parent context is a header

package/node/Tabs/Tabs.js

@@ -455,6 +455,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       const tab = children[i];
 
       if (totalSize + tab[clientSize] > containerSize) {
+        // If the first item is longer than the container size, then only scroll
+        // by the container size.
+        if (i === 0) {
+          totalSize = containerSize;
+        }
+
         break;
       }
 

package/node/Tooltip/Tooltip.js

@@ -151,7 +151,7 @@ const TooltipTooltip = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : (0, _system.alpha)(theme.palette.grey[700], 0.92),
+  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _system.alpha)(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/styles/CssVarsProvider.js

@@ -23,11 +23,14 @@ const {
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
+  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = (0, _extends2.default)({}, theme, {
       typography: (0, _createTypography.default)(theme.palette, theme.typography)

package/node/styles/experimental_extendTheme.js

@@ -30,6 +30,18 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
 
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  obj[key] = obj[key] || defaultValue;
+}
+
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
@@ -58,16 +70,20 @@ function extendTheme(options = {}, ...args) {
       light: (0, _extends2.default)({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: (0, _extends2.default)({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputTouchBottomLine: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: (0, _extends2.default)({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: (0, _extends2.default)({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputTouchBottomLine: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
@@ -76,23 +92,98 @@ function extendTheme(options = {}, ...args) {
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
 
-    if (key === 'dark') {
-      palette.common.background = palette.common.background || '#000';
-      palette.common.onBackground = palette.common.onBackground || '#fff';
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
+
+
+    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.lighten)(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Slider, 'primaryTrack', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', (0, _system.lighten)(palette.warning.main, 0.62));
+      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.8));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.lighten)(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', (0, _system.lighten)((0, _system.alpha)(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
     } else {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
+      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', (0, _system.darken)(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.darken)(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.darken)(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.darken)(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.darken)(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.darken)(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Slider, 'primaryTrack', (0, _system.darken)(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.darken)(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', (0, _system.darken)(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', (0, _system.darken)(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', (0, _system.darken)(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', (0, _system.darken)(palette.warning.main, 0.5));
+      setColor(palette.SnackbarContent, 'bg', (0, _system.emphasize)(palette.background.default, 0.98));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.darken)(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.darken)(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.darken)(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.darken)(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.darken)(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.darken)(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', (0, _system.darken)((0, _system.alpha)(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
     }
 
     palette.common.backgroundChannel = (0, _system.colorChannel)(palette.common.background);
     palette.common.onBackgroundChannel = (0, _system.colorChannel)(palette.common.onBackground);
-    palette.dividerChannel = (0, _system.colorChannel)(palette.divider); // special token for Tooltip
-    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
-
-    if (!palette.grey.dark) {
-      palette.grey.dark = palette.grey[700];
-    }
-
+    palette.dividerChannel = (0, _system.colorChannel)(palette.divider);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -119,12 +210,16 @@ function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = (0, _system.colorChannel)(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = (0, _system.colorChannel)(colors.selected);
+      }
     });
   });
   theme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), theme);