Support for margins and paddings in theme.style definitions

Typically I like to have default margins/paddings in some elements such as header (h1, h2, etc.). The theme.style definitions seems to be a good place for them so that following would work.

const theme = {
  ...
  styles: {
    h1: {
      my: 3,
      ...
    },
    ...
};

[jxnblk]

Based on the code example above, the Heading component will not pick up values from theme.styles.h1 – that’s reserved for markdown content and Styled.h1. To add default variants for the Heading component, you’ll need to add theme.text.heading styles

[jxnblk]

You can specify styles and HTML semantics separately with the Heading component: e.g. <Heading as='h3' variant='title' />