[core] Remove usage of theme.spacing.unit

.size-limit.js

@@ -27,7 +27,7 @@ module.exports = [
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.9 KB',
+    limit: '94.6 KB',
   },
   {
     name: 'The main bundle of the docs',

packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js

@@ -83,11 +83,11 @@ const styles = theme => ({
     fontSize: 16,
     color: theme.palette.text.primary,
     '& .anchor-link': {
-      marginTop: -theme.spacing.unit * 12, // Offset for the anchor.
+      marginTop: -96, // Offset for the anchor.
       position: 'absolute',
     },
     '& pre, & pre[class*="language-"]': {
-      margin: `${theme.spacing.unit * 3}px 0`,
+      margin: '24px 0',
       padding: '12px 18px',
       backgroundColor: theme.palette.background.paper,
       borderRadius: theme.shape.borderRadius,
@@ -110,26 +110,26 @@ const styles = theme => ({
     '& h1': {
       ...theme.typography.display2,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+      margin: '32px 0 16px',
     },
     '& .description': {
       ...theme.typography.headline,
-      margin: `0 0 ${theme.spacing.unit * 5}px`,
+      margin: '0 0 40px',
     },
     '& h2': {
       ...theme.typography.display1,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: '32px 0 24px',
     },
     '& h3': {
       ...theme.typography.headline,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 3}px`,
+      margin: '32px 0 24px',
     },
     '& h4': {
       ...theme.typography.title,
       color: theme.palette.text.secondary,
-      margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 2}px`,
+      margin: '24px 0 16px',
     },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
@@ -149,7 +149,7 @@ const styles = theme => ({
       '&:hover .anchor-link-style': {
         display: 'inline-block',
         opacity: 1,
-        padding: `0 ${theme.spacing.unit}px`,
+        padding: '0 8px',
         color: theme.palette.text.hint,
         '&:hover': {
           color: theme.palette.text.secondary,
@@ -199,16 +199,14 @@ const styles = theme => ({
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${
-        theme.spacing.unit
-      }px`,
+      padding: '8px 16px 8px 8px',
       textAlign: 'left',
     },
     '& td:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& td compact': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& td code': {
       fontSize: 13,
@@ -218,11 +216,11 @@ const styles = theme => ({
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.divider}`,
       fontWeight: theme.typography.fontWeightMedium,
-      padding: `0 ${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px`,
+      padding: '0 16px 0 8px',
       textAlign: 'left',
     },
     '& th:last-child': {
-      paddingRight: theme.spacing.unit * 3,
+      paddingRight: 24,
     },
     '& tr': {
       height: 48,
@@ -236,8 +234,8 @@ const styles = theme => ({
     '& blockquote': {
       borderLeft: `5px solid ${theme.palette.text.hint}`,
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px`,
-      margin: `${theme.spacing.unit * 3}px 0`,
+      padding: '4px 24px',
+      margin: '24px 0',
     },
     '& a, & a code': {
       // Style taken from the Link component

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import { duration } from '@material-ui/core/styles/transitions';
 import Button from '@material-ui/core/Button';
 import { isMuiElement } from '@material-ui/core/utils/reactHelpers';
 
-const styles = theme => ({
+const styles = {
   root: {
     zIndex: 1050,
     display: 'flex',
@@ -19,12 +19,12 @@ const styles = theme => ({
   actions: {
     display: 'flex',
     flexDirection: 'column-reverse', // Display the first action at the bottom.
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: 16,
   },
   actionsClosed: {
     transition: 'top 0s linear 0.2s',
   },
-});
+};
 
 class SpeedDial extends React.Component {
   state = {

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -10,7 +10,7 @@ const styles = theme => ({
     position: 'relative',
   },
   button: {
-    margin: theme.spacing.unit,
+    margin: 8,
     color: theme.palette.text.secondary,
     transition: `${theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,

packages/material-ui/src/Avatar/Avatar.js

@@ -10,8 +10,8 @@ export const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: theme.spacing.unit * 5,
-    height: theme.spacing.unit * 5,
+    width: 40,
+    height: 40,
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(20),
     borderRadius: '50%',

packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js

@@ -12,7 +12,7 @@ export const styles = theme => ({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short,
     }),
-    paddingTop: theme.spacing.unit,
+    paddingTop: 8,
     paddingBottom: 10,
     paddingLeft: 12,
     paddingRight: 12,
@@ -21,7 +21,7 @@ export const styles = theme => ({
     color: theme.palette.text.secondary,
     flex: '1',
     '&$iconOnly': {
-      paddingTop: theme.spacing.unit * 2,
+      paddingTop: 16,
     },
     '&$selected': {
       paddingTop: 6,

packages/material-ui/src/CardActions/CardActions.js

@@ -10,13 +10,13 @@ export const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    padding: '8px 4px',
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+      padding: '8px 12px',
     },
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: '0 4px',
   },
 });
 

packages/material-ui/src/CardContent/CardContent.js

@@ -5,10 +5,10 @@ import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
   root: theme.mixins.gutters({
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 16,
+    paddingBottom: 16,
     '&:last-child': {
-      paddingBottom: theme.spacing.unit * 3,
+      paddingBottom: 24,
     },
   }),
 });

packages/material-ui/src/CardHeader/CardHeader.js

@@ -8,18 +8,18 @@ export const styles = theme => ({
   root: theme.mixins.gutters({
     display: 'flex',
     alignItems: 'center',
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: 16,
+    paddingBottom: 16,
   }),
   avatar: {
     flex: '0 0 auto',
-    marginRight: theme.spacing.unit * 2,
+    marginRight: 16,
   },
   action: {
     flex: '0 0 auto',
     alignSelf: 'flex-start',
-    marginTop: theme.spacing.unit * -1,
-    marginRight: theme.spacing.unit * -2,
+    marginTop: -8,
+    marginRight: -16,
   },
   content: {
     flex: '1 1 auto',

packages/material-ui/src/Dialog/Dialog.js

@@ -32,7 +32,7 @@ export const styles = theme => ({
   },
   paperScrollPaper: {
     flex: '0 1 auto',
-    maxHeight: `calc(100% - ${48 * 2}px)`,
+    maxHeight: 'calc(100% - 96px)',
   },
   paperScrollBody: {
     margin: '48px auto',

packages/material-ui/src/DialogActions/DialogActions.js

@@ -5,19 +5,19 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     flex: '0 0 auto',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+    margin: '8px 4px',
   },
   action: {
-    margin: `0 ${theme.spacing.unit / 2}px`,
+    margin: '0 4px',
     minWidth: 64,
   },
-});
+};
 
 function DialogActions(props) {
   const { disableActionSpacing, children, classes, className, ...other } = props;

packages/material-ui/src/DialogContent/DialogContent.js

@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => {
-  const spacing = theme.spacing.unit * 3;
-  return {
-    root: {
-      flex: '1 1 auto',
-      overflowY: 'auto',
-      WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
-      padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
-      '&:first-child': {
-        paddingTop: spacing,
-      },
+export const styles = {
+  root: {
+    flex: '1 1 auto',
+    overflowY: 'auto',
+    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    padding: '0 24px 24px',
+    '&:first-child': {
+      paddingTop: 24,
     },
-  };
+  },
 };
 
 function DialogContent(props) {

packages/material-ui/src/DialogTitle/DialogTitle.js

@@ -4,14 +4,13 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     margin: 0,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
-      20px ${theme.spacing.unit * 3}px`,
+    padding: '24px 24px 20px',
     flex: '0 0 auto',
   },
-});
+};
 
 function DialogTitle(props) {
   const { children, classes, className, disableTypography, ...other } = props;

packages/material-ui/src/Divider/Divider.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
     width: '100%',
   },
   inset: {
-    marginLeft: theme.spacing.unit * 9,
+    marginLeft: 72,
   },
   light: {
     backgroundColor: fade(theme.palette.divider, 0.08),

packages/material-ui/src/ExpansionPanel/ExpansionPanel.js

@@ -60,7 +60,7 @@ export const styles = theme => {
       },
     },
     expanded: {
-      margin: `${theme.spacing.unit * 2}px 0`,
+      margin: '16px 0',
       '&:first-child': {
         marginTop: 0,
       },

packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js

@@ -5,17 +5,17 @@ import withStyles from '../styles/withStyles';
 import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+    padding: '16px 8px',
   },
   action: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: 8,
   },
-});
+};
 
 function ExpansionPanelActions(props) {
   const { children, classes, className, ...other } = props;

packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 
-export const styles = theme => ({
+export const styles = {
   root: {
     display: 'flex',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
+    padding: '8px 24px 24px',
   },
-});
+};
 
 function ExpansionPanelDetails(props) {
   const { classes, children, className, ...other } = props;

packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js

@@ -14,9 +14,9 @@ export const styles = theme => {
   return {
     root: {
       display: 'flex',
-      minHeight: theme.spacing.unit * 6,
+      minHeight: 8 * 6,
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
-      padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
+      padding: '0 24px 0 24px',
       '&:hover:not($disabled)': {
         cursor: 'pointer',
       },
@@ -39,7 +39,7 @@ export const styles = theme => {
       transition: theme.transitions.create(['margin'], transition),
       margin: '12px 0',
       '& > :last-child': {
-        paddingRight: theme.spacing.unit * 4,
+        paddingRight: 32,
       },
       '&$expanded': {
         margin: '20px 0',
@@ -48,7 +48,7 @@ export const styles = theme => {
     expandIcon: {
       position: 'absolute',
       top: '50%',
-      right: theme.spacing.unit,
+      right: 8,
       transform: 'translateY(-50%) rotate(0deg)',
       transition: theme.transitions.create('transform', transition),
       '&:hover': {