[docs] Add Joy UI theme typography page #34811
Conversation
siriwatknp
added
docs
|
…docs-theme-typography
…docs-theme-typography
There was a problem hiding this comment.
Looking good overall! Great job as always @siriwatknp.
In addition to my suggestions here, can I request that we rename MoreTypographyLevel.js to either MoreTypographyLevels.js (plural, to be grammatically correct) or NewTypographyLevel.js (singular, since the demo only adds one level)?
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
|
|
||
| - The `body1` level is the **baseline** typography for the application (used as a default configuration in [`Typography`](/joy-ui/react-typography/) and [`CssBaseline`](/joy-ui/react-css-baseline/) components). | ||
| - The `body2` to `body5` levels can be used for secondary and tertiary information. | ||
| - The `h*` levels are mostly headlines that follow semantic HTML headings. |
There was a problem hiding this comment.
I think it's worthwhile to be explicit here.
| - The `h*` levels are mostly headlines that follow semantic HTML headings. | |
| - `h1` through `h6` - header tags that follow the standard semantic HTML headings. |
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/CustomTypographyLevel.js
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/CustomTypographyLevel.tsx
Outdated
Show resolved
Hide resolved
docs/data/joy/customization/theme-typography/theme-typography.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
…erial-ui into joy/docs-theme-typography
…docs-theme-typography
Updated to |
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
| - Design resource: [Figma](https://www.figma.com/community/file/1035203688168086460) | ||
| - Font: [Roboto](https://fonts.google.com/specimen/Roboto) | ||
|
|
||
| <iframe src="https://codesandbox.io/embed/joy-ui-material-3-typography-system-lx044f?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview" |
There was a problem hiding this comment.
Let's please use {{"demo": "…", "iframe": true}} the next time for this type of demos. It's a pain to keep in sync in https://codesandbox.io/dashboard/sandboxes/used%20in%20docs?workspace=836800c1-9711-491c-a89b-3ac24cbd8cd8 and it's slower to load than it needs to be for developers.
Preview: https://deploy-preview-34811--material-ui.netlify.app/joy-ui/customization/theme-typography/
This PR adds documentation about theme typography for Joy UI.