search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.73k stars 31.51k forks source link

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

Closed siriwatknp closed 1 week ago

siriwatknp commented 1 week ago

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' }} />
mui-bot commented 1 week ago

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 :no_entry_sign: dangerJS against 2bf243728c6d8f569df3444d82ed99929ba0a277

mnajdova commented 1 week ago

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

siriwatknp commented 1 week ago

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

Yes, I think this should be included.

siriwatknp commented 1 week ago

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

siriwatknp commented 1 week ago

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.