[Typography] Replace dot notation color value to work with Pigment CSS

docs/pages/material-ui/api/typography.json

@@ -9,6 +9,12 @@
     },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "color": {
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;'textPrimary'<br>&#124;&nbsp;'textSecondary'<br>&#124;&nbsp;'textDisabled'<br>&#124;&nbsp;string"
+      }
+    },
     "component": { "type": { "name": "elementType" } },
     "gutterBottom": { "type": { "name": "bool" }, "default": "false" },
     "noWrap": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/typography/typography.json

@@ -4,6 +4,9 @@
     "align": { "description": "Set the text-align on the component." },
     "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "color": {
+      "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
+    },
     "component": {
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },

packages/mui-material/src/Breadcrumbs/Breadcrumbs.js

@@ -183,7 +183,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
     <BreadcrumbsRoot
       ref={ref}
       component={component}
-      color="text.secondary"
+      color="textSecondary"
       className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}

packages/mui-material/src/CardHeader/CardHeader.js

@@ -111,7 +111,7 @@ const CardHeader = React.forwardRef(function CardHeader(inProps, ref) {
       <Typography
         variant={avatar ? 'body2' : 'body1'}
         className={classes.subheader}
-        color="text.secondary"
+        color="textSecondary"
         component="span"
         display="block"
         {...subheaderTypographyProps}

packages/mui-material/src/DialogContentText/DialogContentText.js

@@ -40,7 +40,7 @@ const DialogContentText = React.forwardRef(function DialogContentText(inProps, r
     <DialogContentTextRoot
       component="p"
       variant="body1"
-      color="text.secondary"
+      color="textSecondary"
       ref={ref}
       ownerState={ownerState}
       className={clsx(classes.root, className)}

packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx

@@ -16,7 +16,7 @@ const dialogContentTextTest = () => {
       <DialogContentText align="right" color="primary" display="initial" />
       <DialogContentText align="justify" color="secondary" display="initial" />
       <DialogContentText align="inherit" color="text.primary" />
-      <DialogContentText align="inherit" color="text.secondary" />
+      <DialogContentText align="inherit" color="textSecondary" />
       <DialogContentText align="inherit" color="error" />
       {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */}
       <DialogContentText display="incorrectValue" />

packages/mui-material/src/InputAdornment/InputAdornment.js

@@ -139,7 +139,7 @@ const InputAdornment = React.forwardRef(function InputAdornment(inProps, ref) {
         {...other}
       >
         {typeof children === 'string' && !disableTypography ? (
-          <Typography color="text.secondary">{children}</Typography>
+          <Typography color="textSecondary">{children}</Typography>
         ) : (
           <React.Fragment>
             {/* To have the correct vertical alignment baseline */}

packages/mui-material/src/ListItemText/ListItemText.js

@@ -106,7 +106,7 @@ const ListItemText = React.forwardRef(function ListItemText(inProps, ref) {
       <Typography
         variant="body2"
         className={classes.secondary}
-        color="text.secondary"
+        color="textSecondary"
         display="block"
         {...secondaryTypographyProps}
       >

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps, SystemProps } from '@mui/system';
-import { Theme } from '../styles';
+import { Theme, TypeText } from '../styles';
 import { OverrideProps, OverridableComponent } from '../OverridableComponent';
 import { Variant } from '../styles/createTypography';
 import { TypographyClasses } from './typographyClasses';
 
 export interface TypographyPropsVariantOverrides {}
 
-export interface TypographyOwnProps extends SystemProps<Theme> {
+export interface TypographyPropsColorOverrides {}
+
+export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
   /**
    * Set the text-align on the component.
    * @default 'inherit'
@@ -22,6 +24,23 @@ export interface TypographyOwnProps extends SystemProps<Theme> {
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<TypographyClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color?:
+    | OverridableStringUnion<
+        | 'primary'
+        | 'secondary'
+        | 'success'
+        | 'error'
+        | 'info'
+        | 'warning'
+        | `text${Capitalize<keyof TypeText>}`,
+        TypographyPropsColorOverrides
+      >
+    | (string & {}); // to work with v5 color prop type which allows any string
   /**
    * If `true`, the text will have a bottom margin.
    * @default false

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

@@ -70,6 +70,14 @@ export const TypographyRoot = styled('span', {
           color: (theme.vars || theme).palette[color].main,
         },
       })),
+    ...Object.entries(theme.palette?.text || {})
+      .filter(([, value]) => typeof value === 'string')
+      .map(([color]) => ({
+        props: { color: `text${capitalize(color)}` },
+        style: {
+          color: (theme.vars || theme).palette.text[color],
+        },
+      })),
     {
       props: ({ ownerState }) => ownerState.align !== 'inherit',
       style: {
@@ -205,6 +213,25 @@ Typography.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf([
+      'primary',
+      'secondary',
+      'success',
+      'error',
+      'info',
+      'warning',
+      'textPrimary',
+      'textSecondary',
+      'textDisabled',
+    ]),
+    PropTypes.string,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/mui-material/src/Typography/typography.spec.tsx

@@ -32,7 +32,8 @@ const typographyTest = () => {
       <Typography align="right" color="primary" display="initial" />
       <Typography align="justify" color="secondary" display="initial" />
       <Typography align="inherit" color="text.primary" />
-      <Typography align="inherit" color="text.secondary" />
+      <Typography align="inherit" color="textSecondary" />
+      <Typography align="inherit" color="textDisabled" />
       <Typography align="inherit" color="error" />
       {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */}
       <Typography display="incorrectValue" />