my turn :)

docs/src/modules/components/Carbon.js

@@ -56,7 +56,7 @@ const styles = theme => ({
   },
   ad: {
     zIndex: 1,
-    borderRadius: 4,
+    borderRadius: theme.borderRadius.medium,
     position: 'relative',
     [theme.breakpoints.up('sm')]: {
       margin: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,

docs/src/pages/demos/cards/cards.md

@@ -1,5 +1,5 @@
 ---
-components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse
+components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper
 ---
 
 # Cards

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

@@ -90,7 +90,7 @@ const styles = theme => ({
       margin: `${theme.spacing.unit * 3}px 0`,
       padding: '12px 18px',
       backgroundColor: theme.palette.background.paper,
-      borderRadius: 3,
+      borderRadius: theme.borderRadius.medium,
       overflow: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
     },

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

@@ -133,7 +133,7 @@ export const styles = theme => ({
     },
   },
   extendedFab: {
-    borderRadius: 24,
+    borderRadius: 48 / 2,
     padding: '0 16px',
     width: 'initial',
     minWidth: 48,

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

@@ -16,7 +16,7 @@ function Card(props) {
   const { classes, className, raised, ...other } = props;
 
   return (
-    <Paper className={classNames(classes.root, className)} elevation={raised ? 8 : 2} {...other} />
+    <Paper className={classNames(classes.root, className)} elevation={raised ? 8 : 1} {...other} />
   );
 }
 

packages/material-ui/src/Card/Card.test.js

@@ -13,10 +13,10 @@ describe('<Card />', () => {
     classes = getClasses(<Card />);
   });
 
-  it('should render Paper with the root class & with 2dp', () => {
+  it('should render Paper with the root class', () => {
     const wrapper = shallow(<Card />);
     assert.strictEqual(wrapper.type(), Paper);
-    assert.strictEqual(wrapper.props().elevation, 2);
+    assert.strictEqual(wrapper.props().elevation, 1);
   });
 
   it('should have the root and custom class', () => {

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

@@ -49,18 +49,10 @@ export const styles = theme => ({
     left: 0,
     right: 'auto',
   },
-  paperAnchorLeftRounded: {
-    borderTopRightRadius: theme.borderRadius.paper,
-    borderBottomRightRadius: theme.borderRadius.paper,
-  },
   paperAnchorRight: {
     left: 'auto',
     right: 0,
   },
-  paperAnchorRightRounded: {
-    borderTopLeftRadius: theme.borderRadius.paper,
-    borderBottomLeftRadius: theme.borderRadius.paper,
-  },
   paperAnchorTop: {
     top: 0,
     left: 0,
@@ -69,10 +61,6 @@ export const styles = theme => ({
     height: 'auto',
     maxHeight: '100vh',
   },
-  paperAnchorTopRounded: {
-    borderBottomRightRadius: theme.borderRadius.paper,
-    borderBottomLeftRadius: theme.borderRadius.paper,
-  },
   paperAnchorBottom: {
     top: 'auto',
     left: 0,
@@ -81,10 +69,6 @@ export const styles = theme => ({
     height: 'auto',
     maxHeight: '100vh',
   },
-  paperAnchorBottomRounded: {
-    borderTopRightRadius: theme.borderRadius.paper,
-    borderTopLeftRadius: theme.borderRadius.paper,
-  },
   paperAnchorDockedLeft: {
     borderRight: `1px solid ${theme.palette.divider}`,
   },
@@ -126,22 +110,19 @@ class Drawer extends React.Component {
       open,
       PaperProps,
       SlideProps,
-      square,
       theme,
       transitionDuration,
       variant,
       ...other
     } = this.props;
 
     const anchor = getAnchor(this.props);
-
     const drawer = (
       <Paper
         elevation={variant === 'temporary' ? elevation : 0}
         square
         className={classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
           [classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary',
-          [classes[`paperAnchor${capitalize(anchor)}Rounded`]]: !square,
         })}
         {...PaperProps}
       >
@@ -240,10 +221,6 @@ Drawer.propTypes = {
    * Properties applied to the `Slide` element.
    */
   SlideProps: PropTypes.object,
-  /**
-   * If `false`, rounded corners are enabled.
-   */
-  square: PropTypes.bool,
   /**
    * @ignore
    */
@@ -265,7 +242,6 @@ Drawer.propTypes = {
 Drawer.defaultProps = {
   anchor: 'left',
   elevation: 16,
-  square: false,
   open: false,
   transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
   variant: 'temporary', // Mobile first.

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import withStyles from '../styles/withStyles';
 
 export const styles = {

packages/material-ui/src/Input/Textarea.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import EventListener from 'react-event-listener';
 import withStyles from '../styles/withStyles';
 

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

@@ -17,7 +17,7 @@ export const styles = theme => {
       backgroundColor: theme.palette.background.paper,
     },
     rounded: {
-      borderRadius: theme.borderRadius.paper,
+      borderRadius: theme.borderRadius.medium,
     },
     ...elevations,
   };

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

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import warning from 'warning';
 import contains from 'dom-helpers/query/contains';
 import ownerDocument from 'dom-helpers/ownerDocument';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import EventListener from 'react-event-listener';
 import ownerWindow from '../utils/ownerWindow';
 import withStyles from '../styles/withStyles';

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

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import Transition from 'react-transition-group/Transition';
 import ownerWindow from '../utils/ownerWindow';
 import withTheme from '../styles/withTheme';

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

@@ -24,7 +24,7 @@ export const styles = theme => {
       [theme.breakpoints.up('md')]: {
         minWidth: 288,
         maxWidth: 568,
-        borderRadius: 2,
+        borderRadius: theme.borderRadius.medium,
       },
       [theme.breakpoints.down('sm')]: {
         flexGrow: 1,

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

@@ -69,7 +69,7 @@ export const styles = theme => ({
     },
   },
   bar: {
-    borderRadius: 7,
+    borderRadius: 14 / 2,
     display: 'block',
     position: 'absolute',
     width: 34,

packages/material-ui/src/Tabs/ScrollbarSize.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 
 const styles = {
   width: '100px',

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import warning from 'warning';
 import classNames from 'classnames';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';
 import scroll from 'scroll';
 import ScrollbarSize from './ScrollbarSize';

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import warning from 'warning';
 import classNames from 'classnames';
 import { Manager, Popper, Target } from 'react-popper';
@@ -24,7 +24,7 @@ export const styles = theme => ({
   open: {},
   tooltip: {
     backgroundColor: theme.palette.grey[700],
-    borderRadius: 2,
+    borderRadius: theme.borderRadius.medium,
     color: common.white,
     fontFamily: theme.typography.fontFamily,
     opacity: 0,

packages/material-ui/src/styles/borderRadius.d.ts

@@ -1,6 +1,7 @@
 export interface BorderRadius {
-  paper: number;
-  button: number;
+  small: number;
+  medium: number;
+  large: number;
 }
 
 export type BorderRadiusOptions = Partial<BorderRadius>;

packages/material-ui/src/styles/borderRadius.js

@@ -1,6 +1,7 @@
 const borderRadius = {
-  paper: 2,
-  button: 4,
+  small: 2,
+  medium: 4,
+  large: 6,
 };
 
 export default borderRadius;

packages/material-ui/src/styles/createMuiTheme.d.ts

@@ -1,42 +1,45 @@
+import { BorderRadius, BorderRadiusOptions } from './borderRadius';
 import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
 import { Mixins, MixinsOptions } from './createMixins';
 import { Palette, PaletteOptions } from './createPalette';
+import { Typography, TypographyOptions } from './createTypography';
 import { Shadows } from './shadows';
 import { Spacing, SpacingOptions } from './spacing';
 import { Transitions, TransitionsOptions } from './transitions';
-import { Typography, TypographyOptions } from './createTypography';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Overrides } from './overrides';
 import { ComponentsProps } from './props';
 
 export type Direction = 'ltr' | 'rtl';
 
 export interface ThemeOptions {
+  borderRadius?: BorderRadiusOptions;
+  breakpoints?: BreakpointsOptions;
   direction?: Direction;
-  palette?: PaletteOptions;
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
   mixins?: MixinsOptions;
-  breakpoints?: BreakpointsOptions;
+  overrides?: Overrides;
+  palette?: PaletteOptions;
+  props?: ComponentsProps;
   shadows?: Shadows;
-  transitions?: TransitionsOptions;
   spacing?: SpacingOptions;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
   zIndex?: ZIndexOptions;
-  overrides?: Overrides;
-  props?: ComponentsProps;
 }
 
 export interface Theme {
+  borderRadius: BorderRadius;
+  breakpoints: Breakpoints;
   direction: Direction;
-  palette: Palette;
-  typography: Typography;
   mixins: Mixins;
-  breakpoints: Breakpoints;
+  overrides?: Overrides;
+  palette: Palette;
+  props?: ComponentsProps;
   shadows: Shadows;
-  transitions: Transitions;
   spacing: Spacing;
+  transitions: Transitions;
+  typography: Typography;
   zIndex: ZIndex;
-  overrides?: Overrides;
-  props?: ComponentsProps;
 }
 
 export default function createMuiTheme(options?: ThemeOptions): Theme;

packages/material-ui/src/styles/createMuiTheme.js

@@ -2,23 +2,23 @@
 
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
 import warning from 'warning';
-import createTypography from './createTypography';
+import borderRadius from './borderRadius';
 import createBreakpoints from './createBreakpoints';
-import createPalette from './createPalette';
 import createMixins from './createMixins';
+import createPalette from './createPalette';
+import createTypography from './createTypography';
 import shadows from './shadows';
+import spacing from './spacing';
 import transitions from './transitions';
 import zIndex from './zIndex';
-import spacing from './spacing';
-import borderRadius from './borderRadius';
 
 function createMuiTheme(options: Object = {}) {
   const {
-    palette: paletteInput = {},
     breakpoints: breakpointsInput = {},
     mixins: mixinsInput = {},
-    typography: typographyInput = {},
+    palette: paletteInput = {},
     shadows: shadowsInput,
+    typography: typographyInput = {},
     ...other
   } = options;
 

packages/material-ui/src/styles/spacing.js

@@ -1,5 +1,7 @@
-export default {
+const spacing = {
   // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
-  // https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids
+  // https://material.io/design/layout/understanding-layout.html#pixel-density
   unit: 8,
 };
+
+export default spacing;

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

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import EventListener from 'react-event-listener';
-import debounce from 'debounce';
+import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import wrapDisplayName from 'recompose/wrapDisplayName';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import withTheme from '../styles/withTheme';

pages/api/paper.md

@@ -63,5 +63,6 @@ you need to use the following style sheet name: `MuiPaper`.
 ## Demos
 
 - [Autocomplete](/demos/autocomplete)
+- [Cards](/demos/cards)
 - [Paper](/demos/paper)