diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts index 64f0d6deda4dc2..296945a3d76798 100644 --- 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, TypographyClassKey> { align?: PropTypes.Alignment; - color?: PropTypes.Color | 'textSecondary' | 'error'; + color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error'; component?: React.ReactType; 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 index 3d9a9eee98e1a1..9eeae2a80b8eb2 100644 --- 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. diff --git a/pages/api/typography.md b/pages/api/typography.md index f5a4f374aab03c..4f5682dcd8c08d 100644 --- a/pages/api/typography.md +++ b/pages/api/typography.md @@ -18,7 +18,7 @@ title: Typography API | align | enum: 'inherit', 'left', 'center', 'right', 'justify'
| 'inherit' | Set the text-align on the component. | | children | node |   | The content of the component. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| color | enum: 'inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | +| color | enum: 'default', 'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func |
 object
|   | 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. | | gutterBottom | bool | false | If `true`, the text will have a bottom margin. | | headlineMapping | object | { display4: 'h1', display3: 'h1', display2: 'h1', display1: 'h1', headline: 'h1', title: 'h2', subheading: 'h3', body2: 'aside', body1: 'p',} | 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: | colorInherit | Styles applied to the root element if `color="inherit"`. | colorPrimary | Styles applied to the root element if `color="primary"`. | colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorTextPrimary | Styles applied to the root element if `color="textPrimary"`. | colorTextSecondary | Styles applied to the root element if `color="textSecondary"`. | colorError | Styles applied to the root element if `color="error"`.