[Grid] Use a unitless spacing API

.size-limit.js

@@ -16,7 +16,7 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.7 KB',
+    limit: '18.8 KB',
   },
   {
     name: 'The initial cost paid for using one component with ES modules',
@@ -28,7 +28,13 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.3 KB',
+    limit: '92.4 KB',
+  },
+  {
+    name: 'The theme object',
+    webpack: true,
+    path: 'packages/material-ui/build/styles/createMuiTheme.js',
+    limit: '7 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -53,14 +59,14 @@ module.exports = [
     name: 'The size of the @material-ui/core/Button component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Button/index.js',
-    limit: '24.5 KB',
+    limit: '24.6 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-modal
     name: 'The size of the @material-ui/core/Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.0 KB',
+    limit: '24.1 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper

docs/src/modules/components/Ad.js

@@ -15,19 +15,19 @@ const styles = theme => ({
     minHeight: 116,
     maxWidth: 345,
     display: 'block',
-    marginTop: theme.spacing.unit * 4,
-    marginBottom: theme.spacing.unit * 3,
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
   },
   info: {
     ...theme.typography.caption,
     position: 'absolute',
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     cursor: 'default',
     bottom: 0,
     right: 0,
   },
   paper: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     display: 'block',
   },
 });

docs/src/modules/components/AppContent.js

@@ -9,16 +9,16 @@ const styles = theme => ({
     flex: '1 1 100%',
     maxWidth: '100%',
     margin: '0 auto',
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing.unit * 4,
-      paddingRight: theme.spacing.unit * 4,
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4),
       maxWidth: 'calc(100% - 167px)',
     },
     [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing.unit * 5,
-      paddingRight: theme.spacing.unit * 9,
+      paddingLeft: theme.spacing(5),
+      paddingRight: theme.spacing(9),
       maxWidth: 'calc(100% - 240px - 167px)',
     },
   },

docs/src/modules/components/AppDrawer.js

