How should I use fontSizes in theme object?

[siva3378]

💬 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

[gregberge]

Hello @siva3378, I am sorry I don't get the issue. Could you please try to explain what is the problem?

[siva3378]

@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?

[gregberge]

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
      `,
    },
  },

[siva3378]

@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.