[theme] Add border-radius to the theme (#11847)

* Add border-radius to theme

* my turn :)

docs/src/modules/components/Carbon.js

@@ -56,7 +56,7 @@ const styles = theme => ({
   },
   ad: {
     zIndex: 1,
-    borderRadius: 4,
+    borderRadius: theme.shape.borderRadius,
     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,6 +1,6 @@
 ---
 title: Cards React component
-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.shape.borderRadius,
       overflow: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
     },

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

@@ -16,7 +16,7 @@ export const styles = theme => ({
     minWidth: 88,
     minHeight: 36,
     padding: '8px 16px',
-    borderRadius: 4,
+    borderRadius: theme.shape.borderRadius,
     color: theme.palette.text.primary,
     transition: theme.transitions.create(['background-color', 'box-shadow'], {
       duration: theme.transitions.duration.short,
@@ -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/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: 2,
+      borderRadius: theme.shape.borderRadius,
     },
     ...elevations,
   };

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

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

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.shape.borderRadius,
       },
       [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.shape.borderRadius,
     color: common.white,
     fontFamily: theme.typography.fontFamily,
     opacity: 0,

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

@@ -1,42 +1,45 @@
 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 { Shape, ShapeOptions } from './shape';
 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 {
+  shape?: ShapeOptions;
+  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 {
+  shape: Shape;
+  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,22 +2,23 @@
 
 import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
 import warning from 'warning';
-import createTypography from './createTypography';
 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 shape from './shape';
+import spacing from './spacing';
 import transitions from './transitions';
 import zIndex from './zIndex';
-import spacing from './spacing';
 
 function createMuiTheme(options: Object = {}) {
   const {
-    palette: paletteInput = {},
     breakpoints: breakpointsInput = {},
     mixins: mixinsInput = {},
-    typography: typographyInput = {},
+    palette: paletteInput = {},
     shadows: shadowsInput,
+    typography: typographyInput = {},
     ...other
   } = options;
 
@@ -32,6 +33,7 @@ function createMuiTheme(options: Object = {}) {
     palette,
     props: {}, // Inject custom properties
     shadows: shadowsInput || shadows,
+    shape,
     typography: createTypography(palette, typographyInput),
     ...deepmerge(
       {

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

@@ -0,0 +1,9 @@
+export interface Shape {
+  borderRadius: number;
+}
+
+export type ShapeOptions = Partial<Shape>;
+
+declare const shape: Shape;
+
+export default shape;

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

@@ -0,0 +1,5 @@
+const shape = {
+  borderRadius: 4,
+};
+
+export default shape;

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

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