How should I use fontSizes in theme object?
siva3378 opened this issue · comments
💬 How should I provide fontSizes in theme object?
FYI: I read the documents of smooth-ui > xstyled > system.ui
-
System.ui says fontSizes should be an array but xstyled is showing errors about missing keys. Is this a bug??
-
In any case, irrespective of how I define, the fontSizes in theme object has is no effect on Text or of any variations.
Basically, I'm looking at how can I provide responsive values of a variation in theme object?
For example:
My breakpoints are defined as an array
breakpoints: [0, 576, 768, 992, 1220]
My theme object contains a variant
texts: {
code: {
defaultAs: "span",
style: css`
${firaCodeProps.defaultProps}
`,
},
},
My react component for responsive font size: which works like a charm
<Text variant="code" forwardedAs="p" fontSize={[10, 20, 30, 40, 50]}>
code - responsive text - changes as per screen size
</Text>
I really appreciate if anyone can point me to the proper doc or provide an example of how can I provide responsive fontSizes for this variant in theme object itself would be really great.
Thank you
Hello @siva3378, I am sorry I don't get the issue. Could you please try to explain what is the problem?
@gregberge apologies for my late reply. I'm looking for a sample theme object for responsive fontSizes of a text. In the above snippet, the Text component is accepting variant code along with fontSize prop which is a constant value. I would like to configure that within the theme object for text variant. So that I can avoid defining the fontSize prop every time whenever I use Text.
does it make sense?
Yeah, @siva3378 you have to code it into the style
attribute of the theme:
texts: {
code: {
defaultAs: "span",
style: css`
DO YOUR OWN LOGIC HERE
`,
},
},
@gregberge Thanks anyway. I know I could do this, as I have mentioned in the initial question. Looking at a more easy way to define custom styles for responsive font sizes. Anyway, I got your point. Thanks for your contributions to this library & time to respond.