[material-ui][joy-ui] Move typography CSS variables to font

[siriwatknp]

Regression from #41703

Changes related to typography in #41703 have been reverted. A new field, font, is created to store typography token.

usage:

<Box sx={{ font: 'h1' }} />

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-42003--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 2bf2437

[mnajdova]

@siriwatknp should I wait for this to be merged before the release?

[siriwatknp]

@siriwatknp should I wait for this to be merged before the release?

Yes, I think this should be included.

[siriwatknp]

@danilo-leal Could you take a look at this PR again?

[danilo-leal]

Looks good — I don't see any of the regressions on the deploy preview! However, it might be worth clarifying how this new font field solves/helps with that regression. Or even the benefit of using it, which isn't immediately clear to me.

[siriwatknp]

Looks good — I don't see any of the regressions on the deploy preview! However, it might be worth clarifying how this new font field solves/helps with that regression. Or even the benefit of using it, which isn't immediately clear to me.

Sure, this effort is a part of lifting the theme to CSS variables. It's useful for applications that are not limited to Material UI or React because they can access the theme using CSS.

For example, using a plain CSS file to style a part of an application using the generated CSS variable from Material UI theme:

// custom.css
.foo {
  font: var(--mui-font-h1);
}

Or with Tailwind:

<div class="[font:--mui-font-h1]" />

Will add these improvements to the docs.