[material-ui][docs] Document Typography color prop breaking change (#43735)

Author: aarongarciah

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -56,6 +56,8 @@ You can also manually update your components as shown in the snippet below:
 +<Button sx={{ mr: 2 }}>
 ```
 
+The `sx` prop supports all features of system props: callbacks with access to the theme, responsive values, direct access to theme values, shorthands, etc.
+
 ### Theme component variants
 
 Custom component variants defined in the theme are now merged with the theme style overrides, defined within the `root` slot of the component.

docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md

@@ -360,6 +360,25 @@ As the `ListItem` no longer supports these props, the class names related to the
 
 In v6, the `children` prop passed to the Loading Button component is now wrapped in a `<span>` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
 
+### Typography
+
+The `color` prop in the `Typography` component is not a [system prop](https://mui.com/system/properties/) anymore. You can use the `sx` prop instead:
+
+```diff
+-<Typography color={(theme) => theme.palette.primary.main}>
++<Typography sx={{ color: (theme) => theme.palette.primary.main }}>
+```
+
+:::info
+System props have been deprecated in favor of the `sx` prop. Check the [migration guide](/material-ui/migration/migrating-from-deprecated-apis/#system-props) for more information.
+:::
+
+You still can access some theme colors directly using the `color` prop. Check the [Typography component API page](/material-ui/api/typography/#typography-prop-color) for the whole list of colors.
+
+```jsx
+<Typography color="textSecondary">Secondary text</Typography>
+```
+
 ### useMediaQuery types
 
 The following deprecated types are removed in v6: