[core] Improve styling solution (#7461)

.gitignore

@@ -10,6 +10,9 @@ tmp
 # OS files
 .DS_STORE
 
+# Screenshors generated for Argos-CI
+test/regressions/screenshots/
+
 # npm files
 node_modules
 package-lock.json

README.md

@@ -53,7 +53,7 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
 ### Roboto Font
 
 Material-UI was designed with the [Roboto](http://www.google.com/fonts/specimen/Roboto)
-font in mind. So be sure to follow [those instructions](https://github.com/callemall/material-ui/blob/next/docs/src/pages/style/typography.md#general).
+font in mind. So be sure to follow [those instructions](https://github.com/callemall/material-ui/blob/v1-alpha/docs/src/pages/style/typography.md#general).
 
 ### Packaging for use with separate React
 

docs/src/components/App.js

@@ -3,55 +3,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import MuiThemeProvider, { MUI_SHEET_ORDER } from 'material-ui/styles/MuiThemeProvider';
-import { createMuiTheme } from 'material-ui/styles';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import createMuiTheme from 'material-ui/styles/theme';
 import createPalette from 'material-ui/styles/palette';
 import blue from 'material-ui/colors/blue';
 import pink from 'material-ui/colors/pink';
 import { lightTheme, darkTheme, setPrismTheme } from 'docs/src/utils/prism';
 import AppRouter from 'docs/src/components/AppRouter';
 
-let styleManager;
-
 function App(props) {
   const { dark } = props;
 
-  const palette = createPalette({
-    primary: blue,
-    accent: pink,
-    type: dark ? 'dark' : 'light',
+  const theme = createMuiTheme({
+    palette: createPalette({
+      primary: blue,
+      accent: pink,
+      type: dark ? 'dark' : 'light',
+    }),
   });
 
-  const theme = createMuiTheme({ palette });
-
-  if (!styleManager) {
-    const themeContext = MuiThemeProvider.createDefaultContext({ theme });
-    styleManager = themeContext.styleManager;
-  } else {
-    styleManager.updateTheme(theme);
-  }
-
-  styleManager.setSheetOrder(
-    MUI_SHEET_ORDER.concat([
-      'Link',
-      'AppContent',
-      'AppDrawer',
-      'AppDrawerNavItem',
-      'AppFrame',
-      'MarkdownDocs',
-      'MarkdownElement',
-      'Demo',
-    ]),
-  );
-
   if (dark) {
     setPrismTheme(darkTheme);
   } else {
     setPrismTheme(lightTheme);
   }
 
   return (
-    <MuiThemeProvider theme={theme} styleManager={styleManager}>
+    <MuiThemeProvider theme={theme}>
       <AppRouter />
     </MuiThemeProvider>
   );

docs/src/index.js

@@ -25,8 +25,7 @@ const docs = (state = { dark: false }, action) => {
   return state;
 };
 
-export const store = createStore(docs);
-
+const store = createStore(docs);
 const rootEl = document.querySelector('#app');
 
 render(

docs/src/pages/component-api/AppBar/AppBar.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `colorPrimary`
 - `colorAccent`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Avatar/Avatar.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `colorDefault`
 - `img`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Badge/Badge.md

@@ -23,7 +23,7 @@ This property accepts the following keys:
 - `colorPrimary`
 - `colorAccent`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/BottomNavigation/BottomNavigation.md

@@ -21,7 +21,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `hiddenLabel`
 - `icon`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Button/Button.md

@@ -40,7 +40,7 @@ This property accepts the following keys:
 - `disabled`
 - `fab`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Card/Card.md

@@ -18,7 +18,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Card/CardActions.md

@@ -20,7 +20,7 @@ This property accepts the following keys:
 - `root`
 - `actionSpacing`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Card/CardContent.md

@@ -17,7 +17,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Card/CardHeader.md

@@ -22,7 +22,7 @@ This property accepts the following keys:
 - `avatar`
 - `content`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Card/CardMedia.md

@@ -17,7 +17,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Checkbox/Checkbox.md

@@ -33,7 +33,7 @@ This property accepts the following keys:
 - `checked`
 - `disabled`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Chip/Chip.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `label`
 - `deleteIcon`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Dialog/Dialog.md

@@ -40,7 +40,7 @@ This property accepts the following keys:
 - `paperWidthMd`
 - `fullScreen`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Dialog/DialogActions.md

@@ -20,7 +20,7 @@ This property accepts the following keys:
 - `action`
 - `button`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Dialog/DialogContent.md

@@ -18,7 +18,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Dialog/DialogContentText.md

@@ -18,7 +18,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Dialog/DialogTitle.md

@@ -19,7 +19,7 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Divider/Divider.md

@@ -24,7 +24,7 @@ This property accepts the following keys:
 - `light`
 - `absolute`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Drawer/Drawer.md

@@ -32,7 +32,7 @@ This property accepts the following keys:
 - `docked`
 - `modal`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Form/FormControl.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `marginDense`
 - `fullWidth`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Form/FormControlLabel.md

@@ -28,7 +28,7 @@ This property accepts the following keys:
 - `hasLabel`
 - `label`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Form/FormGroup.md

@@ -21,7 +21,7 @@ This property accepts the following keys:
 - `root`
 - `row`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Form/FormHelperText.md

@@ -24,7 +24,7 @@ This property accepts the following keys:
 - `error`
 - `disabled`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Form/FormLabel.md

@@ -25,7 +25,7 @@ This property accepts the following keys:
 - `error`
 - `disabled`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Grid/Grid.md

@@ -65,7 +65,7 @@ This property accepts the following keys:
 - `@media (min-width:1280px)`
 - `@media (min-width:1920px)`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Icon/Icon.md

@@ -25,7 +25,7 @@ This property accepts the following keys:
 - `colorError`
 - `colorPrimary`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/IconButton/IconButton.md

@@ -31,7 +31,7 @@ This property accepts the following keys:
 - `icon`
 - `keyboardFocused`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Input/Input.md

@@ -57,7 +57,7 @@ This property accepts the following keys:
 - `inputMultiline`
 - `fullWidth`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Input/InputLabel.md

@@ -28,7 +28,7 @@ This property accepts the following keys:
 - `animated`
 - `disabled`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/Input/Textarea.md

@@ -22,7 +22,7 @@ This property accepts the following keys:
 - `textarea`
 - `shadow`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/List/List.md

@@ -26,7 +26,7 @@ This property accepts the following keys:
 - `dense`
 - `subheader`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/List/ListItem.md

@@ -31,7 +31,7 @@ This property accepts the following keys:
 - `gutters`
 - `button`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented

docs/src/pages/component-api/List/ListItemAvatar.md

@@ -19,7 +19,7 @@ This property accepts the following keys:
 - `root`
 - `icon`
 
-Have a look at [overriding with class names](/customization/overrides#overriding-with-class-names)
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.
 
 If using the `overrides` key of the theme as documented