fix color value

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

@@ -8,7 +8,9 @@ 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,24 @@ 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'
+        | 'textPrimary'
+        | 'textSecondary',
+        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,
         },
       })),
+    {
+      props: { color: 'textPrimary' },
+      style: { color: (theme.vars || theme).palette.text?.primary },
+    },
+    {
+      props: { color: 'textSecondary' },
+      style: { color: (theme.vars || theme).palette.text?.secondary },
+    },
     {
       props: ({ ownerState }) => ownerState.align !== 'inherit',
       style: {

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

@@ -32,7 +32,7 @@ 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="error" />
       {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */}
       <Typography display="incorrectValue" />