[Typography] Add color=textPrimary option

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

@@ -5,7 +5,7 @@ import { Style, TextStyle } from '../styles/createTypography';
 export interface TypographyProps
   extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
   align?: PropTypes.Alignment;
-  color?: PropTypes.Color | 'textSecondary' | 'error';
+  color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error';
   component?: React.ReactType<TypographyProps>;
   gutterBottom?: boolean;
   headlineMapping?: { [type in TextStyle]: string };

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

@@ -74,6 +74,10 @@ export const styles = theme => ({
   colorSecondary: {
     color: theme.palette.secondary.main,
   },
+  /* Styles applied to the root element if `color="textPrimary"`. */
+  colorTextPrimary: {
+    color: theme.palette.text.primary,
+  },
   /* Styles applied to the root element if `color="textSecondary"`. */
   colorTextSecondary: {
     color: theme.palette.text.secondary,
@@ -89,8 +93,8 @@ function Typography(props) {
     align,
     classes,
     className: classNameProp,
-    component: componentProp,
     color,
+    component: componentProp,
     gutterBottom,
     headlineMapping,
     noWrap,
@@ -138,7 +142,15 @@ Typography.propTypes = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default']),
+  color: PropTypes.oneOf([
+    'default',
+    'error',
+    'inherit',
+    'primary',
+    'secondary',
+    'textPrimary',
+    'textSecondary',
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.

pages/api/typography.md

@@ -18,7 +18,7 @@ title: Typography API
 | <span class="prop-name">align</span> | <span class="prop-type">enum:&nbsp;'inherit', 'left', 'center', 'right', 'justify'<br> | <span class="prop-default">'inherit'</span> | Set the text-align on the component. |
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'<br> | <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;'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br> | <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">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | 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">gutterBottom</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
 | <span class="prop-name">headlineMapping</span> | <span class="prop-type">object | <span class="prop-default">{  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',  body2: 'aside',  body1: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
@@ -58,6 +58,7 @@ This property accepts the following keys:
 | <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
 | <span class="prop-name">colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
+| <span class="prop-name">colorTextPrimary</span> | Styles applied to the root element if `color="textPrimary"`.
 | <span class="prop-name">colorTextSecondary</span> | Styles applied to the root element if `color="textSecondary"`.
 | <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.