Refactor heading mixins

We have widely used heading mixins for setting heading sizes. The heading-1-heading-6 mixins set font and line height sizing, and add bottom margin. The h1-h6 mixins extend the heading- mixins and add top margin, and for h4 and up, add responsive styling for mobile sizes.

The heading mixins are either used as the standalone headings, or as the extended responsive version. In several uses, the margin of the heading is overridden. This is done by calling the mixin and then adding a separate margin property below the mixin to override the mixin. Additionally, rarely the text weight also gets overridden (e.g. on the h2 on the homepage 50-50 hero).

Sass has deprecated placing declarations below mixins (see https://sass-lang.com/documentation/breaking-changes/mixed-decls/), to align with the direction the CSS standard is going. We can still do this by wrapping the declaration in & { … }, but ultimately this generates a redundant selector block, so it's probably best to refactor things so that the mixins can be placed last.

This PR merges the h1-h6 mixins into the heading-1-heading-6 mixins so there is only one set of heading mixins to be dealing with. It makes these mixins take several arguments to remove the top or bottom margin, specify if its responsive or not (if it's heading-4 or larger), and whether the font-weight can be adjusted (if it's heading-2-heading-4—this is based on real-world usage of this override).

Changes

Remove h1-h6 mixins and merge them into the heading-1-heading-6 mixins.
Refactor the heading mixins to make the bottom and top margin optional, make the responsive styling optional, and make the font-weight customizable.

Testing

Check the changed components on their respective PR preview pages.

At minimum @include h1-@include h6 should map to @include heading-1-@include heading-6.

@include heading-1-@include heading-4, should map to @include heading-1($is-responsive: false)-@include heading-4($is-responsive: false).

Heading 5 and 6 don't have responsive styles, so @include heading-5/@include heading-6 should be unchanged.

Notes

I don't love this new API for the heading mixins, but couldn't figure out something better. I don't love that each mixin doesn't have all the same arguments, but that's how these are used in the wild, so I guess that's how it needs to be.

Name	Link
Latest commit	6f421a6ef6ea17c076fe34db23bdfe855ee71cc4
Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/66ed9bccc5babe00084a151d
Deploy Preview	https://deploy-preview-2055--cfpb-design-system.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

cfpb / design-system