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?