Vocabulary: Add heading classes (seperate styles from semantic meaning)

[zackkrida]

Problem

We need a way to apply the styles of our raw headings to different tags. Basically we need the following behavior:

<h1 class="h2">Semantically this is a Heading 1, but looks like an H2.</h1> 
<h3 class="h4">Semantically this is a Heading 3, but looks like an H4.</h3> 

There are cases where for a11y purposes we need to use a particular heading level, but with the styles of a different heading level.

Description

Add classes to apply heading styles to different tags. Some possible APIs:

.is-heading-x, .level-x, .is-x

Bulma has an existing concept of 'titles' that we could override, which already has .is-x classes.

[zackkrida]

@dhruvkb I would appreciate your thoughts here before someone works on this, thank you!

[dhruvkb]

This makes sense to me. We can have classes that alter the appearance while retaining the semantics of HTML.

[zackkrida]

@dhruvkb Do you have a preferred api? I might be leaning towards one that i didn't even mention above: .heading-x. Second choice would be .hx.

[dhruvkb]

I favour overriding Bulma as much as possible, because they do a great job of building all the helper classes that we would have to do otherwise. Plus those overrides can also sync to other components, further reducing our maintenance burden. So for the 2 heading types (A and B), I'd recommend overriding the variables for the title and subtitle components.

[rochisha0]

Can I work on this issue, if nobody is working on this? @zackkrida

[zackkrida]

@rochisha0 that would be amazing, yes! Please follow @Dhruvi16's approach of overriding bulma's title and subltitle classes to match our heading a and heading b styles: https://cc-vocabulary.netlify.app/?path=/docs/tokens-typography--figma