@@ -19,7 +19,7 @@ const styles = theme => ({
   },
   title: {
     color: theme.palette.text.secondary,
-    marginBottom: theme.spacing.unit / 2,
+    marginBottom: theme.spacing(0.5),
     '&:hover': {
       color: theme.palette.primary.main,
     },
@@ -30,7 +30,7 @@ const styles = theme => ({
   },
   toolbar: {
     ...theme.mixins.toolbar,
-    paddingLeft: theme.spacing.unit * 3,
+    paddingLeft: theme.spacing(3),
     display: 'flex',
     flexGrow: 1,
     flexDirection: 'column',

docs/src/modules/components/AppSearch.js

@@ -125,8 +125,8 @@ const styles = theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     position: 'relative',
-    marginRight: theme.spacing.unit * 2,
-    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1),
     borderRadius: theme.shape.borderRadius,
     backgroundColor: fade(theme.palette.common.white, 0.15),
     '&:hover': {
@@ -141,7 +141,7 @@ const styles = theme => ({
     },
   },
   search: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing(9),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -153,8 +153,7 @@ const styles = theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-      .spacing.unit * 9}px`,
+    padding: theme.spacing(1, 1, 1, 9),
   },
 });
 

docs/src/modules/components/AppTableOfContents.js

@@ -55,15 +55,14 @@ const styles = theme => ({
     wordBreak: 'break-word',
     height: 'calc(100vh - 70px)',
     overflowY: 'auto',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit *
-      2}px 5px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(2)}px 5px`,
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'block',
     },
   },
   contents: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   ul: {
     padding: 0,
@@ -72,7 +71,7 @@ const styles = theme => ({
   },
   item: {
     fontSize: 13,
-    padding: `${theme.spacing.unit / 2}px 0`,
+    padding: theme.spacing(0.5, 0),
   },
 });
 

docs/src/modules/components/AppTheme.js

@@ -8,8 +8,8 @@ import Head from 'docs/src/modules/components/Head';
 
 const styles = theme => ({
   credit: {
-    marginTop: theme.spacing.unit * 6,
-    marginBottom: theme.spacing.unit * 4,
+    marginTop: theme.spacing(6),
+    marginBottom: theme.spacing(4),
   },
   hideCredit: {
     position: 'absolute',

docs/src/modules/components/Carbon.js

@@ -7,13 +7,14 @@ const styles = theme => ({
     '#carbonads': {
       overflow: 'hidden',
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-        .spacing.unit + 130}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+        1,
+      ) + 130}px`,
       borderRadius: theme.shape.borderRadius,
       '& .carbon-img': {
         float: 'left',
         marginLeft: -130,
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       '& img': {
         verticalAlign: 'middle',

docs/src/modules/components/CodeFund.js

@@ -7,13 +7,14 @@ const styles = theme => ({
     '#cf': {
       overflow: 'hidden',
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-        .spacing.unit + 130}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+        1,
+      ) + 130}px`,
       borderRadius: theme.shape.borderRadius,
       '& .cf-img-wrapper.cf-img-wrapper': {
         float: 'left',
         marginLeft: -130,
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       '& img': {
         verticalAlign: 'middle',

docs/src/modules/components/Demo.js

@@ -40,10 +40,10 @@ const styles = theme => ({
   root: {
     position: 'relative',
     marginBottom: 40,
-    marginLeft: -theme.spacing.unit * 2,
-    marginRight: -theme.spacing.unit * 2,
+    marginLeft: -theme.spacing(2),
+    marginRight: -theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      padding: `0 ${theme.spacing.unit}px`,
+      padding: theme.spacing(0, 1),
       marginLeft: 0,
       marginRight: 0,
     },
@@ -56,13 +56,13 @@ const styles = theme => ({
     justifyContent: 'center',
     padding: 20,
     [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing.unit * 3,
+      padding: theme.spacing(3),
     },
   },
   demoHiddenHeader: {
-    paddingTop: theme.spacing.unit * 2,
+    paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingTop: theme.spacing.unit * 3,
+      paddingTop: theme.spacing(3),
     },
   },
   header: {
@@ -71,7 +71,7 @@ const styles = theme => ({
       display: 'flex',
       flip: false,
       top: 0,
-      right: theme.spacing.unit,
+      right: theme.spacing(1),
     },
     justifyContent: 'space-between',
   },
@@ -84,7 +84,7 @@ const styles = theme => ({
     },
     '& pre': {
       overflow: 'auto',
-      paddingTop: theme.spacing.unit * 5,
+      paddingTop: theme.spacing(5),
       margin: '0px !important',
       borderRadius: '0px !important',
     },

docs/src/modules/components/HomeBackers.js

@@ -16,9 +16,9 @@ const styles = theme => ({
     minHeight: 600,
   },
   markdownElement: {
-    maxWidth: theme.spacing.unit * 110,
+    maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 

docs/src/modules/components/HomeFooter.js

@@ -9,11 +9,11 @@ import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
   root: {
-    maxWidth: theme.spacing.unit * 110,
+    maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    padding: theme.spacing(3, 2),
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px`,
+      padding: theme.spacing(6, 2),
     },
   },
   list: {
@@ -22,11 +22,11 @@ const styles = theme => ({
     listStyle: 'none',
   },
   listItem: {
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
   },
   version: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
 });
 

docs/src/modules/components/HomeSteps.js

@@ -18,11 +18,11 @@ import Link from 'docs/src/modules/components/Link';
 const styles = theme => ({
   step: {
     border: `12px solid ${theme.palette.background.paper}`,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    padding: theme.spacing(3, 2),
     borderRightWidth: 0,
     borderLeftWidth: 0,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit * 5}px ${theme.spacing.unit * 4}px`,
+      padding: theme.spacing(5, 4),
     },
     [theme.breakpoints.up('md')]: {
       borderRightWidth: 12,
@@ -45,33 +45,33 @@ const styles = theme => ({
   },
   stepTitle: {
     display: 'flex',
-    marginBottom: theme.spacing.unit * 3,
+    marginBottom: theme.spacing(3),
     alignItems: 'center',
   },
   stepIcon: {
     color: theme.palette.primary.dark,
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     fontSize: 30,
   },
   stepBody: {
     minHeight: 270,
   },
   markdownElement: {
-    maxWidth: `calc(100vw - ${(theme.spacing.unit * 5 + 1) * 2}px)`,
+    maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
     '& pre, & pre[class*="language-"], & code': {
       backgroundColor: 'transparent',
     },
     '& pre, & pre[class*="language-"]': {
-      padding: theme.spacing.unit,
+      padding: theme.spacing(1),
       margin: 0,
     },
   },
   divider: {
-    marginTop: theme.spacing.unit * 4,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(2),
   },
   link: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     display: 'block',
   },
   img: {

docs/src/modules/components/MarkdownDocs.js

@@ -32,9 +32,9 @@ const styles = theme => ({
     alignItems: 'flex-end',
   },
   markdownElement: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    padding: `0 ${theme.spacing.unit}px`,
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    padding: theme.spacing(0, 1),
   },
 });
 

docs/src/modules/components/Tidelift.js

@@ -9,8 +9,7 @@ import compose from 'recompose/compose';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-      .spacing.unit * 2}px`,
+    padding: theme.spacing(1, 1, 1, 2),
     right: 0,
     left: 0,
     display: 'flex',
@@ -31,7 +30,7 @@ const styles = theme => ({
     content: '""',
     width: 20,
     height: 20,
-    margin: `0 ${theme.spacing.unit}px 0 0`,
+    margin: theme.spacing(0, 1, 0, 0),
   },
 });