[system] Add typography prop that will pull from theme.typography

[mnajdova]

Note: It's best to hide whitespace changes when reviewing - https://github.com/mui-org/material-ui/pull/23451/files?diff=split&w=1

This PR adds support for font prop as part of the system's typography that will pull the values defined in the theme.typography. It should simplify scenarios for pulling all values defined for a typography variant. For example:

-   const round = (value) => Math.round(value * 1e5) / 1e5;
// ...
<Box
  sx={{
-  fontFamily: 'fontFamily',
-  fontSize: "body1.fontSize",
-  fontWeight: 'body1.fontWeight',
-  letterSpacing: `${round(0.15 / 16)}em`,
-  lineHeight: 1.5,
+  typography: 'body1',
 }}
>
  @material-ui/system body1
</Box>

Fixes #23190
Fixes #17504

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 06cdf07

[eps1lon]

Are we should we want to overload the shorthand font CSS property? This would mean that sx is no longer a CSS superset.

[oliviertassinari]

Are we should we want to overload the shorthand font CSS property? This would mean that sx is no longer a CSS superset.

@eps1lon From what I understand, it's similar to padding: 1. If the font has a value that matches the theme, then it gets precedence over the actual value. So both font: 'body1' and font: '1.2em "Fira Sans", sans-serif;' works.

[eps1lon]

So it's not actually a superset. We should stop calling it a superset then.

[oliviertassinari]

@eps1lon Do you have an example of a value that is supported by CSS that isn't by the system? (a counter example that proves that it's not a superset)

[mnajdova]

If there is a concern with font as it is a CSS property we could use typography as key instead. But, as the prop can behave as css property if the value is css value, I don’t see a big problem to be honest.

[eps1lon]

Do you have an example of a value that is supported by CSS that isn't by the system?

font: caption; works in CSS but different in sx. In a superset it would work the same. Or it wouldn't work in CSS but work in sx.

"superset" is a well-known and defined term which helps understand a particular issue by putting constraints in place. We shouldn't use that term with a custom interpretation. Otherwise it has an adverse effect on learning sx: It requires knowing what Material-UI means by "superset".

[mnajdova]

font: caption; works in CSS but different in sx. In a superset it would work the same. Or it wouldn't work in CSS but work in sx.

This is a very good corner case, thanks for pointing it out. I believe we can change this prop then to typography so that we can avoid these collisions.

[oliviertassinari]

Do we miss a demo for https://next.material-ui.com/system/typography/?