rename headline in h

Author: oliviertassinari

.size-limit.js

@@ -16,13 +16,13 @@ module.exports = [
     name: 'The initial cost people pay for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '17.5 KB',
+    limit: '18.5 KB',
   },
   {
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '91.4 KB',
+    limit: '92.4 KB',
   },
   {
     name: 'The main bundle of the docs',

docs/src/modules/components/Ad.js

@@ -72,12 +72,14 @@ class Ad extends React.Component {
     if (adblock) {
       return (
         <Paper elevation={0} className={classes.paper}>
-          <Typography gutterBottom>Like Material-UI?</Typography>
-          <Typography gutterBottom>
+          <Typography variant="body2" gutterBottom>
+            Like Material-UI?
+          </Typography>
+          <Typography variant="body2" gutterBottom>
             {`If you don't mind tech-related ads, and want to support Open Source,
             please whitelist Material-UI in your ad blocker.`}
           </Typography>
-          <Typography>
+          <Typography variant="body2">
             Thank you!{' '}
             <span role="img" aria-label="Love">
               ❤️

docs/src/modules/components/AppDrawer.js

@@ -100,7 +100,7 @@ function AppDrawer(props, context) {
       <div className={classes.toolbarIe11}>
         <div className={classes.toolbar}>
           <Link className={classes.title} href="/" onClick={onClose}>
-            <Typography variant="headline6" color="inherit">
+            <Typography variant="h6" color="inherit">
               Material-UI
             </Typography>
           </Link>

docs/src/modules/components/AppFrame.js

@@ -144,7 +144,7 @@ class AppFrame extends React.Component {
               <MenuIcon />
             </IconButton>
             {title !== null && (
-              <Typography className={classes.title} variant="headline6" color="inherit" noWrap>
+              <Typography className={classes.title} variant="h6" color="inherit" noWrap>
                 {title}
               </Typography>
             )}

docs/src/modules/components/AppSearch.js

@@ -88,10 +88,10 @@ const styles = theme => ({
         background: 'transparent',
       },
       '& .algolia-docsearch-suggestion--title': {
-        ...theme.typography.headline6,
+        ...theme.typography.h6,
       },
       '& .algolia-docsearch-suggestion--text': {
-        ...theme.typography.body1,
+        ...theme.typography.body2,
       },
       '& .ds-dropdown-menu': {
         boxShadow: theme.shadows[1],

docs/src/modules/components/HomeFooter.js

@@ -33,7 +33,7 @@ function HomeFooter(props) {
 
   return (
     <footer className={classes.root}>
-      <Typography variant="headline6" gutterBottom>
+      <Typography variant="h6" gutterBottom>
         Quick Links
       </Typography>
       <Typography variant="subtitle1" component="div">

docs/src/modules/components/HomeSteps.js

@@ -87,7 +87,7 @@ function HomeSteps(props) {
       <Grid item xs={12} md={4} className={classNames(classes.step, classes.leftStep)}>
         <div className={classes.stepTitle}>
           <FileDownloadIcon className={classes.stepIcon} />
-          <Typography variant="headline6">Installation</Typography>
+          <Typography variant="h6">Installation</Typography>
         </div>
         <div className={classes.stepBody}>
           <Typography variant="subtitle1" gutterBottom>
@@ -139,7 +139,7 @@ function HomeSteps(props) {
       <Grid item xs={12} md={4} className={classes.step}>
         <div className={classes.stepTitle}>
           <BuildIcon className={classes.stepIcon} />
-          <Typography variant="headline6">Usage</Typography>
+          <Typography variant="h6">Usage</Typography>
         </div>
         <div className={classes.stepBody}>
           <Typography variant="subtitle1" gutterBottom>
@@ -173,7 +173,7 @@ function HomeSteps(props) {
       <Grid item xs={12} md={4} className={classNames(classes.step, classes.rightStep)}>
         <div className={classes.stepTitle}>
           <WhatshotIcon className={classes.stepIcon} />
-          <Typography variant="headline6">Premium Themes</Typography>
+          <Typography variant="h6">Premium Themes</Typography>
         </div>
         <div className={classes.stepBody}>
           <Typography variant="subtitle1" gutterBottom>

docs/src/pages/customization/themes/DarkTheme.js

@@ -6,6 +6,9 @@ const theme = createMuiTheme({
   palette: {
     type: 'dark', // Switching the dark mode on is a single property value change.
   },
+  typography: {
+    useNextVariants: true,
+  },
 });
 
 function DarkTheme() {

docs/src/pages/customization/themes/FontSizeTheme.js

@@ -6,6 +6,7 @@ const theme = createMuiTheme({
   typography: {
     // Tell Material-UI what the font-size on the html element is.
     htmlFontSize: 10,
+    useNextVariants: true,
   },
 });
 

docs/src/pages/customization/themes/TypographyTheme.js

@@ -12,6 +12,7 @@ const styles = {
 
 const theme = createMuiTheme({
   typography: {
+    useNextVariants: true,
     // Use the system font instead of the default Roboto font.
     fontFamily: [
       '-apple-system',
@@ -29,7 +30,7 @@ const theme = createMuiTheme({
     body1: {
       fontWeight: 500,
     },
-    subtitle: {
+    subtitle1: {
       fontSize: 12,
     },
     button: {