[material-ui][joy-ui] Generate typography tokens

[siriwatknp]

Part of #40225

closes #39677

mui-typography-tokens.mp4

Typography is the last piece for generating CSS theme variables. It's almost perfect (the limitation is on the CSS side) with CSS font property which is a shorthand for font-family, font-size, font-style font-weight, line-height (except letter-spacing).

Now typography token can be accessed from theme.vars.typography.*.

How it works

MUI system provides a prepareTypographyTokens to convert typography objects into CSS font values.

---

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

[mui-bot]

Netlify deploy preview

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

packages/material-ui/material-ui.production.min.js: parsed: +0.08% , gzip: +0.06%
@material-ui/core: parsed: +0.07% , gzip: +0.09%
@mui/joy/Container: parsed: +0.65% , gzip: +0.59%
@mui/joy/Link: parsed: +0.55% , gzip: +0.51%
@mui/joy/ListItemContent: parsed: +0.64% , gzip: +0.58%
@mui/joy/Stack: parsed: +0.64% , gzip: +0.58%
@mui/joy/Tabs: parsed: +0.60% , gzip: +0.53%
@mui/joy/ModalClose: parsed: +0.48% , gzip: +0.43%
@mui/joy/Checkbox: parsed: +0.52% , gzip: +0.45%
@mui/joy/Slider: parsed: +0.48% , gzip: +0.42%
@mui/joy/MenuButton: parsed: +0.47% , gzip: +0.42%
@mui/joy/ChipDelete: parsed: +0.47% , gzip: +0.41%
@mui/joy/Input: parsed: +0.56% , gzip: +0.47%
@mui/joy/Avatar: parsed: +0.59% , gzip: +0.49%
@mui/joy/CardActions: parsed: +0.62% , gzip: +0.51%
@mui/joy/ListItem: parsed: +0.60% , gzip: +0.50%
@mui/joy/Step: parsed: +0.61% , gzip: +0.50%
@mui/joy/Accordion: parsed: +0.58% , gzip: +0.48%
@mui/joy/CircularProgress: parsed: +0.56% , gzip: +0.47%
@mui/joy/List: parsed: +0.59% , gzip: +0.49%
and 64 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 06741dc

[DiegoAndai]

Looks good! Just have one question:

[DiegoAndai]

Why is this redefined here as well as here: https://github.com/mui/material-ui/pull/41703/files#diff-158304f3a4b17f65c8bd9dd688681ae17e38aa6da3cabaaa8bbaae0a41948710R608?

[siriwatknp]

Let me clarify, it is redefined to preserve the same behavior as the developers passed the typography in.

In line 608, the typography is configured by prepareTypographyVars so that the generated token is in the format of font: ….

prepareTypographyVars({ h1: { fontFamily: …, fontSize: …, lineHeight: …, fontWeight: … }})
// { h1: "…valid CSS `font` value", …other typography }

At the end, before the theme is return, the original typography object is redefined back so that this behavior remains the same:

styled('div')({ theme }) => ({
  …theme.typography.h1,
})

[DiegoAndai]

So, line 608 adds the theme.vars.typography... values?

[siriwatknp]

Not really, line 608 builds up the typography structure so that prepareCssVars at line 667 generates the vars.typography based on that structure.

[DiegoAndai]

Thanks for the explanation!

[DiegoAndai]

Nicely done 🚀

[danilo-leal]

Hey folks — I just realized some typography styles got a bit messed up on the website, particularly the medium and semiBold font weights, which are not working anymore (the dev tools declare font-weight: semiBold as an invalid property). In some other places, not only is the font weight messed up, but the size, too; check the footer out:

Broken	Correct

As this hadn't happened before, I noticed this was the most recent PR touching typography-related stuff. I've tried reverting some of the changes introduced here, which fixed the footer up there, at least the font size. But not the font weight.

Any ideas whether the issue is within the changes added here?