[Typography][joy-ui] Improve levels after beta to avoid confusion
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
With the Joy UI beta release, we changed the default theme's typographic level system:
- display1 | display2 | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | body3 | body4 | body5
+ 'h1' | 'h2' | 'h3' | 'h4' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs'
Although the consistency of the Typography scales has improved, the naming of the levels can get confusing due to h-* levels using a scale from 1 to 4, title-* using a scale from lg to sm and body-* using a scale from lg to xs
Examples 🌈
No response
Motivation 🔦
https://github.com/mui/material-ui/issues/37951#issuecomment-1662489733
Proposed solution 🎯
The idea is to simplify the scales to reduce the confusion of when to use one or another. So instead of having a h-, a title-, and a body-, we could reduce it to heading- and text-—and this would keep the parity of sizes on lg/md/sm from heading and texts levels, helping it to be used on components without further adjustments on extra margins.
| Current | Proposal |
|---|---|
| h1 | heading-xl3 |
| h2 | heading-xl2 |
| h3 | heading-xl1 |
| h4 | heading-xl |
| title-lg | heading-lg |
| title-md | heading-md |
| title-sm | heading-sm |
| body-lg | text-lg |
| body-md | text-md |
| body-sm | text-sm |
| body-xs | text-xs |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.