[Typography] Add color=textPrimary option

mui · Jul 28, 2018 · f93ef19 · f93ef19
1 parent ee9bc65
commit f93ef19
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/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 };

diff --git a/packages/material-ui/src/Typography/Typography.js b/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.