Rebass Text and Heading Component Typography

Question

Having issues with changing the default typography for the Rebass <Text> and <Heading> components in the Theme. According to the Rebass docs the "Text and Heading components use a custom theme.text object." When looking at the types for the Rebass Theme, they indicate that the <Text> component will use the theme.text.default object if defined:

// @theme-ui/css/dist/declarations/src/types.dt
/**
* Text style variants can be defined in the `theme.text` object. The `Text`
* component uses `theme.text.default` as its default variant style.
*
* @see https://theme-ui.com/theme-spec#variants
* @see https://theme-ui.com/components/variants
* @see https://theme-ui.com/components/text#variants
*/
text?: Record<string, ThemeUIStyleObject>;

When trying to set them in the Theme based on the docs, the updates are not applied to either the <Text> or <Heading> components:

export const theme: Theme = {
  fonts: {
    heading: 'Brush Script MT',
    text: 'Arial, sans-serif',
  },
  text: {
    default: {
      fontFamily: 'text',
    },
    heading: {
      fontFamily: 'heading',
    },
  },
}

<Text>Some dummy text</Text>
<Heading>Some dummy heading</Heading>

If the root object is set in the Theme, the typography will be applied to the <Text> component, but not the <Heading>:

styles: {
  root: {
    fontFamily: 'text',
  }
}

Looking at the Rebass Preset Theme adds a bit more confusion, here is the text object:

// rebass variants
  text: {
    heading: {
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
    },
    display: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      fontSize: [ 5, 6, 7 ],
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
    },
  },

Does this indicate that display and caps should be used as a variant on the <Text> component? If so, what about default? When trying: <Text variant="display"> it does not work.

Just need some clarity around how this is meant to work as there's not much to go in the Rebass docs. The goal would be to set a default typography for each and be able to override when desired by passing a variant to the <Text> or <Heading> components. It appears this is the intention, but all attempts to use it are failing. Setting the <Text> default via the styles.root object would be fine, however, it would be nice to be able to override with a variant when needed and the <Heading> typography would still need to be set somehow. Your thoughts, insights, feedback are appreciated, thanks!

Here are some related issues/commits from the Rebass Github:
https://github.com/rebassjs/rebass/issues/781 https://github.com/rileybracken/rebass/commit/8214661166f92417593b197af950e5229b1a3054 https://github.com/rebassjs/rebass/issues/722

Rebass Text and Heading Component Typography

0 Answers0