Add Theme Style Variation: Onyx

[MaggieCabrera]

Description

Closes #10

This PR creates the 3 style variations. We have a problem with the way we've built patterns, and some of them apply a specific font family to the markup, making the block styles inconsistent. I don't know if we can fix all of them (in some cases we are applying the Cardo font family to paragraphs so they look like they are headings when they are not).

My first instinct is to create a custom variable called heading font and another called base font or something like that, to use them in patterns and then map them in theme.json. This would be the perfect opportunity for refs to work on block markup.

EDIT: This PR paired with #366 should cover the patterns too

[MaggieCabrera]

@richtabor @scruffian what do you think?

[MaggieCabrera]

Related: WordPress/gutenberg#49279 (comment)

[scruffian]

We could also use things like:
WordPress/gutenberg#43347
WordPress/gutenberg#27233
WordPress/gutenberg#40318

[richtabor]

Maybe "body" and "heading" font works better; so variations can register different fonts and they're hooked up as expected.

[MaggieCabrera]

I think a variation of paragraph could work as well, are we overdoing it with all the block styles?

[richtabor]

I don't think we're overdoing it, but I'm a bit hesitant adding a style to such a prominent block. We can try it in a quick PR, but I'm not sure it's necessary.

[MaggieCabrera]

@richtabor I gave it a try here and I was sadly surprised that you can only change styles via theme.json to default variations and not theme created ones.

[richtabor]

This should do the trick: #367

[richtabor]

Also, we need to update accent colors to have a darker luminosity. I can do that.

[richtabor]

Let's focus on the first variation before doing all the others.

[richtabor]

I made some adjustments, focusing on color application. Notably:

1. Using consistent "slugs" on duotone and gradients ensures that the application of those attributes persist with different variations. That is, duotone-2 is styled by both variations — and still works when used throughout content. Also, the labels are still applicable to the actual color used, i.e. "Dark gray and cinnamon"

Notice how the duotone works for both:

CleanShot.2023-09-14.at.14.40.00.mp4

2. Removed the additional style variations to focus on just the one. Let's get this solid, then replicate.

[richtabor]

LGTM as an initial push. We'll want to circle back with font family adjustments, but let's merge this before potential conflicts.