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

#43288)

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

@@ -2,7 +2,13 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "color": { "type": { "name": "any" }, "default": "'primary'" },
+    "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"
+      },
+      "default": "'primary'"
+    },
     "component": { "type": { "name": "custom", "description": "element type" } },
     "sx": {
       "type": {

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/Link/Link.js

@@ -11,7 +11,19 @@ import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
-import getTextDecoration, { colorTransformations } from './getTextDecoration';
+import getTextDecoration from './getTextDecoration';
+
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true,
+};
 
 const useUtilityClasses = (ownerState) => {
   const { classes, component, focusVisible, underline } = ownerState;
@@ -90,6 +102,28 @@ const LinkRoot = styled(Typography, {
               : alpha(theme.palette[color].main, 0.4),
           },
         })),
+      {
+        props: { underline: 'always', color: 'textPrimary' },
+        style: {
+          '--Link-underlineColor': theme.vars
+            ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)`
+            : alpha(theme.palette.text.primary, 0.4),
+        },
+      },
+      {
+        props: { underline: 'always', color: 'textSecondary' },
+        style: {
+          '--Link-underlineColor': theme.vars
+            ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)`
+            : alpha(theme.palette.text.secondary, 0.4),
+        },
+      },
+      {
+        props: { underline: 'always', color: 'textDisabled' },
+        style: {
+          '--Link-underlineColor': (theme.vars || theme).palette.text.disabled,
+        },
+      },
       {
         props: {
           component: 'button',
@@ -183,13 +217,14 @@ const Link = React.forwardRef(function Link(inProps, ref) {
       variant={variant}
       {...other}
       sx={[
-        ...(colorTransformations[color] === undefined ? [{ color }] : []),
+        ...(v6Colors[color] === undefined ? [{ color }] : []),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       style={{
         ...other.style,
         ...(underline === 'always' &&
-          color !== 'inherit' && {
+          color !== 'inherit' &&
+          !v6Colors[color] && {
             '--Link-underlineColor': getTextDecoration({ theme, ownerState }),
           }),
       }}
@@ -218,7 +253,20 @@ Link.propTypes /* remove-proptypes */ = {
    * The color of the link.
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.any,
+  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/Link/getTextDecoration.test.js

@@ -6,21 +6,6 @@ describe('getTextDecoration', () => {
   describe('without theme.vars', () => {
     const theme = createTheme();
 
-    it('deprecated color', () => {
-      expect(getTextDecoration({ theme, ownerState: { color: 'textPrimary' } })).to.equal(
-        'rgba(0, 0, 0, 0.4)',
-      );
-      expect(getTextDecoration({ theme, ownerState: { color: 'textSecondary' } })).to.equal(
-        'rgba(0, 0, 0, 0.4)',
-      );
-      expect(getTextDecoration({ theme, ownerState: { color: 'primary' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'secondary' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'error' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'info' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'success' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'warning' } })).to.equal(null);
-    });
-
     it('system color', () => {
       expect(getTextDecoration({ theme, ownerState: { color: 'primary.main' } })).to.equal(
         'rgba(25, 118, 210, 0.4)',
@@ -73,21 +58,6 @@ describe('getTextDecoration', () => {
         },
       },
     };
-    // in the application, the value will be CSS variable: `rgba(var(--the-color-channel) / 0.4)`
-    it('deprecated color', () => {
-      expect(getTextDecoration({ theme, ownerState: { color: 'textPrimary' } })).to.equal(
-        'rgba(var(--palette-text-primaryChannel) / 0.4)',
-      );
-      expect(getTextDecoration({ theme, ownerState: { color: 'textSecondary' } })).to.equal(
-        'rgba(var(--palette-text-secondaryChannel) / 0.4)',
-      );
-      expect(getTextDecoration({ theme, ownerState: { color: 'primary' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'secondary' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'error' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'info' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'success' } })).to.equal(null);
-      expect(getTextDecoration({ theme, ownerState: { color: 'warning' } })).to.equal(null);
-    });
 
     it('system color', () => {
       expect(getTextDecoration({ theme, ownerState: { color: 'primary.main' } })).to.equal(

packages/mui-material/src/Link/getTextDecoration.ts

@@ -2,33 +2,14 @@ import { getPath } from '@mui/system/style';
 import { alpha } from '@mui/system/colorManipulator';
 import type { Theme } from '../styles';
 
-// TODO v7: remove this transformation
-export const colorTransformations: Record<string, string | null | undefined> = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For main palette, the color will be applied by the styles above.
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null,
-};
-
 const getTextDecoration = <T extends Theme>({
   theme,
   ownerState,
 }: {
   theme: T;
   ownerState: { color: string };
 }) => {
-  let transformedColor = colorTransformations[ownerState.color];
-  if (transformedColor === null) {
-    return null;
-  }
-  if (transformedColor === undefined) {
-    transformedColor = ownerState.color;
-  }
+  const transformedColor = ownerState.color;
   const color = (getPath(theme, `palette.${transformedColor}`, false) ||
     ownerState.color) as string;
   const channelColor = getPath(theme, `palette.${transformedColor}Channel`) as string | null;

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

@@ -8,6 +8,18 @@ import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true,
+};
+
 const extendSxProp = internal_createExtendSxProp();
 
 const useUtilityClasses = (ownerState) => {
@@ -70,6 +82,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: {
@@ -113,27 +133,13 @@ const defaultVariantMapping = {
   inherit: 'p',
 };
 
-// TODO v7: remove this transformation and `extendSxProp`
-const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null,
-};
-
 const Typography = React.forwardRef(function Typography(inProps, ref) {
   const { color, ...themeProps } = useDefaultProps({ props: inProps, name: 'MuiTypography' });
-  const textColor = colorTransformations[color];
+  const isSxColor = !v6Colors[color];
+  // TODO: Remove `extendSxProp` in v7
   const props = extendSxProp({
     ...themeProps,
-    ...(textColor !== null && {
-      color: textColor || color,
-    }),
+    ...(isSxColor && { color }),
   });
 
   const {
@@ -205,6 +211,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.