TT2: Add color variations

[scruffian]

Changes proposed in this Pull Request:

This just copies the variations from WordPress/theme-experiments#292

Related issue(s):

Closes #5160

[scruffian]

Relies on WordPress/twentytwentytwo#283

[mikachan]

I can see the new themes but when I activate one, I can't see the header or footer template parts and the global styles don't seem to change. I'm guessing this is something in my setup but I can't figure it out!

This is from the mint variation, but the colours and fonts haven't changed and the header isn't loading in:

[mikachan]

I'm on GB 12.1.0-rc.1

Edit: It's working on 12.0.0!

[scruffian]

That's probably this issue: WordPress/gutenberg#36910

[mikachan]

I had a couple of environment issues but I've got this working now 😅

All looking good to me, other than in the Swiss variation, where a couple of patterns use a background and text color combination that doesn't have good contrast. I can see this in:

• Video with header and details
• Video trailer
• Divider with image and color (light)
• Footer with text, title, and logo
• Text-only header with salmon background
• Text-only header with tagline and black background
• Logo and navigation header with gray background

Here's an example:

This uses foreground (black) as the background and secondary (#232521/dark gray) as the text color. I'm guessing the other patterns probably use these colors too but I haven't checked yet. Can we fix this with variation-specific patterns?

It'd be great if someone else could review as well, I don't trust my setup 100%..

[scruffian]

I see the same problem. I noticed that "Swiss" defined a "quaternary" color which I don't think is used, so I replaced secondary with this, which looks like this:

@kjellr what do you think?

[kjellr]

I see the same problem. I noticed that "Swiss" defined a "quaternary" color which I don't think is used

Weird, I don't remember doing that. 😅

Let's use these colors instead:

"palette": [
	{
		"slug": "foreground",
		"color": "#000000",
		"name": "Foreground"
	},
	{
		"slug": "background",
		"color": "#FFFFFF",
		"name": "Background"
	},
	{
		"slug": "primary",
		"color": "#D42731",
		"name": "Primary"
	},
	{
		"slug": "secondary",
		"color": "#F4F4F2",
		"name": "Secondary"
	},
	{
		"slug": "tertiary",
		"color": "#FFFFFF",
		"name": "Tertiary"
	}
]

(The repeated use of white for the tertiary color is intentional).

[scruffian]

Let's use these colors instead:

Done!

[mikachan]

Awesome! Those new colors look good and they've fixed the patterns mentioned above.