Rebass: Text component doesn't inherit all typography styles

[brettinternet]

I've recently migrated to version 4 but it doesn't look like the Text component is inheriting all of the typography styles expected from the body property on fonts.

See CodeSandbox example.

I've double-checked the implementation with your documentation, but I can't seem to see what could be wrong. Could you provide any additional direction?

[marozzocom]

The Text component is unopinionated as to whether it is intended to be used as body, heading or something else. Hence it does not include a default font family.

What you can do is make your own wrapper around it providing the typographic styles you want, or if you just want to alter all defaults you can use for example Global styles if you are using Emotion, and reference your theme's font family there.

[brettinternet]

@marozzocom Thank you for your reply. This makes sense, I have no problem extending the component or adding global styles to correct the font.

The documentation's example is confusing. The styled-system theming suggests being able to modify the body font-family and font weight: (Theming: Example)

  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'inherit',
    monospace: 'Menlo, monospace',
  },
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },

What does the body attribute in styled-sytem themes actually modify then?

Also, calling the Text component a "Response typography component" seems inaccurate if it doesn't inherit the typography attributes from the theme.

[marozzocom]

@brettinternet No problem, and I definitely don't know everything about Rebass, but I believe the body doesn't change anything, and it is simply an example of how you can have different styles in a theme file. But as default, only the Heading element uses one of these variants from the theme,

I agree that the documentation is perhaps a little bit confusing at times. It also says that the Heading is an "Extension of the Text component for headings" while it actually is an extension of the Box component just like Text and all other Rebass components, only with more preset props.

I am not sure exactly how much reasoning there is behind each design choice of Rebass components, but where it doesn't exactly fit your needs you can basically create your own typography components based on the Box component, using whatever default variants and styles work best for you. You can use Rebass components' source code as a reference.

I believe this is what the authors of the package would suggest, as they probably want to keep the Rebass library itself as light and simple as possible.

[brettinternet]

@jxnblk Are there plans to make the Text component operate more like the Heading component, or more optimal for themed text?

Otherwise, could we provide clearer documentation about which attributes the components use within the theme object (Theme: Example or in each component page e.g. Text)? The theme documentation directs users to the system-ui theme specification without a clear declaration of which theme properties each component uses/doesn't use.

I have a lot of respect for the simplicity and elegance in this project, I hope that this feedback can contribute to improving these wonderful aspects.

[jxnblk]

By default the Text component doesn't pick up particular styles from the theme. You can extend the component if you'd like to add default styles to the component

[brandonweiss]

I just started using Rebass and spent about an hour trying to figure out why the Heading component was getting its font set but the Text component was not 😕

Is there some reason why the Text component doesn’t use the body property from Theme UI?

If the way it works is “By default the Text component doesn't pick up particular styles from the theme” then OK, but it feels surprising and it would be great to explain that somewhere… if it is I must’ve missed it.

[jxnblk]

It's documented in the Variants docs, but could also be mentioned in the Text component docs

[stoplion]

what does the fonts.body set then? I would think that if <Header> inherits from fonts.heading, then <Text> and <Box> would inherit from fonts.body. But it doesn't.

fonts: {
    body: 'courier', // <Text>  is not getting these styles
    heading: '"Barlow Condensed", Helvetica, sans-serif', // <Header> is getting these styles
  }