From c2d31cc5a68a171548064198c16c34cc64b59995 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 25 Sep 2020 17:15:54 +0200
Subject: [PATCH 01/13] add emotion peer dependencies

---
 docs/src/modules/utils/helpers.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index cef69f1acd9a71..7bea9ccffbf6ca 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -77,6 +77,8 @@ function includePeerDependencies(deps, versions) {
   Object.assign(deps, {
     'react-dom': versions['react-dom'],
     react: versions.react,
+    '@emotion/core': versions['@emotion/core'],
+    '@emotion/styled': versions['@emotion/styled'],
   });
 
   if (
@@ -140,6 +142,8 @@ function getDependencies(raw, options = {}) {
     '@material-ui/system': getMuiPackageVersion('system', muiCommitRef),
     '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef),
     '@material-ui/pickers': 'next',
+    '@emotion/core': 'latest',
+    '@emotion/styled': 'latest',
   };
 
   const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;

From 5ae933ff68e3c736092102a1efeec89dbb850c97 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 25 Sep 2020 17:57:28 +0200
Subject: [PATCH 02/13] fixed types & tests

---
 docs/src/modules/utils/helpers.js      |  2 +-
 docs/src/modules/utils/helpers.test.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index 7bea9ccffbf6ca..d4dbb1c7e66eed 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -44,7 +44,7 @@ function pageToTitleI18n(page, t) {
  * set of packages that ship their own typings instead of using @types/ namespace
  * Array because Set([iterable]) is not supported in IE11
  */
-const packagesWithBundledTypes = ['date-fns'];
+const packagesWithBundledTypes = ['date-fns', '@emotion/core', '@emotion/styled'];
 
 /**
  * WARNING: Always uses `latest` typings.
diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js
index 42d93b963c1a11..b18c9e45994ed1 100644
--- a/docs/src/modules/utils/helpers.test.js
+++ b/docs/src/modules/utils/helpers.test.js
@@ -22,6 +22,8 @@ const styles = theme => ({
 
   it('should handle @ dependencies', () => {
     expect(getDependencies(s1)).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -46,6 +48,8 @@ const suggestions = [
 `;
 
     expect(getDependencies(source)).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/core': 'next',
       '@unexisting/thing': 'latest',
       'autosuggest-highlight': 'latest',
@@ -58,6 +62,8 @@ const suggestions = [
 
   it('should support next dependencies', () => {
     expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -78,6 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic
 
     expect(getDependencies(source)).to.deep.equal({
       'date-fns': 'latest',
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/pickers': 'next',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -88,6 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic
 
   it('can collect required @types packages', () => {
     expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -114,6 +124,8 @@ import {
 
     expect(getDependencies(source)).to.deep.equal({
       'date-fns': 'latest',
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/core': 'next',
       '@material-ui/pickers': 'next',
       react: 'latest',
@@ -127,6 +139,8 @@ import lab from '@material-ui/lab';
     `;
 
     expect(getDependencies(source)).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/core': 'next',
       '@material-ui/lab': 'next',
       react: 'latest',
@@ -142,6 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator';
     `;
 
     expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/core': 'next',
       '@material-ui/lab': 'next',
       '@material-ui/icons': 'next',
@@ -170,6 +186,8 @@ import * as Utils from '@material-ui/utils';
     ).to.deep.equal({
       react: 'latest',
       'react-dom': 'latest',
+      "@emotion/core": "latest",
+      "@emotion/styled": "latest",
       '@material-ui/core':
         'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core',
       '@material-ui/icons':

From 18b066810678d92bb2ff9b979f06a1ba3393aba6 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 25 Sep 2020 18:06:59 +0200
Subject: [PATCH 03/13] prettier

---
 docs/src/modules/utils/helpers.test.js | 36 +++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js
index b18c9e45994ed1..80152e4c1918f4 100644
--- a/docs/src/modules/utils/helpers.test.js
+++ b/docs/src/modules/utils/helpers.test.js
@@ -22,8 +22,8 @@ const styles = theme => ({
 
   it('should handle @ dependencies', () => {
     expect(getDependencies(s1)).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -48,8 +48,8 @@ const suggestions = [
 `;
 
     expect(getDependencies(source)).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@unexisting/thing': 'latest',
       'autosuggest-highlight': 'latest',
@@ -62,8 +62,8 @@ const suggestions = [
 
   it('should support next dependencies', () => {
     expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -84,8 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic
 
     expect(getDependencies(source)).to.deep.equal({
       'date-fns': 'latest',
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/pickers': 'next',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -96,8 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic
 
   it('can collect required @types packages', () => {
     expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@foo-bar/bip': 'latest',
       '@material-ui/core': 'next',
       'prop-types': 'latest',
@@ -124,8 +124,8 @@ import {
 
     expect(getDependencies(source)).to.deep.equal({
       'date-fns': 'latest',
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@material-ui/pickers': 'next',
       react: 'latest',
@@ -139,8 +139,8 @@ import lab from '@material-ui/lab';
     `;
 
     expect(getDependencies(source)).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@material-ui/lab': 'next',
       react: 'latest',
@@ -156,8 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator';
     `;
 
     expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/core': 'next',
       '@material-ui/lab': 'next',
       '@material-ui/icons': 'next',
@@ -186,8 +186,8 @@ import * as Utils from '@material-ui/utils';
     ).to.deep.equal({
       react: 'latest',
       'react-dom': 'latest',
-      "@emotion/core": "latest",
-      "@emotion/styled": "latest",
+      '@emotion/core': 'latest',
+      '@emotion/styled': 'latest',
       '@material-ui/core':
         'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core',
       '@material-ui/icons':

From 66c16565146568f6c75952f7617bdaaa2ceec38e Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 14:29:08 +0200
Subject: [PATCH 04/13] wip

---
 .../slider-styled/ContinuousSlider.js         |  1 +
 .../src/SliderStyled/SliderStyled.js          | 31 ++++++++++++++++++-
 .../material-ui-system/src/breakpoints.js     |  7 +++++
 packages/material-ui-system/src/spacing.js    | 16 ++++++++++
 packages/material-ui-system/src/style.js      | 10 ++++--
 packages/material-ui/src/styles/muiStyled.js  |  2 +-
 6 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js
index 6b14f7b682ebe4..a9fe4ab9e4a303 100644
--- a/docs/src/pages/components/slider-styled/ContinuousSlider.js
+++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js
@@ -31,6 +31,7 @@ export default function ContinuousSlider() {
         </Grid>
         <Grid item xs>
           <Slider
+            system={{ color: 'secondary.main' }}
             value={value}
             onChange={handleChange}
             aria-labelledby="continuous-slider"
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 87732e35f6a06a..6daf96e66b8d89 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -1,10 +1,39 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import {
+  borders,
+  compose,
+  display,
+  flexbox,
+  grid,
+  palette,
+  positions,
+  shadows,
+  sizing,
+  spacing,
+  typography,
+  css,
+} from '@material-ui/system';
 import { useThemeProps, muiStyled, fade, lighten, darken } from '@material-ui/core/styles';
 import { capitalize } from '@material-ui/core/utils';
 import SliderUnstyled from '../SliderUnstyled';
 import ValueLabelStyled from './ValueLabelStyled';
 
+export const systemStyleFunction = css(
+  compose(
+    borders,
+    display,
+    flexbox,
+    grid,
+    positions,
+    palette,
+    shadows,
+    sizing,
+    spacing,
+    typography,
+  ),
+);
+
 const overridesResolver = (props, styles, name) => {
   const {
     color = 'primary',
@@ -233,7 +262,7 @@ const SliderRoot = muiStyled(
       color: props.theme.palette.text.primary,
     },
   },
-}));
+}), systemStyleFunction);
 
 SliderRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js
index 029896503ce07b..f8b4e79ca3e745 100644
--- a/packages/material-ui-system/src/breakpoints.js
+++ b/packages/material-ui-system/src/breakpoints.js
@@ -52,6 +52,13 @@ function breakpoints(styleFunction) {
     const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
 
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
+      if(props.system) {
+        if(props.system[key]) {
+          acc = acc || {};
+          acc[themeBreakpoints.up(key)] = styleFunction({ theme: props.theme, ...props.system[key] });
+        }
+        return acc;
+      }
       if (props[key]) {
         acc = acc || {};
         acc[themeBreakpoints.up(key)] = styleFunction({ theme: props.theme, ...props[key] });
diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
index 41d191eb8928f1..44a87f30302442 100644
--- a/packages/material-ui-system/src/spacing.js
+++ b/packages/material-ui-system/src/spacing.js
@@ -152,7 +152,23 @@ function getStyleFromPropValue(cssProperties, transformer) {
 function spacing(props) {
   const theme = props.theme;
   const transformer = createUnarySpacing(theme);
+  if(props.system) {
+    return Object.keys(props.system)
+      .map((prop) => {
+        // Using a hash computation over an array iteration could be faster, but with only 28 items,
+        // it's doesn't worth the bundle size.
+        if (spacingKeys.indexOf(prop) === -1) {
+          return null;
+        }
+
+        const cssProperties = getCssProperties(prop);
+        const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
 
+        const propValue = props.system[prop];
+        return handleBreakpoints(props, propValue, styleFromPropValue);
+      })
+      .reduce(merge, {});
+  }
   return Object.keys(props)
     .map((prop) => {
       // Using a hash computation over an array iteration could be faster, but with only 28 items,
diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
index d499579507ff1f..f2bfd1c77a9b96 100644
--- a/packages/material-ui-system/src/style.js
+++ b/packages/material-ui-system/src/style.js
@@ -13,11 +13,17 @@ function style(options) {
   const { prop, cssProperty = options.prop, themeKey, transform } = options;
 
   const fn = (props) => {
-    if (props[prop] == null) {
+    if(props.system) {
+      console.log(props.system);
+      console.log(prop);
+      console.log(props[prop] || props.system?.[prop]);
+    }
+    const propValue = props[prop] || props.system?.[prop];
+
+    if (propValue == null) {
       return null;
     }
 
-    const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
     const styleFromPropValue = (propValueFinal) => {
diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
index d86f27239a4752..a006651f958ba6 100644
--- a/packages/material-ui/src/styles/muiStyled.js
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -54,7 +54,7 @@ const variantsResolver = (props, styles, theme, name) => {
   return variantsStyles;
 };
 
-const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme';
+const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'system';
 
 const muiStyled = (tag, options, muiOptions) => {
   const name = muiOptions.muiName;

From de39dd62d93efcd9dcd7ac98dc5324ca0217b513 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 14:33:33 +0200
Subject: [PATCH 05/13] removed console.logs

---
 .../src/SliderStyled/SliderStyled.js          | 331 +++++++++---------
 .../material-ui-system/src/breakpoints.js     |   9 +-
 packages/material-ui-system/src/spacing.js    |   2 +-
 packages/material-ui-system/src/style.js      |   5 -
 4 files changed, 174 insertions(+), 173 deletions(-)

diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 6daf96e66b8d89..761289b01fd286 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -81,188 +81,191 @@ const SliderRoot = muiStyled(
   'span',
   {},
   { muiName: 'MuiSlider', overridesResolver },
-)((props) => ({
-  height: 2,
-  width: '100%',
-  boxSizing: 'content-box',
-  padding: '13px 0',
-  display: 'inline-block',
-  position: 'relative',
-  cursor: 'pointer',
-  touchAction: 'none',
-  color: props.theme.palette.primary.main,
-  WebkitTapHighlightColor: 'transparent',
-  ...(props.styleProps.color === 'secondary' && {
-    color: props.theme.palette.secondary.main,
-  }),
-  '&.Mui-disabled': {
-    pointerEvents: 'none',
-    cursor: 'default',
-    color: props.theme.palette.grey[400],
-  },
-  ...(props.styleProps.orientation === 'vertical' && {
-    width: 2,
-    height: '100%',
-    padding: '0 13px',
-  }),
-  // The primary input mechanism of the device includes a pointing device of limited accuracy.
-  '@media (pointer: coarse)': {
-    // Reach 42px touch target, about ~8mm on screen.
-    padding: '20px 0',
-    ...(props.styleProps.orientation === 'vertical' && {
-      padding: '0 20px',
-    }),
-  },
-  '@media print': {
-    colorAdjust: 'exact',
-  },
-  ...(props.styleProps.marked && {
-    marginBottom: 20,
-    ...(props.styleProps.orientation === 'vertical' && {
-      marginBottom: 'auto',
-      marginRight: 20,
-    }),
-  }),
-  '& .MuiSlider-rail': {
-    display: 'block',
-    position: 'absolute',
-    width: '100%',
+)(
+  (props) => ({
     height: 2,
-    borderRadius: 1,
-    backgroundColor: 'currentColor',
-    opacity: 0.38,
-    ...(props.styleProps.orientation === 'vertical' && {
-      height: '100%',
-      width: 2,
-    }),
-    ...(props.styleProps.track === 'inverted' && {
-      opacity: 1,
+    width: '100%',
+    boxSizing: 'content-box',
+    padding: '13px 0',
+    display: 'inline-block',
+    position: 'relative',
+    cursor: 'pointer',
+    touchAction: 'none',
+    color: props.theme.palette.primary.main,
+    WebkitTapHighlightColor: 'transparent',
+    ...(props.styleProps.color === 'secondary' && {
+      color: props.theme.palette.secondary.main,
     }),
-  },
-  '& .MuiSlider-track': {
-    display: 'block',
-    position: 'absolute',
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: 'currentColor',
+    '&.Mui-disabled': {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: props.theme.palette.grey[400],
+    },
     ...(props.styleProps.orientation === 'vertical' && {
       width: 2,
+      height: '100%',
+      padding: '0 13px',
     }),
-    ...(props.styleProps.track === false && {
-      display: 'none',
-    }),
-    ...(props.styleProps.track === 'inverted' && {
-      backgroundColor:
-        // Same logic as the LinearProgress track color
-        props.theme.palette.type === 'light'
-          ? lighten(props.theme.palette.primary.main, 0.62)
-          : darken(props.theme.palette.primary.main, 0.5),
-    }),
-  },
-  '& .MuiSlider-thumb': {
-    position: 'absolute',
-    width: 12,
-    height: 12,
-    marginLeft: -6,
-    marginTop: -5,
-    boxSizing: 'border-box',
-    borderRadius: '50%',
-    outline: 0,
-    backgroundColor: 'currentColor',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: props.theme.transitions.create(['box-shadow'], {
-      duration: props.theme.transitions.duration.shortest,
+    // The primary input mechanism of the device includes a pointing device of limited accuracy.
+    '@media (pointer: coarse)': {
+      // Reach 42px touch target, about ~8mm on screen.
+      padding: '20px 0',
+      ...(props.styleProps.orientation === 'vertical' && {
+        padding: '0 20px',
+      }),
+    },
+    '@media print': {
+      colorAdjust: 'exact',
+    },
+    ...(props.styleProps.marked && {
+      marginBottom: 20,
+      ...(props.styleProps.orientation === 'vertical' && {
+        marginBottom: 'auto',
+        marginRight: 20,
+      }),
     }),
-    '::after': {
+    '& .MuiSlider-rail': {
+      display: 'block',
       position: 'absolute',
-      content: '""',
-      borderRadius: '50%',
-      // reach 42px hit target (2 * 15 + thumb diameter)
-      left: -15,
-      top: -15,
-      right: -15,
-      bottom: -15,
-    },
-    ':hover, &.Mui-focusVisible': {
-      boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`,
-      '@media (hover: none)': {
-        boxShadow: 'none',
-      },
+      width: '100%',
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: 'currentColor',
+      opacity: 0.38,
+      ...(props.styleProps.orientation === 'vertical' && {
+        height: '100%',
+        width: 2,
+      }),
+      ...(props.styleProps.track === 'inverted' && {
+        opacity: 1,
+      }),
     },
-    '&.Mui-active': {
-      boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`,
+    '& .MuiSlider-track': {
+      display: 'block',
+      position: 'absolute',
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: 'currentColor',
+      ...(props.styleProps.orientation === 'vertical' && {
+        width: 2,
+      }),
+      ...(props.styleProps.track === false && {
+        display: 'none',
+      }),
+      ...(props.styleProps.track === 'inverted' && {
+        backgroundColor:
+          // Same logic as the LinearProgress track color
+          props.theme.palette.type === 'light'
+            ? lighten(props.theme.palette.primary.main, 0.62)
+            : darken(props.theme.palette.primary.main, 0.5),
+      }),
     },
-    '&.Mui-disabled': {
-      width: 8,
-      height: 8,
-      marginLeft: -4,
-      marginTop: -3,
-      ':hover': {
-        boxShadow: 'none',
+    '& .MuiSlider-thumb': {
+      position: 'absolute',
+      width: 12,
+      height: 12,
+      marginLeft: -6,
+      marginTop: -5,
+      boxSizing: 'border-box',
+      borderRadius: '50%',
+      outline: 0,
+      backgroundColor: 'currentColor',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: props.theme.transitions.create(['box-shadow'], {
+        duration: props.theme.transitions.duration.shortest,
+      }),
+      '::after': {
+        position: 'absolute',
+        content: '""',
+        borderRadius: '50%',
+        // reach 42px hit target (2 * 15 + thumb diameter)
+        left: -15,
+        top: -15,
+        right: -15,
+        bottom: -15,
       },
-    },
-    ...(props.styleProps.orientation === 'vertical' && {
-      marginLeft: -5,
-      marginBottom: -6,
-    }),
-    ...(props.styleProps.orientation === 'vertical' && {
-      '&.Mui-disabled': {
-        marginLeft: -3,
-        marginBottom: -4,
+      ':hover, &.Mui-focusVisible': {
+        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`,
+        '@media (hover: none)': {
+          boxShadow: 'none',
+        },
       },
-    }),
-    ...(props.styleProps.color === 'secondary' && {
-      ':hover': {
-        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      '&.Mui-active': {
+        boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`,
       },
-      '&.Mui-focusVisible': {
-        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      '&.Mui-disabled': {
+        width: 8,
+        height: 8,
+        marginLeft: -4,
+        marginTop: -3,
+        ':hover': {
+          boxShadow: 'none',
+        },
       },
-      '&.Mui-active': {
-        boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+      ...(props.styleProps.orientation === 'vertical' && {
+        marginLeft: -5,
+        marginBottom: -6,
+      }),
+      ...(props.styleProps.orientation === 'vertical' && {
+        '&.Mui-disabled': {
+          marginLeft: -3,
+          marginBottom: -4,
+        },
+      }),
+      ...(props.styleProps.color === 'secondary' && {
+        ':hover': {
+          boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+        },
+        '&.Mui-focusVisible': {
+          boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+        },
+        '&.Mui-active': {
+          boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`,
+        },
+      }),
+    },
+    '& .MuiSlider-valueLabel': {
+      // IE 11 centering bug, to remove from the customization demos once no longer supported
+      left: 'calc(-50% - 4px)',
+    },
+    '& .MuiSlider-mark': {
+      position: 'absolute',
+      width: 2,
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: 'currentColor',
+      '&.MuiSlider-markActive': {
+        backgroundColor: props.theme.palette.background.paper,
+        opacity: 0.8,
       },
-    }),
-  },
-  '& .MuiSlider-valueLabel': {
-    // IE 11 centering bug, to remove from the customization demos once no longer supported
-    left: 'calc(-50% - 4px)',
-  },
-  '& .MuiSlider-mark': {
-    position: 'absolute',
-    width: 2,
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: 'currentColor',
-    '&.MuiSlider-markActive': {
-      backgroundColor: props.theme.palette.background.paper,
-      opacity: 0.8,
     },
-  },
-  '& .MuiSlider-markLabel': {
-    ...props.theme.typography.body2,
-    color: props.theme.palette.text.secondary,
-    position: 'absolute',
-    top: 26,
-    transform: 'translateX(-50%)',
-    whiteSpace: 'nowrap',
-    ...(props.styleProps.orientation === 'vertical' && {
-      top: 'auto',
-      left: 26,
-      transform: 'translateY(50%)',
-    }),
-    '@media (pointer: coarse)': {
-      top: 40,
+    '& .MuiSlider-markLabel': {
+      ...props.theme.typography.body2,
+      color: props.theme.palette.text.secondary,
+      position: 'absolute',
+      top: 26,
+      transform: 'translateX(-50%)',
+      whiteSpace: 'nowrap',
       ...(props.styleProps.orientation === 'vertical' && {
-        left: 31,
+        top: 'auto',
+        left: 26,
+        transform: 'translateY(50%)',
       }),
+      '@media (pointer: coarse)': {
+        top: 40,
+        ...(props.styleProps.orientation === 'vertical' && {
+          left: 31,
+        }),
+      },
+      '&.MuiSlider-markLabelActive': {
+        color: props.theme.palette.text.primary,
+      },
     },
-    '&.MuiSlider-markLabelActive': {
-      color: props.theme.palette.text.primary,
-    },
-  },
-}), systemStyleFunction);
+  }),
+  systemStyleFunction,
+);
 
 SliderRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js
index f8b4e79ca3e745..dade407479977f 100644
--- a/packages/material-ui-system/src/breakpoints.js
+++ b/packages/material-ui-system/src/breakpoints.js
@@ -52,10 +52,13 @@ function breakpoints(styleFunction) {
     const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
 
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
-      if(props.system) {
-        if(props.system[key]) {
+      if (props.system) {
+        if (props.system[key]) {
           acc = acc || {};
-          acc[themeBreakpoints.up(key)] = styleFunction({ theme: props.theme, ...props.system[key] });
+          acc[themeBreakpoints.up(key)] = styleFunction({
+            theme: props.theme,
+            ...props.system[key],
+          });
         }
         return acc;
       }
diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
index 44a87f30302442..46cc1e865626f1 100644
--- a/packages/material-ui-system/src/spacing.js
+++ b/packages/material-ui-system/src/spacing.js
@@ -152,7 +152,7 @@ function getStyleFromPropValue(cssProperties, transformer) {
 function spacing(props) {
   const theme = props.theme;
   const transformer = createUnarySpacing(theme);
-  if(props.system) {
+  if (props.system) {
     return Object.keys(props.system)
       .map((prop) => {
         // Using a hash computation over an array iteration could be faster, but with only 28 items,
diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
index f2bfd1c77a9b96..b2dc48adf4c0b0 100644
--- a/packages/material-ui-system/src/style.js
+++ b/packages/material-ui-system/src/style.js
@@ -13,11 +13,6 @@ function style(options) {
   const { prop, cssProperty = options.prop, themeKey, transform } = options;
 
   const fn = (props) => {
-    if(props.system) {
-      console.log(props.system);
-      console.log(prop);
-      console.log(props[prop] || props.system?.[prop]);
-    }
     const propValue = props[prop] || props.system?.[prop];
 
     if (propValue == null) {

From 830d99a9830c1ec8d57ea8df2b347bb2f86fed2d Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 14:43:18 +0200
Subject: [PATCH 06/13] moved systemPropsFunction to muiStyled

---
 .../src/SliderStyled/SliderStyled.js          | 362 ++++++++----------
 packages/material-ui/src/styles/muiStyled.js  |  33 ++
 2 files changed, 198 insertions(+), 197 deletions(-)

diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 761289b01fd286..92edf261be0f20 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -1,39 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import {
-  borders,
-  compose,
-  display,
-  flexbox,
-  grid,
-  palette,
-  positions,
-  shadows,
-  sizing,
-  spacing,
-  typography,
-  css,
-} from '@material-ui/system';
 import { useThemeProps, muiStyled, fade, lighten, darken } from '@material-ui/core/styles';
 import { capitalize } from '@material-ui/core/utils';
 import SliderUnstyled from '../SliderUnstyled';
 import ValueLabelStyled from './ValueLabelStyled';
 
-export const systemStyleFunction = css(
-  compose(
-    borders,
-    display,
-    flexbox,
-    grid,
-    positions,
-    palette,
-    shadows,
-    sizing,
-    spacing,
-    typography,
-  ),
-);
-
 const overridesResolver = (props, styles, name) => {
   const {
     color = 'primary',
@@ -80,192 +51,189 @@ const overridesResolver = (props, styles, name) => {
 const SliderRoot = muiStyled(
   'span',
   {},
-  { muiName: 'MuiSlider', overridesResolver },
-)(
-  (props) => ({
-    height: 2,
+  { muiName: 'MuiSlider', overridesResolver, useSystemProps: true },
+)((props) => ({
+  height: 2,
+  width: '100%',
+  boxSizing: 'content-box',
+  padding: '13px 0',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  touchAction: 'none',
+  color: props.theme.palette.primary.main,
+  WebkitTapHighlightColor: 'transparent',
+  ...(props.styleProps.color === 'secondary' && {
+    color: props.theme.palette.secondary.main,
+  }),
+  '&.Mui-disabled': {
+    pointerEvents: 'none',
+    cursor: 'default',
+    color: props.theme.palette.grey[400],
+  },
+  ...(props.styleProps.orientation === 'vertical' && {
+    width: 2,
+    height: '100%',
+    padding: '0 13px',
+  }),
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  '@media (pointer: coarse)': {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: '20px 0',
+    ...(props.styleProps.orientation === 'vertical' && {
+      padding: '0 20px',
+    }),
+  },
+  '@media print': {
+    colorAdjust: 'exact',
+  },
+  ...(props.styleProps.marked && {
+    marginBottom: 20,
+    ...(props.styleProps.orientation === 'vertical' && {
+      marginBottom: 'auto',
+      marginRight: 20,
+    }),
+  }),
+  '& .MuiSlider-rail': {
+    display: 'block',
+    position: 'absolute',
     width: '100%',
-    boxSizing: 'content-box',
-    padding: '13px 0',
-    display: 'inline-block',
-    position: 'relative',
-    cursor: 'pointer',
-    touchAction: 'none',
-    color: props.theme.palette.primary.main,
-    WebkitTapHighlightColor: 'transparent',
-    ...(props.styleProps.color === 'secondary' && {
-      color: props.theme.palette.secondary.main,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    opacity: 0.38,
+    ...(props.styleProps.orientation === 'vertical' && {
+      height: '100%',
+      width: 2,
     }),
-    '&.Mui-disabled': {
-      pointerEvents: 'none',
-      cursor: 'default',
-      color: props.theme.palette.grey[400],
-    },
+    ...(props.styleProps.track === 'inverted' && {
+      opacity: 1,
+    }),
+  },
+  '& .MuiSlider-track': {
+    display: 'block',
+    position: 'absolute',
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
     ...(props.styleProps.orientation === 'vertical' && {
       width: 2,
-      height: '100%',
-      padding: '0 13px',
     }),
-    // The primary input mechanism of the device includes a pointing device of limited accuracy.
-    '@media (pointer: coarse)': {
-      // Reach 42px touch target, about ~8mm on screen.
-      padding: '20px 0',
-      ...(props.styleProps.orientation === 'vertical' && {
-        padding: '0 20px',
-      }),
-    },
-    '@media print': {
-      colorAdjust: 'exact',
-    },
-    ...(props.styleProps.marked && {
-      marginBottom: 20,
-      ...(props.styleProps.orientation === 'vertical' && {
-        marginBottom: 'auto',
-        marginRight: 20,
-      }),
+    ...(props.styleProps.track === false && {
+      display: 'none',
+    }),
+    ...(props.styleProps.track === 'inverted' && {
+      backgroundColor:
+        // Same logic as the LinearProgress track color
+        props.theme.palette.type === 'light'
+          ? lighten(props.theme.palette.primary.main, 0.62)
+          : darken(props.theme.palette.primary.main, 0.5),
+    }),
+  },
+  '& .MuiSlider-thumb': {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    marginLeft: -6,
+    marginTop: -5,
+    boxSizing: 'border-box',
+    borderRadius: '50%',
+    outline: 0,
+    backgroundColor: 'currentColor',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: props.theme.transitions.create(['box-shadow'], {
+      duration: props.theme.transitions.duration.shortest,
     }),
-    '& .MuiSlider-rail': {
-      display: 'block',
+    '::after': {
       position: 'absolute',
-      width: '100%',
-      height: 2,
-      borderRadius: 1,
-      backgroundColor: 'currentColor',
-      opacity: 0.38,
-      ...(props.styleProps.orientation === 'vertical' && {
-        height: '100%',
-        width: 2,
-      }),
-      ...(props.styleProps.track === 'inverted' && {
-        opacity: 1,
-      }),
+      content: '""',
+      borderRadius: '50%',
+      // reach 42px hit target (2 * 15 + thumb diameter)
+      left: -15,
+      top: -15,
+      right: -15,
+      bottom: -15,
     },
-    '& .MuiSlider-track': {
-      display: 'block',
-      position: 'absolute',
-      height: 2,
-      borderRadius: 1,
-      backgroundColor: 'currentColor',
-      ...(props.styleProps.orientation === 'vertical' && {
-        width: 2,
-      }),
-      ...(props.styleProps.track === false && {
-        display: 'none',
-      }),
-      ...(props.styleProps.track === 'inverted' && {
-        backgroundColor:
-          // Same logic as the LinearProgress track color
-          props.theme.palette.type === 'light'
-            ? lighten(props.theme.palette.primary.main, 0.62)
-            : darken(props.theme.palette.primary.main, 0.5),
-      }),
+    ':hover, &.Mui-focusVisible': {
+      boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`,
+      '@media (hover: none)': {
+        boxShadow: 'none',
+      },
     },
-    '& .MuiSlider-thumb': {
-      position: 'absolute',
-      width: 12,
-      height: 12,
-      marginLeft: -6,
-      marginTop: -5,
-      boxSizing: 'border-box',
-      borderRadius: '50%',
-      outline: 0,
-      backgroundColor: 'currentColor',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      transition: props.theme.transitions.create(['box-shadow'], {
-        duration: props.theme.transitions.duration.shortest,
-      }),
-      '::after': {
-        position: 'absolute',
-        content: '""',
-        borderRadius: '50%',
-        // reach 42px hit target (2 * 15 + thumb diameter)
-        left: -15,
-        top: -15,
-        right: -15,
-        bottom: -15,
+    '&.Mui-active': {
+      boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`,
+    },
+    '&.Mui-disabled': {
+      width: 8,
+      height: 8,
+      marginLeft: -4,
+      marginTop: -3,
+      ':hover': {
+        boxShadow: 'none',
       },
-      ':hover, &.Mui-focusVisible': {
-        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`,
-        '@media (hover: none)': {
-          boxShadow: 'none',
-        },
+    },
+    ...(props.styleProps.orientation === 'vertical' && {
+      marginLeft: -5,
+      marginBottom: -6,
+    }),
+    ...(props.styleProps.orientation === 'vertical' && {
+      '&.Mui-disabled': {
+        marginLeft: -3,
+        marginBottom: -4,
       },
-      '&.Mui-active': {
-        boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`,
+    }),
+    ...(props.styleProps.color === 'secondary' && {
+      ':hover': {
+        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
       },
-      '&.Mui-disabled': {
-        width: 8,
-        height: 8,
-        marginLeft: -4,
-        marginTop: -3,
-        ':hover': {
-          boxShadow: 'none',
-        },
+      '&.Mui-focusVisible': {
+        boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
       },
-      ...(props.styleProps.orientation === 'vertical' && {
-        marginLeft: -5,
-        marginBottom: -6,
-      }),
-      ...(props.styleProps.orientation === 'vertical' && {
-        '&.Mui-disabled': {
-          marginLeft: -3,
-          marginBottom: -4,
-        },
-      }),
-      ...(props.styleProps.color === 'secondary' && {
-        ':hover': {
-          boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
-        },
-        '&.Mui-focusVisible': {
-          boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`,
-        },
-        '&.Mui-active': {
-          boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`,
-        },
-      }),
-    },
-    '& .MuiSlider-valueLabel': {
-      // IE 11 centering bug, to remove from the customization demos once no longer supported
-      left: 'calc(-50% - 4px)',
-    },
-    '& .MuiSlider-mark': {
-      position: 'absolute',
-      width: 2,
-      height: 2,
-      borderRadius: 1,
-      backgroundColor: 'currentColor',
-      '&.MuiSlider-markActive': {
-        backgroundColor: props.theme.palette.background.paper,
-        opacity: 0.8,
+      '&.Mui-active': {
+        boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`,
       },
+    }),
+  },
+  '& .MuiSlider-valueLabel': {
+    // IE 11 centering bug, to remove from the customization demos once no longer supported
+    left: 'calc(-50% - 4px)',
+  },
+  '& .MuiSlider-mark': {
+    position: 'absolute',
+    width: 2,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: 'currentColor',
+    '&.MuiSlider-markActive': {
+      backgroundColor: props.theme.palette.background.paper,
+      opacity: 0.8,
     },
-    '& .MuiSlider-markLabel': {
-      ...props.theme.typography.body2,
-      color: props.theme.palette.text.secondary,
-      position: 'absolute',
-      top: 26,
-      transform: 'translateX(-50%)',
-      whiteSpace: 'nowrap',
+  },
+  '& .MuiSlider-markLabel': {
+    ...props.theme.typography.body2,
+    color: props.theme.palette.text.secondary,
+    position: 'absolute',
+    top: 26,
+    transform: 'translateX(-50%)',
+    whiteSpace: 'nowrap',
+    ...(props.styleProps.orientation === 'vertical' && {
+      top: 'auto',
+      left: 26,
+      transform: 'translateY(50%)',
+    }),
+    '@media (pointer: coarse)': {
+      top: 40,
       ...(props.styleProps.orientation === 'vertical' && {
-        top: 'auto',
-        left: 26,
-        transform: 'translateY(50%)',
+        left: 31,
       }),
-      '@media (pointer: coarse)': {
-        top: 40,
-        ...(props.styleProps.orientation === 'vertical' && {
-          left: 31,
-        }),
-      },
-      '&.MuiSlider-markLabelActive': {
-        color: props.theme.palette.text.primary,
-      },
     },
-  }),
-  systemStyleFunction,
-);
+    '&.MuiSlider-markLabelActive': {
+      color: props.theme.palette.text.primary,
+    },
+  },
+}));
 
 SliderRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
index a006651f958ba6..e445d6428f3bee 100644
--- a/packages/material-ui/src/styles/muiStyled.js
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -1,6 +1,20 @@
 import styled from '@material-ui/styled-engine';
 import { propsToClassKey } from '@material-ui/styles';
 import defaultTheme from './defaultTheme';
+import {
+  borders,
+  compose,
+  display,
+  flexbox,
+  grid,
+  palette,
+  positions,
+  shadows,
+  sizing,
+  spacing,
+  typography,
+  css,
+} from '@material-ui/system';
 
 const getStyleOverrides = (name, theme) => {
   let styleOverrides = {};
@@ -56,6 +70,21 @@ const variantsResolver = (props, styles, theme, name) => {
 
 const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme' && prop !== 'system';
 
+export const systemStyleFunction = css(
+  compose(
+    borders,
+    display,
+    flexbox,
+    grid,
+    positions,
+    palette,
+    shadows,
+    sizing,
+    spacing,
+    typography,
+  ),
+);
+
 const muiStyled = (tag, options, muiOptions) => {
   const name = muiOptions.muiName;
   const defaultStyledResolver = styled(tag, { shouldForwardProp, label: name, ...options });
@@ -72,6 +101,10 @@ const muiStyled = (tag, options, muiOptions) => {
       return variantsResolver(props, getVariantStyles(name, theme), theme, name);
     });
 
+    if (muiOptions && muiOptions.useSystemProps) {
+      styles.push(systemStyleFunction);
+    }
+    
     return defaultStyledResolver(...styles);
   };
   return muiStyledResolver;

From 4f8aacb16aa576022f247630b8e2c092d640125c Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 14:51:02 +0200
Subject: [PATCH 07/13] added typings

---
 docs/pages/api-docs/slider-styled.md                         | 1 +
 docs/pages/api-docs/slider-unstyled.md                       | 1 +
 docs/src/pages/components/slider-styled/ContinuousSlider.tsx | 1 +
 packages/material-ui-lab/src/SliderStyled/SliderStyled.js    | 4 ++++
 .../material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts   | 5 +++++
 .../material-ui-lab/src/SliderUnstyled/SliderUnstyled.js     | 4 ++++
 packages/material-ui/src/Box/Box.d.ts                        | 4 ++--
 7 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md
index 376400283926c4..73cd5c911cd542 100644
--- a/docs/pages/api-docs/slider-styled.md
+++ b/docs/pages/api-docs/slider-styled.md
@@ -46,6 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> |  | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> |  | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> |  | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
+| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | Common system props. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> |  | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> |  | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md
index f226bd7c414057..1d500783b29a74 100644
--- a/docs/pages/api-docs/slider-unstyled.md
+++ b/docs/pages/api-docs/slider-unstyled.md
@@ -47,6 +47,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
+| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | Common system props. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
index cd52b4eab9c878..711e79c74f5b46 100644
--- a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
+++ b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx
@@ -34,6 +34,7 @@ export default function ContinuousSlider() {
         </Grid>
         <Grid item xs>
           <Slider
+            system={{ color: 'secondary.main' }}
             value={value}
             onChange={handleChange}
             aria-labelledby="continuous-slider"
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 92edf261be0f20..413b3632914ca9 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -436,6 +436,10 @@ Slider.propTypes = {
    * @default 1
    */
   step: PropTypes.number,
+  /**
+   * Common system props.
+   */
+  system: PropTypes.object,
   /**
    * The track presentation:
    *
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
index 9ed5f484a09ca7..182ec2dab2b995 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
@@ -1,4 +1,5 @@
 import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { ElementProps, SystemProps } from '@material-ui/core/Box';
 
 export interface Mark {
   value: number;
@@ -158,6 +159,10 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
      * @default 1
      */
     step?: number | null;
+    /**
+     * Common system props.
+     */
+    system?: ElementProps & SystemProps
     /**
      * The track presentation:
      *
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
index 1fb2b896363eb1..b9dddb1d7ab601 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
@@ -905,6 +905,10 @@ SliderUnstyled.propTypes = {
    * @default 1
    */
   step: PropTypes.number,
+  /**
+   * Common system props.
+   */
+  system: PropTypes.object,
   /**
    * The track presentation:
    *
diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts
index 2eb664df6c9d61..09a1529a196d40 100644
--- a/packages/material-ui/src/Box/Box.d.ts
+++ b/packages/material-ui/src/Box/Box.d.ts
@@ -30,8 +30,8 @@ type BoxStyleFunction = ComposedStyleFunction<
   ]
 >;
 
-type SystemProps = PropsFor<BoxStyleFunction>;
-type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, keyof SystemProps>;
+export type SystemProps = PropsFor<BoxStyleFunction>;
+export type ElementProps = Omit<React.HTMLAttributes<HTMLElement>, keyof SystemProps>;
 
 export interface BoxProps extends ElementProps, SystemProps {
   // styled API

From 8967a4965d1c364eb559bab2c94868e1d7d2e845 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 15:27:41 +0200
Subject: [PATCH 08/13] prettier

---
 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts | 2 +-
 packages/material-ui/src/styles/muiStyled.js                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
index 182ec2dab2b995..3d5300de981eca 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
@@ -162,7 +162,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
     /**
      * Common system props.
      */
-    system?: ElementProps & SystemProps
+    system?: ElementProps & SystemProps;
     /**
      * The track presentation:
      *
diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
index e445d6428f3bee..1a2d82de1d6b92 100644
--- a/packages/material-ui/src/styles/muiStyled.js
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -104,7 +104,7 @@ const muiStyled = (tag, options, muiOptions) => {
     if (muiOptions && muiOptions.useSystemProps) {
       styles.push(systemStyleFunction);
     }
-    
+
     return defaultStyledResolver(...styles);
   };
   return muiStyledResolver;

From 2f36b4ca0f643d13610832f70892c389bff5437b Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 15:35:47 +0200
Subject: [PATCH 09/13] refactorings

---
 .../material-ui-system/src/breakpoints.js     | 17 ++++-------------
 packages/material-ui-system/src/spacing.js    | 19 ++-----------------
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js
index dade407479977f..a97d6916764e77 100644
--- a/packages/material-ui-system/src/breakpoints.js
+++ b/packages/material-ui-system/src/breakpoints.js
@@ -47,21 +47,12 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
 }
 
 function breakpoints(styleFunction) {
-  const newStyleFunction = (props) => {
-    const base = styleFunction(props);
-    const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;
+  const newStyleFunction = (componentProps) => {
+    const base = styleFunction(componentProps);
+    const themeBreakpoints = componentProps.theme.breakpoints || defaultBreakpoints;
+    const props = componentProps.system || componentProps;
 
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
-      if (props.system) {
-        if (props.system[key]) {
-          acc = acc || {};
-          acc[themeBreakpoints.up(key)] = styleFunction({
-            theme: props.theme,
-            ...props.system[key],
-          });
-        }
-        return acc;
-      }
       if (props[key]) {
         acc = acc || {};
         acc[themeBreakpoints.up(key)] = styleFunction({ theme: props.theme, ...props[key] });
diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
index 46cc1e865626f1..b4ea17e417c302 100644
--- a/packages/material-ui-system/src/spacing.js
+++ b/packages/material-ui-system/src/spacing.js
@@ -149,26 +149,11 @@ function getStyleFromPropValue(cssProperties, transformer) {
     }, {});
 }
 
-function spacing(props) {
+function spacing(componentProps) {
   const theme = props.theme;
   const transformer = createUnarySpacing(theme);
-  if (props.system) {
-    return Object.keys(props.system)
-      .map((prop) => {
-        // Using a hash computation over an array iteration could be faster, but with only 28 items,
-        // it's doesn't worth the bundle size.
-        if (spacingKeys.indexOf(prop) === -1) {
-          return null;
-        }
-
-        const cssProperties = getCssProperties(prop);
-        const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
+  const props = componentProps.system || componentProps;
 
-        const propValue = props.system[prop];
-        return handleBreakpoints(props, propValue, styleFromPropValue);
-      })
-      .reduce(merge, {});
-  }
   return Object.keys(props)
     .map((prop) => {
       // Using a hash computation over an array iteration could be faster, but with only 28 items,

From a980971622f395ae46ddf63b5fb8b4c40d607229 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 15:36:55 +0200
Subject: [PATCH 10/13] fix

---
 packages/material-ui-system/src/spacing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
index b4ea17e417c302..72f74f17b95e10 100644
--- a/packages/material-ui-system/src/spacing.js
+++ b/packages/material-ui-system/src/spacing.js
@@ -150,7 +150,7 @@ function getStyleFromPropValue(cssProperties, transformer) {
 }
 
 function spacing(componentProps) {
-  const theme = props.theme;
+  const theme = componentProps.theme;
   const transformer = createUnarySpacing(theme);
   const props = componentProps.system || componentProps;
 

From 621bdd857c9508db37d62ff92d8e8adc6387ab76 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 15:37:24 +0200
Subject: [PATCH 11/13] import order

---
 packages/material-ui/src/styles/muiStyled.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
index 1a2d82de1d6b92..9e20b267ddc7f0 100644
--- a/packages/material-ui/src/styles/muiStyled.js
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -1,6 +1,5 @@
 import styled from '@material-ui/styled-engine';
 import { propsToClassKey } from '@material-ui/styles';
-import defaultTheme from './defaultTheme';
 import {
   borders,
   compose,
@@ -15,6 +14,7 @@ import {
   typography,
   css,
 } from '@material-ui/system';
+import defaultTheme from './defaultTheme';
 
 const getStyleOverrides = (name, theme) => {
   let styleOverrides = {};

From d906feb6837363105759237dd98ddc39df3a05ee Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 30 Sep 2020 19:20:13 +0200
Subject: [PATCH 12/13] changed description

---
 docs/pages/api-docs/slider-styled.md                            | 2 +-
 docs/pages/api-docs/slider-unstyled.md                          | 2 +-
 packages/material-ui-lab/src/SliderStyled/SliderStyled.js       | 2 +-
 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts | 2 +-
 packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md
index 73cd5c911cd542..c3bdd4834a2b80 100644
--- a/docs/pages/api-docs/slider-styled.md
+++ b/docs/pages/api-docs/slider-styled.md
@@ -46,7 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> |  | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> |  | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> |  | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
-| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | Common system props. |
+| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | System props to apply to the component. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> |  | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> |  | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md
index 1d500783b29a74..8999505f7d3646 100644
--- a/docs/pages/api-docs/slider-unstyled.md
+++ b/docs/pages/api-docs/slider-unstyled.md
@@ -47,7 +47,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
 | <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
-| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | Common system props. |
+| <span class="prop-name">system</span> | <span class="prop-type">object</span> |  | System props to apply to the component. |
 | <span class="prop-name">track</span> | <span class="prop-type">'inverted'<br>&#124;&nbsp;'normal'<br>&#124;&nbsp;false</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">Array&lt;number&gt;<br>&#124;&nbsp;number</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 413b3632914ca9..8e649d086d9815 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -437,7 +437,7 @@ Slider.propTypes = {
    */
   step: PropTypes.number,
   /**
-   * Common system props.
+   * System props to apply to the component.
    */
   system: PropTypes.object,
   /**
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
index 3d5300de981eca..9f782a6b32f665 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts
@@ -160,7 +160,7 @@ export interface SliderTypeMap<P = {}, D extends React.ElementType = 'span'> {
      */
     step?: number | null;
     /**
-     * Common system props.
+     * System props to apply to the component.
      */
     system?: ElementProps & SystemProps;
     /**
diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
index b9dddb1d7ab601..75f06bfc9344e6 100644
--- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
+++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js
@@ -906,7 +906,7 @@ SliderUnstyled.propTypes = {
    */
   step: PropTypes.number,
   /**
-   * Common system props.
+   * System props to apply to the component.
    */
   system: PropTypes.object,
   /**

From 0822e625453dc1430a6e22462810b061cc2891bc Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Fri, 2 Oct 2020 11:59:52 +0200
Subject: [PATCH 13/13] renamed useSystemProps to addSystemProps

---
 packages/material-ui-lab/src/SliderStyled/SliderStyled.js | 2 +-
 packages/material-ui/src/styles/muiStyled.d.ts            | 1 +
 packages/material-ui/src/styles/muiStyled.js              | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
index 8e649d086d9815..3485f6dee7cc9a 100644
--- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
+++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js
@@ -51,7 +51,7 @@ const overridesResolver = (props, styles, name) => {
 const SliderRoot = muiStyled(
   'span',
   {},
-  { muiName: 'MuiSlider', overridesResolver, useSystemProps: true },
+  { muiName: 'MuiSlider', overridesResolver, addSystemProps: true },
 )((props) => ({
   height: 2,
   width: '100%',
diff --git a/packages/material-ui/src/styles/muiStyled.d.ts b/packages/material-ui/src/styles/muiStyled.d.ts
index bd9aca8a85a51e..a4992b23b5a7e0 100644
--- a/packages/material-ui/src/styles/muiStyled.d.ts
+++ b/packages/material-ui/src/styles/muiStyled.d.ts
@@ -181,6 +181,7 @@ export interface StyledOptions {
 interface MuiStyledOptions<Theme extends object = any> {
   muiName: string;
   overridesResolver?: (props: any, styles: string | object, name: string) => string | object;
+  addSystemProps?: boolean;
 }
 
 export interface CreateStyled<Theme extends object = any> {
diff --git a/packages/material-ui/src/styles/muiStyled.js b/packages/material-ui/src/styles/muiStyled.js
index 9e20b267ddc7f0..41ece655520b55 100644
--- a/packages/material-ui/src/styles/muiStyled.js
+++ b/packages/material-ui/src/styles/muiStyled.js
@@ -101,7 +101,7 @@ const muiStyled = (tag, options, muiOptions) => {
       return variantsResolver(props, getVariantStyles(name, theme), theme, name);
     });
 
-    if (muiOptions && muiOptions.useSystemProps) {
+    if (muiOptions && muiOptions.addSystemProps) {
       styles.push(systemStyleFunction);
     }