Adding different heading styles

[drydenwilliams]

I would like to add custom font sizes for my headings h1, h2, h3... using the Heading component. Let's say I would like the following sizes throughout my app:

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

Ideally I don't feel I would need to add extra variants for this? I'm a bit stumped when looking at the docs but I would expect just to write the component like this:

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

And then going forward it would be great to use these styles like utility classes on text components like this:

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

I can't seem to figure it out so any help would be great :) It seems the entire point of theme-ui if I understand it is to easily customise this kind of thing?

---

Just to be super clear I don't really want to do this:

<Heading as="h1" variant="styles.h1">
  My h1
</Heading>
<Heading variant="styles.h2">
  My h1
</Heading>

as it seems unnecessary and a bit gross.