Настройка нестандартных размеров шрифта для компонента заголовка в Theme-ui

Question

Я хочу добавить собственные размеры шрифта для <Heading />компоненты в theme-ui. Скажем, мне бы хотелось, чтобы в моем приложении были следующие размеры:

const headingFontSizes = {
  h1: '60px',
  h2: '55px',
  h3: '50px',
  h4: '45px',
  h5: '40px',
  h6: '35px'
}

В идеале я не чувствую, что мне нужно добавлять дополнительные варианты для этого? Я немного озадачен при просмотре документации, но я ожидал, что просто напишу <Heading /> компонент вроде этого:

<Heading as="h1">Heading h1</Heading>
<Heading>Heading h2</Heading>
<Heading as="h3">Heading h3</Heading>
<Heading as="h4">Heading h4</Heading>
<Heading as="h5">Heading h5</Heading>
<Heading as="h6">Heading h6</Heading>

и они будут, и я бы хотел, чтобы они были. И в будущем было бы здорово использовать эти стили как служебные классы в текстовых компонентах, например:

<Text variant="text.h1">
  Styles from h1 heading
</Text>

Любая помощь в разборе конфигурации для этого была бы замечательной.