[Typography] Less opinionated

Author: oliviertassinari

docs/src/modules/components/AppFrame.js

@@ -200,7 +200,7 @@ class AppFrame extends React.Component {
               <Notifications />
               <MarkdownLinks />
               <AppBar className={appBarClassName}>
-                <Typography className={classes.banner} noWrap>
+                <Typography className={classes.banner} variant="body2" noWrap>
                   <Interpolate
                     replacement={{
                       versionNumber: (

docs/src/pages/style/links/Links.js

@@ -25,7 +25,7 @@ function Links(props) {
       <Link href={dudUrl} color="inherit" className={classes.link}>
         {'color="inherit"'}
       </Link>
-      <Link href={dudUrl} variant="body1" className={classes.link}>
+      <Link href={dudUrl} variant="body2" className={classes.link}>
         {'variant="body1"'}
       </Link>
     </Typography>

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

@@ -18,12 +18,13 @@ const useStyles = makeStyles(
       },
       body: {
         margin: 0, // Remove the margin in all browsers.
+        color: theme.palette.text.primary,
+        ...theme.typography.body2,
         backgroundColor: theme.palette.background.default,
         '@media print': {
           // Save printer ink.
           backgroundColor: theme.palette.common.white,
         },
-        ...theme.typography.body2,
       },
     },
   }),

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

@@ -8,9 +8,8 @@ import withStyles from '../styles/withStyles';
 export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
+    ...theme.typography.caption,
     color: theme.palette.text.secondary,
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.pxToRem(12),
     textAlign: 'left',
     marginTop: 8,
     lineHeight: '1em',

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

@@ -8,10 +8,8 @@ import withStyles from '../styles/withStyles';
 export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
-    fontFamily: theme.typography.fontFamily,
     color: theme.palette.text.secondary,
-    fontSize: theme.typography.pxToRem(16),
-    lineHeight: 1,
+    ...theme.typography.body1,
     padding: 0,
     '&$focused': {
       color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light'],

packages/material-ui/src/Typography/Typography.d.ts

@@ -7,7 +7,14 @@ type Style = ThemeStyle | 'srOnly';
 export interface TypographyProps
   extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
   align?: PropTypes.Alignment;
-  color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error';
+  color?:
+    | 'initial'
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'textPrimary'
+    | 'textSecondary'
+    | 'error';
   component?: React.ElementType<TypographyProps>;
   display?: 'initial' | 'block' | 'inline';
   gutterBottom?: boolean;

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

@@ -147,7 +147,7 @@ const Typography = React.forwardRef(function Typography(props, ref) {
         classes.root,
         {
           [classes[variant]]: variant !== 'inherit',
-          [classes[`color${capitalize(color)}`]]: color !== 'default',
+          [classes[`color${capitalize(color)}`]]: color !== 'initial',
           [classes.noWrap]: noWrap,
           [classes.gutterBottom]: gutterBottom,
           [classes.paragraph]: paragraph,
@@ -184,13 +184,13 @@ Typography.propTypes = {
    * The color of the component. It supports those theme colors that make sense for this component.
    */
   color: PropTypes.oneOf([
-    'default',
-    'error',
+    'initial',
     'inherit',
     'primary',
     'secondary',
     'textPrimary',
     'textSecondary',
+    'error',
   ]),
   /**
    * The component used for the root node.
@@ -249,12 +249,12 @@ Typography.propTypes = {
 
 Typography.defaultProps = {
   align: 'inherit',
-  color: 'default',
+  color: 'initial',
   display: 'initial',
   gutterBottom: false,
   noWrap: false,
   paragraph: false,
-  variant: 'body2',
+  variant: 'body1',
   variantMapping: defaultVariantMapping,
 };
 

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

@@ -32,7 +32,7 @@ export default function createTypography(palette, typography) {
   const coef = fontSize / 14;
   const pxToRem = size => `${(size / htmlFontSize) * coef}rem`;
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
-    color: palette.text.primary,
+    // color: palette.text.primary,
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),

pages/api/typography.md

@@ -21,13 +21,13 @@ import Typography from '@material-ui/core/Typography';
 | <span class="prop-name">align</span> | <span class="prop-type">enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br></span> | <span class="prop-default">'inherit'</span> | Set the text-align on the component. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |   | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br></span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error'<br></span> | <span class="prop-default">'initial'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |   | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
 | <span class="prop-name">display</span> | <span class="prop-type">enum:&nbsp;'initial'&nbsp;&#124;<br>&nbsp;'block'&nbsp;&#124;<br>&nbsp;'inline'<br></span> | <span class="prop-default">'initial'</span> | Controls the display type |
 | <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
 | <span class="prop-name">noWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
 | <span class="prop-name">paragraph</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
-| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit'<br></span> | <span class="prop-default">'body2'</span> | Applies the theme typography styles. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit'<br></span> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
 | <span class="prop-name">variantMapping</span> | <span class="prop-type">object</span> | <span class="prop-default">{  h1: 'h1',  h2: 'h2',  h3: 'h3',  h4: 'h4',  h5: 'h5',  h6: 'h6',  subtitle1: 'h6',  subtitle2: 'h6',  body1: 'p',  body2: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, subtitle1 to `<h6>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
 
 Any other properties supplied will be spread to the root element (native element).