mui · oliviertassinari · Oct 1, 2018 · Aug 31, 2018 · Sep 25, 2018 · Oct 1, 2018
diff --git a/.size-limit.js b/.size-limit.js
@@ -16,19 +16,19 @@ module.exports = [
     name: 'The initial cost people pay for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '17.3 KB',
+    limit: '18.2 KB',
   },
   {
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '91.5 KB',
+    limit: '92.5 KB',
   },
   {
     name: 'The main bundle of the docs',
     webpack: false,
     path: main.path,
-    limit: '176 KB',
+    limit: '177 KB',
   },
   {
     name: 'The home page of the docs',

diff --git a/docs/src/modules/components/Ad.js b/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">
               ❤️

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -101,7 +101,7 @@ function AppDrawer(props, context) {
       <div className={classes.toolbarIe11}>
         <div className={classes.toolbar}>
           <Link className={classes.title} href="/" onClick={onClose}>
-            <Typography variant="title" color="inherit">
+            <Typography variant="h6" color="inherit">
               Material-UI
             </Typography>
           </Link>

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -144,7 +144,7 @@ class AppFrame extends React.Component {
               <MenuIcon />
             </IconButton>
             {title !== null && (
-              <Typography className={classes.title} variant="title" color="inherit" noWrap>
+              <Typography className={classes.title} variant="h6" color="inherit" noWrap>
                 {title}
               </Typography>
             )}

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -88,10 +88,10 @@ const styles = theme => ({
         background: 'transparent',
       },
       '& .algolia-docsearch-suggestion--title': {
-        ...theme.typography.title,
+        ...theme.typography.h6,
       },
       '& .algolia-docsearch-suggestion--text': {
-        ...theme.typography.body1,
+        ...theme.typography.body2,
       },
       '& .ds-dropdown-menu': {
         boxShadow: theme.shadows[1],

diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
@@ -33,10 +33,10 @@ function HomeFooter(props) {
 
   return (
     <footer className={classes.root}>
-      <Typography variant="title" gutterBottom>
+      <Typography variant="h6" gutterBottom>
         Quick Links
       </Typography>
-      <Typography variant="subheading" component="div">
+      <Typography variant="subtitle1" component="div">
         <Grid container>
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -87,10 +87,10 @@ 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="title">Installation</Typography>
+          <Typography variant="h6">Installation</Typography>
         </div>
         <div className={classes.stepBody}>
-          <Typography variant="subheading" gutterBottom>
+          <Typography variant="subtitle1" gutterBottom>
             {`
             Install Material-UI's source files via npm.
             We take care of injecting the CSS needed.
@@ -104,7 +104,7 @@ function HomeSteps(props) {
   \`\`\`
                 `}
           />
-          <Typography variant="subheading" gutterBottom>
+          <Typography variant="subtitle1" gutterBottom>
             {'or use a CDN.'}
           </Typography>
           <MarkdownElement
@@ -115,7 +115,7 @@ function HomeSteps(props) {
   \`\`\`
                 `}
           />
-          <Typography variant="subheading" gutterBottom>
+          <Typography variant="subtitle1" gutterBottom>
             {'Load the default Roboto font.'}
           </Typography>
           <MarkdownElement
@@ -139,10 +139,10 @@ function HomeSteps(props) {
       <Grid item xs={12} md={4} className={classes.step}>
         <div className={classes.stepTitle}>
           <BuildIcon className={classes.stepIcon} />
-          <Typography variant="title">Usage</Typography>
+          <Typography variant="h6">Usage</Typography>
         </div>
         <div className={classes.stepBody}>
-          <Typography variant="subheading" gutterBottom>
+          <Typography variant="subtitle1" gutterBottom>
             {'Material-UI components work in isolation. They are self-supporting.'}
           </Typography>
           <MarkdownElement
@@ -173,10 +173,10 @@ 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="title">Premium Themes</Typography>
+          <Typography variant="h6">Premium Themes</Typography>
         </div>
         <div className={classes.stepBody}>
-          <Typography variant="subheading" gutterBottom>
+          <Typography variant="subtitle1" gutterBottom>
             {`Take Material-UI to the next level with premium themes from
               our official marketplace—all built on Material-UI.`}
           </Typography>

diff --git a/docs/src/modules/styles/getPageContext.js b/docs/src/modules/styles/getPageContext.js
@@ -14,6 +14,9 @@ function getTheme(uiTheme) {
       color: uiTheme.paletteType === 'light' ? '#000' : '#fff',
     },
     palette: { ...uiTheme.paletteColors, type: uiTheme.paletteType },
+    typography: {
+      useNextVariants: true,
+    },
   });
 
   // Expose the theme as a global variable so people can play with it.

diff --git a/docs/src/pages/customization/css-in-js/CssInJs.js b/docs/src/pages/customization/css-in-js/CssInJs.js
@@ -49,7 +49,7 @@ const MyLinkStyled = withStyles(styles)(MyLink);
 
 export default function CssInJs() {
   return (
-    <Typography variant="subheading">
+    <Typography variant="subtitle1">
       <MyLinkStyled href="#">MyLink</MyLinkStyled>
       {' - '}
       <MyLinkStyled href="#" variant="primary">

diff --git a/docs/src/pages/customization/themes/DarkTheme.js b/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() {

diff --git a/docs/src/pages/customization/themes/FontSizeTheme.js b/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,
   },
 });
 

diff --git a/docs/src/pages/customization/themes/TypographyTheme.js b/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,
     },
-    subheading: {
+    subtitle1: {
       fontSize: 12,
     },
     button: {
@@ -44,7 +45,7 @@ function TypographyTheme(props) {
   const children = (
     <div>
       <Typography>body1</Typography>
-      <Typography variant="subheading">subheading</Typography>
+      <Typography variant="subtitle1">subtitle</Typography>
       <Button>Button</Button>
     </div>
   );

diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.js b/docs/src/pages/demos/app-bar/ButtonAppBar.js
@@ -30,7 +30,7 @@ function ButtonAppBar(props) {
           <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="title" color="inherit" className={classes.grow}>
+          <Typography variant="h6" color="inherit" className={classes.grow}>
             News
           </Typography>
           <Button color="inherit">Login</Button>

diff --git a/docs/src/pages/demos/app-bar/DenseAppBar.js b/docs/src/pages/demos/app-bar/DenseAppBar.js
@@ -26,7 +26,7 @@ function DenseAppBar(props) {
           <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="title" color="inherit">
+          <Typography variant="h6" color="inherit">
             Photos
           </Typography>
         </Toolbar>

diff --git a/docs/src/pages/demos/app-bar/MenuAppBar.js b/docs/src/pages/demos/app-bar/MenuAppBar.js
@@ -64,7 +64,7 @@ class MenuAppBar extends React.Component {
             <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
               <MenuIcon />
             </IconButton>
-            <Typography variant="title" color="inherit" className={classes.grow}>
+            <Typography variant="h6" color="inherit" className={classes.grow}>
               Photos
             </Typography>
             {auth && (

diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js
@@ -169,7 +169,7 @@ class PrimarySearchAppBar extends React.Component {
             <IconButton className={classes.menuButton} color="inherit" aria-label="Open drawer">
               <MenuIcon />
             </IconButton>
-            <Typography className={classes.title} variant="title" color="inherit" noWrap>
+            <Typography className={classes.title} variant="h6" color="inherit" noWrap>
               Material-UI
             </Typography>
             <div className={classes.search}>

diff --git a/docs/src/pages/demos/app-bar/SearchAppBar.js b/docs/src/pages/demos/app-bar/SearchAppBar.js
@@ -79,7 +79,7 @@ function SearchAppBar(props) {
           <IconButton className={classes.menuButton} color="inherit" aria-label="Open drawer">
             <MenuIcon />
           </IconButton>
-          <Typography className={classes.title} variant="title" color="inherit" noWrap>
+          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
             Material-UI
           </Typography>
           <div className={classes.grow} />

diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar.js b/docs/src/pages/demos/app-bar/SimpleAppBar.js
@@ -18,7 +18,7 @@ function SimpleAppBar(props) {
     <div className={classes.root}>
       <AppBar position="static" color="default">
         <Toolbar>
-          <Typography variant="title" color="inherit">
+          <Typography variant="h6" color="inherit">
             Photos
           </Typography>
         </Toolbar>

diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js
@@ -120,7 +120,7 @@ function ButtonBases(props) {
           <span className={classes.imageButton}>
             <Typography
               component="span"
-              variant="subheading"
+              variant="subtitle1"
               color="inherit"
               className={classes.imageTitle}
             >

diff --git a/docs/src/pages/demos/cards/ImgMediaCard.js b/docs/src/pages/demos/cards/ImgMediaCard.js
@@ -33,7 +33,7 @@ function ImgMediaCard(props) {
           title="Contemplative Reptile"
         />
         <CardContent>
-          <Typography gutterBottom variant="headline" component="h2">
+          <Typography gutterBottom variant="h5" component="h2">
             Lizard
           </Typography>
           <Typography component="p">

diff --git a/docs/src/pages/demos/cards/MediaCard.js b/docs/src/pages/demos/cards/MediaCard.js
@@ -29,7 +29,7 @@ function MediaCard(props) {
           title="Contemplative Reptile"
         />
         <CardContent>
-          <Typography gutterBottom variant="headline" component="h2">
+          <Typography gutterBottom variant="h5" component="h2">
             Lizard
           </Typography>
           <Typography component="p">

diff --git a/docs/src/pages/demos/cards/MediaControlCard.js b/docs/src/pages/demos/cards/MediaControlCard.js
@@ -43,10 +43,10 @@ function MediaControlCard(props) {
     <Card className={classes.card}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
-          <Typography component="h2" variant="headline">
+          <Typography component="h5" variant="h5">
             Live From Space
           </Typography>
-          <Typography variant="subheading" color="textSecondary">
+          <Typography variant="subtitle1" color="textSecondary">
             Mac Miller
           </Typography>
         </CardContent>

diff --git a/docs/src/pages/demos/cards/SimpleCard.js b/docs/src/pages/demos/cards/SimpleCard.js
@@ -35,7 +35,7 @@ function SimpleCard(props) {
         <Typography className={classes.title} color="textSecondary">
           Word of the Day
         </Typography>
-        <Typography variant="headline" component="h2">
+        <Typography variant="h5" component="h2">
           be
           {bull}
           nev

diff --git a/docs/src/pages/demos/dialogs/FullScreenDialog.js b/docs/src/pages/demos/dialogs/FullScreenDialog.js
@@ -56,7 +56,7 @@ class FullScreenDialog extends React.Component {
               <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
                 <CloseIcon />
               </IconButton>
-              <Typography variant="title" color="inherit" className={classes.flex}>
+              <Typography variant="h6" color="inherit" className={classes.flex}>
                 Sound
               </Typography>
               <Button color="inherit" onClick={this.handleClose}>

diff --git a/docs/src/pages/demos/dialogs/SimpleDialog.js b/docs/src/pages/demos/dialogs/SimpleDialog.js
@@ -93,7 +93,7 @@ class SimpleDialogDemo extends React.Component {
   render() {
     return (
       <div>
-        <Typography variant="subheading">Selected: {this.state.selectedValue}</Typography>
+        <Typography variant="subtitle1">Selected: {this.state.selectedValue}</Typography>
         <br />
         <Button onClick={this.handleClickOpen}>Open simple dialog</Button>
         <SimpleDialogWrapped

diff --git a/docs/src/pages/demos/drawers/ClippedDrawer.js b/docs/src/pages/demos/drawers/ClippedDrawer.js
@@ -43,7 +43,7 @@ function ClippedDrawer(props) {
     <div className={classes.root}>
       <AppBar position="absolute" className={classes.appBar}>
         <Toolbar>
-          <Typography variant="title" color="inherit" noWrap>
+          <Typography variant="h6" color="inherit" noWrap>
             Clipped drawer
           </Typography>
         </Toolbar>

diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js
@@ -112,7 +112,7 @@ class MiniDrawer extends React.Component {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="title" color="inherit" noWrap>
+            <Typography variant="h6" color="inherit" noWrap>
               Mini variant drawer
             </Typography>
           </Toolbar>

diff --git a/docs/src/pages/demos/drawers/PermanentDrawer.js b/docs/src/pages/demos/drawers/PermanentDrawer.js
@@ -106,7 +106,7 @@ class PermanentDrawer extends React.Component {
             className={classNames(classes.appBar, classes[`appBar-${anchor}`])}
           >
             <Toolbar>
-              <Typography variant="title" color="inherit" noWrap>
+              <Typography variant="h6" color="inherit" noWrap>
                 Permanent drawer
               </Typography>
             </Toolbar>

diff --git a/docs/src/pages/demos/drawers/PersistentDrawer.js b/docs/src/pages/demos/drawers/PersistentDrawer.js
@@ -180,7 +180,7 @@ class PersistentDrawer extends React.Component {
               >
                 <MenuIcon />
               </IconButton>
-              <Typography variant="title" color="inherit" noWrap>
+              <Typography variant="h6" color="inherit" noWrap>
                 Persistent drawer
               </Typography>
             </Toolbar>

diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
@@ -84,7 +84,7 @@ class ResponsiveDrawer extends React.Component {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="title" color="inherit" noWrap>
+            <Typography variant="h6" color="inherit" noWrap>
               Responsive drawer
             </Typography>
           </Toolbar>