[joy-ui] How to adjust theme spacing with HTML font-size: 10px
Open
@siriwatknp is already working on this.
Since Apr 1, 2024.
customization: theme
on hold
package: joy-ui
scope: all components
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Im trying to embed Joy-UI components into HTML page with
:root {
font-size: 62.5%;
}
The UI looks small and unreadable.
I increased default theme with bigger fontSize and lineHeight, but it fixed only part of Typogaphy, TextBoxes and buttons are still smaller then expected
const theme = extendTheme({
fontSize: {
xl4: "3.6rem",
xl3: "3rem",
xl2: "2.4rem",
xl: "2rem",
lg: "1.8rem",
md: "1.6rem",
sm: "1.4rem",
xs: "1.2rem",
},
lineHeight: {
xs: "2.133344", // largest font sizes: h1, h2
sm: "2.285728", // normal font sizes
md: "2.4", // normal font sizes
lg: "2.488896", // large font sizes for components
xl: "2.666672", // smallest font sizes
},
});
What else do I need to extend?
Is there a more generic approach to it?
Search keywords:
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.